前端

doum

2025-09-03 dbccd6b83b9e30f9fdcb2c7900a16cb038648c62

 small-program/pages/order-details/order-details.vue

@@ -4,15 +4,17 @@
         已取消
      </view> -->
      <view class="order-head" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
         <view class="order-head-status">{{info.statusName || ''}}</view>
         <view class="order-head-info">{{getStatusInfo()}}</view> 
         <view class="order-head-status">{{info.statusName || ''}}</view> 			
         <view class="order-head-info" v-if="isAcceptor && info.isUpdate ==1" style="color: red;">
            订单信息已修改，请及时确认，{{timeInfo}}后将自动同意
         </view> 
         <view class="order-head-info" v-else >{{getStatusInfo()}}</view> 
      </view>
      <view class="order-quxiao">
         <view class="order-quxiao-btn" @click="show = true" v-if="userInfo.id === info.acceptMemberId && info.status ===2">取消订单</view>
         <view class="order-quxiao-btn" @click="show = true" v-if="userInfo.id === info.releaseMemberId && (info.status ===0 ||  info.status ===1|| info.status ===2)">取消订单</view>
         <view class="order-quxiao-btn1" v-if="userInfo.id === info.releaseMemberId && (info.status ===0 ||  info.status ===1|| info.status ===2)" @click="jumpEdit()">修改订单</view>
         <view class="order-quxiao-btn" @click="show = true" v-if="(isAcceptor && info.status ===2) || (isPushlishor  &&  info.isUpdate!=1 &&  info.status ===2)">取消订单</view>
         <view class="order-quxiao-btn1" v-if="isPushlishor && info.type!=2 &&  info.isUpdate!=1 &&   info.status ===2 " @click="jumpEdit()">修改订单</view>
      </view>
      <view class="order-user"  v-if="userInfo.id === info.releaseMemberId && info.acceptMemberId">
      <view class="order-user"  v-if="isPushlishor && info.acceptMemberId">
         <view class="order-user-info">
            <view class="user-info-l">
               <view class="user-info-l-image">
@@ -21,7 +23,7 @@
               </view>
               <view class="user-info-l-i">
                  <view class="user-info-l-i-top">
                     <text>{{info.acceptName || '匿名'}}</text>
                     <text>{{info.acceptName || ''}}</text>
                     <view class="user-info-l-i-top-jdf">接单方</view>
                  </view>
                  <view class="user-info-l-i-bottom">
@@ -36,7 +38,7 @@
                  </view>
               </view>
            </view>
            <view class="user-info-r" @click="contactPhone(info.acceptPhone)">
            <view class="user-info-r" @click="contactPhone(info.acceptPhone)" v-if="info.status ==2||info.status==3||info.status==5">
               <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image>
               <text>联系师傅</text>
            </view>
@@ -50,7 +52,7 @@
            <text v-if="info.type===2">订餐单</text>
            
         </view>
         <view v-if="info.type===0" class="order-info-wz">{{info.categoryName || ''}}｜{{info.priceNum1 || '' }}斤</view>
         <view v-if="info.type===0" class="order-info-wz">{{info.categoryName || ''}}｜{{info.priceNum1 || '' }}{{info.workType === 0?'斤':'人'}}</view>
         <view v-if="info.type===1" class="order-info-wz">{{info.transportTypeName || ''}}{{' | '}}{{info.transportNum || '' }}{{info.transportUnit||''}}{{' | '}}需{{info.priceNum2 || '' }}辆</view> 
         <view class="order-info-address">
            <image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
@@ -103,7 +105,7 @@
               </view>
            </view>
            
            <view class="price-row" v-if="userInfo.id === info.acceptMemberId">
            <view class="price-row" v-if="isAcceptor">
               <view class="price-row-label">实际到账(元)</view>
               <view class="price-row-val" style="color: #FF0000;">
                  ¥{{((info.estimatedAccount * (1 - (info.platformRata || 0))) / 100).toFixed(2) }}
