:sparkles: 图片预览；:bug: 金额小数点后位数过多的问题；:art: 状态样式优化

src/main.js

@@ -72,6 +72,7 @@ import {
   NumberKeyboard,
   Empty,
   Watermark,
+  ImagePreview,
 } from "vant";
 import { Image as VanImage } from "vant";
 import store from "./store";
@@ -169,6 +170,7 @@ app
   .use(NumberKeyboard)
   .use(Empty)
   .use(Watermark)
+  .use(ImagePreview)
 
 app.use(router);
 app.use(store);

src/service/buyOrSell/index.js

@@ -27,5 +27,15 @@ export function sellerConf(orderId) {
 
 // 根据交易单id获取上传凭证
 export function getImg(orderId) {
-  return axios.get(`/myCenter/download/${orderId}`);
-}
+  // 返回一个Promise，它将解析为一个包含Blob数据的axios响应
+  return axios.get(`/myCenter/download/${orderId}`, {
+    responseType: 'blob', // 告诉axios返回类型为blob
+  }).then(response => {
+    // 创建一个可用于img标签的Object URL
+    return URL.createObjectURL(response.data);
+  }).catch(error => {
+    // 打印错误并抛出，以便调用者可以处理这个错误
+    console.error('Failed to fetch PNG:', error);
+    throw error;
+  });
+}

src/views/buyOrSell/BuyConf.vue

@@ -13,7 +13,7 @@ const tradeNumber = ref(0) // 股票数量
 const sellerPayeeCode = ref('') // 卖家支付宝
 const sellerCardNo = ref('') // 卖家银行卡号
 let totalPrice = computed(() => { // 需付款
-    return price.value * tradeNumber.value
+    return Math.round(price.value * tradeNumber.value * 100) / 100;
 })
 
 
@@ -103,9 +103,8 @@ onBeforeUnmount(() => {
             <br>
             <!-- 买入数量/单价/总价 -->
             <van-cell-group inset>
-                
                 <van-field v-model="orderId" readonly name="交易单号" label="交易单号" placeholder="交易单号"
-                    left-icon="coupon" />
+                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: '买入数量不能为空' }]" />

src/views/buyOrSell/BuyConfList.vue

@@ -174,10 +174,10 @@ onMounted(async () => {
                                 </van-button>
                             </div>
 
-                            <!-- 1双方确认-绿#16D81A，2已付款卖家未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
+                            <!-- 1双方确认-绿#1dd36c，2已付款卖家未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #16D81A">{{
+                                <span v-if="item.status === '1'" style="color: #1dd36c">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已付款未确认 -->

src/views/buyOrSell/SellConf.vue

@@ -5,32 +5,44 @@ 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 certificate = ref('') // 凭证图片
+
 const price = ref(0) // 价格
 const tradeNumber = ref(0) // 股票数量
 let totalPrice = computed(() => { // 应收款
-    return price.value * tradeNumber.value
+    return Math.round(price.value * tradeNumber.value * 100) / 100;
 })
 
-const orderId = ref('') // 交易单id
+const orderId = ref('') // 交易单号id
 
 let imgUrl = ref('')
 
-const getImgFunc = async () => {
-    const { data } = await getImg(orderId.value)
-    console.log("orderId >>>", orderId.value);
-    if (data.code === '00000') {
-        imgUrl.value = data.data
-    } else {
-        showFailToast('未找到买家付款截图')
+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)
@@ -50,12 +62,14 @@ const onSubmit = async () => {
 onMounted(() => {
     if (tradeStore.tradeItem) {
         const item = tradeStore.getTradeItem()
-        certificate.value = item.certificate;
+        console.log("item >>>", item);
+
+        // certificate.value = item.certificate;
         tradeNumber.value = item.tradeNumber;
         price.value = item.price;
         orderId.value = item.id;
     }
-    getImgFunc()
+    getImgFunc(orderId.value)
 });
 
 // 当组件卸载时清除用户信息
@@ -74,8 +88,10 @@ onBeforeUnmount(() => {
             <br>
             <!-- 买家应付款 -->
             <van-cell-group inset>
-                <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
-                    left-icon="coupon" />
+                <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" />
@@ -87,9 +103,7 @@ onBeforeUnmount(() => {
                 <!-- 买家的付款截图 -->
                 <van-field name="uploader" label="买家的付款截图">
                     <template #input>
-                        <van-image width="100" height="100"
-                            :src="imgUrl" />
-                            <!-- https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg -->
+                        <van-image width="100" height="100" :src="imgUrl" @click="previewImage" />
                     </template>
                 </van-field>
             </van-cell-group>
@@ -99,7 +113,6 @@ onBeforeUnmount(() => {
                 </van-button>
             </div>
         </van-form>
-
     </div>
 </template>
 

src/views/buyOrSell/SellConfList.vue

@@ -172,14 +172,14 @@ onMounted(async () => {
                                 </van-button>
                             </div>
 
-                            <!-- 0未付款-红#D84A16，1双方确认-绿#16D81A，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
+                            <!-- 0未付款-红#E0390F，1双方确认-绿#1dd36c，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 未付款 -->
-                                <span v-if="item.status === '0'" style="color: #D84A16">{{
+                                <span v-if="item.status === '0'" style="color: #E0390F">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #16D81A">{{
+                                <span v-if="item.status === '1'" style="color: #1dd36c">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 买家超时未确认 -->

src/views/taskMessage/TransactionList.vue

@@ -51,14 +51,14 @@
                                     showDateTime(item.sellerConfirmTime)
                                 }}
                             </div>
-                            <!-- 0未付款-红#D84A16，1双方确认-绿#16D81A，2已付款未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
+                            <!-- 0未付款-红#E0390F，1双方确认-绿#1dd36c，2已付款未确认-蓝#16D8CF，3买家超时未确认-#163DD8，4特殊取消-紫#D816D8 -->
                             <div class="itemRow" style="display: flex; justify-content: flex-end">
                                 <!-- 未付款 -->
-                                <span v-if="item.status === '0'" style="color: #D84A16">{{
+                                <span v-if="item.status === '0'" style="color: #E0390F">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已确认 -->
-                                <span v-if="item.status === '1'" style="color: #16D81A">{{
+                                <span v-if="item.status === '1'" style="color: #1dd36c">{{
                                     showStatusText(item.status)
                                     }}</span>
                                 <!-- 已付款，待卖家确认 -->
@@ -95,10 +95,10 @@ import dateUtil from "@/utils/dateUtil";
 // 状态，0未确认，1已确认(双方已确认)，2买家已付款（卖家未确认）,3买家超时未确认，4特殊取消
 const showStatusText = (statusVal) => {
     const statusMap = {
-        0: '未付款',
-        1: '已确认',
-        2: '待确认',
-        3: '买家超时未确认',
+        0: '待买家付款',
+        1: '已成交',
+        2: '待卖家确认',
+        3: '买家超时未支付',
         4: '特殊取消',
     }
     return statusMap[statusVal] || '未知状态';