调接口

MrShi

2025-07-18 13d0fc75a48f91cb1e6efa124d5f838b382ea53c

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

@@ -4,64 +4,79 @@
         已取消
      </view> -->
      <view class="order-head" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
         <view class="order-head-status">待接单</view>
         <view class="order-head-info">您已经成功发起用工单，请耐心等待接单</view>
         <view class="order-head-status">{{info.statusName || ''}}</view>
         <view class="order-head-info">{{getStatusInfo()}}</view> 
      </view>
      <view class="order-quxiao">
         <view class="order-quxiao-btn">取消订单</view>
         <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>
      <view class="order-user">
      <view class="order-user"  v-if="userInfo.id === info.releaseMemberId">
         <view class="order-user-info">
            <view class="user-info-l">
               <view class="user-info-l-image">
                  <image src="/static/logo.png" mode="widthFix"></image>
                  <image v-if="info.acceptCoverImage" :src="info.acceptCoverImage" mode="widthFix"></image>
                  <image v-else src="/static/logo.png" mode="widthFix"></image>
               </view>
               <view class="user-info-l-i">
                  <view class="user-info-l-i-top">莲花劳务公司</view>
                  <view class="user-info-l-i-top">{{info.acceptName || '匿名'}}</view>
                  <view class="user-info-l-i-bottom">
                     <view class="user-info-l-i-bottom-item">
                        <text>评分：</text>
                        <text>90</text>
                        <text>{{info.score || '-'}}</text>
                     </view>
                     <view class="user-info-l-i-bottom-item">
                        <text>单数：</text>
                        <text>100</text>
                        <text>{{info.publishNum || 0}}</text>
                     </view>
                  </view>
               </view>
            </view>
            <view class="user-info-r">
            <view class="user-info-r" @click="contactPhone(info.acceptPhone)">
               <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image>
               <text>联系师傅</text>
            </view>
         </view>
      </view>
      <view class="order-info">
      <view class="order-info" >
         <view class="order-info-title">
            <view class="x"></view>
            <text>用工单-采摘工</text>
            <text v-if="info.type===0">用工单-{{(info.workType===0?'采摘工':(info.workType===1?'分拣工':'包装工')) }}</text> 
            <text v-if="info.type===1">运货单-{{info.categoryName || ''}}-{{info.carUnit || ''}}</text>
            <text v-if="info.type===2">订餐单</text>
				
         </view>
         <view class="order-info-wz">葡萄｜2000斤</view>
         <view v-if="info.type===0" class="order-info-wz">{{info.categoryName || ''}}｜{{info.priceNum1 || '' }}斤</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>
            <view class="order-info-address-info">
               <text>长江西路大蜀山森林公园西门保安室</text>
               <text>地点描述文字地点描述地点描述文字</text>
               <text>{{info.location || '' }}</text>
               <text>{{info.locationRemark || '' }}</text>
            </view>
         </view>
         <view class="order-info-address">
            <image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
            <view class="order-info-address-info">
               <text>长江西路大蜀山森林公园西门保安室</text>
               <text>{{info.startDate || ''}}-{{info.endDate || ''}}({{info.totalDays||0}}天)</text>
            </view>
         </view>
         <view class="address" v-if="info.type===1 && wayList && wayList.length>0">
            <view class="address-xian"></view>
            <view class="address-row"  v-for="(item,index) in wayList" style="display: block;margin: 10px" :key="'bbb'+index">
               <image v-if="index === 0" src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
               <image v-if="index >0 && index < wayList.length-1" src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
               <image v-if="index === wayList.length-1" src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
               <text>{{item.location || ''}}</text>
            </view>
         </view>
         <view class="order-info-x"></view>
         <view class="order-info-supplement">
            <view class="order-info-supplement-title">需求补充：</view>
            <view class="order-info-supplement-val">男女都可，包午饭，干活麻利，早上9点到下午4点，可免费带1斤葡萄回家</view>
            <view class="order-info-supplement-val">{{info.supplement || '' }}</view>
            <view class="order-info-supplement-list">
               <view class="order-info-supplement-list-item" v-for="(item,index) in 4" :key="index">
                  <image src="/static/logo.png" mode="widthFix"></image>
               <view class="order-info-supplement-list-item" v-for="(item,index) in info.multifileList" v-if="info.multifileList && info.multifileList.length>0" :key="item.imgurl">
                  <image v-if="item.fileurlFull"  :src="item.fileurlFull" @click="previemImg(item.fileurlFull)" mode="widthFix"></image>
               </view>
               <view style="width: 156rpx; height: 0;"></view>
               <view style="width: 156rpx; height: 0;"></view>
