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

<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>(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">
					{{item.name}}
				</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-for="(tag, index1) in order.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
				<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
			</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="[0,1,2].indexOf(order.orderStatus) === -1">
				<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.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="updateMasterOrder(order, 1)">确认接单</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)">派单</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="assignWork2MySelf(order)">自己承接</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)">修改时间</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="workBegin(order)">立即上门</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" data-modal="showNewServPriceModal" @tap="showModal($event, 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)">重新排期</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="finishOrder(order)" v-if="order.payStatus === 1">发起完单</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)">生成收款码</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 class="margin-top-sm solid-top padding-top-sm" v-if="order.afterSaleType === 'finished'">
				<view class="flex justify-start align-end">
					<text>退单申请：</text>
					<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
						:day="$dateUtil.countDownDiff(order.applyRefundLastTime).day" 
						:hour="$dateUtil.countDownDiff(order.applyRefundLastTime).hour" 
						:minute="$dateUtil.countDownDiff(order.applyRefundLastTime).min" 
						:second="$dateUtil.countDownDiff(order.applyRefundLastTime).seconds">
					</uni-countdown>
				</view>
				<view class="margin-top-xs">
					<text>退款金额：</text><text class="text-price">{{order.refundAmount}}</text>
					<text class="margin-left-sm">到帐金额：</text><text class="text-price">{{order.refundReachAmount}}</text>
				</view>
				<view class="margin-top-xs">
					<text>退款原因：</text><text>{{order.refundReason}}</text>
				</view>
				<view class="flex justify-end margin-top-xs">
					<button class="cu-btn sm bg-yellow margin-right-sm" @click="showAfterSalePic(index)" @tap="showModalByRef('showPicModal')">查看</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.refundStatus !== 'rejected'" @click="updateRefundStatus('rejected', index)">拒绝处理</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已拒绝</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.refundStatus !== 'recevied'" @click="updateRefundStatus('recevied', index)">同意退单</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已同意</button>
				</view>
			</view>
			<view class="margin-top-sm solid-top padding-top-sm" v-else-if="order.afterSaleType === 'unfinished'">
				<view class="flex justify-start align-end">
					<text>待处理售后：</text>
					<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
						:day="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).day" 
						:hour="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).hour" 
						:minute="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).min" 
						:second="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).seconds">
					</uni-countdown>
				</view>
				<view class="margin-top-xs">
					<text>售后原因：</text><text>{{order.afterSaleReason}}</text>
				</view>
				<view class="margin-top-xs">完成操作：点击“处理完成”提交由客服回访！</view>
				<view class="flex justify-end align-end margin-top-xs">
					<button class="cu-btn sm bg-yellow margin-right-sm" @click="showAfterSalePic(index)" @tap="showModalByRef('showPicModal')">查看</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.afterSaleDealStatus !== 'rejected'" @click="updateAfterSaleDealStatus('rejected', index)">拒绝处理</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已拒绝</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.afterSaleDealStatus !== 'recevied'" @click="updateAfterSaleDealStatus('recevied', index)">处理完成</button>
					<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已同意</button>
				</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>
		<load-status-bar 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 :show="showNewServPriceModal" :data="curOrder"></new-serv-price>
		<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"></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>
	</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 newServPrice from '@/pages/order-manage/modal/new-serv-price.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';
	
	export default {
		components: {
			myUniCombox,
			timeArrange,
			timeArrangeFail,
			editTimeArrange,
			dispatchOrder,
			newServPrice,
			payQrcode,
			urgentMsg,
			picModal,
			loadStatusBar
		},
		data() {
			return {
				formData: {
					category: null,
					area: null,
					orderKeywords: ''
				},
				areaList: [],
				areaMultiIndex: [0, 0, 0],
				categoryList: [],
				categoryMultiIndex: [0, 0, 0],
				stateList: [{
					code: -1,
					name: '超时单'
				}, {
					code: -1,
					name: '今日单'
				}, {
					code: -1,
					name: '明日单'
				}, {
					code: -1,
					name: '急报单'
				}, {
					code: 0,
					name: '新订单'
				}],
				subStateList: [{
					code: 1,
					name: '未约/未排'
				}, {
					code: 2,
					name: '待上门'
				}, {
					code: 3,
					name: '服务中'
				}, {
					code: 4,
					name: '待确认'
				}, 
				// {
				// 	code: '-',
				// 	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,
				showNewServPriceModal: false,
				showPayQrcodeModal: false,
				showEditTimeArrangeModal: false,
				sendUrgentMsgModal: 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.orderStatus = this.subStateList[this.tabCur].code;
				// params.pageNum = this.pageParams[this.tabCur].pageNum;
				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;
				}
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = null;
					// 不同状态的单需要请求不同接口
					if (this.tabCur === 0 || this.stateCur != null) {
						res = await this.$request.qryMasterOrderPage(params);
					} else {
						res = await this.$request.qryDetailOrderPage(params);
					}
					if (res && res.rows) {
						let rowsLength = res.rows.length;
						if (rowsLength > 0) {
							this.orderList = this.orderList.concat(res.rows);
							// this.pageParams[this.tabCur].pageNum++;
							this.pageNum++;
							if (rowsLength === params.pageSize) {
								this.$refs.loadStatusBar.showLoadMore();
								return;
							}
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
			},
			async loadCategoryList(idArr) {
				let typeList = await this.$request.listByStep();
				typeList = typeList.data;
				let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
				let subTypeList = await this.$request.listByStep({
					goodsCategoryId: col1Id
				});
				subTypeList = subTypeList.data;
				let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
				let subSubTypeList = await this.$request.listByStep({
					goodsCategoryId: col2Id
				});
				subSubTypeList = subSubTypeList.data;
				this.categoryList.push(typeList);
				this.categoryList.push(subTypeList);
				this.categoryList.push(subSubTypeList);
			},
			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
				});
				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({
						goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
					});
					subTypeList = subTypeList.data;
					let subSubTypeList = await this.$request.listByStep({
						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({
						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) {
				this.$refs[refName].showModal();
			},
			hideModal(e) {
				this.curOrder = null;
				this[e.currentTarget.dataset.modal] = false;
			},
			copyData(data) {
				uni.setClipboardData({
					data: data
				});
			},
			async editServTime(id, datetimeArr, ifRollback2WS) {
				// 确定方法名
				let reqFunName = "updateDetailOrder";
				if (this.tabCur === 0) {
					reqFunName = "updateOrder"
				}
				// 确定参数
				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 {
						finishFlag = true;
					}
					if (finishFlag) {
						this.reloadMasterOrderPage();
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
					}
				}
			},
			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))
				})
			},
			finishOrder(order) {
				uni.navigateTo({
					url: '/pages/order-manage/finish-order?order=' + encodeURIComponent(JSON.stringify(order))
				})
			},
			async updateMasterOrder(order, status) {
				let res = await this.$request.updateMasterOrder({
					id: order.orderMasterId,
					orderStatus: status,
				});
				if (res && res.code === 0) {
					this.reloadMasterOrderPage();
					uni.showToast({
						icon: 'success'
					})
				}
			},
			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();
				}
			},
			/* modal，popup确认或关闭后的回调 */
			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'
					})
				} else {
					uni.showToast({
						title: '派单失败，请确认派单价格不高于本订单价格',
						icon: 'none'
					})
				}
			},
			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
				}
				this.assignWork(params);
			}
		}
	}
</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>