123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- <script setup>
- import { ref, onMounted, onBeforeUnmount, computed } from "vue";
- import sHeader from "@/components/SimpleHeader";
- import { useTradeStore } from '@/stores/trade';
- import { uploadImg, buyerConf } from "@/service/buyOrSell";
- import { showFailToast, showSuccessToast } from "vant";
- import { useRouter } from 'vue-router'
- const price = ref(0) // 价格
- const tradeNumber = ref(0) // 股票数量
- // const sellerUserName = ref('') // 卖家用户名
- const sellerPayeeCode = ref('') // 卖家支付宝
- const sellerCardNo = ref('') // 卖家银行卡号
- let totalPrice = computed(() => { // 需付款
- return Math.round(price.value * tradeNumber.value * 100) / 100;
- })
- const tradeStore = useTradeStore()
- const router = useRouter()
- const orderId = ref('') // 交易单id
- const fileList = ref([]);
- const afterRead = async (file) => {
- file.status = 'uploading';
- file.message = '上传中...';
- try {
- const formData = new FormData();
- formData.append('file', file.file);
- formData.append('orderId', orderId.value);
- const { data } = await uploadImg(formData);
- if (data.code === "00000") {
- file.status = 'done';
- file.message = '上传成功';
- } else {
- file.status = 'failed';
- file.message = '上传失败';
- }
- } catch (error) {
- file.status = 'failed';
- file.message = '上传失败';
- console.error("上传失败", error);
- if (error.response) {
- console.error("Response Data:", error.response.data);
- }
- }
- };
- const onSubmit = async () => {
- if (!fileList.value || fileList.value.length === 0) {
- showFailToast('请选择文件');
- return;
- }
- try {
- const { data } = await buyerConf(orderId.value)
- if (data.code === "00000") {
- showSuccessToast('提交成功');
- setTimeout(() => {
- router.go(-1);
- }, 1500);
- } else {
- showFailToast('提交失败')
- }
- } catch (error) {
- console.log("提交失败", error);
- }
- };
- onMounted(() => {
- if (tradeStore.tradeItem) {
- const item = tradeStore.getTradeItem()
- tradeNumber.value = item.tradeNumber;
- sellerPayeeCode.value = item.sellerPayeeCode;
- sellerCardNo.value = item.sellerCardNo;
- price.value = item.price;
- orderId.value = item.id;
- }
- });
- // 当组件卸载时清除用户信息
- onBeforeUnmount(() => {
- tradeStore.clearTradeItem();
- });
- </script>
- <template>
- <div class="buyConf">
- <s-header :name="'买家付款'" :noback="false"></s-header>
- <!-- 提交 -->
- <van-form @submit="onSubmit">
- <br>
- <!-- 买入数量/单价/总价 -->
- <van-cell-group inset>
- <van-field v-model="orderId" readonly name="交易单号" label="交易单号" placeholder="交易单号"
- type="textarea" autosize left-icon="coupon" />
- <!-- :rules="[{ required: true, message: '单据凭证缺失' }]" -->
- <van-field v-model="tradeNumber" readonly name="买入数量" label="买入数量" placeholder="买入数量"
- left-icon="goods-collect" :rules="[{ required: true, message: '买入数量不能为空' }]" />
- <van-field v-model="price" readonly name="买入单价" label="买入单价" placeholder="买入单价" left-icon="gold-coin" />
- <van-field v-model="totalPrice" readonly name="需付款¥" label="需付款¥" placeholder="需付款¥" left-icon="bill" />
- </van-cell-group>
- <br>
- <!-- 卖家收款信息 -->
- <van-cell-group inset>
- <van-field v-model="sellerPayeeCode" readonly name="卖家支付宝号" label="卖家支付宝号" placeholder="卖家支付宝号"
- left-icon="alipay" />
- <!-- :rules="[{ required: true, message: '支付宝号不能为空' }]" -->
- <van-field v-model="sellerCardNo" readonly name="卖家银行卡号" label="卖家银行卡号" placeholder="卖家银行卡号"
- left-icon="card" />
- </van-cell-group>
- <br>
- <!-- 上传支付宝/银行付款截图 -->
- <van-cell-group inset>
- <van-field name="uploader" label="买家上传付款截图">
- <template #input>
- <van-uploader v-model="fileList" :after-read="afterRead" reupload max-count="1">
- <van-button icon="plus" color="#39a6fe">上传转账截图</van-button>
- </van-uploader>
- </template>
- </van-field>
- </van-cell-group>
- <div style="margin: 16px;">
- <van-button round block type="primary" native-type="submit">
- 提交
- </van-button>
- </div>
- </van-form>
- </div>
- </template>
- <style scoped>
- .buyConf {
- background-color: #e3e3e3;
- }
- </style>
|