123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <script setup>
- import sHeader from "@/components/SimpleHeader";
- import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
- import { sellerConf, getImg } from "@/service/buyOrSell";
- import { showFailToast, showSuccessToast } from "vant";
- import { useRouter } from 'vue-router'
- import { useTradeStore } from '@/stores/trade';
- import { showImagePreview } from 'vant';
- const router = useRouter()
- const tradeStore = useTradeStore()
- // const certificate = ref('') // 凭证图片
- const price = ref(0) // 价格
- const tradeNumber = ref(0) // 股票数量
- let totalPrice = computed(() => { // 应收款
- return Math.round(price.value * tradeNumber.value * 100) / 100;
- })
- const orderId = ref('') // 交易单号id
- let imgUrl = ref('')
- const getImgFunc = async (e) => {
- try {
- const imageUrl = await getImg(e);
- imgUrl.value = imageUrl; // 假设imgUrl是一个Vue响应式变量
- } catch (error) {
- // 处理错误,例如显示一个消息给用户
- showFailToast('未找到买家付款截图');
- }
- }
- // 预览图片的方法
- const previewImage = () => {
- showImagePreview({
- images: [
- imgUrl.value
- ],
- // startPosition: 0, // 指定图片初始位置
- closeable: true, // 展示关闭按钮
- })
- };
- const onSubmit = async () => {
- try {
- const { data } = await sellerConf(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()
- console.log("item >>>", item);
- // certificate.value = item.certificate;
- tradeNumber.value = item.tradeNumber;
- price.value = item.price;
- orderId.value = item.id;
- }
- getImgFunc(orderId.value)
- });
- // 当组件卸载时清除用户信息
- onBeforeUnmount(() => {
- tradeStore.clearTradeItem();
- });
- </script>
- <template>
- <div class="sellConf">
- <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" />
- <!-- <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
- type="textarea" autosize left-icon="coupon" /> -->
- <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 name="uploader" label="买家的付款截图">
- <template #input>
- <van-image width="100" height="100" :src="imgUrl" @click="previewImage" />
- </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>
- .sellConf {
- background-color: #e3e3e3;
- }
- </style>
|