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

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">任务详情</block>
		</cu-custom>
		<view class="padding bg-white margin-top-sm margin-lr-sm">
			<view class="flex justify-between">
				<view class="text-lg text-bold text-cut" style="width: 70%;">{{order.goodsName}}</view>
				<view class="text-right">
					<view class="text-lg text-price text-red text-bold">{{order.totalMoney}}</view>
					<view v-if="order.expeditedPrice">
						<text>加急：</text><text class="text-price text-red text-bold">{{order.expeditedPrice}}</text>
					</view>
				</view>
			</view>
			<view class="flex justify-start" v-if="order.tag">
				<view v-for="(tagContent, index1) in order.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>{{order.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>{{order.expectTimeStart + '~' + order.expectTimeEnd}}</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">{{order.customerName}}</text>
				<text>{{order.customerPhone}}</text>
			</view>
		</view>
		<view class="margin-top-sm bg-white margin-lr-sm margin-bottom-with-bar">
			<view class="cu-bar solid-bottom">
				<view class="action bar-first-action">
					<text class="cuIcon-titles text-main-color"></text> 商品信息
				</view>
			</view>
			<view class="padding">
				<!-- <view class="cu-avatar margin-bottom-sm" :style="'background-image:url(' + order.goodsLogoUrl + '); width: 180rpx; height: 180rpx'"></view> -->
				<!-- <view class="margin-bottom-sm"><text class="text-bold">商品规格：</text>{{order.spec}}</view> -->
				<!-- <view class="margin-bottom-sm"><text class="text-bold">服务类别：</text>{{order.servType}}</view> -->
				<view class="margin-bottom-sm">
					<product-picked :product="order" :pickedList="order.standardList" :columnTitleArr="specColumnHeaders" :valFieldArr="specValFields"></product-picked>
				</view>
				<view class="margin-bottom-sm"><text class="text-bold">订单编码：</text>{{order.orderMasterCode}}</view>
				<view class="margin-bottom-sm"><text class="text-bold">订单时间：</text>{{order.createTime}}</view>
				<view class="margin-bottom-sm"><text class="text-bold">备注：</text>{{order.remark}}</view>
			</view>
		</view>
		<view class="cu-bar tabbar border shop fixed-bottom-bar">
			<button class="bg-main-color long-btn margin-lr-sm" data-take-modal="showTakeSuccessModal" data-certify-modal="showTakeCertifiedModal" @click="takeTask">立即接单</button>
		</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>请在30分钟内联系客户，预约好上门时间，并在订单中操作排单时间，超时6倍将受平台处罚管理；该订单佣金在完成任务24小时内计入您的账户</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" @click="continueAcceptDemand">继续接单</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import productPicked from '@/components/goods-card/product-picked.vue';
	
	export default {
		components: {
			productPicked
		},
		data() {
			return {
				inParams: {},
				order: {},
				takeCertify: false,
				showTakeCertifiedModal: false,
				showTakeSuccessModal: false,
				specColumnHeaders: ['商品规格', '购买量'],
				specValFields: ['standardName', 'standardNum'],
				curUserInfo: {}
			}
		},
		onLoad(options) {
			this.inParams = JSON.parse(decodeURIComponent(options.paramObj));
		},
		onShow() {
			this.loadData(this.inParams.orderMasterId);
		},
		methods: {
			async loadData(orderMasterId) {
				// this.order = await this.$api.data('order');
				this.curUserInfo = this.$request.getCurUserInfo();
				let servDetailRes = await this.$request.getOrderMasterDetail({
					id: orderMasterId
				});
				this.order = servDetailRes.data;
				this.takeCertify = await this.$api.data('takeCertify');
			},
			async takeTask(e) {
				if (this.curUserInfo.status !== 0 || this.curUserInfo.type !== 0) {
					// 未认证需提示前往认证
					e.currentTarget.dataset.modal = e.currentTarget.dataset.certifyModal;
				} else {
					// 已认证可直接接单
					let res = await this.$request.updateOrder({
						workerId: this.curUserInfo.workerId,
						id: this.order.orderMasterId
					});
					if (res && res.code === 0) {
						e.currentTarget.dataset.modal = e.currentTarget.dataset.takeModal;
					}
				}
				this.showModal(e);
			},
			showModal(e) {
				this[e.currentTarget.dataset.modal] = true;
			},
			hideModal(e) {
				this[e.currentTarget.dataset.modal] = false;
			},
			continueAcceptDemand() {
				uni.navigateBack({
					delta: -1
				})
			},
			goToCertify() {
				uni.navigateTo({
					url: '/pages/my/master-settled-info'
				})
			},
			contactCustomer(e) {
				uni.makePhoneCall({
					phoneNumber: this.order.customerPhone
				})
			},
		}
	}
</script>

<style>
</style>