@@ -70,35 +85,43 @@
         <view class="order-info-price">
            <view class="price-row">
               <view class="price-row-label">费用标准</view>
               <view class="price-row-val">0.5元/斤</view>
               <view class="price-row-val" v-if="info.type !==2">{{((info.price||0)/100).toFixed(2) }}{{info.priceUnit || '' }}</view>
               <view class="price-row-val" v-if="info.type ===2">
                  <text  v-for="(item,index) in wayList">
                      {{item.name || ''}}{{((item.price||0)/100).toFixed(2)}}元{{item.num||0}}份{{index != wayList.length-1?'|':''}}
                  </text>
               </view>
            </view>
            <view class="price-row">
               <view class="price-row-label">预估总费用</view>
               <view class="price-row-val" style="color: #FF0000;">¥1000.00</view>
               <view class="price-row-label">预估总费用(元)</view>
               <view class="price-row-val" style="color: #FF0000;">
                  ¥{{((info.estimatedAccount||0)/100).toFixed(2) }}
               </view>
            </view>
         </view>
      </view>
      <view class="order-info">
      <view class="order-info" v-if="info.commentStatus ===1">
         <view class="order-info-title">
            <text>评价</text>
         </view>
         <u-rate :count="count" activeColor="#FFC331" size="26" v-model="value"></u-rate>
         <u-rate :count="count" activeColor="#FFC331" size="26" v-model="info.commentLevel"></u-rate>
         <view class="order-info-remark">
            干活利落效率高干活利落效率高干活利落效率高干活利落效率高干活利落效率高
            {{ info.commentInfo || '-'}}
         </view>
      </view>
      <view class="order-ren">
      <view class="order-ren" v-if="userInfo.id === info.acceptMemberId">
         <view class="order-ren-left">
            <view class="order-ren-left-img">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image v-if="info.releaseCoverImage" :src="info.releaseCoverImage" mode="widthFix"></image>
               <image v-else src="/static/logo.png" mode="widthFix"></image>
            </view>
            <text>史天敏</text>
            <view class="order-ren-left-tip">业主</view>
            <text>{{info.releaseName || '匿名'}}</text>
            <view class="order-ren-left-tip">发单方</view>
         </view>
         <view class="order-ren-x"></view>
         <view class="order-ren-lx">
         <view class="order-ren-lx"  @click="contactPhone(info.releasePhone)">
            <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image>
            <text>联系业主</text>
            <text>发单方</text>
         </view>
      </view>
      <view class="order-info">
@@ -108,43 +131,48 @@
         <view class="order-info-list">
            <view class="order-info-list-item">
               <text>订单编号：</text>
               <text>202107131742520001</text>
               <text>{{info.code || ''}}</text>
            </view>
            <view class="order-info-list-item">
               <text>下单时间：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.createTime||'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>接单时间：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.acceptTime||'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>开始时间：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.workStartTime||'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>完成时间：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.finishTime||'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>支付时间：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.payTime||'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>支付方式：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.payMethod==0?'微信支付':'-'}}</text>
            </view>
            <view class="order-info-list-item">
               <text>交易单号：</text>
               <text>2025-07-26 09:32:11</text>
               <text>{{info.wxExternalNo || '-'}}</text>
            </view>
         </view>
      </view>
      <view style="width: 100%; height: calc(108rpx + env(safe-area-inset-bottom));"></view>
      <view class="order-footer">
         <view class="order-footer-btn">
            <view class="order-footer-btn-a" @click="show = true">取消订单</view>
            <view class="order-footer-btn-b">修改订单</view>
         <view class="order-footer-btn"> 
            <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" 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))">去支付</view>
            <view class="order-footer-btn-b" v-if="userInfo.id === info.releaseMemberId && (info.status ===0 ||  info.status ===1|| info.status ===2)">修改订单</view>
            <view class="order-footer-btn-b" v-if="userInfo.id === info.releaseMemberId && (info.isUpdate==1 && info.status ===2)">修改确认</view>
            <view class="order-footer-btn-b" v-if="userInfo.id !== info.releaseMemberId && (info.status ===1)">抢单</view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
