| <template> | 
|     <view class="order"> | 
|         <!-- <view class="order-quxiaole"> | 
|             已取消 | 
|         </view> --> | 
|         <view class="order-head" :style="{ backgroundImage: 'url(' + bgImg + ')' }"> | 
|             <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="(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="isPushlishor && info.acceptMemberId"> | 
|             <view class="order-user-info"> | 
|                 <view class="user-info-l"> | 
|                     <view class="user-info-l-image"> | 
|                         <image v-if="info.acceptCoverImage" :src="info.acceptCoverImage" mode="widthFix"></image> | 
|                         <image v-else src="/static/icon/img@2x.png" mode="widthFix"></image> | 
|                     </view> | 
|                     <view class="user-info-l-i"> | 
|                         <view class="user-info-l-i-top"> | 
|                             <text>{{info.acceptName || ''}}</text> | 
|                             <view class="user-info-l-i-top-jdf">接单方</view> | 
|                         </view> | 
|                         <view class="user-info-l-i-bottom"> | 
|                             <view class="user-info-l-i-bottom-item"> | 
|                                 <text>评分:</text> | 
|                                 <text>{{info.score || '-'}}</text> | 
|                             </view> | 
|                             <view class="user-info-l-i-bottom-item"> | 
|                                 <text>单数:</text> | 
|                                 <text>{{info.receiveNum ? info.receiveNum : 0}}</text> | 
|                             </view> | 
|                         </view> | 
|                     </view> | 
|                 </view> | 
|                 <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> | 
|             </view> | 
|         </view> | 
|         <view class="order-info" > | 
|             <view class="order-info-title"> | 
|                 <view class="x"></view> | 
|                 <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 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> | 
|                 <view class="order-info-address-info"> | 
|                     <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>{{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="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">{{info.supplement || '' }}</view> | 
|                 <view class="order-info-supplement-list"> | 
|                     <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> | 
|                 </view> | 
|             </view> | 
|             <view class="order-info-price"> | 
|                 <view class="price-row" v-if="feeFrom.priceParam1.name"> | 
|                     <view class="price-row-label">{{feeFrom.priceParam1.name}}</view> | 
|                     <view class="price-row-val" >  {{(info.priceNum1||0) }}{{feeFrom.priceParam1.unit}} </view> | 
|                 </view> | 
|                 <view class="price-row" v-if="feeFrom.priceParam2.name"> | 
|                     <view class="price-row-label">{{feeFrom.priceParam2.name}}</view> | 
|                     <view class="price-row-val" >  {{(info.priceNum2||0) }}{{feeFrom.priceParam2.unit}} </view> | 
|                 </view> | 
|                 <view class="price-row"> | 
|                     <view class="price-row-label">费用标准</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: userInfo.id !== info.acceptMemberId ? '#FF0000' : ''}"> | 
|                         ¥{{((info.estimatedAccount||0)/100).toFixed(2) }} | 
|                     </view> | 
|                 </view> | 
|                  | 
|                 <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) }} | 
|                     </view> | 
|                 </view> | 
|             </view> | 
|         </view> | 
|         <view class="order-info" v-if="info.commentStatus ===1"> | 
|             <view class="order-info-title"> | 
|                 <text>评价</text> | 
|             </view> | 
|             <u-rate :count="count" readonly activeColor="#FFC331" size="26" v-model="info.commentLevel"></u-rate> | 
|             <view class="order-info-remark"> | 
|                 {{ info.commentInfo || '-'}} | 
|             </view> | 
|         </view> | 
|         <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> | 
|                 <view class="order-ren-left-tip">业主</view> | 
|             </view> | 
|             <view class="order-ren-x"></view> | 
|             <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> | 
|         </view> | 
|         <view class="order-info"> | 
|             <view class="order-info-title"> | 
|                 <text>订单信息</text> | 
|             </view> | 
|             <view class="order-info-list"> | 
|                 <view class="order-info-list-item" v-if="info.code"> | 
|                     <text>订单编号:</text> | 
|                     <text>{{info.code || ''}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.createTime"> | 
|                     <text>下单时间:</text> | 
|                     <text>{{info.createTime||'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.acceptTime"> | 
|                     <text>接单时间:</text> | 
|                     <text>{{info.acceptTime||'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.workStartTime"> | 
|                     <text>开始时间:</text> | 
|                     <text>{{info.workStartTime||'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.finishTime"> | 
|                     <text>完成时间:</text> | 
|                     <text>{{info.finishTime||'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.payTime"> | 
|                     <text>支付时间:</text> | 
|                     <text>{{info.payTime||'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.payMethod && info.payMethod >= 0"> | 
|                     <text>支付方式:</text> | 
|                     <text>{{info.payMethod==0?'微信支付':'-'}}</text> | 
|                 </view> | 
|                 <view class="order-info-list-item" v-if="info.wxExternalNo"> | 
|                     <text>交易单号:</text> | 
|                     <text>{{info.wxExternalNo || '-'}}</text> | 
|                 </view> | 
|             </view> | 
|         </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="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="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-b" @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> | 
|          | 
|         <u-modal | 
|             title="温馨提示" | 
|             :show="show" | 
|             closeOnClickOverlay | 
|             showCancelButton | 
|         > | 
|             <view class="slot-content"> | 
|                 确认取消订单吗? | 
|             </view> | 
|             <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> | 
|                 <view class="btn1" @click="show = false">我再想想</view> | 
|                 <view class="btn2" @click="cancelDo">确认取消</view> | 
|             </view> | 
|         </u-modal> | 
|         <u-modal | 
|             title="温馨提示" | 
|             :show="show4" | 
|             closeOnClickOverlay | 
|             showCancelButton | 
|         > | 
|             <view class="slot-content"> | 
|                 确认取消订单吗? | 
|             </view> | 
|             <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> | 
|                 <view class="btn1" @click="show = false">我再想想</view> | 
|                 <view class="btn2" @click="cancelDo">确认取消</view> | 
|             </view> | 
|         </u-modal> | 
|         <u-modal | 
|             title="温馨提示" | 
|             :show="show6" | 
|             closeOnClickOverlay | 
|             showCancelButton | 
|         > | 
|             <view class="slot-content"> | 
|                 确认抢单吗? | 
|             </view> | 
|             <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> | 
|                 <view class="btn1" @click="show6 = false">我再想想</view> | 
|                 <view class="btn2" @click="acceptDo">确认接单</view> | 
|             </view> | 
|         </u-modal> | 
|         <u-modal | 
|             title="温馨提示" | 
|             :show="show5" | 
|             closeOnClickOverlay | 
|             showCancelButton | 
|         > | 
|             <view class="slot-content"> | 
|                 是否同意订单修改内容? | 
|             </view> | 
|             <view slot="confirmButton" style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> | 
|                 <view class="btn1" @click="show5=false">我再想想</view> | 
|                 <view style="width: 20rpx; height: 100%;"></view> | 
|                 <view class="btn2" style="background-color: #f56c6c; color: #ffffff;" @click="confirmUpdDo(1)">不同意</view> | 
|                 <view style="width: 20rpx; height: 100%;"></view> | 
|                 <view class="btn2" @click="confirmUpdDo(0)">同意</view> | 
|             </view> | 
|         </u-modal> | 
|         <!-- 支付弹窗 --> | 
|         <u-popup :show="show1" round="15" mode="bottom"> | 
|             <view class="zhifu"> | 
|                 <view class="zhifu-head"> | 
|                     <view></view> | 
|                     <text>支付订单</text> | 
|                     <image @click="show1 = false" src="/static/icon/ic_close@2x.png" mode="widthFix"></image> | 
|                 </view> | 
|                 <view class="zhifu-c"> | 
|                     <view class="zhifu-c-info" v-if="info.type !== 2"> | 
|                         请确认金额并支付费用给 <text>{{info.acceptName}}</text> | 
|                     </view> | 
|                     <view class="zhifu-c-info1">支付金额:</view> | 
|                     <view class="zhifu-c-input"> | 
|                         <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" placeholder-style="color: #999999; font-size: 56rpx; font-weight: 500;" v-model="feeForm.priceNum1"   placeholder="请输入" /> | 
|                     </view> | 
|                     <text class="querenfee-c-danw">{{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-style="color: #999999; font-size: 56rpx; font-weight: 500;" 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-style="color: #999999; font-size: 56rpx; font-weight: 500;" placeholder="请输入" /> | 
|                     </view> | 
|                     <text class="querenfee-c-danw">元</text> | 
|                 </view> | 
|                 <view class="querenfee-c" style="flex-direction: column;"> | 
|                     <view class="querenfee-c-info1" style="margin-bottom: 30rpx;">备注信息:</view> | 
|                     <view class="querenfee-c-input" style="width: 100%; height: 200rpx; padding: 30rpx; box-sizing: border-box;"> | 
|                         <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-price"> | 
|                         ¥{{confirmPayFee}} | 
|                     </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" style="margin-top: 12rpx;"> | 
|                     <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"> | 
|                 <view class="zhifu-head"> | 
|                     <view></view> | 
|                     <text>评价</text> | 
|                     <image @click="show2 = false" src="/static/icon/ic_close@2x.png" mode="widthFix"></image> | 
|                 </view> | 
|                 <view class="zhifu-pj"> | 
|                     <view class="zhifu-pj-label">服务评价</view> | 
|                     <view class="zhifu-pj-val"> | 
|                         <u-rate :count="count" activeColor="#FFC331" size="26" v-model="value" @click=""></u-rate> | 
|                     </view> | 
|                 </view> | 
|                 <view class="zhifu-textarea"> | 
|                     <image src="/static/icon/ic_pingjia@2x.png" mode="widthFix"></image> | 
|                     <u--textarea placeholder="请说说您对本次交易的感受" border="none" v-model="commentInfo" count></u--textarea> | 
|                 </view> | 
|                 <view class="zhifu-botton" style="margin-top: 60rpx;" @click="commentDo">立即评价</view> | 
|             </view> | 
|         </u-popup> | 
|     </view> | 
| </template> | 
|   | 
| <script> | 
|     import { mapState } from 'vuex' | 
|     import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue'; | 
|     export default { | 
|         computed: { | 
|             ...mapState( ['userInfo']) | 
|         }, | 
|         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:false, | 
|                 timeInfo:'00:00:00', | 
|                 lessTime:null, | 
|                 value:0, | 
|                 wayList:[], | 
|                 bgImg: require('@/static/image/bg_green@2x.png'), | 
|                 id: null, | 
|                 loading:false, | 
|                 commentInfo:'', | 
|                 info: {}, | 
|                 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  | 
|         }, | 
|         onShow(options) {  | 
|             this.getOrderData() | 
|         }, | 
|         methods:{ | 
|             getaccept(e) { | 
|                 if (!e.msg) return; | 
|                 this.$u.api.begin({ orderId: this.info.id }) | 
|                     .then(res => { | 
|                         if (res.code === 200) { | 
|                             this.getOrderData() | 
|                         } | 
|                     }) | 
|             }, | 
|             // 开始作业 | 
|             startJobs() { | 
|                 this.$u.api.begin({ orderId: this.info.id }) | 
|                     .then(res => { | 
|                         if (res.code === 200) { | 
|                             this.getOrderData() | 
|                         } | 
|                     }) | 
|             }, | 
|             // 修改 | 
|             jumpEdit() { | 
|                 if (this.info.type === 0 && this.info.workType === 0) { | 
|                     uni.navigateTo({ | 
|                         url: `/pages/using-workers/using-workers?id=${this.info.id}` | 
|                     }) | 
|                 } else if (this.info.type === 0 && this.info.workType === 1) { | 
|                     uni.navigateTo({ | 
|                         url: `/pages/sorting/sorting?id=${this.info.id}` | 
|                     }) | 
|                 } else if (this.info.type === 0 && this.info.workType === 2) { | 
|                     uni.navigateTo({ | 
|                         url: `/pages/packaging-worker/packaging-worker?id=${this.info.id}` | 
|                     }) | 
|                 } else if (this.info.type === 1) { | 
|                     uni.navigateTo({ | 
|                         url: `/pages/freight/freight?id=${this.info.id}` | 
|                     }) | 
|                 } | 
|             }, | 
|             payment1() { | 
|                 var that = this | 
|                 this.$u.api.doneOrder({ | 
|                     orderId: this.info.id | 
|                 }).then(res => { | 
|                     if (res.code === 200) { | 
|                         that.getOrderData() | 
|                     } | 
|                 }) | 
|             }, | 
|             confirmFee(){ | 
|                 console.log("confirmFee") | 
|             }, | 
|             payment() { | 
|                 var that = this | 
|                 // 订餐 | 
|                 if (this.info.type === 2) { | 
|                     this.$u.api.reusePay({ | 
|                         orderId: this.info.id | 
|                     }).then(res => { | 
|                         if (res.code === 200) { | 
|                             wx.requestPayment({ | 
|                                 timeStamp: res.data.object.timeStamp, | 
|                                 nonceStr: res.data.object.nonceStr, | 
|                                 package: res.data.object.packageVal, | 
|                                 signType: res.data.object.signType, | 
|                                 paySign: res.data.object.paySign, | 
|                                 success (res1) { | 
|                                     if (res1.errMsg = 'requestPayment:ok') { | 
|                                         that.show1 = false | 
|                                         uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 }); | 
|                                         that.getOrderData() | 
|                                     } | 
|                                 }, | 
|                                 fail(err) { | 
|                                     console.log(err) | 
|                                 } | 
|                             }) | 
|                         } | 
|                     }) | 
|                 } else { | 
|                     this.$u.api.doneOrder({ | 
|                         orderId: this.info.id, | 
|                         amount: Number(this.amount) * 100 | 
|                     }).then(res => { | 
|                         if (res.code === 200) { | 
|                             wx.requestPayment({ | 
|                                 timeStamp: res.data.object.timeStamp, | 
|                                 nonceStr: res.data.object.nonceStr, | 
|                                 package: res.data.object.packageVal, | 
|                                 signType: res.data.object.signType, | 
|                                 paySign: res.data.object.paySign, | 
|                                 success (res1) { | 
|                                     if (res1.errMsg = 'requestPayment:ok') { | 
|                                         that.show1 = false | 
|                                         uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 }); | 
|                                         that.getOrderData() | 
|                                     } | 
|                                 }, | 
|                                 fail(err) { | 
|                                     console.log(err) | 
|                                 } | 
|                             }) | 
|                         } | 
|                     }) | 
|                 } | 
|             }, | 
|             commentDo(){ | 
|                 var that = this | 
|                 var param = { info: that.commentInfo,level:that.value||0,orderId: this.id} | 
|                 this.$u.api.comment(param).then(res =>{ | 
|                     if(res.code ===200){ | 
|                         that.show2=false | 
|                         uni.showToast({ title: '评价成功', icon: 'error', duration: 2000 }); | 
|                         that.getOrderData() | 
|                     } | 
|                 })  | 
|             }, | 
|             beginDo(){ | 
|                 var that = this | 
|                 var param = {orderId: this.id} | 
|                 this.$u.api.begin(param).then(res =>{ | 
|                     if(res.code ===200){ | 
|                         that.show3=false | 
|                         uni.showToast({ title: '操作成功', icon: 'error', duration: 2000 }); | 
|                         that.getOrderData() | 
|                     } | 
|                 })  | 
|             }, | 
|             confirmUpdDo(status){ | 
|                 var that = this | 
|                 var param = {orderId: this.id,status:status} | 
|                 this.$u.api.confirmUpd(param).then(res =>{ | 
|                     if(res.code ===200){ | 
|                         that.show5=false | 
|                         uni.showToast({ title: '确认成功', icon: 'error', duration: 2000 }); | 
|                         if(status==1){ | 
|                             uni.navigateBack({ delta: 1 }) | 
|                         }else{ | 
|                             that.getOrderData() | 
|                         }  | 
|                     } | 
|                 })  | 
|             }, | 
|             acceptDo(){ | 
|                 var that = this | 
|                 var param = {orderId: this.id} | 
|                 this.$u.api.accept(param).then(res =>{ | 
|                     if(res.code ===200){ | 
|                         that.show6=false | 
|                         uni.showToast({ title: '抢单成功', icon: 'error', duration: 2000 }); | 
|                         that.getOrderData() | 
|                     } | 
|                 })  | 
|             }, | 
|             cancelDo(){ | 
|                 var that = this | 
|                 uni.requestSubscribeMessage({ | 
|                     tmplIds: ['AA97cHjvlPiNO4viMkVe4JifCf9TD5b5Eb7s6El3VS8'], | 
|                     success(res) { | 
|                         var param ={ orderId:that.id} | 
|                         that.$u.api.cancelOrder(param).then(res =>{ | 
|                             if(res.code ===200){ | 
|                                 that.show=false | 
|                                 uni.showToast({ title: '订单取消成功', icon: 'error', duration: 2000 }); | 
|                                 if(that.userInfo.id !== that.info.releaseMemberId){ | 
|                                     uni.navigateBack({ delta: 1 }) | 
|                                 }else{ | 
|                                     that.getOrderData() | 
|                                 }  | 
|                             } | 
|                          })  | 
|                     }, | 
|                     fail(err) { | 
|                         console.log(err) | 
|                     } | 
|                 }) | 
|                  | 
|             }, | 
|             previemImg(src){ | 
|                 uni.previewImage({ | 
|                     current: src, | 
|                     urls: [src] | 
|                 }); | 
|             }, | 
|             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){ | 
|                         if(this.info.isUpdate==1){ | 
|                             return '' | 
|                         } | 
|                         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){ | 
|                         if(this.info.isUpdate==1){ | 
|                             return '订单已修改,请等待接单方确认' | 
|                         } | 
|                         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 '订单已取消' | 
|                     } | 
|                 } | 
|             }, | 
|             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.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 ='次'  | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </script> | 
|   | 
| <style> | 
|     page { | 
|         background-color: #F7F7F7; | 
|     } | 
|     .u-textarea__count { | 
|         background-color: rgba(0, 0, 0, 0) !important; | 
|     } | 
|     .u-textarea { | 
|         width: 100% !important; | 
|         height: 100% !important; | 
|         padding: 0 !important; | 
|         background-color: rgba(0, 0, 0, 0) !important; | 
|     } | 
|     textarea { | 
|         width: 100% !important; | 
|         height: 100% !important; | 
|     } | 
| </style> | 
|   | 
| <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; | 
|                 justify-content: space-between; | 
|                 .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-danw { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     flex-shrink: 0; | 
|                     font-weight: 400; | 
|                     font-size: 30rpx; | 
|                     color: #333333; | 
|                     margin-left: 10rpx; | 
|                 } | 
|                 .querenfee-c-price { | 
|                     font-weight: 600; | 
|                     font-size: 44rpx; | 
|                     color: #FF0000; | 
|                 } | 
|                 .querenfee-c-info1 { | 
|                     width: 50%; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     font-weight: 600; | 
|                     font-size: 32rpx; | 
|                     color: #222222; | 
|                 } | 
|                 .querenfee-tips{ | 
|                     width: 100%; | 
|                     font-weight: 400; | 
|                     font-size: 26rpx; | 
|                     color: #999999; | 
|                     line-height: 36rpx;  | 
|                 } | 
|                 .money{ | 
|                     width: 50%; | 
|                     text-align: right; | 
|                     font-weight: 600; | 
|                     font-size: 34rpx; | 
|                     color: #FF0000 !important; | 
|                 } | 
|                 .querenfee-c-input { | 
|                     width: 260rpx; | 
|                     height: 100rpx; | 
|                     padding: 10rpx 30rpx; | 
|                     box-sizing: border-box; | 
|                     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; | 
|                         font-size: 56rpx; | 
|                         color: #222222; | 
|                         text-align: right; | 
|                         .querenfee-c-input-placeholder { | 
|                             font-size: 32rpx !important; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|             .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: 40rpx; | 
|             } | 
|         } | 
|         .zhifu { | 
|             width: 100%; | 
|             padding: 40rpx 30rpx; | 
|             box-sizing: border-box; | 
|             .zhifu-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; | 
|                 } | 
|             } | 
|             .zhifu-pj { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 margin-top: 40rpx; | 
|                 .zhifu-pj-label { | 
|                     flex-shrink: 0; | 
|                     margin-right: 40rpx; | 
|                 } | 
|                 .zhifu-pj-val { | 
|                     flex: 1; | 
|                      | 
|                 } | 
|             } | 
|             .zhifu-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; | 
|                 } | 
|             } | 
|             .zhifu-c { | 
|                 width: 100%; | 
|                 margin-top: 46rpx; | 
|                 .zhifu-c-info { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     font-weight: 500; | 
|                     font-size: 30rpx; | 
|                     color: #222222; | 
|                     margin-bottom: 30rpx; | 
|                     text { | 
|                         color: #00BC12; | 
|                         margin-left: 10rpx; | 
|                     } | 
|                 } | 
|                 .zhifu-c-info1 { | 
|                     font-weight: 400; | 
|                     font-size: 30rpx; | 
|                     color: #666666; | 
|                     margin-bottom: 20rpx; | 
|                 } | 
|                 .money{ | 
|                     color: red !important;  | 
|                 } | 
|                 .zhifu-c-input { | 
|                     width: 100%; | 
|                     padding: 0 30rpx; | 
|                     box-sizing: border-box; | 
|                     height: 112rpx; | 
|                     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; | 
|                         font-size: 50rpx; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|             } | 
|             .zhifu-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; | 
|             } | 
|         } | 
|         .slot-content { | 
|             width: 100%; | 
|             text-align: center; | 
|             font-weight: 400; | 
|             font-size: 30rpx; | 
|             color: #333333; | 
|             margin: 30rpx 0; | 
|         } | 
|         .btn1 { | 
|             width: 264rpx; | 
|             height: 88rpx; | 
|             line-height: 88rpx; | 
|             text-align: center; | 
|             font-weight: 400; | 
|             font-size: 32rpx; | 
|             color: #666666; | 
|             border-radius: 44rpx; | 
|             border: 1rpx solid #B2B2B2; | 
|         } | 
|         .btn2 { | 
|             width: 264rpx; | 
|             height: 88rpx; | 
|             line-height: 88rpx; | 
|             text-align: center; | 
|             font-weight: 500; | 
|             font-size: 32rpx; | 
|             color: #FFFFFF; | 
|             background: #00BC12; | 
|             border-radius: 44rpx; | 
|         } | 
|         .order-footer { | 
|             width: 100%; | 
|             position: fixed; | 
|             bottom: 0; | 
|             left: 0; | 
|             background-color: #ffffff; | 
|             z-index: 9; | 
|             height: calc(108rpx + env(safe-area-inset-bottom)); | 
|             .order-footer-btn { | 
|                 width: 100%; | 
|                 height: 108rpx; | 
|                 padding: 0 30rpx; | 
|                 box-sizing: border-box; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between;  | 
|                 .order-footer-btn-a { | 
|                     flex: 1; | 
|                     height: 88rpx; | 
|                     line-height: 88rpx; | 
|                     text-align: center; | 
|                     font-weight: 500; | 
|                     font-size: 32rpx; | 
|                     color: #666666; | 
|                     border-radius: 44rpx; | 
|                     border: 1rpx solid #B2B2B2; | 
|                 } | 
|                 .order-footer-btn-b { | 
|                     flex: 1; | 
|                     height: 88rpx; | 
|                     line-height: 88rpx; | 
|                     text-align: center; | 
|                     font-weight: 500; | 
|                     font-size: 32rpx; | 
|                     color: #FFFFFF; | 
|                     background: #00BC12; | 
|                     border-radius: 44rpx; | 
|                 } | 
|             } | 
|         } | 
|         .order-ren { | 
|             width: 100%; | 
|             height: 150rpx; | 
|             background: #FFFFFF; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: space-between; | 
|             padding: 0 30rpx; | 
|             box-sizing: border-box; | 
|             margin-bottom: 20rpx; | 
|             .order-ren-left { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 flex: 1; | 
|                 .order-ren-left-img { | 
|                     width: 80rpx; | 
|                     height: 80rpx; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: center; | 
|                     overflow: hidden; | 
|                     border-radius: 50%; | 
|                     margin-right: 15rpx; | 
|                     image { | 
|                         width: 100%; | 
|                     } | 
|                 } | 
|                 text { | 
|                     font-weight: 400; | 
|                     font-size: 30rpx; | 
|                     color: #222222; | 
|                     margin-right: 15rpx; | 
|                 } | 
|                 .order-ren-left-tip { | 
|                     padding: 4rpx 12rpx; | 
|                     border-radius: 8rpx; | 
|                     border: 2rpx solid #FD9E24; | 
|                     font-weight: 400; | 
|                     font-size: 24rpx; | 
|                     color: #FF7200; | 
|                 } | 
|             } | 
|             .order-ren-x { | 
|                 width: 1rpx; | 
|                 height: 90rpx; | 
|                 margin-right: 50rpx; | 
|                 background-color: #E5E5E5; | 
|             } | 
|             .order-ren-lx { | 
|                 flex-shrink: 0; | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 align-items: center; | 
|                 justify-content: center; | 
|                 image { | 
|                     width: 34rpx; | 
|                     height: 34rpx; | 
|                 } | 
|                 text { | 
|                     font-weight: 400; | 
|                     font-size: 26rpx; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|         } | 
|         .order-info { | 
|             width: 100%; | 
|             padding: 30rpx; | 
|             box-sizing: border-box; | 
|             background-color: #ffffff; | 
|             margin-bottom: 20rpx; | 
|             &:last-child { | 
|                 margin: 0 !important; | 
|             } | 
|             .order-info-list { | 
|                 width: 100%; | 
|                 .order-info-list-item { | 
|                     width: 100%; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: space-between; | 
|                     margin-bottom: 30rpx; | 
|                     &:last-child { | 
|                         margin: 0 !important; | 
|                     } | 
|                     text { | 
|                         font-weight: 400; | 
|                         font-size: 26rpx; | 
|                         color: #777777; | 
|                     } | 
|                 } | 
|             } | 
|             .order-info-remark { | 
|                 font-weight: 400; | 
|                 font-size: 28rpx; | 
|                 color: #333333; | 
|                 margin-top: 36rpx; | 
|             } | 
|             .order-info-title { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 margin-bottom: 20rpx; | 
|                 .x { | 
|                     width: 6rpx; | 
|                     height: 30rpx; | 
|                     background: #00BC12; | 
|                     border-radius: 4rpx; | 
|                     margin-right: 20rpx; | 
|                 } | 
|                 text { | 
|                     font-weight: 600; | 
|                     font-size: 32rpx; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|             .order-info-wz { | 
|                 font-weight: 400; | 
|                 font-size: 28rpx; | 
|                 color: #888888; | 
|                 margin-bottom: 30rpx; | 
|             } | 
|             .order-info-x { | 
|                 width: 100%; | 
|                 height: 1rpx; | 
|                 margin: 20rpx 0 30rpx 0; | 
|                 background-color: #E5E5E5; | 
|             } | 
|             .order-info-price { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 .price-row { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     justify-content: space-between; | 
|                     margin-bottom: 30rpx; | 
|                     &:last-child { | 
|                         margin: 0 !important; | 
|                     } | 
|                     .price-row-label {  | 
|                         flex-shrink: 0; | 
|                         margin-right: 30rpx; | 
|                         font-weight: 400; | 
|                         font-size: 30rpx; | 
|                         color: #777777; | 
|                     } | 
|                     .price-row-val { | 
|                         font-weight: 500; | 
|                         font-size: 30rpx; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|             } | 
|             .order-info-supplement { | 
|                 width: 100%; | 
|                 margin-bottom: 40rpx; | 
|                 .order-info-supplement-title { | 
|                     font-weight: 600; | 
|                     font-size: 30rpx; | 
|                     color: #222222; | 
|                     margin-bottom: 16rpx; | 
|                 } | 
|                 .order-info-supplement-val { | 
|                     font-weight: 400; | 
|                     font-size: 28rpx; | 
|                     color: #333333; | 
|                     margin-bottom: 20rpx; | 
|                 } | 
|                 .order-info-supplement-list { | 
|                     width: 100%; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     flex-wrap: wrap; | 
|                     justify-content: space-between; | 
|                     .order-info-supplement-list-item { | 
|                         width: 156rpx; | 
|                         height: 156rpx; | 
|                         display: flex; | 
|                         align-items: center; | 
|                         justify-content: center; | 
|                         border-radius: 8rpx; | 
|                         overflow: hidden; | 
|                         image { | 
|                             width: 100%; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|             .order-info-address { | 
|                 width: 100%; | 
|                 display: flex; | 
|                 align-items: start; | 
|                 margin-bottom: 20rpx; | 
|                 image { | 
|                     width: 28rpx; | 
|                     height: 28rpx; | 
|                     flex-shrink: 0; | 
|                     margin-right: 18rpx; | 
|                 } | 
|                 .order-info-address-info { | 
|                     flex: 1; | 
|                     display: flex; | 
|                     flex-direction: column; | 
|                     text { | 
|                         &:nth-child(1) { | 
|                             font-weight: 400; | 
|                             font-size: 28rpx; | 
|                             color: #222222; | 
|                         } | 
|                         &:nth-child(2) { | 
|                             font-weight: 400; | 
|                             font-size: 26rpx; | 
|                             color: #999999; | 
|                             margin-top: 16rpx; | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .order-quxiaole { | 
|             padding: 20rpx 0; | 
|             box-sizing: border-box; | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             font-weight: 600; | 
|             font-size: 40rpx; | 
|             color: #111111; | 
|             background-color: #ffffff; | 
|         } | 
|         .order-head { | 
|             width: 100%; | 
|             height: 172rpx; | 
|             display: flex; | 
|             flex-direction: column; | 
|             align-items: center; | 
|             justify-content: center; | 
|             background-repeat: no-repeat; | 
|             background-size: 100% 100%; | 
|             .order-head-status { | 
|                 font-weight: 600; | 
|                 font-size: 40rpx; | 
|                 color: #111111; | 
|             } | 
|             .order-head-info { | 
|                 font-weight: 400; | 
|                 font-size: 26rpx; | 
|                 color: #777777; | 
|                 margin-top: 18rpx; | 
|             } | 
|         } | 
|         .order-user { | 
|             width: 100%; | 
|             padding: 30rpx; | 
|             box-sizing: border-box; | 
|             background-color: #ffffff; | 
|             .order-user-info { | 
|                 width: 100%; | 
|                 height: 150rpx; | 
|                 padding: 0 30rpx; | 
|                 box-sizing: border-box; | 
|                 background: #F7F8F5; | 
|                 border-radius: 16rpx; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 .user-info-l { | 
|                     flex: 1; | 
|                     display: flex; | 
|                     align-items: center; | 
|                     .user-info-l-image { | 
|                         flex-shrink: 0; | 
|                         width: 80rpx; | 
|                         height: 80rpx; | 
|                         border-radius: 50%; | 
|                         overflow: hidden; | 
|                         display: flex; | 
|                         align-items: center; | 
|                         justify-content: center; | 
|                         margin-right: 20rpx; | 
|                         image { | 
|                             width: 100%; | 
|                         } | 
|                     } | 
|                     .user-info-l-i { | 
|                         flex: 1; | 
|                         height: 100%; | 
|                         display: flex; | 
|                         flex-direction: column; | 
|                         justify-content: space-between; | 
|                         .user-info-l-i-top { | 
|                             width: 100%; | 
|                             display: flex; | 
|                             align-items: center; | 
|                             text { | 
|                                 font-weight: 400; | 
|                                 font-size: 30rpx; | 
|                                 color: #222222; | 
|                             } | 
|                             .user-info-l-i-top-jdf { | 
|                                 width: 96rpx; | 
|                                 height: 42rpx; | 
|                                 line-height: 42rpx; | 
|                                 text-align: center; | 
|                                 font-weight: 400; | 
|                                 font-size: 24rpx; | 
|                                 color: #FF7200; | 
|                                 border-radius: 8rpx; | 
|                                 border: 2rpx solid #FD9E24; | 
|                                 margin-left: 10rpx; | 
|                             } | 
|                         } | 
|                         .user-info-l-i-bottom { | 
|                             display: flex; | 
|                             align-items: center; | 
|                             margin-top: 14rpx; | 
|                             .user-info-l-i-bottom-item { | 
|                                 display: flex; | 
|                                 align-items: center; | 
|                                 margin-right: 60rpx; | 
|                                 &:last-child { | 
|                                     margin: 0 !important; | 
|                                 } | 
|                                 text { | 
|                                     &:nth-child(1) { | 
|                                         font-weight: 400; | 
|                                         font-size: 24rpx; | 
|                                         color: #777777; | 
|                                     } | 
|                                     &:nth-child(2) { | 
|                                         font-weight: 400; | 
|                                         font-size: 24rpx; | 
|                                         color: #222222; | 
|                                     } | 
|                                 } | 
|                             } | 
|                         } | 
|                     } | 
|                 } | 
|                 .user-info-r { | 
|                     flex-shrink: 0; | 
|                     display: flex; | 
|                     flex-direction: column; | 
|                     align-items: center; | 
|                     justify-content: center; | 
|                     image { | 
|                         width: 33rpx; | 
|                         height: 33rpx; | 
|                     } | 
|                     text { | 
|                         font-weight: 400; | 
|                         font-size: 26rpx; | 
|                         color: #222222; | 
|                         margin-top: 12rpx; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .order-quxiao { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             background-color: #ffffff; | 
|             .order-quxiao-btn { | 
|                 width: 160rpx; | 
|                 height: 64rpx; | 
|                 line-height: 64rpx; | 
|                 text-align: center; | 
|                 font-weight: 400; | 
|                 font-size: 28rpx; | 
|                 color: #666666; | 
|                 border-radius: 34rpx; | 
|                 border: 1rpx solid #B2B2B2; | 
|             } | 
|             .order-quxiao-btn1 { | 
|                 width: 160rpx; | 
|                 height: 64rpx; | 
|                 line-height: 64rpx; | 
|                 text-align: center; | 
|                 border-radius: 34rpx; | 
|                 font-weight: 400; | 
|                 font-size: 28rpx; | 
|                 color: #00BC12; | 
|                 margin-left: 20rpx; | 
|                 border: 1rpx solid #00BC12; | 
|             } | 
|         } | 
|     } | 
|     .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> |