Accept Merge Request #198: (feature/dgg -> develop)

Merge Request: feat: 订单详情页面调整

Created By: @大狗哥
Accepted By: @大狗哥
URL: https://g-bcrc3009.coding.net/p/allocatr/d/wanyu_frontend/git/merge/198

pages/index/index-skeleton.vue

@@ -31,7 +31,7 @@
               <view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
             </view>
           </view>
-          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金：123.00元抵扣200元</view>
+          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付定金：123.00元抵扣200元</view>
           <view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
             <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
               <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">
@@ -82,7 +82,7 @@
               <view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
             </view>
           </view>
-          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金：123.00元抵扣200元</view>
+          <view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付定金：123.00元抵扣200元</view>
           <view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
             <view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
               <view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" style="width:230px;margin-top:0;margin-bottom:0">

pages/index/index.vue

@@ -27,7 +27,7 @@
               <view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
             </view>
           </view>
-          <view class="discount flex-l" @click="toDetail(item.id)" v-if="item.order_info.coupon !== null">已支付订金：{{item.order_info.coupon.threshold}}元抵扣{{item.order_info.coupon.discount_value}}元</view>
+          <view class="discount flex-l" @click="toDetail(item.id)" v-if="item.order_info.coupon !== null">已支付定金：{{item.order_info.coupon.threshold}}元抵扣{{item.order_info.coupon.discount_value}}元</view>
           <view class="btn-ctr flex-sb">
             <me-button @click="acceptOrder(index, item.id)" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
             <me-button @click="rejectOrder(index, item.id)" active-color="var(--contentBgColor)" text="拒 接" width="166rpx" text-color="var(--titleColor)"></me-button>

pages/order/complete-service.vue

@@ -20,7 +20,7 @@
             </view>
           </view>
 
-          <view v-if="submitData.complete_images.length < 10" @click="upload('complete')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
+          <view v-if="submitData.complete_images.length < 10" @click="upload('complete_images')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
                 hover-start-time="0" hover-stay-time="50">
             <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
             <view class="up flex-c">点击上传</view>
@@ -94,13 +94,13 @@
           <input type="digit" v-model="submitData.amount" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入收款金额"/>
         </view>
       </view>
-      <view class="item upload">
+      <view class="item upload line-after">
         <view class="info flex-l">
           <view class="title flex-l">收款信息</view>
           <view class="desc flex-l">请上传收款成功图片（最多 1 张）</view>
         </view>
         <view class="imgs-ctr">
-          <view v-if="submitData.payment_image === ''" @click="upload('collectPayment')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
+          <view v-if="submitData.payment_image === ''" @click="upload('payment_image')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
                 hover-start-time="0" hover-stay-time="50">
             <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
             <view class="up flex-c">点击上传</view>
@@ -113,7 +113,28 @@
               <me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
             </view>
           </view>
+        </view>
+      </view>
+      <view class="item upload">
+        <view class="info flex-l">
+          <view class="title flex-l">定金核销凭证</view>
+          <view class="desc flex-l">请上传凭证图片（最多 4 张）</view>
+        </view>
+        <view class="imgs-ctr">
+          <view class="img-item" v-for="(imgUrl, index) in submitData.off_images" :key="index">
+            <view @click="helpers.previewImage(imgUrl)" class="img-ctr" :style="{marginRight: (index+1) % 4 === 0 ? '0' : '55rpx'}">
+              <image class="img" mode="aspectFit" :src="imgUrl"></image>
+            </view>
+            <view class="del" @click="delImg('off_images', index)">
+              <me-icon class="icon" type="icon-close-circle-fill" color="var(--importantColor)" size="40rpx"></me-icon>
+            </view>
+          </view>
 
+          <view v-if="submitData.off_images.length < 4" @click="upload('off_images')" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
+                hover-start-time="0" hover-stay-time="50">
+            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
+            <view class="up flex-c">点击上传</view>
+          </view>
         </view>
       </view>
     </view>