@@ -120,17 +122,17 @@
            {{ info.commentInfo || '-'}}
         </view>
      </view>
      <view class="order-ren" v-if="userInfo.id === info.acceptMemberId">
      <view class="order-ren" v-if="isAcceptor">
         <view class="order-ren-left">
            <view class="order-ren-left-img">
               <image v-if="info.releaseCoverImage" :src="info.releaseCoverImage" mode="widthFix"></image>
               <image v-else src="/static/icon/img@2x.png" mode="widthFix"></image>
            </view>
            <text>{{info.releaseName || '匿名'}}</text>
            <text>{{info.releaseName || ''}}</text>
            <view class="order-ren-left-tip">业主</view>
         </view>
         <view class="order-ren-x"></view>
         <view class="order-ren-lx"  @click="contactPhone(info.releasePhone)">
         <view class="order-ren-lx"  v-if="info.status ==2||info.status==3||info.status==5"  @click="contactPhone(info.releasePhone)">
            <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image>
            <text>发单方</text>
         </view>
@@ -176,21 +178,20 @@
      </view>
      <view style="width: 100%; height: calc(108rpx + env(safe-area-inset-bottom));" v-if="![99].includes(info.status)"></view>
      <view class="order-footer" v-if="![99].includes(info.status)">
         <template v-if="(userInfo.id === info.releaseMemberId) && info.status ===2">
         <template v-if="isPushlishor && info.isUpdate!=1 &&info.status ===2">
            <sunui-mverify hint="开始作业" @change="getaccept($event)"></sunui-mverify>
         </template>
         <view class="order-footer-btn" v-else> 
            <view class="order-footer-btn-a" @click="show = true" v-if="userInfo.id === info.acceptMemberId && info.status ===2">取消订单</view>
            <view class="order-footer-btn-a" @click="show = true" v-if="userInfo.id === info.releaseMemberId && (info.status ===0 ||  info.status ===1|| info.status ===2)">取消订单</view>
            <view class="order-footer-btn-b" @click="show2=true" v-if="userInfo.id === info.releaseMemberId && (info.status ===4 && info.commentStatus!=1)">去评价</view>
            <view class="order-footer-btn-b" v-if="userInfo.id === info.releaseMemberId &&((info.status ===3 && info.type !==2)|| (info.status ===0 && info.type===2))" @click="show1 = true">{{info.type === 2 ? '继续支付' : '完成并支付'}}</view>
				
            <view class="order-footer-btn-b" v-if="userInfo.id === info.releaseMemberId && ((info.status ===3 && info.type===2))" @click="payment1">完成作业</view>
				
            <view class="order-footer-btn-b" v-if="userInfo.id === info.releaseMemberId && (info.status ===0 ||  info.status ===1|| info.status ===2)" @click="jumpEdit()">修改订单</view>
            <view class="order-footer-btn-b" @click="show5 =true" v-if="userInfo.id === info.acceptMemberId && (info.isUpdate==1 && info.status ===2)">修改确认</view>
            <view class="order-footer-btn-b" @click="startJobs()" v-if="userInfo.id === info.releaseMemberId && (info.status ===2)">开始作业</view>
            <view class="order-footer-btn-b"  @click="show6 =true" v-if="userInfo.id !== info.releaseMemberId && (info.status ===1)">抢单</view>
            <view class="order-footer-btn-a" @click="show = true" v-if="1==2&& isAcceptor && info.status ===2">取消订单</view>
            <view class="order-footer-btn-a" @click="show = true" v-if="isPushlishor && (info.status ===0 ||  info.status ===1|| info.status ===2)">取消订单</view>
            <view class="order-footer-btn-b" @click="show2=true" v-if="isPushlishor && (info.status ===4 && info.commentStatus!=1)">去评价</view>
            <view class="order-footer-btn-b" v-if="isPushlishor&&((info.status ===5 && info.type !==2)|| (info.status ===0 && info.type===2))" @click="show1 = true">{{info.type === 2 ? '继续支付' : '完成并支付'}}</view>
            <view class="order-footer-btn-a" @click="show7 = true" v-if=" info.type!==2 &&isAcceptor && info.status ===3">确认费用</view>
            <view class="order-footer-btn-b" v-if="isPushlishor && ((info.status ===3 && info.type===2))" @click="payment1">完成作业</view>
            <view class="order-footer-btn-b" v-if="info.type !=2 && info.isUpdate!=1&& isPushlishor && (info.status ===0 ||  info.status ===1|| info.status ===2)" @click="jumpEdit()">修改订单</view>
            <view class="order-footer-btn-b" @click="show5 =true" v-if="isAcceptor&& (info.isUpdate==1 && info.status ===2)">修改确认</view>
            <!-- <view class="order-footer-btn-b" @click="startJobs()" v-if="userInfo.id === info.releaseMemberId && (info.status ===2)">开始作业</view> -->
            <view class="order-footer-btn-b"  @click="show6 =true" v-if="!isPushlishor && (info.status ===1)">抢单</view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
