BuyConf.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <script setup>
  2. import { ref, onMounted, onBeforeUnmount, computed } from "vue";
  3. import sHeader from "@/components/SimpleHeader";
  4. import { useTradeStore } from '@/stores/trade';
  5. import { uploadImg, buyerConf } from "@/service/buyOrSell";
  6. import { showFailToast, showSuccessToast } from "vant";
  7. import { useRouter } from 'vue-router'
  8. const price = ref(0) // 价格
  9. const tradeNumber = ref(0) // 股票数量
  10. // const sellerUserName = ref('') // 卖家用户名
  11. const sellerPayeeCode = ref('') // 卖家支付宝
  12. const sellerCardNo = ref('') // 卖家银行卡号
  13. let totalPrice = computed(() => { // 需付款
  14. return Math.round(price.value * tradeNumber.value * 100) / 100;
  15. })
  16. const tradeStore = useTradeStore()
  17. const router = useRouter()
  18. const orderId = ref('') // 交易单id
  19. const fileList = ref([]);
  20. const afterRead = async (file) => {
  21. file.status = 'uploading';
  22. file.message = '上传中...';
  23. try {
  24. const formData = new FormData();
  25. formData.append('file', file.file);
  26. formData.append('orderId', orderId.value);
  27. const { data } = await uploadImg(formData);
  28. if (data.code === "00000") {
  29. file.status = 'done';
  30. file.message = '上传成功';
  31. } else {
  32. file.status = 'failed';
  33. file.message = '上传失败';
  34. }
  35. } catch (error) {
  36. file.status = 'failed';
  37. file.message = '上传失败';
  38. console.error("上传失败", error);
  39. if (error.response) {
  40. console.error("Response Data:", error.response.data);
  41. }
  42. }
  43. };
  44. const onSubmit = async () => {
  45. if (!fileList.value || fileList.value.length === 0) {
  46. showFailToast('请选择文件');
  47. return;
  48. }
  49. try {
  50. const { data } = await buyerConf(orderId.value)
  51. if (data.code === "00000") {
  52. showSuccessToast('提交成功');
  53. setTimeout(() => {
  54. router.go(-1);
  55. }, 1500);
  56. } else {
  57. showFailToast('提交失败')
  58. }
  59. } catch (error) {
  60. console.log("提交失败", error);
  61. }
  62. };
  63. onMounted(() => {
  64. if (tradeStore.tradeItem) {
  65. const item = tradeStore.getTradeItem()
  66. tradeNumber.value = item.tradeNumber;
  67. sellerPayeeCode.value = item.sellerPayeeCode;
  68. sellerCardNo.value = item.sellerCardNo;
  69. price.value = item.price;
  70. orderId.value = item.id;
  71. }
  72. });
  73. // 当组件卸载时清除用户信息
  74. onBeforeUnmount(() => {
  75. tradeStore.clearTradeItem();
  76. });
  77. </script>
  78. <template>
  79. <div class="buyConf">
  80. <s-header :name="'买家付款'" :noback="false"></s-header>
  81. <!-- 提交 -->
  82. <van-form @submit="onSubmit">
  83. <br>
  84. <!-- 买入数量/单价/总价 -->
  85. <van-cell-group inset>
  86. <van-field v-model="orderId" readonly name="交易单号" label="交易单号" placeholder="交易单号"
  87. type="textarea" autosize left-icon="coupon" />
  88. <!-- :rules="[{ required: true, message: '单据凭证缺失' }]" -->
  89. <van-field v-model="tradeNumber" readonly name="买入数量" label="买入数量" placeholder="买入数量"
  90. left-icon="goods-collect" :rules="[{ required: true, message: '买入数量不能为空' }]" />
  91. <van-field v-model="price" readonly name="买入单价" label="买入单价" placeholder="买入单价" left-icon="gold-coin" />
  92. <van-field v-model="totalPrice" readonly name="需付款¥" label="需付款¥" placeholder="需付款¥" left-icon="bill" />
  93. </van-cell-group>
  94. <br>
  95. <!-- 卖家收款信息 -->
  96. <van-cell-group inset>
  97. <van-field v-model="sellerPayeeCode" readonly name="卖家支付宝号" label="卖家支付宝号" placeholder="卖家支付宝号"
  98. left-icon="alipay" />
  99. <!-- :rules="[{ required: true, message: '支付宝号不能为空' }]" -->
  100. <van-field v-model="sellerCardNo" readonly name="卖家银行卡号" label="卖家银行卡号" placeholder="卖家银行卡号"
  101. left-icon="card" />
  102. </van-cell-group>
  103. <br>
  104. <!-- 上传支付宝/银行付款截图 -->
  105. <van-cell-group inset>
  106. <van-field name="uploader" label="买家上传付款截图">
  107. <template #input>
  108. <van-uploader v-model="fileList" :after-read="afterRead" reupload max-count="1">
  109. <van-button icon="plus" color="#39a6fe">上传转账截图</van-button>
  110. </van-uploader>
  111. </template>
  112. </van-field>
  113. </van-cell-group>
  114. <div style="margin: 16px;">
  115. <van-button round block type="primary" native-type="submit">
  116. 提交
  117. </van-button>
  118. </div>
  119. </van-form>
  120. </div>
  121. </template>
  122. <style scoped>
  123. .buyConf {
  124. background-color: #e3e3e3;
  125. }
  126. </style>