624 lines
16 KiB
Vue
624 lines
16 KiB
Vue
<template>
|
||
<view class="app-container">
|
||
<HeaderBar title="任务详情" enable-back text-align="center" />
|
||
|
||
<view class="task-detail">
|
||
<!-- 基本信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-header">
|
||
<view class="order-no">
|
||
任务编号：{{ detail.no }}
|
||
<text class="tag type-tag">{{ TaskType.parseName(detail.type) }}</text>
|
||
<text :class="['tag', 'status-tag', getStatusClass(detail.status)]">
|
||
{{ TaskStatus.parseNameForUser(detail.status) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-list">
|
||
<template v-if="showMore">
|
||
<template v-if="detail.carId">
|
||
<view class="info-item">
|
||
<text class="label">联系人</text>
|
||
<view class="value flex-row">
|
||
<view>
|
||
{{ detail.createName | dv }}
|
||
</view>
|
||
<view class="edit-btn" v-if="mode === 'user' && TaskStatus.canUpdate().includes(detail.status)" @click="handleMore">
|
||
<u-icon name="edit-pen" size="18" color="#2979ff"></u-icon>
|
||
修改信息
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">联系电话</text>
|
||
<text class="value phone-number" @click="handleCall">{{ detail.createMobile | dv }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">车牌号</text>
|
||
<view class="value address-wrap">
|
||
<text>{{ detail.carNo | dv}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="mode === 'user' && TaskStatus.canUpdate().includes(detail.status)">
|
||
<view class="add-placeholder" @click="handleMore">
|
||
<u-icon name="plus" size="24" color="#2979ff"></u-icon>
|
||
<text class="add-text">请选择您的爱车</text>
|
||
</view>
|
||
</template>
|
||
<view class="info-item">
|
||
<text class="label">下单时间</text>
|
||
<text class="value">{{ detail.createTime | dv }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">地区</text>
|
||
<view class="value address-wrap">
|
||
<text>{{ detail.regionMergerName | dv}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">详细地址</text>
|
||
<view class="value address-wrap">
|
||
<text>{{ detail.createAddress | dv}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="info-item">
|
||
<text class="label">备注</text>
|
||
<text class="value">{{ detail.remark | dv }}</text>
|
||
</view>
|
||
<template v-if="detail.mchId">
|
||
<view class="info-item">
|
||
<text class="label">商家</text>
|
||
<text class="value">{{ detail.mchName | dv }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="label">接单时间</text>
|
||
<text class="value">{{ detail.receiveTime | dv }}</text>
|
||
</view>
|
||
</template>
|
||
<view class="info-item" v-if="detail.status === TaskStatus.CANCEL">
|
||
<text class="label">取消原因</text>
|
||
<text class="value">{{ detail.cancelRemark | dv }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 视频播放 -->
|
||
<view class="video-card" v-if="detail.video && isVideo(detail.video) && (showMore || isVip2)">
|
||
<view class="card-header">视频信息</view>
|
||
<video
|
||
:src="parseLocalUrl(detail.video)"
|
||
class="video-player"
|
||
controls
|
||
/>
|
||
</view>
|
||
|
||
<!-- 图片 -->
|
||
<view class="video-card" v-if="detail.video && isImage(detail.video) && (showMore || isVip2)">
|
||
<view class="card-header">图片信息</view>
|
||
<image-upload
|
||
:value="detail.video"
|
||
disabled
|
||
:limit="1"
|
||
:deletable="false"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 位置信息 -->
|
||
<view class="map-card" v-if="detail.createLat && detail.createLon && showMore">
|
||
<view class="card-header">
|
||
<text class="card-title">位置信息</text>
|
||
<button class="nav-btn" @click="openLocation">
|
||
<text class="nav-text">导航</text>
|
||
</button>
|
||
</view>
|
||
<map
|
||
class="map"
|
||
:scale="16"
|
||
:show-location="true"
|
||
:latitude="Number(detail.createLat)"
|
||
:longitude="Number(detail.createLon)"
|
||
:markers="markers"
|
||
/>
|
||
</view>
|
||
|
||
<template v-if="mode === 'mch'">
|
||
<view class="info-item price-section">
|
||
<view class="price-content">
|
||
<view class="price-row total">
|
||
<text class="price-label">合计金额</text>
|
||
<text class="price-value">¥ {{ detail.receiveAmount | fix2 | dv }}</text>
|
||
</view>
|
||
<!-- <view class="price-row">
|
||
<text class="price-label">基础价格</text>
|
||
<text class="price-value">¥ {{ detail.basePrice | fix2 | dv }}</text>
|
||
</view>
|
||
<view class="price-row" v-if="detail.userLevelName">
|
||
<text class="price-label">{{ detail.userLevelName | dv }}</text>
|
||
<text class="price-value">¥ {{ detail.userLevelExtraPrice | fix2 | dv }}</text>
|
||
</view>
|
||
<view class="price-row" v-if="detail.shareLevelName">
|
||
<text class="price-label">{{ detail.shareLevelName | dv }}</text>
|
||
<text class="price-value">¥ {{ detail.shareLevelExtraPrice | fix2 | dv }}</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
|
||
<!-- 底部固定按钮 -->
|
||
<view class="bottom-actions">
|
||
<template v-if="mode === 'mch'">
|
||
<button class="action-btn" v-if="TaskStatus.canReceive().includes(detail.status)" @click="handleReceive">¥{{ detail.receiveAmount | fix2 | dv}} 立即接单</button>
|
||
<button class="action-btn" v-if="TaskStatus.canComplete().includes(detail.status)" @click="handleComplete">完成任务</button>
|
||
</template>
|
||
<template v-else>
|
||
<button v-if="detail.mchId" class="action-btn plain" @click="handleContact">联系客服</button>
|
||
<button class="action-btn plain" v-if="TaskStatus.canCancel().includes(detail.status)" @click="handleCancel">取消任务</button>
|
||
<button class="action-btn" v-if="TaskStatus.canAfterSale().includes(detail.status)" @click="handleAfterSale">申请售后</button>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeaderBar from '@/components/HeaderBar.vue'
|
||
import { appGetTaskDetail, appAfterSaleTask, appCancelTask } from '@/api/app/task'
|
||
import { TaskType, TaskStatus } from '@/utils/enums'
|
||
import { parseLocalUrl, isImage, isVideo } from '@/utils/index'
|
||
import { mchReceiveTask, mchCompleteTask } from '@/api/mch/task'
|
||
import { getMchDetail } from '@/api/app/mch'
|
||
import { mapGetters } from 'vuex'
|
||
|
||
|
||
export default {
|
||
components: {
|
||
HeaderBar
|
||
},
|
||
data() {
|
||
return {
|
||
id: null,
|
||
detail: {},
|
||
TaskType,
|
||
TaskStatus,
|
||
markers: [],
|
||
mode: 'user',
|
||
mch: {}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['mchId', 'userId']),
|
||
showMore() {
|
||
return this.mode === 'user' || this.detail.mchId === this.mchId;
|
||
},
|
||
isVip2() {
|
||
return this.mch.vipLevel === '2'
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.id = options.id;
|
||
if (options.mode) {
|
||
this.mode = options.mode;
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getDetail()
|
||
this.getMchInfo()
|
||
},
|
||
methods: {
|
||
getMchInfo() {
|
||
getMchDetail(this.mchId).then(res => {
|
||
this.mch = res.data
|
||
})
|
||
},
|
||
isImage,
|
||
isVideo,
|
||
handleMore() {
|
||
uni.navigateTo({ url: `/pages/car/index?taskId=${this.id}` })
|
||
},
|
||
parseLocalUrl,
|
||
getDetail() {
|
||
appGetTaskDetail(this.id).then(res => {
|
||
this.detail = res.data
|
||
// 设置地图标记点
|
||
if (this.detail.createLat && this.detail.createLon) {
|
||
this.markers = [{
|
||
id: 1,
|
||
latitude: Number(this.detail.createLat),
|
||
longitude: Number(this.detail.createLon),
|
||
width: 24,
|
||
height: 32,
|
||
callout: {
|
||
content: this.detail.createAddress || '任务位置',
|
||
color: '#333333',
|
||
fontSize: 14,
|
||
borderRadius: 4,
|
||
padding: 8,
|
||
display: 'ALWAYS'
|
||
}
|
||
}]
|
||
}
|
||
})
|
||
},
|
||
openLocation() {
|
||
if (this.detail.createLat && this.detail.createLon) {
|
||
uni.openLocation({
|
||
latitude: Number(this.detail.createLat),
|
||
longitude: Number(this.detail.createLon),
|
||
name: '任务地点',
|
||
address: this.detail.createAddress,
|
||
success: () => {
|
||
console.log('导航打开成功')
|
||
},
|
||
fail: (err) => {
|
||
console.error('导航打开失败', err)
|
||
uni.showToast({
|
||
title: '导航打开失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getStatusClass(status) {
|
||
switch (status) {
|
||
case TaskStatus.WAIT_RECEIVE:
|
||
return 'status-waiting'
|
||
case TaskStatus.RECEIVED:
|
||
return 'status-received'
|
||
case TaskStatus.FINISHED:
|
||
return 'status-finished'
|
||
case TaskStatus.CANCEL:
|
||
return 'status-cancel'
|
||
case TaskStatus.AFTER_SALE:
|
||
return 'status-after-sale'
|
||
default:
|
||
return ''
|
||
}
|
||
},
|
||
handleReceive() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要接单吗？',
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const params = { id: this.id, mchId: this.$store.getters.mchId };
|
||
mchReceiveTask(params).then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '接单成功', icon: 'success' });
|
||
this.getDetail(); // 刷新详情
|
||
} else {
|
||
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleComplete() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要完成任务吗？',
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const params = { id: this.id };
|
||
mchCompleteTask(params).then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '完成成功', icon: 'success' });
|
||
this.getDetail(); // 刷新详情
|
||
} else {
|
||
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleCancel() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消任务吗？',
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const params = { id: this.id };
|
||
appCancelTask(params).then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '取消成功', icon: 'success' });
|
||
this.getDetail(); // 刷新详情
|
||
} else {
|
||
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handleContact() {
|
||
uni.navigateTo({ url: `/pages/mchCustom/index?mchId=${this.detail.mchId}&mode=user` })
|
||
},
|
||
handleAfterSale() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要申请售后吗？',
|
||
confirmText: '确认',
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const params = { id: this.id };
|
||
appAfterSaleTask(params).then(res => {
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '申请售后成功', icon: 'success' });
|
||
this.getDetail(); // 刷新详情
|
||
} else {
|
||
uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handleCall() {
|
||
if (this.detail.createMobile) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.detail.createMobile,
|
||
success: () => {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail: (err) => {
|
||
console.error('拨打电话失败', err);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.task-detail {
|
||
padding: 20rpx;
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.info-card, .video-card, .map-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f8f9fc;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-btn {
|
||
min-width: 120rpx;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
background: #2979ff;
|
||
border-radius: 26rpx;
|
||
padding: 0 24rpx;
|
||
border: none;
|
||
margin: 0;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
.nav-text {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.type-tag {
|
||
background-color: #e6f4ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.status-tag {
|
||
&.status-waiting {
|
||
color: #E6A23C;
|
||
background-color: #fdf6ec;
|
||
}
|
||
|
||
&.status-received {
|
||
color: #409EFF;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
&.status-finished {
|
||
color: #67C23A;
|
||
background-color: #f0f9eb;
|
||
}
|
||
|
||
&.status-cancel {
|
||
color: #909399;
|
||
background-color: #f4f4f5;
|
||
}
|
||
|
||
&.status-after-sale {
|
||
color: #F56C6C;
|
||
background-color: #fef0f0;
|
||
}
|
||
}
|
||
|
||
.price-section {
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx;
|
||
margin: 20rpx 0;
|
||
|
||
.price-content {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
font-size: 28rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.total {
|
||
margin-bottom: 16rpx;
|
||
|
||
.price-label {
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #2979ff;
|
||
}
|
||
}
|
||
|
||
.price-label {
|
||
color: #666;
|
||
}
|
||
|
||
.price-value {
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-list {
|
||
.info-item {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
width: 140rpx;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
|
||
&.phone-number {
|
||
color: #007aff;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
.edit-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
color: #2979ff;
|
||
}
|
||
}
|
||
|
||
.address-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add-placeholder {
|
||
width: 100%;
|
||
background: #ffffff71;
|
||
border: 2rpx dashed #2979ff;
|
||
border-radius: 10rpx;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 200rpx;
|
||
box-sizing: border-box;
|
||
margin: 20rpx 0;
|
||
}
|
||
.video-player {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
background: #000;
|
||
}
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 24rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
z-index: 100;
|
||
}
|
||
|
||
.action-btn {
|
||
background: #007aff;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
font-size: 28rpx;
|
||
padding: 0 40rpx;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
border: none;
|
||
width: fit-content;
|
||
margin: 0;
|
||
}
|
||
</style>
|