@@ -268,14 +269,64 @@
               </view>
               <view class="zhifu-c-info1">支付金额：</view>
               <view class="zhifu-c-input">
                  <image src="/static/icon/¥@2x.png" mode="widthFix"></image>
                  <image src="/static/icon/ic_money@2x.png" mode="widthFix"></image>
                  <input type="number" v-model="amount" :disabled="info.type === 2" placeholder="请输入" />
               </view>
            </view>
            <view class="zhifu-botton" @click="payment">确认支付</view>
         </view>
      </u-popup>
		
      <!-- 支付弹窗 -->
      <u-popup :show="show7" round="15" mode="bottom">
         <view class="querenfee">
            <view class="querenfee-head">
               <view></view>
               <text>费用确认</text>
               <image @click="show7 = false" src="/static/icon/ic_close@2x.png" mode="widthFix"></image>
            </view>
            <view class="querenfee-c">
               <view class="querenfee-c-info1">费用标准：</view>
               <viem class=" money">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</viem>
            </view>
            <view class="querenfee-c" >					 
               <view class="querenfee-c-info1"><text style="color: red;">*</text>{{feeFrom.priceParam1.name}}：</view>
               <view class="querenfee-c-input"> 
                  <input type="number" v-model="feeForm.priceNum1"   placeholder="请输入" />
               </view>
               <text class="querenfee-c-info1" >{{feeFrom.priceParam1.unit}}</text>
            </view>
            <view class="querenfee-c" v-if="feeFrom.priceParam2.name !=null">
               <view class="querenfee-c-info1"><text style="color: red;">*</text>{{feeFrom.priceParam2.name}}：</view>
               <view class="querenfee-c-input"> 
                  <input type="number" v-model="feeForm.priceNum2"   placeholder="请输入" />
               </view>
               <text class="querenfee-c-info1" >{{feeFrom.priceParam2.unit}}</text>
            </view>
            <view class="querenfee-c">
               <view class="querenfee-c-info1">其他费用：</view>
               <view class="querenfee-c-input">
                  <input type="number" v-model="feeForm.confirmOtherFee"  placeholder="请输入" />
               </view>
            </view>
            <view class="querenfee-c">
               <view class="querenfee-c-info1">备注信息：</view>
               <view class="querenfee-c-input">
                  <u--textarea placeholder="如需备注，请输入" border="none" v-model="feeForm.confirmFeeRemark"  ></u--textarea>
               </view>
            </view>
            <view class="querenfee-c">
               <view class="querenfee-c-info1">实际总费用：</view>
               <view class="querenfee-c-input">
                  <image src="/static/icon/ic_money@2x.png" mode="widthFix"></image>
                  <text class="querenfee-c-input money">{{confirmPayFee}}</text>
               </view>
            </view>
            <view class="querenfee-c">
               <view class="querenfee-tips">最终费用由发单方支付，接单方收到的金额将扣除平台手续费用</view>
            </view>
            <view class="querenfee-botton" @click="confirmFee">确认费用</view>
         </view>
      </u-popup>
      <!-- 评价 -->
      <u-popup :show="show2" round="15" mode="bottom">
         <view class="zhifu">
