201 lines
7.9 KiB
Vue
201 lines
7.9 KiB
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.serverMoney}}</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 v-if="order.expectTimeEndFront">{{order.expectTimeStartFront + '~' + order.expectTimeEndFront}}</text>
|
||
<text v-else>{{order.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">{{order.customerName}}</text>
|
||
<text>{{order.customerPhone.substring(0, 3) + "****" + order.customerPhone.substring(7)}}</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 v-if="order.payType == 0">请在30分钟内联系客户，预约好上门时间，并在订单中操作排单时间，超时6倍将受平台处罚管理；该订单款项在任务流程结束后由银联自动结算至您帐户! </view>
|
||
<view v-else-if="order.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" @click="continueAcceptDemand">继续接单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 账户及实名弹窗 -->
|
||
<vertify-bank-bind ref="vertifyBankBind"></vertify-bank-bind>
|
||
<vertify-certify ref="vertifyCertify"></vertify-certify>
|
||
</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: {},
|
||
bankCard: null,
|
||
certifyInfo: null,
|
||
hasNotice: false
|
||
}
|
||
},
|
||
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 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 takeTask(e) {
|
||
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: this.order.orderMasterId,
|
||
orderStatus: 1
|
||
});
|
||
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
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/pages/order-manage/order-manage'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|