dingdong-master/pages/demand-center/accept-demand-center.vue

<template>
	<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="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @confirm="searchTasks" v-model="inputGoodsName" :adjust-position="true" type="text" placeholder="输入搜索的内容"
						confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-main-color shadow-blur round" @click="searchTasks">搜索</button>
				</view>
			</view>
			<!-- 条件筛选栏 -->
			<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view class="cu-item" v-for="(item,index) in taskConditions" v-if="item.type !== 1" :key="index"
					@tap="tabSelect" :data-id="index">
					<!-- 区域筛选picker -->
					<picker v-if="item.code === 'countryId'" :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
						:value="areaMultiIndex" :range-key="'areaName'" :range="areaList">
						<view class="flex justify-start">
							<view class="text-cut search-nav-item-text">
								{{chosenArea && chosenArea.length ? chosenArea[2].areaName : item.title}}
							</view>
							<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
						</view>
					</picker>
					<!-- 品类筛选picker -->
					<picker v-else-if="item.code === 'goodsCategoryId'" :mode="'multiSelector'" @change="categoryChange"
						@columnchange="categoryColChange" :value="categoryMultiIndex" :range-key="'goodsCategoryName'"
						:range="categoryList">
						<view class="flex justify-start">
							<view class="text-cut search-nav-item-text">
								{{chosenCategory && chosenCategory.length ? chosenCategory[2].goodsCategoryName : item.title}}
							</view>
							<text class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
						</view>
					</picker>
					<view v-else class="flex justify-start">
						<view class="search-nav-item-text">{{item.title}}</view>
						<text v-if="item.type === 0" class="text-lg"><text
								:class="item.value === 0 ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text></text>
						<text v-else class="text-lg"><text class="cuIcon-triangledownfill"></text></text>
					</view>
				</view>
				<view class="cu-item" v-else>
					<button class="cu-btn bg-grey round shadow-blur" @click="barBtnClick(index)">{{item.title}}</button>
				</view>
			</scroll-view>
		</view>
		<!-- 任务单 -->
		<view class="margin-lr-sm margin-bottom-lg">
			<view v-for="(task, index) in tasks" class="padding bg-white margin-top-sm">
				<view class="flex justify-between">
					<view class="text-lg text-bold text-cut" style="width: 70%;">{{task.goodsName}}</view>
					<view class="text-right">
						<view class="text-lg text-price text-red text-bold">{{task.totalMoney}}</view>
						<view v-if="task.expeditedPrice">
							<text>加急：</text><text class="text-price text-red text-bold">{{task.expeditedPrice}}</text>
						</view>
					</view>
				</view>
				<view class="flex justify-start" v-if="task.tag">
					<view v-for="(tagContent, index1) in task.tag" class='cu-tag margin-right-xs'>{{tagContent}}</view>
				</view>
				<view class="margin-top-sm">
					<text class="text-main-color text-lg margin-right-xs"><text
							class="cuIcon-locationfill"></text></text>
					<text>{{task.address}}</text>
				</view>
				<view class="margin-top-sm">
					<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-timefill"></text></text>
					<text v-if="task.expectTimeEndFront">{{task.expectTimeStartFront + '~' + task.expectTimeEndFront}}</text>
					<text v-else>{{task.expectTimeStartFront}}</text>
				</view>
				<view class="margin-top-sm">
					<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-phone"></text></text>
					<text class="margin-right-xs">{{task.customerName}}</text>
					<text>{{task.customerPhone.substring(0, 3) + "****" + task.customerPhone.substring(7)}}</text>
				</view>
				<view class="padding-top-sm flex justify-end">
					<button class="cu-btn bg-main-color margin-right-xs shadow-blur" data-modal="showForwardModal"
						@click="showModal($event, task)">转发</button>
					<button class="cu-btn bg-main-color margin-right-xs shadow-blur" data-modal="showAddPriceModal"
						@click="showModal($event, task)">加价</button>
					<button class="cu-btn bg-main-color margin-right-xs shadow-blur" v-if="task.canQuote">报价</button>
					<button class="cu-btn bg-main-color margin-right-xs shadow-blur"
						@click="showDemandDetail($event, task)">查看</button>
					<button class="cu-btn bg-main-color shadow-blur" data-take-modal="showTakeSuccessModal"
						data-certify-modal="showTakeCertifiedModal" @click="takeTask($event, task)">接单</button>
				</view>
			</view>
		</view>
		<load-status-bar ref="loadStatusBar" @loadMore="loadMasterOrderPage"></load-status-bar>

		<!-- 加价模态框 -->
		<view class="cu-modal" :class="showAddPriceModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end solid-bottom">
					<view class="content">加价申请</view>
					<view class="action" data-modal="showAddPriceModal" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left">
					<view class="flex justify-center align-center margin-top-sm">
						<text>加价金额：</text>
						<input class="radius-input" type="digit"></input>
						<text>元</text>
					</view>
					<view class="margin-top-sm flex justify-center">
						<textarea class="solid radius text-left padding-sm" maxlength="-1" name="comments"
							placeholder="加价原因备注"></textarea>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" data-modal="showAddPriceModal" @tap="hideModal">取消
					</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
						data-modal="showAddPriceModal" @click="applyAddPrice">立即提交</view>
				</view>
			</view>
		</view>
		<!-- 推荐奖励模态框 -->
		<view class="cu-modal" :class="showForwardModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end solid-bottom">
					<view class="content">推荐奖励</view>
					<view class="action" data-modal="showForwardModal" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view>推荐转发有奖励，按每个奖励链接计算累计200单每单一元合计200元进行持续奖励：</view>
					<view class="margin-top-sm">推荐本单另行奖励的金额如下</view>
					<view class="flex justify-center align-center margin-top-sm">
						<text>奖励金额：</text>
						<input class="radius-input" type="digit"></input>
						<text>元</text>
					</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" data-modal="showForwardModal" @tap="hideModal">取消
					</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showForwardModal"
						@tap="hideModal" @click="forwardTask">立即推荐</view>
				</view>
			</view>
		</view>
		<!-- 接单认证模态框 -->
		<view class="cu-modal" :class="showTakeCertifiedModal?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					<view class="cuIcon-profile big-icon padding-tb text-main-color"></view>
					<view>您还未进行认证</view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" data-modal="showTakeCertifiedModal"
						@tap="hideModal">以后认证</view>
					<view class="action margin-0 flex-sub text-main-color solid-left"
						data-modal="showTakeCertifiedModal" @tap="hideModal" @click="goToCertify">立即认证</view>
				</view>
			</view>
		</view>
		<!-- 接单成功模态框 -->
		<view class="cu-modal" :class="showTakeSuccessModal?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					<view class="cuIcon-roundcheck big-icon padding-tb text-main-color"></view>
					<view class="text-bold text-lg margin-bottom-sm">接单成功</view>
					<view v-if="curTask.payType == 0">请在30分钟内联系客户，预约好上门时间，并在订单中操作排单时间，超时6倍将受平台处罚管理；该订单款项在任务流程结束后由银联自动结算至您帐户! </view>
					<view v-else-if="curTask.payType == 1">该单需上门收款。请在30分钟内联系客户，并告知客户属上门收款单（金额以客户端弹出的金额为准或上门后师傅端弹出的二维码内金额支付）预约好上门时间，并在订单中操作排单时间，超时6倍将受平台处罚管理；该订单款项在任务流程结束后由银联自动结算至您帐户! </view>
				</view>
				<view class="cu-bar bg-white solid-top">
					<view class="action margin-0 flex-sub text-black" data-modal="showTakeSuccessModal"
						@click="contactCustomer">联系客户</view>
					<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showTakeSuccessModal"
						@tap="hideModal">继续接单</view>
				</view>
			</view>
		</view>
		<!-- 账户及实名弹窗 -->
		<vertify-bank-bind ref="vertifyBankBind"></vertify-bank-bind>
		<vertify-certify ref="vertifyCertify"></vertify-certify>
	</view>