@@ -309,14 +360,20 @@
      },
      data() {
         return {
            isPushlishor:false,
            isAcceptor:false,
            show: false,
            show1: false,
            show2: false,
            count: 5, 
            show3:false,
            timer:null,
            show4:false,
            show5:false,
            show6:false,
            show7:true,
            timeInfo:'00:00:00',
            lessTime:null,
            value:0,
            wayList:[],
            bgImg: require('@/static/image/bg_green@2x.png'),
@@ -324,13 +381,30 @@
            loading:false,
            commentInfo:'',
            info: {},
            amount: ''
            amount: '',
            confirmPayFee:0.00,
            feeFrom:{
               priceParam1:{
                  name:null,
                  unit:null
               },
               priceParam2:{
                  name:null,
                  unit:null
               },
               priceNum1:null,
               priceNum2:null,
               confirmFeeRemark:null,
               confirmOtherFee:null,
            }
         };
      },
      onLoad(options) {
         console.log(options)
         var id = options.id
         this.id = id
         this.id = id 
      },
      onShow(options) { 
         this.getOrderData()
      },
      methods:{
@@ -381,6 +455,9 @@
                  that.getOrderData()
               }
            })
         },
         confirmFee(){
            console.log("confirmFee")
         },
         payment() {
            var that = this
@@ -530,6 +607,9 @@
               }else if(this.info.status === 1){
                  return ''
               }else if(this.info.status === 2){
                  if(this.info.isUpdate==1){
                     return ''
                  }
                  return '您已接单，请按时完成订单任务'
               }else if(this.info.status === 3){
                  return '订单进行中，请按时完成订单任务'
@@ -545,7 +625,10 @@
               }else if(this.info.status === 1){
                  return '您订单已经成功发起，请耐心等待接单'
               }else if(this.info.status === 2){
                  return '订单开始作业后，请拖动下方“开始作业”按'
                  if(this.info.isUpdate==1){
                     return '订单已修改，请等待接单方确认'
                  }
                  return '订单已接单，请拖动下方“开始作业”按钮'
               }else if(this.info.status === 3){
                  return this.info.type!=2?'订单完成后请点击下方“完成并支付”按钮':'订单正在进行中'
               }else if(this.info.status === 4){
@@ -555,22 +638,110 @@
               }
            }
         },
         updateTimeInfo(){
            if(this.timer){
               clearInterval(this.timer)
            } 
            var that =this
            this.lessTime = Math.floor( Number(that.info.confirmCountdown || 0)/1000) ;
            if(this.lessTime>0){
               this.timer =  setInterval(function(){
                     let h = Math.floor(that.lessTime/60/60) ;
                     let m = Math.floor((that.lessTime - h*60*60)/60); 
                     let s=  Math.floor(that.lessTime- h*60*60 -m*60);
                     that.timeInfo =(h<10?'0':'')+ h+":"+(m<10?'0':'')+m+":"+(s<10?'0':'')+s;
                     that.lessTime =that.lessTime-1;
                     // console.log( that.timeInfo)
               },1000) 
            }
			
         },
         getOrderData(){
            var that = this
            var param ={ orderId:that.id}
            this.isPushlishor =false
            this.isAcceptor =false
            this.$u.api.getDetail(param).then(res =>{
               console.error("=============================",res.data.releaseMemberId,res.data.acceptMemberId,that.userInfo.id)
					
               if(res.code ===200){
                  if(that.userInfo.id === res.data.releaseMemberId || that.userInfo.id === res.data.acceptMemberId ){
                  if(that.userInfo.id === res.data.releaseMemberId ){
                     //如果是发单方
                     that.isPushlishor =true
                  }else if(that.userInfo.id ===res.data.acceptMemberId ){
                     //如果是接单方
                     that.isAcceptor =true
                  }
                  if(that.isAcceptor ||that.isPushlishor ){
                     that.info = res.data
                     if(that.userInfo.id === that.info.releaseMemberId ){
                        //如果是发单方
                        that.isPushlishor =true
                     }else if(that.userInfo.id === that.info.acceptMemberId ){
                        //如果是接单方
                        that.isAcceptor =true
                     }
                     that.amount = ((that.info.estimatedAccount || 0) / 100).toFixed(2)
                     if(that.info.wayInfo){
                        that.wayList = JSON.parse(that.info.wayInfo)
                     }
                     if(res.data.isUpdate == 1){
                        that.updateTimeInfo()
                     }
                     that.initPriceNumParam()
                  }else{
                     uni.showToast({ title: '订单信息不存在', icon: 'error', duration: 2000 });
                  }
               }
             }) 
         },
         initPriceNumParam(){
            this.feeFrom.priceParam1.name =null
            this.feeFrom.priceParam1.unit =null
            this.feeFrom.priceParam2.name =null
            this.feeFrom.priceParam2.unit =null
            if(this.info.type==0 && this.info.workType==1){
               //分拣工
               this.feeFrom.priceParam1.name ='实际用工天数：'
               this.feeFrom.priceParam1.unit ='天'
               this.feeFrom.priceParam2.name ='实际用工人数：'
               this.feeFrom.priceParam2.unit ='人'
            }else if(this.info.type==0 && this.info.workType==0){
               //采摘工
               this.feeFrom.priceParam1.name ='实际采摘重量：'
               this.feeFrom.priceParam1.unit ='斤'
               this.feeFrom.priceParam2.name =null
               this.feeFrom.priceParam2.unit =null
            }else if(this.info.type==0 && this.info.workType==2){
               //包装工
               if(this.info.carType==0){
                  //按天
                  this.feeFrom.priceParam1.name ='实际用工天数：'
                  this.feeFrom.priceParam1.unit ='天'
                  this.feeFrom.priceParam2.name ='实际用工人数：'
                  this.feeFrom.priceParam2.unit ='人'
               }else if(this.info.carType==1){
                  //按小时
                  this.feeFrom.priceParam1.name ='实际用工时间：'
                  this.feeFrom.priceParam1.unit ='时'
                  this.feeFrom.priceParam2.name ='实际用工人数：'
                  this.feeFrom.priceParam2.unit ='人'
               }else if(this.info.carType==1){
                  //按小时
                  this.feeFrom.priceParam1.name ='实际包装重量：'
                  this.feeFrom.priceParam1.unit ='斤'
                  this.feeFrom.priceParam2.name =null
                  this.feeFrom.priceParam2.unit =null
               }					 
            }else if(this.info.type==1 && this.info.carType==0){
               //运货单 按天数
               this.feeFrom.priceParam1.name ='实际用车天数：'
               this.feeFrom.priceParam1.unit ='天' 
            }else if(this.info.type==1 && this.info.carType==1){
               //运货单 按次数
               this.feeFrom.priceParam1.name ='实际用车次数：'
               this.feeFrom.priceParam1.unit ='次' 
            }
         }
      }
   }