@@ -187,16 +208,10 @@ const upload = (type) => {
 
             let fullUrl = res.cdnurl + '/' + res.key
 
-            if (type === 'complete') {
+            if (type === 'payment_image') {
-              submitData.complete_images.push(fullUrl)
-            }
-
-            if (type === 'material_images') {
-              submitData.material_images.push(fullUrl)
-            }
-
-            if (type === 'collectPayment') {
               submitData.payment_image = fullUrl
+            } else {
+              submitData[type].push(fullUrl)
             }
 
             helpers.showToast('上传成功')
@@ -289,8 +304,9 @@ const submitData = reactive({
   payment_image: '',//收款图片
   receive_type: null,//收款类型：1=定金,2=全款
   is_material_used: 0,//是否使用材料：0=未使用,1=已使用
-  material_cost: null,//材料成本
+  material_cost: 0,//材料成本
   material_images: [],//材料凭证
+  off_images: [],//定金核销二维码
 })
 
 const selectFinalPaymentMethod = () => {
@@ -330,7 +346,7 @@ const validate = () => {
 
   // 使用材料
   if (submitData.is_material_used === 1) {
-    if (submitData.material_cost === null) {
+    if (submitData.material_cost === 0) {
       helpers.showToast('请输入材料成本')
       return false
     }

pages/order/order-info.vue

@@ -72,10 +72,6 @@
         <view class="title flex-l">客户地址</view>
         <view class="value flex-l">{{helpers.removeCommas(data.order_info.area.merge_name)}}{{ data.order_info.address }}</view>
       </view>
-      <view class="item-multi-line line-after">
-        <view class="title flex-l">订单详情</view>
-        <view class="value flex-l">{{data.order_info.detail ? data.order_info.detail : '暂无详情'}}</view>
-      </view>
       <view class="images line-after" v-if="data.order_info.images.length > 0">
         <view class="title flex-l">图片</view>
         <view class="imgs-ctr">
@@ -85,7 +81,7 @@
         </view>
       </view>
       <view class="item-multi-line line-after">
-        <view class="title flex-l">平台备注</view>
+        <view class="title flex-l">订单备注</view>
         <view class="value flex-l">{{data.order_info.remark ? data.order_info.remark : '无备注信息'}}</view>
       </view>
       <view class="report-order-exception flex-c" v-if="canReportOrderException">
@@ -179,6 +175,14 @@
             <text>¥{{ data.total > 0 ? data.total : data.online_total }}</text>
           </view>
         </view>
+        <view class="images line-after" v-if="data.order_info.off_images.length > 0">
+          <view class="title flex-l">定金核销凭证</view>
+          <view class="imgs-ctr">
+            <view @click="helpers.previewImage(imgUrl)" v-for="(imgUrl, index) in data.order_info.off_images" :key="index" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
+              <image class="img" mode="aspectFit" :src="imgUrl"></image>
+            </view>
+          </view>
+        </view>
         <view class="images">
           <view class="title flex-l">收款凭证</view>
           <view class="imgs-ctr">
@@ -379,10 +383,10 @@ const getPriceDescText = () => {
 
   if (orderInfo.status === 60) {
     let tailText = orderInfo.total > 0 ? '线下收款¥' + orderInfo.total : '线上收款¥' + orderInfo.online_total
-    return `服务价格(订金¥${orderInfo.order_info.online_amount}+${tailText})`
+    return `服务价格(定金¥${orderInfo.order_info.online_amount}+${tailText})`
   }
 
-  return `服务价格(已收订金¥${orderInfo.order_info.online_amount})`
+  return `服务价格(已收定金¥${orderInfo.order_info.online_amount})`
 }
 
 //获取订单状态文本

static/css/form.scss

@@ -69,6 +69,7 @@
     }
   }
   .upload {
+    position: relative;
     .info {
       width: 100%;
       height: 80rpx;