dingdong-master/pages/order-manage/order-manage.vue

1051 lines
44 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">接收的任务</block>
</cu-custom>
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
<!-- 条件筛选栏 -->
<view class="padding bg-white solid-bottom">
<view class="flex justify-start align-center">
<text class="margin-right-xs inline-lable">全部</text>
<!-- <my-uni-combox class="inline-combox margin-right-xs" :candidates="stateList" placeholder="请选择"
v-model="formData.state"></my-uni-combox>
<my-uni-combox class="inline-combox" :candidates="subStateList" placeholder="请选择"
v-model="formData.subState"></my-uni-combox> -->
<!-- 区域筛选picker -->
<picker class="inline-combox margin-right-xs" :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
<input class="radius-input" disabled :value="formData.area ? formData.area[0].areaName + '-' + formData.area[1].areaName + '-' + formData.area[2].areaName : ''"
placeholder="请选择区域"></input>
</picker>
<!-- 品类筛选picker -->
<picker class="inline-combox" :mode="'multiSelector'" @change="categoryChange" @columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'" :range="categoryList">
<input class="line-input radius-input" disabled :value="formData.category ? formData.category[0].goodsCategoryName + '-' + formData.category[1].goodsCategoryName + '-' + formData.category[2].goodsCategoryName : ''"
placeholder="请选择品类"></input>
</picker>
</view>
<view class="flex justify-between align-center margin-top-xs">
<input class="line-input radius-input margin-right-sm" v-model="formData.orderKeywords"
placeholder="请输入订单关键字"></input>
<view class="text-xl text-bold">
<text class="cuIcon-search margin-right-sm" @click="searchOrder"></text>
<text class="cuIcon-refresh" @click="resetConditions"></text>
</view>
</view>
</view>
<!-- 状态分类tab -->
<view class="cu-list grid no-border col-5 padding-top-sm bg-white">
<view class="cu-item" :class="index==stateCur?'bg-main-color light cur':''" v-for="(item,index) in stateList" :key="index" :data-id="index" @tap="statusSelect">
<view class="margin-bottom-xs">{{item.name}}</view>
<view v-if="item.code === 0">({{orderStatistics.newOrderNum}})</view>
<!-- <view v-else-if="item.code === 100">{{orderStatistics.}}</view> -->
<view v-else-if="item.code === 101">({{orderStatistics.tomorrowOrderNum}})</view>
<view v-else-if="item.code === 102">({{orderStatistics.todayOrderNum}})</view>
<view v-else-if="item.code === 103">({{orderStatistics.overTimeOrderNum}})</view>
<view v-else>(0)</view>
</view>
<!-- <view class="cu-item" :class="stateCur === 0 ? 'bg-main-color light' : ''" :data-id="0" @tap="statusSelect">
<view class="margin-bottom-xs">超时单</view>
<view>({{myOrders.summary.overtimeOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 1 ? 'bg-main-color light' : ''" :data-id="1" @tap="statusSelect">
<view class="margin-bottom-xs">今日单</view>
<view>({{myOrders.summary.todayOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 2 ? 'bg-main-color light' : ''" :data-id="2" @tap="statusSelect">
<view class="margin-bottom-xs">明日单</view>
<view>({{myOrders.summary.tomorrowOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 3 ? 'bg-main-color light' : ''" :data-id="3" @tap="statusSelect">
<view class="margin-bottom-xs">急报单</view>
<view>({{myOrders.summary.urgentMsgOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 0 ? 'bg-main-color light' : ''" :data-id="4" @tap="statusSelect">
<view class="margin-bottom-xs">新订单</view>
<view>({{myOrders.summary.newOrderNum}})</view>
</view> -->
</view>
<!-- 子状态分类tab -->
<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true" :scroll-left="scrollLeft">
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in subStateList"
:key="index" @tap="tabSelect" :data-id="index">
<text class="margin-right-xs">{{item.name}}</text>
<text v-if="item.code === 1">({{orderStatistics.planOrderNum}})</text>
<text v-else-if="item.code === 2">({{orderStatistics.waitServOrderNum}})</text>
<text v-else-if="item.code === 3">({{orderStatistics.servingOrderNum}})</text>
<text v-else-if="item.code === 4">({{orderStatistics.waitSureOrderNum}})</text>
<text v-else-if="item.code === 5"></text>
<text v-else>(0)</text>
</view>
</scroll-view>
</view>
<!-- tab content -->
<view class="padding bg-white margin-top-sm margin-lr-sm" v-for="(order, index) in orderList">
<view class="flex justify-between">
<view class="text-lg text-bold text-cut">{{order.goodsName}}</view>
<!-- 不同状态订单使用不同角标 -->
<view v-if="order.orderStatus === 0" class="right-tag padding-lr-sm padding-tb-xs bg-cyan">新</view>
<view v-else-if="order.orderStatus === 1" class="right-tag padding-lr-sm padding-tb-xs bg-main-color">未</view>
<view v-else-if="order.orderStatus === 2" class="right-tag padding-lr-sm padding-tb-xs bg-yellow">待</view>
<view v-else-if="order.orderStatus === 3" class="right-tag padding-lr-sm padding-tb-xs bg-purple">服</view>
<view v-else-if="order.orderStatus === 4" class="right-tag padding-lr-sm padding-tb-xs bg-orange">确</view>
<view v-else-if="order.orderStatus === 5" class="right-tag padding-lr-sm padding-tb-xs bg-green">完</view>
</view>
<view>
<view v-if="order.isOverTime" class="float-left">
<view v-if="order.orderStatus === 0" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未接单</view>
<view v-else-if="order.orderStatus === 1" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未预约</view>
<view v-else-if="order.orderStatus === 2" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未上门</view>
<view v-else-if="order.orderStatus === 3" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未完单</view>
</view>
<view class="float-left" v-if="order.orderTimeoutRecords" v-for="(timeoutRecord, recordIndex) in order.orderTimeoutRecords">
<view v-if="timeoutRecord.orderStatus === 0" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未接单</view>
<view v-else-if="timeoutRecord.orderStatus === 1" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未预约</view>
<view v-else-if="timeoutRecord.orderStatus === 2" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未上门</view>
<view v-else-if="timeoutRecord.orderStatus === 3" class='cu-tag margin-right-xs radius line-red margin-top-xs'>超时未完单</view>
</view>
</view>
<view class="float-clear"></view>
<view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-people"></text></text>
<text>姓名:{{order.customerName}}</text>
</view>
<view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-location"></text></text>
<text class="margin-right-xs">{{order.address}}</text>
<text class="text-lg" @tap="copyData(order.address)"><text class="cuIcon-copy"></text></text>
</view>
<view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>服务时间:{{order.expectTimeStart + '~' + order.expectTimeEnd}}</text>
</view>
<view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 2">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>上门时间:{{order.workBeginTime}}</text>
</view>
<view class="margin-top-sm flex justify-start align-center" v-if="order.orderStatus === 2">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-repair"></text></text>
<text>距上门:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.expectTimeEnd).day"
:hour="$dateUtil.countDownDiff(order.expectTimeEnd).hour"
:minute="$dateUtil.countDownDiff(order.expectTimeEnd).min"
:second="$dateUtil.countDownDiff(order.expectTimeEnd).seconds">
</uni-countdown>
</view>
<view class="margin-top-sm" v-if="order.orderDetailId != null && order.orderStatus > 3">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>完成时间:{{order.workFinishTime}}</text>
</view>
<view class="margin-top-sm flex justify-start align-center" v-if="order.subState === 4 && order.chargeReachDate">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>距到帐:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.chargeReachDate).day"
:hour="$dateUtil.countDownDiff(order.chargeReachDate).hour"
:minute="$dateUtil.countDownDiff(order.chargeReachDate).min"
:second="$dateUtil.countDownDiff(order.chargeReachDate).seconds">
</uni-countdown>
</view>
<!-- 不同状态订单支持不同操作按钮 -->
<view v-if="order.orderStatus === 0">
<!-- <button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrder" @click="getCanAssignList(order)" @tap="togglePopup($event, order)">派单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">改价</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">转发</button> -->
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail(order)">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="updateOrderStatus(order.orderMasterId, 1, 'updateMasterOrder')" v-if="order.orderDetailId == null">确认接单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="updateOrderStatus(order.orderDetailId, 1, 'updateDetailOrder')" v-else>确认接单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" v-if="order.orderDetailId == null" @click="rejectMasterOrder(order)">拒绝接单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" v-else @click="rejectDetailOrder(order)">拒绝接单</button>
</view>
<view v-if="order.orderStatus === 1">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail(order)">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrderPopup" @click="getCanAssignList(order)" @tap="togglePopup($event, order)" v-show="order.orderDetailId == null">派单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="assignWork2MySelf(order)" v-show="order.orderDetailId == null">自己承接</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showTimeArrangeModal" @tap="showModal($event, order)">预约时间</button>
</view>
<view v-if="order.orderStatus === 2">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail(order)">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.customerPhone)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, order)" v-show="order.orderDetailId != null">修改时间</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="workBegin(order)" v-show="order.orderDetailId != null">立即上门</button>
</view>
<view v-if="order.orderStatus === 3">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail(order)">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click = "changePrice($event, order)" data-ref="newServPriceOffline" data-modal="showNewServPriceOfflineModal" v-show="order.orderDetailId != null && order.payType === 1">报价/完单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click = "changePrice($event, order)" data-ref="newServPriceOnline" data-modal="showNewServPriceOnlineModal" v-show="order.orderDetailId != null && order.payType === 0">报价/完单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.customerPhone)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, order)" v-show="order.orderDetailId != null">重新排期</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="finishOrder(order)" v-if="order.payStatus === 1" v-show="order.orderDetailId != null">发起完单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showPayQrcodeModal" v-if="order.payStatus === 0" @tap="makePayQrcode($event, order)" v-show="order.orderDetailId != null">生成收款码</button>
</view>
<view v-if="order.orderStatus === 4 || order.orderStatus === 5">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail(order)">查看</button>
</view>
<!-- <view v-if="order.orderStatus === 'afterSaleService'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.customerPhone)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, order)">修改时间</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">立即上门</button>
</view> -->
<view v-if="order.afterServiceRecordList && order.afterServiceRecordList.length" class="bg-white margin-top-sm">
<view v-for="(afterServiceRecord, afterServiceRecordIndex) in order.afterServiceRecordList">
<view v-if="afterServiceRecord.createBy == 1" class="padding-tb solid-top">
<view class='cu-tag bg-main-color radius light'>客户发起</view>
<view v-if="afterServiceRecord.operType === 1">
<view class="flex justify-start align-end">
<text>退款申请:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).day"
:hour="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).hour"
:minute="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).min"
:second="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).seconds">
</uni-countdown>
</view>
<view>
<text>退款金额:</text>
<text>{{afterServiceRecord.refund}}</text>
</view>
<view>
<text>退款原因:</text>
<text>{{afterServiceRecord.customerReason}}</text>
</view>
<view class="grid col-3 grid-square flex-sub margin-top-sm">
<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 1">
<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
</view>
</view>
</view>
<view v-else-if="afterServiceRecord.operType === 2">
<view class="flex justify-start align-end">
<text>待处理售后:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).day"
:hour="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).hour"
:minute="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).min"
:second="$dateUtil.countDownDiff($dateUtil.addHours(afterServiceRecord.createTime, 24)).seconds">
</uni-countdown>
</view>
<view>
<text>售后原因:</text>
<text>{{afterServiceRecord.customerReason}}</text>
</view>
<view>
<text>完成操作:点击“处理完成”提交由客服回访!</text>
</view>
<view class="grid col-3 grid-square flex-sub margin-top-sm">
<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 1">
<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="flex justify-end align-end margin-tb-sm" v-if="!afterServiceRecord.updateBy">
<button class="cu-btn sm bg-yellow margin-right-sm" data-modal="rejectAfterSale" @tap="showModal($event, order)">拒绝处理</button>
<button class="cu-btn sm bg-yellow margin-right-sm" data-modal="agreeAfterSale" @tap="showModal($event, order)">处理完成</button>
</view>
</view>
<view v-if="afterServiceRecord.updateBy == 2" class="padding-tb solid-top">
<view class='cu-tag bg-main-color radius light'>师傅反馈</view>
<view v-if="afterServiceRecord.operType === 1">
<view class="margin-top-xs">
<text>师傅反馈结果:</text>
<text>{{afterServiceRecord.workerFeedbackResult === 1 ? '同意' : '拒绝'}}</text>
</view>
<view v-if="afterServiceRecord.workerFeedbackResult === 1">
<text>同意退款金额:</text>
<text>{{afterServiceRecord.agreedRefund}}</text>
</view>
<view>
<text>师傅反馈:</text>
<text v-if="afterServiceRecord.workerFeedbackReasonType === 1">客户原因</text>
<text v-else-if="afterServiceRecord.workerFeedbackReasonType === 2">师傅原因</text>
<text v-else>其他</text>
<text v-if="afterServiceRecord.workerFeedbackReason">{{"" + afterServiceRecord.workerFeedbackReason}}</text>
</view>
<view class="grid col-3 grid-square flex-sub margin-top-sm">
<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 2">
<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
</view>
</view>
</view>
<view v-else-if="afterServiceRecord.operType === 2">
<view class="margin-top-xs">
<text>师傅反馈结果:</text>
<text>{{afterServiceRecord.workerFeedbackResult === 1 ? '同意' : '拒绝'}}</text>
</view>
<view>
<text>师傅反馈:</text>
<text v-if="afterServiceRecord.workerFeedbackReasonType === 1">客户原因</text>
<text v-else-if="afterServiceRecord.workerFeedbackReasonType === 2">师傅原因</text>
<text v-else>其他</text>
<text v-if="afterServiceRecord.workerFeedbackReason">{{"" + afterServiceRecord.workerFeedbackReason}}</text>
</view>
<view class="grid col-3 grid-square flex-sub margin-top-sm">
<view class="bg-img" v-for="(imgObj, imgIndex) in afterServiceRecord.imgsList" :key="imgIndex" v-if="imgObj.imgUploadBy === 2">
<image :src="imgObj.imgUrl" @tap="viewImage($event, [imgObj.imgUrl])" :data-url="imgObj.imgUrl" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<view v-if="afterServiceRecord.customerFinalCheck != null" class="padding-tb solid-top">
<view class='cu-tag bg-main-color radius light'>客户最终确认</view>
<view class="margin-top-xs">{{afterServiceRecord.customerFinalCheck === 1 ? '同意' : '不同意'}}</view>
<view class="text-red" v-if="afterServiceRecord.customerFinalCheck === 0">订单交由平台协商处理</view>
</view>
</view>
</view>
<view class="margin-top-sm solid-top padding-top-sm" v-if="Boolean(order.customerRemark)">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-comment"></text></text>
<text>备注:{{order.customerRemark}}</text>
</view>
</view>
<view :class="tabCur !== 4 ? 'cu-tabbar-height' : ''"></view>
<load-status-bar v-show="tabCur === 4 || tabCur === 5" ref="loadStatusBar" @loadMore="loadMasterOrderPage"></load-status-bar>
<!-- 模态框 -->
<time-arrange :show="showTimeArrangeModal" :data="curOrder" :curDate="curDate" @showArrangeFailTime="showArrangeFailTime" @editServTime="editServTime"></time-arrange>
<time-arrange-fail :show="showArrangeFailTimeModal" :data="curOrder"></time-arrange-fail>
<new-serv-price-online ref="newServPriceOnline" :show="showNewServPriceOnlineModal" :data="curOrder" @finishOrder="finishOrder"></new-serv-price-online>
<new-serv-price-offline ref="newServPriceOffline" :show="showNewServPriceOfflineModal" :data="curOrder" @finishOrder="finishOrder"></new-serv-price-offline>
<pay-qrcode ref="payQrcode" :show="showPayQrcodeModal" :data="curOrder" @finishQrPay="finishQrPay"></pay-qrcode>
<edit-time-arrange :show="showEditTimeArrangeModal" :data="curOrder" :curDate="curDate" @showArrangeFailTime="showArrangeFailTime" @editServTime="editServTime" :ifRollback2WS="true"></edit-time-arrange>
<urgent-msg :show="sendUrgentMsgModal" @hideModal="hideModal"></urgent-msg>
<pic-modal ref="showPicModal" :imgList="picModalImgList"></pic-modal>
<!-- popup -->
<uni-popup ref="dispatchOrderPopup" type="bottom" @change="changePopupState">
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" data-popup="dispatchOrderPopup" @click="togglePopup"><text
class="cuIcon-close"></text></view>
<view class="bg-white padding" style="padding-top: 74rpx; min-height: 600rpx;">
<dispatch-order ref="dispatchOrder" v-if="myTeamMembers && myTeamMembers.length > 0" @assignWork="assignWork" :members="myTeamMembers" :totalMoney="curOrder.totalMoney"></dispatch-order>
<view v-else class="align-center-view text-xl">无可指派的师傅</view>
</view>
<!-- 底部占位 -->
<view class="cu-bar bg-white fixed-bottom-bar"></view>
</uni-popup>
<!-- 账户及实名弹窗 -->
<vertify-bank-bind ref="vertifyBankBind"></vertify-bank-bind>
<vertify-certify ref="vertifyCertify"></vertify-certify>
<agree-after-sale :show="agreeAfterSale" :data="curOrder" @confirmFeedback="reloadMasterOrderPage"></agree-after-sale>
<reject-after-sale :show="rejectAfterSale" :data="curOrder" @confirmFeedback="reloadMasterOrderPage"></reject-after-sale>
</view>
</template>
<script>
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
import timeArrange from '@/pages/order-manage/modal/time-arrange.vue';
import timeArrangeFail from '@/pages/order-manage/modal/time-arrange-fail.vue';
import editTimeArrange from '@/pages/order-manage/modal/edit-time-arrange.vue';
import dispatchOrder from '@/pages/order-manage/dispatch-order.vue';
import newServPriceOnline from '@/pages/order-manage/modal/new-serv-price-online.vue';
import newServPriceOffline from '@/pages/order-manage/modal/new-serv-price-offline.vue';
import payQrcode from '@/pages/order-manage/modal/pay-qrcode.vue';
import urgentMsg from '@/pages/order-manage/modal/urgent-msg.vue';
import picModal from '@/components/modal/pic-modal.vue';
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
import agreeAfterSale from '@/pages/order-manage/modal/agree-after-sale.vue';
import rejectAfterSale from '@/pages/order-manage/modal/reject-after-sale.vue';
export default {
components: {
myUniCombox,
timeArrange,
timeArrangeFail,
editTimeArrange,
dispatchOrder,
newServPriceOnline,
newServPriceOffline,
payQrcode,
urgentMsg,
picModal,
loadStatusBar,
agreeAfterSale,
rejectAfterSale
},
data() {
return {
formData: {
category: null,
area: null,
orderKeywords: ''
},
areaList: [],
areaMultiIndex: [0, 0, 0],
categoryList: [],
categoryMultiIndex: [0, 0, 0],
stateList: [{
code: 103,
name: '超时单'
}, {
code: 102,
name: '今日单'
}, {
code: 101,
name: '明日单'
}, {
code: 100,
name: '急报单'
}, {
code: 0,
name: '新订单'
}],
subStateList: [{
code: 1,
name: '未约/未排'
}, {
code: 2,
name: '待上门'
}, {
code: 3,
name: '服务中'
}, {
code: 4,
name: '待确认'
},
// {
// code: '-',
// name: '售后中'
// },
{
// code: 5,
name: '售后中'
}, {
code: 5,
name: '已完成'
}],
myOrders: {},
orderList: [],
// pageParams: [],
pageNum: 1,
pageSize: 0,
curOrder: {},
myTeamMembers: [],
scrollLeft: 0,
stickyTop: this.CustomBar,
tabCur: 0,
stateCur: null,
showTimeArrangeModal: false,
showArrangeFailTimeModal: false,
showNewServPriceOnlineModal: false,
showNewServPriceOfflineModal: false,
showPayQrcodeModal: false,
showEditTimeArrangeModal: false,
sendUrgentMsgModal: false,
agreeAfterSale: false,
rejectAfterSale: false,
ifShowPageMeta: false,
picModalImgList: [],
curDate: '',
curUserInfo: {},
orderStatistics: {}
}
},
onLoad() {
this.loadData();
this.bindEvent();
},
onUnload() {
this.offBindEvent();
},
methods: {
async loadData() {
// 获取当前登录用户信息
this.curUserInfo = this.$request.getCurUserInfo();
// let myTeamInfo = await this.$api.data('myTeamInfo');
// this.myTeamMembers = myTeamInfo.members;
this.myOrders = await this.$api.data('myOrders');
// this.orderList = this.myOrders.orderList;
// this.areaList = await this.$api.data('areaList');
// this.categoryList = await this.$api.data('categoryList');
// 初始化分页参数
// for(let i = 0; i < this.subStateList.length; i++) {
// this.pageParams.push({
// pageNum: 0
// });
// }
// 初始化订单列表
this.loadMasterOrderPage({
orderStatus: this.subStateList[0].code
});
// 初始化品类及区域列表
this.loadCategoryList();
this.loadRegionList();
// 初始化指派成员
this.loadTeamMembers();
// 订单统计
this.loadOrderStatistics();
},
reloadMasterOrderPage(params = {}) {
// this.pageParams = [];
// for(let i = 0; i < this.subStateList.length; i++) {
// this.pageParams.push({
// pageNum: 0
// });
// }
this.pageNum = 1;
this.orderList = [];
// this.$refs.loadStatusBar.showLoadMore();
this.loadMasterOrderPage();
// 订单统计
this.loadOrderStatistics();
},
async loadMasterOrderPage(params = {}) {
params.pageSize = this.$globalData.initPageSize;
params.pageNum = this.pageNum;
params.goodsName = this.formData.orderKeywords;
params.countryId = this.formData.area && this.formData.area.length > 2 ? this.formData.area[2].areaId : null;
params.goodsCategoryId = this.formData.category && this.formData.category.length > 2 ? this.formData.category[2].goodsCategoryId : null;
if (this.tabCur != null) {
params.orderStatus = this.subStateList[this.tabCur].code;
} else if (this.stateCur != null) {
params.orderStatus = this.stateList[this.stateCur].code;
}
let date = new Date();
if (this.stateCur === 1) {
// 今日单
params.pageSize = 999;
params.pageNum = 1;
params.orderStatus = 2;
params.expectTimeStart = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00",
params.expectTimeEnd = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 23:59:59"
} else if (this.stateCur === 2) {
// 明日单
params.pageSize = 999;
params.pageNum = 1;
params.orderStatus = 2;
params.expectTimeStart = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 00:00:00",
params.expectTimeEnd = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1) + " 23:59:59"
}
try {
let res = null;
// 不同状态的单需要请求不同接口
if (this.tabCur === 4 || this.tabCur === 5 || this.stateCur === 1 || this.stateCur === 2) {
// 已完成状态只查询子单,需要进行分页处理
this.$refs.loadStatusBar.showLoading();
let funName = "qryDetailOrderPage";
if (this.tabCur === 4) {
funName = "getAfterList";
}
res = await this.$request[funName](params);
if (res && res.rows) {
let rowsLength = res.rows.length;
if (rowsLength > 0) {
this.orderList = this.orderList.concat(res.rows);
this.pageNum++;
if (rowsLength === params.pageSize) {
this.$refs.loadStatusBar.showLoadMore();
return;
}
}
}
this.$refs.loadStatusBar.showLoadOver();
} else {
// 其他状态下的单需要展示主单及子单的混合列表,不做分页处理
if (this.stateCur === 0) {
// 超时单
params.orderStatus = null;
params.isOverTime = true;
}
res = await this.$request.qryMixOrderList(params);
if (res && res.data) {
this.orderList = res.data;
}
}
} catch (e) {
console.error(e)
this.$refs.loadStatusBar.showLoadErr();
}
},
async loadCategoryList(idArr) {
let typeList = await this.$request.listByStep({
type: 1
});
typeList = typeList.data;
let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
let subTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: col1Id
});
subTypeList = subTypeList.data;
let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
let subSubTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: col2Id
});
subSubTypeList = subSubTypeList.data;
let col3Id = idArr ? idArr[2] : subSubTypeList[0].goodsCategoryId;
let thirdTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: col3Id
});
thirdTypeList = thirdTypeList.data;
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
this.categoryList.push(thirdTypeList);
},
async loadRegionList() {
let regionList = await this.$request.areaListByStep();
regionList = regionList.data;
let subRegionList = [];
let subSubRegionList = [];
if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({
parentCode: regionList[0].areaCode
});
subRegionList = subRegionList.data;
}
if (subRegionList && subRegionList.length > 0) {
subSubRegionList = await this.$request.areaListByStep({
parentCode: subRegionList[0].areaCode
});
subSubRegionList = subSubRegionList.data;
}
this.areaList.push(regionList);
this.areaList.push(subRegionList);
this.areaList.push(subSubRegionList);
},
async loadTeamMembers() {
let res = await this.$request.getTeamPage({
leaderId: this.curUserInfo.workerId,
workerId: null
});
this.myTeamMembers = res.rows;
},
async loadOrderStatistics() {
let res = await this.$request.orderStatistics();
this.orderStatistics = res.data;
},
bindEvent() {
uni.$on(this.$globalFun.HIDE_MODAL, this.hideModal);
},
offBindEvent() {
uni.$off(this.$globalFun.HIDE_MODAL);
},
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查二级
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
subAreaList = subAreaList.data;
let subSubAreaList = [];
if (subAreaList.length) {
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
subSubAreaList = subSubAreaList.data;
}
this.areaList.pop();
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaList.push(subSubAreaList);
this.areaMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[1][colObj.value].areaCode});
subAreaList = subAreaList.data;
this.areaList.pop();
this.areaList.push(subAreaList);
this.areaMultiIndex = [this.areaMultiIndex[0], colObj.value, 0];
}
},
regionChange(e) {
this.areaMultiIndex = e.detail.value;
let chosenArea = [];
for(let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
}
this.formData.area = chosenArea;
},
async categoryColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查询二级
let subTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
});
subTypeList = subTypeList.data;
let subSubTypeList = [];
if (subTypeList && subTypeList.length) {
subSubTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: subTypeList[0].goodsCategoryId
});
subSubTypeList = subSubTypeList.data;
}
this.categoryList.pop();
this.categoryList.pop();
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
this.categoryMultiIndex = [colObj.value, 0, 0];
} else if (colObj.column == 1) {
// 通过二级查三级
let subSubTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: this.categoryList[1][colObj.value].goodsCategoryId
});
subSubTypeList = subSubTypeList.data;
this.categoryList.pop();
this.categoryList.push(subSubTypeList);
this.categoryMultiIndex = [this.categoryMultiIndex[0], colObj.value, 0];
}
},
categoryChange(e) {
this.categoryMultiIndex = e.detail.value;
let chosenCategory = [];
for(let i = 0; i < this.categoryList.length; i++) {
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
}
this.formData.category = chosenCategory;
},
searchOrder() {
this.reloadMasterOrderPage();
},
resetConditions() {
this.formData = {
category: null,
area: null,
orderKeywords: ''
}
},
tabSelect(e) {
this.stateCur = null;
this.tabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
// this.reloadMasterOrderPage(this.stateCur, this.subStateList[this.tabCur].code);
this.reloadMasterOrderPage();
},
statusSelect(e) {
this.tabCur = null;
this.stateCur = e.currentTarget.dataset.id;
this.reloadMasterOrderPage();
},
getCurDateAndTime() {
let date = new Date();
this.curDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00";
},
showModal(e, orderInfo) {
this.getCurDateAndTime();
if (orderInfo) {
this.curOrder = orderInfo;
}
this[e.currentTarget.dataset.modal] = true;
},
showModalByRef(refName, curOrder, params) {
this.$refs[refName].showModal(curOrder, params);
this.curOrder = curOrder;
},
hideModal(e) {
this.curOrder = null;
this[e.currentTarget.dataset.modal] = false;
},
copyData(data) {
uni.setClipboardData({
data: data
});
},
async editServTime(id, datetimeArr, ifRollback2WS, order) {
// 确定方法名
let reqFunName = "updateOrder";
if (this.tabCur === 0 && order.orderDetailId == null) {
id = order.orderMasterId;
} else {
reqFunName = "updateDetailOrder";
id = order.orderDetailId;
}
// 确定参数
let params = datetimeArr && datetimeArr.length > 1 ? {
id: id,
expectTimeStart: datetimeArr[0],
expectTimeEnd: datetimeArr[1]
} : {
id: id,
revTime: datetime
}
let res = await this.$request[reqFunName](params);
if (res.code === 0) {
let finishFlag = false;
if (ifRollback2WS) {
let statusUpdateRes = await this.updateOrderDetailStatus({
id: id,
orderStatus: 2,
workBeginTime: ''
});
if (statusUpdateRes && statusUpdateRes.code === 0) {
finishFlag = true;
}
} else if (order && order.orderDetailId == null) {
finishFlag = await this.assignWork2MySelf(order);
} else {
finishFlag = await this.updateOrderStatus(order.orderDetailId, 2, 'updateDetailOrder');
}
if (finishFlag) {
this.reloadMasterOrderPage();
uni.showToast({
title: '预约时间成功',
icon: 'none',
duration: 2000
})
}
}
},
async updateOrderDetailStatus(params = {}) {
let res = await this.$request.updateDetailOrder(params);
return res;
},
showArrangeFailTime(e) {
this.showTimeArrangeModal = false;
this.showEditTimeArrangeModal = false;
this.showArrangeFailTimeModal = true;
},
finishQrPay(e) {
this.hideModal(e);
this.reloadMasterOrderPage();
},
togglePopup(e, orderInfo) {
if (this.ifShowPageMeta) {
this.$refs[e.currentTarget.dataset.popup].close();
let timeout = setTimeout(() => {
this.curOrder = null;
}, 100);
} else {
if (orderInfo) {
this.curOrder = orderInfo;
}
this.$refs[e.currentTarget.dataset.popup].open();
}
},
changePopupState(e) {
this.ifShowPageMeta = e.show;
},
makePhoneCall(phoneNum) {
uni.makePhoneCall({
phoneNumber: phoneNum
})
},
async makePayQrcode(e, orderInfo) {
if (orderInfo.payStatus === 1) {
uni.showToast({
title: '订单已支付,不要重复付款!',
icon: 'none'
})
return;
}
let res = await this.$request.qrPay(orderInfo);
if (res && res.code === 0) {
this.showModal(e, orderInfo);
this.$refs.payQrcode.showQrcode(res.data.expend.qrcode_url);
}
},
showServOrderDetail(order) {
uni.navigateTo({
url: '/pages/order-manage/serv-detail?order=' + encodeURIComponent(JSON.stringify(order))
})
},
async finishOrder(order) {
let checkRes = await this.checkBankAndCertify();
if (!checkRes) {
return;
}
uni.navigateTo({
url: '/pages/order-manage/finish-order?order=' + encodeURIComponent(JSON.stringify(order))
})
},
async checkBankAndCertify() {
// 查询账户绑定信息
let bankCardRes = await this.$request.getBindBankCardByWorkerId({
workerId: this.curUserInfo.workerId
});
this.bankCard = bankCardRes.data;
// 查询实名信息
let certifyInfoRes = await this.$request.getWorkerCertify();
this.certifyInfo = certifyInfoRes.data;
if (!this.bankCard || !this.bankCard.bankNum) {
this.$refs.vertifyBankBind.showModal();
return false;
} else if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) {
this.$refs.vertifyCertify.showModal();
return false;
}
return true;
},
async updateOrderStatus(id, status, funName) {
let res = await this.$request[funName]({
id: id,
orderStatus: status,
});
if (res && res.code === 0) {
this.reloadMasterOrderPage();
uni.showToast({
icon: 'success'
})
return true;
}
return false;
},
updateRefundStatus(status, index) {
this.orderList[index].refundStatus = status;
},
updateAfterSaleDealStatus(status, index) {
this.orderList[index].afterSaleDealStatus = status;
},
getCanAssignList(order) {
if (this.myTeamMembers && this.myTeamMembers.length) {
this.$refs.dispatchOrderPopup.$children[0].loadData(order);
}
},
async workBegin(order) {
let curDate = new Date();
let formatCurDate = curDate.getFullYear() + '-' + (curDate.getMonth() + 1) + '-' + curDate.getDate()
+ ' ' + curDate.getHours() + ':' + curDate.getMinutes() + ':' + curDate.getSeconds();
let params = {
id: order.orderDetailId,
orderStatus: 3,
workBeginTime: formatCurDate
}
let res = await this.$request.updateDetailOrder(params);
if (res && res.code === 0) {
this.reloadMasterOrderPage();
uni.showToast({
icon: 'success',
duration: 1000
})
}
},
/* modalpopup确认或关闭后的回调 */
async showAfterSalePic() {
// TODO:查询该售后单中的拒绝原因中上传的截图
this.picModalImgList = await this.$api.data('picImgList');
console.log(this.picModalImgList)
},
async assignWork(params) {
let res = await this.$request.assign(params);
if (res && res.code === 0) {
this.getCanAssignList(this.curOrder);
this.reloadMasterOrderPage();
uni.showToast({
title: '派单成功',
icon: 'success'
})
return true;
} else {
uni.showToast({
title: '派单失败,请确认派单价格不高于本订单价格',
icon: 'none'
})
return false;
}
},
async assignWork2MySelf(orderInfo) {
let res = await this.$request.getCanAssignList({
orderMasterId: orderInfo.orderMasterId
});
let pickedList = res.data;
let goodsToAssign = [];
pickedList.forEach((goods) => {
goodsToAssign.push({
goodsStandardId: goods.goodsStandardId,
num: goods.goodsNum
})
});
let params = {
goodsList: goodsToAssign,
workerId: this.curUserInfo.workerId,
totalPay: orderInfo.totalMoney,
orderMasterId: orderInfo.orderMasterId,
isAll: 1
}
return await this.assignWork(params);
},
async rejectMasterOrder(order) {
let res = await this.$request.updateOrder({
id: order.orderMasterId,
workerId: -1
});
if (res && res.code === 0) {
this.reloadMasterOrderPage();
uni.showToast({
icon: 'none',
title: '拒绝接单成功',
duration: 1000
})
} else {
uni.showToast({
icon: 'none',
title: '拒绝接单失败'
})
}
},
async rejectDetailOrder(order) {
let res = await this.$request.rejectDetailOrder({
id: order.orderDetailId
});
if (res && res.code === 0) {
this.reloadMasterOrderPage();
uni.showToast({
icon: 'none',
title: '拒绝接单成功',
duration: 1000
})
} else {
uni.showToast({
icon: 'none',
title: '拒绝接单失败'
})
}
},
async getChangedPrice(order) {
let res = await this.$request.getChangeOrderPrice(order);
if (res && res.code === 0 && res.data) {
return res.data;
}
return null;
},
async changePrice(e, order) {
let priceObj = await this.getChangedPrice(order);
let refName = e.currentTarget.dataset.ref;
this.$refs[refName].init(priceObj);
this.showModal(e, order);
},
viewImage(e, imgList) {
uni.previewImage({
urls: imgList,
current: e.currentTarget.dataset.url
});
},
}
}
</script>
<style scoped>
.inline-combox {
display: inline-block;
width: calc((90vw - 80rpx)/2);
}
.cu-list.grid.no-border {
padding: unset;
}
.cu-list.grid.no-border>.cu-item {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.right-tag {
position: relative;
right: -30rpx;
border-radius: 40rpx 0 0 40rpx;
}
.cu-tag+.cu-tag {
margin-left: unset;
}
.left-top-sm-bar {
position: absolute;
right: 25rpx;
top: 25rpx;
z-index: 99;
}
</style>