From 00a7a61df86db969f2ba61c508d02ba4709ce3d4 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 05 六月 2026 10:09:06 +0800
Subject: [PATCH] 改bug
---
app/pages/order-detail/order-detail.vue | 397 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 384 insertions(+), 13 deletions(-)
diff --git a/app/pages/order-detail/order-detail.vue b/app/pages/order-detail/order-detail.vue
index 69ba6a6..d098455 100644
--- a/app/pages/order-detail/order-detail.vue
+++ b/app/pages/order-detail/order-detail.vue
@@ -280,11 +280,83 @@
<button class="photo-popup__submit" hover-class="photo-popup__submit--hover" @click="submitPhotoPopup">{{ photoPopupSubmitText }}</button>
</view>
</u-popup>
+
+ <u-popup :show="showTimelinePopup" round="20" mode="bottom" @close="closeTimelinePopup">
+ <view class="track-popup">
+ <view class="track-popup__header">
+ <text class="track-popup__title">璁㈠崟杞ㄨ抗</text>
+ <view class="track-popup__close" @click="closeTimelinePopup">脳</view>
+ </view>
+ <scroll-view scroll-y class="track-popup__body">
+ <view class="track-empty" v-if="!timelineList.length">鏆傛棤杞ㄨ抗淇℃伅</view>
+ <view class="track-list" v-else>
+ <view class="track-item" v-for="(track, index) in timelineList" :key="track.key || index">
+ <view class="track-item__content">
+ <view class="track-item__rail">
+ <image v-if="index === 0" class="track-item__dot track-item__dot--active" src="/static/image/dian.png" mode="aspectFit"></image>
+ <view v-else class="track-item__dot"></view>
+ <view class="track-item__line" v-if="index !== timelineList.length - 1"></view>
+ </view>
+ <view class="track-item__body">
+ <text class="track-item__time">{{ track.time }}</text>
+ <text class="track-item__desc">{{ track.title }}</text>
+ <view class="track-item__images" v-if="track.images && track.images.length">
+ <image
+ v-for="(img, imgIndex) in track.images"
+ :key="track.key + '-' + imgIndex"
+ :src="img"
+ mode="aspectFill"
+ @click="previewTimelineImages(track.images, imgIndex)"
+ ></image>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ <!-- <view class="timeline-popup">
+ <view class="timeline-popup__header">
+ <view class="timeline-popup__placeholder"></view>
+ <text class="timeline-popup__title">璁㈠崟杞ㄨ抗</text>
+ <u-icon name="close" color="#A7ACB5" size="26" @click="closeTimelinePopup"></u-icon>
+ </view>
+
+ <scroll-view class="timeline-popup__scroll" scroll-y>
+ <view v-if="timelineList.length" class="timeline-popup__list">
+ <view v-for="(item, index) in timelineList" :key="index" class="timeline-popup__item">
+ <view class="timeline-popup__axis">
+ <view class="timeline-popup__dot" :class="index === 0 ? 'timeline-popup__dot--active' : ''"></view>
+ <view v-if="index !== timelineList.length - 1" class="timeline-popup__line"></view>
+ </view>
+
+ <view class="timeline-popup__content">
+ <text class="timeline-popup__time">{{ item.time || '-' }}</text>
+ <text class="timeline-popup__desc">{{ item.title || '-' }}</text>
+ <view v-if="item.images.length" class="timeline-popup__images">
+ <image
+ v-for="(image, imageIndex) in item.images"
+ :key="imageIndex"
+ class="timeline-popup__image"
+ :src="image"
+ mode="aspectFill"
+ @click="previewTimelineImages(item.images, imageIndex)"
+ ></image>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view v-else class="timeline-popup__empty">鏆傛棤璁㈠崟杞ㄨ抗</view>
+ </scroll-view>
+ </view> -->
+ </u-popup>
</view>
</template>
<script>
import { mapState } from 'vuex'
+ import { chooseImageWithNotice, getLocationWithNotice } from '@/utils/utils'
export default {
data() {
@@ -301,6 +373,8 @@
showCancelModal: false,
cancelRemain: 0,
showGrabModal: false,
+ showTimelinePopup: false,
+ timelineList: [],
currentLocation: null,
routePoints: [],
locationTimer: null,
@@ -409,26 +483,27 @@
footerButtons() {
const status = this.orderDetail.status
const takeShopId = this.orderDetail.takeShopId
+ const buttons = [{ text: '璁㈠崟杞ㄨ抗', primary: false, action: 'timeline' }]
if (status === 2) {
- return [{ text: '绔嬪嵆鎶㈠崟', primary: true, action: 'grab' }]
+ return buttons.concat([{ text: '绔嬪嵆鎶㈠崟', primary: true, action: 'grab' }])
}
if (status === 3) {
- return [
+ return buttons.concat([
{ text: '鍙栨秷璁㈠崟', primary: false, action: 'cancel' },
{ text: '鎷嶇収鍙栬揣', primary: true, action: 'pickup' }
- ]
+ ])
}
if (status === 4) {
if (!takeShopId) {
- return [{ text: '鎷嶇収閫佽揪', primary: true, action: 'deliver' }]
+ return buttons.concat([{ text: '鎷嶇収閫佽揪', primary: true, action: 'deliver' }])
}
- return []
+ return buttons
}
- return []
+ return buttons
},
photoPopupTitle() {
return this.photoPopupMode === 'deliver' ? '鎷嶇収閫佽揪' : '鎷嶇収鍙栬揣'
@@ -468,7 +543,7 @@
initOperationRadius() {
console.log('initOperationRadius')
return new Promise((resolve) => {
- uni.getLocation({
+ getLocationWithNotice({
type: 'gcj02',
success: (res) => {
this.$u.api.checkDriverOperationRadius({
@@ -503,6 +578,8 @@
})
resolve(false)
}
+ }).catch(() => {
+ resolve(false)
})
})
},
@@ -531,7 +608,7 @@
},
fetchLocation() {
- uni.getLocation({
+ getLocationWithNotice({
type: 'gcj02',
success: (res) => {
this.currentLocation = {
@@ -543,7 +620,7 @@
fail: (err) => {
console.log('鑾峰彇浣嶇疆澶辫触', err)
}
- })
+ }).catch(() => {})
},
getRoutePlan() {
@@ -636,6 +713,59 @@
})
},
+ normalizeTimelineImages(images) {
+ if (Array.isArray(images)) {
+ return images.filter(item => !!item)
+ }
+
+ if (typeof images === 'string') {
+ return images.split(',').map(item => item.trim()).filter(item => !!item)
+ }
+
+ return []
+ },
+
+ openTimelinePopup() {
+ if (!this.orderId) {
+ uni.showToast({ title: '璁㈠崟ID涓嶅瓨鍦�', icon: 'none' })
+ return
+ }
+
+ uni.showLoading({ title: '鍔犺浇涓�...' })
+ this.$u.api.timeline(this.orderId).then(res => {
+ if (res.code === 200) {
+ const list = Array.isArray(res.data) ? res.data : []
+ this.timelineList = list.map(item => ({
+ time: item.time || '',
+ title: item.title || '',
+ images: this.normalizeTimelineImages(item.images)
+ }))
+ this.showTimelinePopup = true
+ } else {
+ uni.showToast({ title: res.msg || '鑾峰彇璁㈠崟杞ㄨ抗澶辫触', icon: 'none' })
+ }
+ }).catch(() => {
+ uni.showToast({ title: '鑾峰彇璁㈠崟杞ㄨ抗澶辫触', icon: 'none' })
+ }).finally(() => {
+ uni.hideLoading()
+ })
+ },
+
+ closeTimelinePopup() {
+ this.showTimelinePopup = false
+ },
+
+ previewTimelineImages(images, currentIndex) {
+ if (!images || !images.length) {
+ return
+ }
+
+ uni.previewImage({
+ current: images[currentIndex],
+ urls: images
+ })
+ },
+
handleFooterAction(button) {
const action = button.action
@@ -659,6 +789,10 @@
if (action === 'grab') {
this.handleGrabOrder()
return
+ }
+
+ if (action === 'timeline') {
+ this.openTimelinePopup()
}
},
handleCancelOrder() {
@@ -706,25 +840,25 @@
},
chooseImage() {
const count = 3 - this.uploadedPhotos.length
- uni.chooseImage({
+ chooseImageWithNotice({
count: count,
sourceType: ['camera', 'album'],
success: (res) => {
const tempFilePaths = res.tempFilePaths
this.uploadedPhotos = this.uploadedPhotos.concat(tempFilePaths)
}
- })
+ }).catch(() => {})
},
deletePhoto(index) {
this.uploadedPhotos.splice(index, 1)
},
- submitPhotoPopup() {
+ submitPhotoPopup() {
if (this.uploadedPhotos.length === 0) {
uni.showToast({ title: '璇蜂笂浼犵収鐗�', icon: 'none' })
return
}
uni.showLoading({ title: '涓婁紶涓�...' })
- uni.getLocation({
+ getLocationWithNotice({
type: 'gcj02',
success: (locationRes) => {
this.doUploadPhotos(locationRes.latitude, locationRes.longitude)
@@ -732,6 +866,8 @@
fail: () => {
this.doUploadPhotos(null, null)
}
+ }).catch(() => {
+ this.doUploadPhotos(null, null)
})
},
@@ -1326,6 +1462,128 @@
}
}
}
+
+ .track-popup {
+ background: #FFFFFF;
+ border-radius: 24rpx 24rpx 0 0;
+ padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
+ box-sizing: border-box;
+ .track-popup__header {
+ height: 88rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ }
+ .track-popup__title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #222222;
+ }
+ .track-popup__close {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 56rpx;
+ height: 56rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 56rpx;
+ line-height: 1;
+ color: #A5A7AD;
+ }
+ .track-popup__body {
+ height: 50vh;
+ }
+ .track-empty {
+ line-height: 50vh;
+ text-align: center;
+ font-size: 28rpx;
+ color: #999999;
+ }
+ .track-list {
+ padding: 12rpx 0 0;
+ }
+ .track-item {
+ position: relative;
+ }
+ .track-item__rail {
+ width: 34rpx;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ align-self: stretch;
+ position: relative;
+ }
+ .track-item__dot {
+ width: 16rpx;
+ height: 16rpx;
+ flex-shrink: 0;
+ position: relative;
+ z-index: 1;
+ border-radius: 50%;
+ background: #CCCCCC;
+ margin-top: 12rpx;
+ }
+ .track-item__dot--active {
+ width: 32rpx;
+ height: 32rpx;
+ flex-shrink: 0;
+ display: block;
+ position: relative;
+ z-index: 1;
+ margin-top: 4rpx;
+ background: transparent;
+ }
+ .track-item__line {
+ width: 2rpx;
+ position: absolute;
+ left: 50%;
+ top: 28rpx;
+ bottom: -30rpx;
+ transform: translateX(-50%);
+ background: #E6EAF0;
+ }
+ .track-item__content {
+ display: flex;
+ align-items: flex-start;
+ column-gap: 22rpx;
+ padding: 0 0 20rpx;
+ }
+ .track-item__body {
+ flex: 1;
+ min-width: 0;
+ }
+ .track-item__time {
+ display: block;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #666666;
+ line-height: 1.4;
+ }
+ .track-item__desc {
+ display: block;
+ margin-top: 22rpx;
+ font-weight: 500;
+ font-size: 30rpx;
+ color: #666666;
+ }
+ .track-item__images {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18rpx;
+ margin-top: 24rpx;
+ image {
+ width: 130rpx;
+ height: 130rpx;
+ border-radius: 12rpx;
+ background: #F3F5F8;
+ }
+ }
+ }
.photo-popup {
padding: 30rpx 28rpx calc(env(safe-area-inset-bottom) + 28rpx);
@@ -1484,4 +1742,117 @@
}
}
}
+
+ .timeline-popup {
+ padding: 26rpx 28rpx calc(env(safe-area-inset-bottom) + 28rpx);
+ background: #ffffff;
+ border-top-left-radius: 20rpx;
+ border-top-right-radius: 20rpx;
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &__placeholder {
+ width: 52rpx;
+ height: 52rpx;
+ flex-shrink: 0;
+ opacity: 0;
+ }
+
+ &__title {
+ font-size: 40rpx;
+ font-weight: 700;
+ color: #222222;
+ }
+
+ &__scroll {
+ max-height: 50vh;
+ margin-top: 30rpx;
+ }
+
+ &__list {
+ padding-bottom: 12rpx;
+ }
+
+ &__item {
+ display: flex;
+ align-items: stretch;
+ }
+
+ &__axis {
+ width: 40rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-shrink: 0;
+ }
+
+ &__dot {
+ width: 18rpx;
+ height: 18rpx;
+ margin-top: 8rpx;
+ border-radius: 50%;
+ background: #D5D9E2;
+ box-shadow: 0 0 0 8rpx #ffffff;
+ z-index: 1;
+
+ &--active {
+ background: #2F80FF;
+ box-shadow: 0 0 0 8rpx rgba(47, 128, 255, 0.14);
+ }
+ }
+
+ &__line {
+ flex: 1;
+ width: 2rpx;
+ margin-top: 8rpx;
+ background: #E5EAF2;
+ }
+
+ &__content {
+ flex: 1;
+ padding: 0 0 40rpx 16rpx;
+ }
+
+ &__time {
+ display: block;
+ font-size: 26rpx;
+ font-weight: 400;
+ color: #808692;
+ line-height: 1.4;
+ }
+
+ &__desc {
+ display: block;
+ margin-top: 18rpx;
+ font-size: 40rpx;
+ font-weight: 600;
+ color: #4A4A4A;
+ line-height: 1.45;
+ }
+
+ &__images {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16rpx;
+ margin-top: 22rpx;
+ }
+
+ &__image {
+ width: 124rpx;
+ height: 124rpx;
+ border-radius: 12rpx;
+ background: #F2F4F7;
+ }
+
+ &__empty {
+ line-height: 50vh;
+ text-align: center;
+ font-size: 28rpx;
+ color: #A0A6B0;
+ }
+ }
</style>
--
Gitblit v1.9.3