SellConf.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <script setup>
  2. import sHeader from "@/components/SimpleHeader";
  3. import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
  4. import { sellerConf, getImg } from "@/service/buyOrSell";
  5. import { showFailToast, showSuccessToast } from "vant";
  6. import { useRouter } from 'vue-router'
  7. import { useTradeStore } from '@/stores/trade';
  8. import { showImagePreview } from 'vant';
  9. const router = useRouter()
  10. const tradeStore = useTradeStore()
  11. // const certificate = ref('') // 凭证图片
  12. const price = ref(0) // 价格
  13. const tradeNumber = ref(0) // 股票数量
  14. let totalPrice = computed(() => { // 应收款
  15. return Math.round(price.value * tradeNumber.value * 100) / 100;
  16. })
  17. const orderId = ref('') // 交易单号id
  18. let imgUrl = ref('')
  19. const getImgFunc = async (e) => {
  20. try {
  21. const imageUrl = await getImg(e);
  22. imgUrl.value = imageUrl; // 假设imgUrl是一个Vue响应式变量
  23. } catch (error) {
  24. // 处理错误,例如显示一个消息给用户
  25. showFailToast('未找到买家付款截图');
  26. }
  27. }
  28. // 预览图片的方法
  29. const previewImage = () => {
  30. showImagePreview({
  31. images: [
  32. imgUrl.value
  33. ],
  34. // startPosition: 0, // 指定图片初始位置
  35. closeable: true, // 展示关闭按钮
  36. })
  37. };
  38. const onSubmit = async () => {
  39. try {
  40. const { data } = await sellerConf(orderId.value)
  41. if (data.code === "00000") {
  42. showSuccessToast('已确认');
  43. setTimeout(() => {
  44. router.go(-1);
  45. }, 1500);
  46. } else {
  47. showFailToast('提交失败')
  48. }
  49. } catch (error) {
  50. console.log("提交失败", error);
  51. }
  52. };
  53. onMounted(() => {
  54. if (tradeStore.tradeItem) {
  55. const item = tradeStore.getTradeItem()
  56. console.log("item >>>", item);
  57. // certificate.value = item.certificate;
  58. tradeNumber.value = item.tradeNumber;
  59. price.value = item.price;
  60. orderId.value = item.id;
  61. }
  62. getImgFunc(orderId.value)
  63. });
  64. // 当组件卸载时清除用户信息
  65. onBeforeUnmount(() => {
  66. tradeStore.clearTradeItem();
  67. });
  68. </script>
  69. <template>
  70. <div class="sellConf">
  71. <s-header :name="'确认收款'" :noback="false"></s-header>
  72. <!-- 卖家操作 -->
  73. <van-form @submit="onSubmit">
  74. <br>
  75. <!-- 买家应付款 -->
  76. <van-cell-group inset>
  77. <van-field v-model="orderId" readonly name="交易单号" label="交易单号" placeholder="交易单号" type="textarea"
  78. autosize left-icon="coupon" />
  79. <!-- <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
  80. type="textarea" autosize left-icon="coupon" /> -->
  81. <van-field v-model="tradeNumber" readonly name="卖出数量" label="卖出数量" placeholder="卖出数量"
  82. left-icon="goods-collect" :rules="[{ required: true, message: '买出数量不能为空' }]" />
  83. <van-field v-model="price" readonly name="卖出单价" label="卖出单价" placeholder="卖出单价" left-icon="gold-coin" />
  84. <van-field v-model="totalPrice" readonly name="应收款¥" label="应收款¥" placeholder="应收款¥" left-icon="bill" />
  85. </van-cell-group>
  86. <br>
  87. <van-cell-group inset>
  88. <!-- 买家的付款截图 -->
  89. <van-field name="uploader" label="买家的付款截图">
  90. <template #input>
  91. <van-image width="100" height="100" :src="imgUrl" @click="previewImage" />
  92. </template>
  93. </van-field>
  94. </van-cell-group>
  95. <div style="margin: 16px;">
  96. <van-button round block type="primary" native-type="submit">
  97. 确认收款
  98. </van-button>
  99. </div>
  100. </van-form>
  101. </div>
  102. </template>
  103. <style scoped>
  104. .sellConf {
  105. background-color: #e3e3e3;
  106. }
  107. </style>