</template>

<script>
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
	
	export default {
		components: {
			loadStatusBar
		},
		data() {
			return {
				tabCur: 0,
				scrollLeft: 0,
				stickyTop: this.CustomBar,
				pageNum: 1,
				pageSize: 0,
				// type: 0=升降序，1=功能按钮；order: 0=升序，1=降序；
				taskConditions: [{
					code: 'countryId',
					title: '区域',
					type: 2
				}, {
					code: 'goodsCategoryId',
					title: '品类',
					type: 2
				}, 
				// {
				// 	code: 'distance',
				// 	title: '距离',
				// 	type: 0,
				// 	value: 0,
				// }, 
				{
					code: 'createTimeSort',
					title: '时间',
					type: 0,
					value: 1,
				}, {
					code: 'reset',
					type: 1,
					title: '重置',
					action: 'resetConditions'
				}],
				originTaskConditions: [{
					code: 'countryId',
					title: '区域',
					type: 2
				}, {
					code: 'goodsCategoryId',
					title: '品类',
					type: 2
				}, 
				// {
				// 	code: 'distance',
				// 	title: '距离',
				// 	type: 0,
				// 	value: 0,
				// }, 
				{
					code: 'createTimeSort',
					title: '时间',
					type: 0,
					value: 1,
				}, {
					code: 'reset',
					type: 1,
					title: '重置',
					action: 'resetConditions'
				}],
				tasks: [],
				curTask: null,
				takeCertify: false,
				showAddPriceModal: false,
				showForwardModal: false,
				showTakeCertifiedModal: false,
				showTakeSuccessModal: false,
				curUserInfo: {},
				inputGoodsName: null,
				areaList: [],
				areaMultiIndex: [0, 0, 0],
				chosenArea: [],
				categoryList: [],
				categoryMultiIndex: [0, 0, 0],
				chosenCategory: [],
				bankCard: null,
				certifyInfo: null,
				hasNotice: false
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				// this.checkBankAndCertify();
				// this.tasks = await this.$api.data('tasks');
				this.reloadMasterOrderPage();
				// this.takeCertify = await this.$api.data('takeCertify');
				// this.areaList = await this.$api.data('areaList');
				// this.categoryList = await this.$api.data('categoryList');
				this.loadCategoryList();
				this.loadRegionList();
			},
			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;
				
				let res = true;
				if (!this.bankCard || !this.bankCard.bankNum) {
					this.$refs.vertifyBankBind.showModal();
					res = false;
				}
				if (!this.certifyInfo || this.certifyInfo.status !== 1) {
					this.$refs.vertifyCertify.showModal();
					res = false;
				}
				return res;
			},
			async loadMasterOrderPage(params = {}) {
				params.pageSize = this.$globalData.initPageSize;
				params.pageNum = this.pageNum;
				params.orderStatus = 0;
				params.workerId = -1;
				params.goodsName = this.inputGoodsName;
				this.taskConditions.forEach((condition) => {
					if (condition.type === 2) {
						params[condition.code] = condition.value;
					} else if (condition.type === 0) {
						params.params = params.params ? params.params : {};
						params.params[condition.code] = condition.value === 1 ? 'desc' : 'asc';
					}
				})
				
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.qryMasterOrderPage(params);
					if (res && res.rows) {
						let rowsLength = res.rows.length;
						if (rowsLength > 0) {
							this.tasks = this.tasks.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();
				}
			},
			reloadMasterOrderPage(params = {}) {
				this.pageNum = 1;
				this.tasks = [];
				this.$refs.loadStatusBar.showLoadMore();
				this.loadMasterOrderPage(params);
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 70;
				let conditionType = this.taskConditions[this.tabCur].type;
				let conditionCode = this.taskConditions[this.tabCur].code;
				if (conditionType === 0) {
					// 升降序类型的条件切换升降序
					let orderVal = this.taskConditions[this.tabCur].value;
					this.taskConditions[this.tabCur].value = orderVal === 0 ? 1 : 0;
					this.searchTasks();
				}
			},
			barBtnClick(index) {
				this[this.taskConditions[index].action]();
			},
			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);
			},
			searchTasks() {
				this.reloadMasterOrderPage();
			},
			resetConditions() {
				this.inputGoodsName = null;
				for(let i = 0; i < this.originTaskConditions.length; i++) {
					this.taskConditions[i].value = this.originTaskConditions[i].value;
				}
				this.chosenArea = [];
				this.chosenCategory = [];
				// this.$forceUpdate();
				this.reloadMasterOrderPage();
			},
			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.chosenArea = chosenArea;
				this.taskConditions[this.tabCur].value = chosenArea[chosenArea.length - 1].areaId;
				this.searchTasks();
			},
			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];
				}
			},
			async 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.chosenCategory = chosenCategory;
				this.taskConditions[this.tabCur].value = chosenCategory[chosenCategory.length - 1].goodsCategoryId;
				this.searchTasks();
			},
			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];
				}
			},
			showDemandDetail(e, task) {
				let paramObj = {
					orderMasterId: task.orderMasterId
				}
				uni.navigateTo({
					url: '/pages/demand-center/demand-detail?paramObj=' + encodeURIComponent(JSON.stringify(
						paramObj))
				})
			},
			async takeTask(e, task) {
				if (!this.hasNotice) {
					let checkRes = await this.checkBankAndCertify();
					this.hasNotice = true;
					if (!checkRes) {
						return;
					}
				}
				
				// 已认证可直接接单
				let res = await this.$request.updateOrder({
					workerId: this.curUserInfo.workerId,
					id: task.orderMasterId,
					orderStatus: 1
				});
				if (res && res.code === 0) {
					e.currentTarget.dataset.modal = e.currentTarget.dataset.takeModal;
					this.reloadMasterOrderPage();
				}
				this.showModal(e, task);
			},
			contactCustomer(e) {
				// uni.makePhoneCall({
				// 	phoneNumber: this.curTask.customerPhone
				// })
				uni.navigateTo({
					url: '/pages/order-manage/order-manage'
				})
			},
			goToCertify() {
				uni.navigateTo({
					url: '/pages/my/master-settled-info'
				})
			},
			showModal(e, task) {
				this.curTask = task;
				this[e.currentTarget.dataset.modal] = true;
			},
			hideModal(e) {
				this.curTask = null;
				this[e.currentTarget.dataset.modal] = false;
			}
		},
	}
</script>

<style scoped>
	.search-nav-item-text {
		width: 100rpx;
	}
	
	.nav .cu-item {
		height: 90rpx;
		display: inline-block;
		line-height: 90rpx;
		margin: 0;
		padding: 0 10rpx;
		width: 180rpx;
	}
</style>