548 lines
14 KiB
Vue
548 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<headersVue :titles="titles" style=" position: static !important;">
|
||
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
||
</headersVue>
|
||
<view class="appointment-detail">
|
||
<!-- 顶部标题栏 -->
|
||
<view class="header">
|
||
<text class="title">预约详情</text>
|
||
<text class="status" :class="{'converted': detail.isUse === '1'}">
|
||
{{detail.isUse === '1' ? '已转订单' : '未转订单'}}
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 基本信息卡片 -->
|
||
<view class="card">
|
||
<view class="card-header">
|
||
<text class="card-title">基本信息</text>
|
||
<button v-if="detail.isUse !== '1' && detail.meetOrderId && detail.isMeet == 1" class="convert-btn"
|
||
@click="convertToOrder" size="mini">
|
||
转订单
|
||
</button>
|
||
<button v-else @click="clickDisabledButton" class="convert-btn-disable" size="mini">
|
||
转订单
|
||
</button>
|
||
</view>
|
||
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="label">预约类型：</text>
|
||
<text class="value">{{detail.goodsTitle}}<text
|
||
v-if="detail.carNature">{{ '-' + detail.carNature}}</text></text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">车牌号码：</text>
|
||
<text class="value">{{detail.carNo || "暂无车牌号"}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">车辆型号：</text>
|
||
<text class="value">{{detail.carModel || "暂无型号"}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">注册日期：</text>
|
||
<text class="value">{{formatDate(detail.carRegisterDate) || "暂无注册日期"}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">识别代码：</text>
|
||
<text class="value">{{detail.carIdNo || '无'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预约信息卡片 -->
|
||
<view class="card">
|
||
<view class="card-header">
|
||
<text class="card-title">预约信息</text>
|
||
</view>
|
||
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="label">预约人：</text>
|
||
<text class="value">{{detail.owner || detail.buyName}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">联系电话：</text>
|
||
<text class="value">{{detail.otherPhone || detail.buyPhoneNum || '暂无'}}</text>
|
||
<button class="call-btn" @click="callUser" size="mini">拨打</button>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">预约时间：</text>
|
||
<text class="value">{{formatDate(detail.appointmentDay)}}
|
||
{{detail.appointmentPeriod === '0' ? '上午' : '下午'}}{{detail.time}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">客户来源：</text>
|
||
<text class="value">{{detail.partner_id ? '合作商客户' : '自来客户'}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">支付方式：</text>
|
||
<text class="value">{{detail.is_pay_online === '1' ? '线上支付' : '线下支付'}}</text>
|
||
</view>
|
||
<view class="info-item" style="justify-content: space-between;">
|
||
<view>
|
||
<text class="label">上门取车：</text>
|
||
<text class="value">{{detail.isPickCar === '1' ? '是' : '否'}}</text>
|
||
</view>
|
||
<view>
|
||
<text class="label" v-if="!detail.meetOrderId">暂未指派接车员</text>
|
||
<text class="value" v-else>接车人：{{detail.meetName}}<text v-if="detail.isMeet == 0"
|
||
style="color: red;">（暂未接车）</text><text v-else
|
||
style="color: #1890FF;">（已接车）</text></text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item" v-if="detail.address">
|
||
<text class="label">取车地址：</text>
|
||
<text class="value">{{detail.adressDetail}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 证件信息卡片 -->
|
||
<view class="card">
|
||
<view class="card-header">
|
||
<text class="card-title">证件信息</text>
|
||
</view>
|
||
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="label">行驶证：</text>
|
||
<button class="view-btn" @click="viewDriverLicense" size="mini">
|
||
{{detail.driverLicenesImg ? '查看' : '未上传'}}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注信息卡片 -->
|
||
<view class="card" v-if="detail.remark">
|
||
<view class="card-header">
|
||
<text class="card-title">备注信息</text>
|
||
</view>
|
||
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text class="value">{{detail.remark}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="footer">
|
||
<button class="btn" @click="callUser">拨打电话</button>
|
||
<button class="btn primary" @click="clickMeetMan()" v-if="detail.meetOrderId == null">分配接车人</button>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="showPop" showCancelButton mode="center" @cancel="closePop" @confirm="confirmPop">
|
||
<view style="width: 100%;">
|
||
<view style="margin-bottom: 50rpx;text-align: center;">分配接车人</view>
|
||
<view class="poup">
|
||
<view>车牌号：</view>
|
||
<view class="poup-item " style="padding-right: 38rpx;">
|
||
{{detail.carNo || "暂无车牌号"}}
|
||
</view>
|
||
</view>
|
||
<view class="poup">
|
||
<view>取车日期：</view>
|
||
<view class="poup-item " style="padding-right: 38rpx;">
|
||
{{detail.pickCarAppointmentDay || "暂无取车日期"}}
|
||
</view>
|
||
</view>
|
||
<view class="poup">
|
||
<view>取车时间：</view>
|
||
<view class="poup-item " style="padding-right: 38rpx;">
|
||
{{detail.pickCarAppointmentTime || "暂无取车时间"}}
|
||
</view>
|
||
</view>
|
||
<view class="poup">
|
||
<view style="width: 340rpx;">取车地点：</view>
|
||
<view class="poup-item " style="padding-right: 38rpx;">
|
||
{{detail.adressDetail || "暂无取车地点"}}
|
||
</view>
|
||
</view>
|
||
<view class="poup">
|
||
<view>接车人：</view>
|
||
<view class="poup-item" @click="showMeetMan = true">
|
||
{{meetName}}
|
||
<u-icon class="dl-float-right" name="arrow-right" size="18"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<u-picker :show="showMeetMan" :columns="[meetManList]" :defaultIndex="defaultIndex" @confirm="confirmMeetMan"
|
||
@cancel="showMeetMan = false" keyName="nickname"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../../utils/request';
|
||
import headersVue from '@/components/header/headers.vue';
|
||
import qianziyuSelect from '@/components/qianziyu-select/qianziyu-select.vue';
|
||
import {
|
||
formatDate
|
||
} from '../../../utils/utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: null,
|
||
detail: {},
|
||
titles: "预约详情",
|
||
baseImageUrl: this.$baseImageUrl,
|
||
meetManId: undefined,
|
||
meetName: '请选择接车人',
|
||
showMeetMan: false,
|
||
showPop: false,
|
||
meetManList: [],
|
||
defaultIndex: [0],
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
this.fetchDetail();
|
||
},
|
||
components: {
|
||
headersVue,
|
||
qianziyuSelect
|
||
},
|
||
methods: {
|
||
async fetchDetail() {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
|
||
try {
|
||
const res = await request({
|
||
url: `/inspection/appointment/${this.id}`,
|
||
method: 'GET'
|
||
})
|
||
this.detail = res.data;
|
||
await this.getStaff();
|
||
} catch (error) {
|
||
console.error('获取预约详情失败:', error);
|
||
uni.showToast({
|
||
title: '获取详情失败',
|
||
icon: 'none'
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
clickDisabledButton() {
|
||
console.log('执行了');
|
||
if (!this.detail.meetOrderId) {
|
||
uni.showToast({
|
||
title: '请先指派接车人',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (this.detail.isMeet != 1) {
|
||
uni.showToast({
|
||
title: '请通知接车人去完成接车',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
},
|
||
closePop() {
|
||
this.showPop = false
|
||
},
|
||
confirmPop() {
|
||
// 分配借车人
|
||
this.getgoodes()
|
||
},
|
||
clickMeetMan() {
|
||
console.log('执行');
|
||
// this.showMeetMan = true;
|
||
this.showPop = true;
|
||
},
|
||
formatDate(dateStr) {
|
||
return formatDate(dateStr);
|
||
},
|
||
goAddOrder(data) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/Neworder?appointmentId=${data.id}&meetCarId=${data.meetOrderId}`
|
||
})
|
||
},
|
||
confirmMeetMan(e) {
|
||
this.meetName = e.value[0].nickname
|
||
this.meetManId = e.value[0].id
|
||
this.showMeetMan = false
|
||
},
|
||
async getStaff() {
|
||
let data = {
|
||
pageNo: 1, //第几页
|
||
pageSize: 10000000, //一页多少张
|
||
}
|
||
let res = await request({
|
||
url: '/system/role/selectListByRoleId',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
// 如果需要确保DOM已更新再操作：
|
||
this.$nextTick(() => {
|
||
this.meetManList = res.data.records;
|
||
// 这里可以放需要DOM更新的操作
|
||
});
|
||
},
|
||
convertToOrder() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定将此预约转为订单吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
this.goAddOrder(this.detail)
|
||
} catch (error) {
|
||
console.error('转订单失败:', error);
|
||
uni.showToast({
|
||
title: '转换失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
viewDriverLicense() {
|
||
if (!this.detail.driverLicenesImg) {
|
||
uni.showToast({
|
||
title: '未上传行驶证',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.previewImage({
|
||
urls: [this.baseImageUrl + '/' + this.detail.driverLicenesImg]
|
||
});
|
||
},
|
||
async getgoodes() {
|
||
if (this.carNum == '' || this.carRegisterDate == '') {
|
||
uni.showToast({
|
||
title: '车牌号 车辆注册日期 必填！',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
partnerId: uni.getStorageSync('partnerId'),
|
||
buyName: this.detail.owner || this.detail.buyName,
|
||
buyPhone: this.detail.otherPhone || this.detail.buyPhone,
|
||
userAddress: this.detail.address,
|
||
unitName: this.detail.unitName,
|
||
carNum: this.detail.carNo,
|
||
carModel: this.detail.carModel,
|
||
carStatus: this.detail.carStatus,
|
||
carIdNo: this.detail.carIdNo,
|
||
customerSource: this.detail.customerSource,
|
||
skuId: this.detail.skuId,
|
||
carNature: this.detail.carNature,
|
||
inspectionWorkNodes: this.detail.inspectionWorkNodes,
|
||
leadManId: this.detail.leadManId,
|
||
startTime: this.detail.recordTime,
|
||
otherPhone: this.otherPhone,
|
||
carRegisterDate: this.detail.carRegisterDate,
|
||
meetManId: this.meetManId,
|
||
appointmentId: this.detail.id,
|
||
meetType: 1
|
||
}
|
||
|
||
try {
|
||
let res = await request({
|
||
url: '/inspection-meet-car-order/add',
|
||
method: 'post',
|
||
data: data
|
||
})
|
||
uni.showToast({
|
||
title: "分配成功"
|
||
})
|
||
await this.fetchDetail()
|
||
this.showPop = false
|
||
} catch {
|
||
uni.showToast({
|
||
title: '分配失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
callUser() {
|
||
const phone = this.detail.otherPhone || this.detail.buyPhoneNum;
|
||
if (!phone) {
|
||
uni.showToast({
|
||
title: '无联系电话',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.appointment-detail {
|
||
padding: 20rpx;
|
||
padding-bottom: 120rpx;
|
||
background-color: #f5f5f5;
|
||
box-sizing: border-box;
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.status {
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
background-color: #f0f0f0;
|
||
color: #666;
|
||
|
||
&.converted {
|
||
background-color: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow: hidden;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.card-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.convert-btn {
|
||
margin: 0;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
font-size: 24rpx;
|
||
background-color: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
.convert-btn-disable {
|
||
margin: 0;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.info-list {
|
||
padding: 0 20rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.label {
|
||
width: 160rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.call-btn,
|
||
.view-btn {
|
||
margin-left: 20rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.call-btn {
|
||
background-color: #1890ff;
|
||
color: white;
|
||
}
|
||
|
||
&.view-btn {
|
||
background-color: #fff;
|
||
color: #1890ff;
|
||
border: 1rpx solid #1890ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 30rpx;
|
||
margin: 0 10rpx;
|
||
background-color: #fff;
|
||
color: #333;
|
||
border: 1rpx solid #ddd;
|
||
|
||
&.primary {
|
||
background-color: #1890ff;
|
||
color: white;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.poup {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
color: #666;
|
||
|
||
.poup-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 15rpx;
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</style> |