238 lines
6.6 KiB
Vue
238 lines
6.6 KiB
Vue
<template>
|
|
<view class="ctr" v-if="data !== null">
|
|
<view class="price-ctr">
|
|
<view class="price flex-c" v-if="data.order_info.receive_type === 1">上门报价</view>
|
|
<view class="price flex-c" v-else>平台已收款</view>
|
|
<view class="desc flex-c">{{ getPriceDescText() }}</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="item-row flex-sb line-after">
|
|
<view class="title flex-l">当前状态</view>
|
|
<view class="value flex-r order-status">
|
|
<text>{{getOrderStatusText(data.status)}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-row flex-sb line-after">
|
|
<view class="title flex-l">服务类型</view>
|
|
<view class="value flex-r">
|
|
<text>{{data.order_info.item_title}}</text>
|
|
</view>
|
|
</view>
|
|
<template v-if="data.status !== 0">
|
|
<view class="item-row flex-sb line-after">
|
|
<view class="title flex-l">客户姓名</view>
|
|
<view class="value flex-r">
|
|
<text>{{ data.order_info.customer }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-row flex-sb line-after">
|
|
<view class="title flex-l">客户电话</view>
|
|
<view class="value flex-r value-theme">
|
|
<me-icon class="icon" type="icon-call" color="var(--themeColor)" size="40rpx"></me-icon>
|
|
<text>{{ data.order_info.tel }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="item-row flex-sb line-after">
|
|
<view class="title flex-l">预约上门时间</view>
|
|
<view class="value flex-r">
|
|
<text>{{data.order_info.plan_time}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-multi-line line-after">
|
|
<view class="title flex-l">客户地址</view>
|
|
<view class="value flex-l">{{helpers.removeCommas(data.order_info.area.merge_name) + data.order_info.address}}</view>
|
|
</view>
|
|
<view class="item-multi-line">
|
|
<view class="title flex-l">客户备注</view>
|
|
<view class="value flex-l">{{data.remark ? data.remark : '无备注信息'}}</view>
|
|
</view>
|
|
</view>
|
|
<me-empty-space height="376"></me-empty-space>
|
|
|
|
<view class="bottom" v-if="data.status === 0">
|
|
<me-button @click="rejectOrder()" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>
|
|
<me-button @click="acceptOrder()" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
|
|
</view>
|
|
|
|
<view class="bottom" v-if="data.status === 10">
|
|
<me-button @click="selectTime()" text="已和客户沟通" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import MeIcon from "../../components/me-icon/me-icon.vue";
|
|
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
|
|
import MeButton from "../../components/me-button/me-button.vue";
|
|
import helpers from "../../utils/helpers";
|
|
import {onLoad, onShow} from '@dcloudio/uni-app'
|
|
import {ref, reactive, computed, watch, inject} from 'vue'
|
|
import api from "../../api/api";
|
|
import enums from "../../utils/enums";
|
|
|
|
const selectTime = () => {
|
|
helpers.jumpToPage('select-time', 'id=' + id.value)
|
|
}
|
|
|
|
const acceptOrder = () => {
|
|
uni.showModal({
|
|
title: '接单提示',
|
|
confirmText: '确认',
|
|
content: '接单后请及时和客户联系，确认接单？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
api.orderConfirm({type: 'accept', order_dispatch_id: id.value}).then(() => {
|
|
helpers.showToast('已接单')
|
|
init()
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const rejectOrder = () => {
|
|
uni.showModal({
|
|
title: '拒接提示',
|
|
confirmText: '确认',
|
|
content: '确认拒接该单？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
api.orderConfirm({type: 'reject', order_dispatch_id: id.value}).then(() => {
|
|
helpers.showToast('已拒接')
|
|
init()
|
|
}).catch(() => {})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const submit = () => {
|
|
helpers.jumpToPage('order-submit')
|
|
}
|
|
|
|
const id = ref(null)
|
|
onLoad((params) => {
|
|
id.value = params.id
|
|
})
|
|
|
|
onShow(() => {
|
|
init()
|
|
})
|
|
|
|
const data = ref(null)
|
|
const init = () => {
|
|
api.orderInfo({order_dispatch_id: id.value}).then(res => {
|
|
data.value = res
|
|
}).catch(() => {})
|
|
}
|
|
|
|
//获取价格描述文案
|
|
const getPriceDescText = () => {
|
|
let orderInfo = data.value
|
|
if (orderInfo.order_info.receive_type === 2) {
|
|
return '服务价格'
|
|
}
|
|
|
|
if (orderInfo.status === 60) {
|
|
let tailText = orderInfo.total > 0 ? '线下收款¥' + orderInfo.total : '线上收款¥' + orderInfo.online_total
|
|
return `服务价格(订金¥${orderInfo.order_info.online_amount}+${tailText})`
|
|
}
|
|
|
|
return `服务价格(已收订金¥${orderInfo.order_info.online_amount})`
|
|
}
|
|
|
|
//获取订单状态文本
|
|
const getOrderStatusText = (status) => {
|
|
return enums.WORKBENCH_STATUS_TEXT[status]
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ctr {
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
height: 100vh;
|
|
.price-ctr {
|
|
min-height: 200rpx;
|
|
width: 100%;
|
|
padding: 32rpx 20rpx;
|
|
box-sizing: border-box;
|
|
.price {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: var(--titleColor);
|
|
}
|
|
.desc {
|
|
width: 100%;
|
|
min-height: 56rpx;
|
|
font-size: 28rpx;
|
|
color: var(--summaryColor);
|
|
}
|
|
}
|
|
.info {
|
|
width: 100%;
|
|
background: var(--containerBgColor);
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
.item-row {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
position: relative;
|
|
.title {
|
|
width: 200rpx;
|
|
height: 100%;
|
|
font-size: 30rpx;
|
|
color: var(--summaryColor);
|
|
}
|
|
.value {
|
|
width: 446rpx;
|
|
height: 100%;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
.icon {
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
.order-status {
|
|
color: #E18F00 !important;
|
|
}
|
|
.value-theme {
|
|
color: var(--themeColor) !important;
|
|
}
|
|
}
|
|
.item-multi-line {
|
|
width: 100%;
|
|
position: relative;
|
|
padding-bottom: 8rpx;
|
|
box-sizing: border-box;
|
|
.title {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
color: var(--summaryColor);
|
|
}
|
|
.value {
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
color: var(--titleColor);
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 68rpx;
|
|
background: var(--pageBgColor);
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
</style>
|