@@ -598,6 +769,116 @@
<style lang="scss" scoped>
   .order {
      width: 100%;
      .querenfee {
         width: 100%;
         padding: 40rpx 30rpx;
         box-sizing: border-box;
			
         .querenfee-textarea {
            width: 100%;
            height: 364rpx;
            padding: 30rpx;
            box-sizing: border-box;
            background: #F7F7F7;
            border-radius: 16rpx;
            border: 1rpx solid #EEEEEE;
            margin-top: 48rpx;
            display: flex;
            align-items: start;
            image {
               flex-shrink: 0;
               width: 29rpx;
               height: 29rpx;
               margin-right: 10rpx;
            }
         }
			 
         .querenfee-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            image {
               width: 28rpx;
               height: 28rpx;
            }
            text {
               font-weight: 500;
               font-size: 32rpx;
               color: #222222;
            }
         }
         .querenfee-c {
            width: 100%;
            margin-top: 46rpx;
            display: flex;
            .querenfee-c-info {					
               align-items: center;
               font-weight: 500;
               font-size: 30rpx;
               color: #222222;
               margin-bottom: 30rpx;
               text {
                  color: #00BC12;
                  margin-left: 10rpx;
               }
            }
            .querenfee-c-info1 {
               width: 50%;
               font-weight: 400;
               font-size: 30rpx;
               color: #666666;
               margin-bottom: 20rpx;
            }
            .querenfee-tips{
               width: 100%;
               font-weight: 400;
               font-size: 26rpx;
               color: #999999;
               line-height: 36rpx; 
            }
            .money{
               width: 50%;
               text-align: right;
               color: red !important; 
            }
            .querenfee-c-input {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               height: 60rpx;
               background: #F7F7F7;
               border-radius: 10rpx;
               border: 1rpx solid #EEEEEE;
               display: flex;
               align-items: center;
               image {
                  flex-shrink: 0;
                  width: 28rpx;
                  height: 60rpx;
                  margin-right: 24rpx;
               }
               input {
                  flex: 1;
                  height: 100%;
                  font-weight: 500;
                  color: #222222;
               }
            }
         }
         .querenfee-botton {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            background: #00BC12;
            border-radius: 44rpx;
            margin-top: 264rpx;
         }
      }
      .zhifu {
         width: 100%;
         padding: 40rpx 30rpx;
@@ -670,6 +951,9 @@
               color: #666666;
               margin-bottom: 20rpx;
            }
            .money{
               color: red !important; 
            }
            .zhifu-c-input {
               width: 100%;
               padding: 0 30rpx;