@@ -207,21 +235,98 @@
            <view class="zhifu-botton" style="margin-top: 60rpx;">立即评价</view>
         </view>
      </u-popup>
		
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState( ['userInfo'])
      },
      data() {
         return {
            show: false,
            show1: false,
            show2: false,
            count: 4,
            value: 2,
            bgImg: require('@/static/image/bg_green@2x.png')
            count: 5, 
            wayList:[],
            bgImg: require('@/static/image/bg_green@2x.png'),
            id: null,
            loading:false,
            info: {}, 
         };
      },
      onLoad(options) {
         console.log(options)
         var id = options.id
         this.id = id
         this.getOrderData()
      },
      methods:{
         previemImg(src){
            uni.previewImage({
               current: src, // 当前显示图片的http链接
               urls: [src] // 需要预览的图片http链接列表
              });
         },
         contactPhone(phone){
            if(phone !=null && phone!=''){
               uni.makePhoneCall({
                  phoneNumber: phone  
               })
            }
         },
         //订单状态:0=待支付 1=待接单；2=已接单；3=进行中；4=已完成；99=已取消
         getStatusInfo(){
            if(this.userInfo.id === this.info.acceptMemberId){
               //如果是接单方
               if(this.info.status === 0){
                  return ''
               }else if(this.info.status === 1){
                  return ''
               }else if(this.info.status === 2){
                  return '您已接单，请按时完成订单任务'
               }else if(this.info.status === 3){
                  return '订单进行中，请按时完成订单任务'
               }else if(this.info.status === 4){
                  return '您的订单已完成'
               }else if(this.info.status === 99){
                  return '订单已取消'
               }
            }else{
               //如果是发布方
               if(this.info.status === 0){
                  return '请尽快完成支付，发布订单'
               }else if(this.info.status === 1){
                  return '您订单已经成功发起，请耐心等待接单'
               }else if(this.info.status === 2){
                  return '订单开始作业后，请拖动下方“开始作业”按'
               }else if(this.info.status === 3){
                  return this.info.type!=2?'订单完成后请点击下方“完成并支付”按钮':'订单正在进行中'
               }else if(this.info.status === 4){
                  return this.info.commentStatus==1?'您的订单已完成，欢迎再次使用': '您的订单已完成，请及时评价'
               }else if(this.info.status === 99){
                  return '订单已取消'
               }
            }
         },
         getOrderData(){
            var that = this
            var param ={ orderId:that.id}
            this.$u.api.getDetail(param).then(res =>{
               if(res.code ===200){
                  if(that.userInfo.id === res.data.releaseMemberId || that.userInfo.id === res.data.acceptMemberId ){
                     that.info = res.data
                     if(that.info.wayInfo){
                        that.wayList = JSON.parse(that.info.wayInfo)
                     }
                  }else{
                     uni.showToast({ title: '订单信息不存在', icon: 'error', duration: 2000 });
                  }
               }
             }) 
         }
      }
   }
</script>
@@ -568,7 +673,9 @@
               &:last-child {
                  margin: 0 !important;
               }
               .price-row-label {
               .price-row-label { 
                  flex-shrink: 0;
                  margin-right: 30rpx;
                  font-weight: 400;
                  font-size: 30rpx;
                  color: #777777;
@@ -788,4 +895,45 @@
         }
      }
   }
   .address {
      width: 100%;
      background: #F7F7F7;
      border-radius: 16rpx;
      padding: 30rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;
      position: relative;
      .address-xian {
         position: absolute;
         top: 17px;
         left: 24px;
         width: 1rpx;
         height: calc(100% - 60rpx);
         border-right: 2rpx dashed #B2B2B2;
      }
      .address-row {
         position: relative;
         z-index: 2;
         width: 100%;
         display: flex !important; 
         align-items: center;
         margin-bottom: 30rpx ;
         margin-left: 0rpx !important;
         margin-top: 0rpx !important;
         &:last-child { 
            margin-bottom: 0 !important;
         }
         image {
            width: 36rpx;
            height: 36rpx;
            flex-shrink: 0;
            margin-right: 24rpx;
         }
         text {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
         }
      }
   }
</style>