From 80c0aa2a864071ad77d6c7de7c508348b2eb2fee Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期六, 25 四月 2026 14:46:20 +0800
Subject: [PATCH] app
---
app/pages/order-detail/order-detail.vue | 320 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 235 insertions(+), 85 deletions(-)
diff --git a/app/pages/order-detail/order-detail.vue b/app/pages/order-detail/order-detail.vue
index 2a53dc9..26cebf4 100644
--- a/app/pages/order-detail/order-detail.vue
+++ b/app/pages/order-detail/order-detail.vue
@@ -2,7 +2,7 @@
<view class="order-detail-page">
<view v-if="!showMapStatus" class="order-detail-page__simple-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="order-detail-page__simple-nav-inner">
- <text class="order-detail-page__simple-nav-title">{{ detailStatus === 'rated' ? '璁㈠崟宸茶瘎浠�' : '璁㈠崟宸插畬鎴�' }}</text>
+ <text class="order-detail-page__simple-nav-title">{{ statusTextMap[orderDetail.status] || '璁㈠崟璇︽儏' }}</text>
</view>
</view>
@@ -27,11 +27,11 @@
<view class="order-detail-page__status-bar">
<view class="order-detail-page__status-left">
<view class="order-detail-page__status-dot"></view>
- <text class="order-detail-page__status-title">{{ statusTextMap[detailStatus] || '寰呭彇璐�' }}</text>
+ <text class="order-detail-page__status-title">{{ statusTextMap[orderDetail.status] || '寰呭彇璐�' }}</text>
</view>
<view class="order-detail-page__status-right">
- <text v-if="detailStatus === 'pickup'" class="order-detail-page__status-cancel">鍙栨秷璁㈠崟</text>
- <text class="order-detail-page__status-no">#1</text>
+ <text v-if="orderDetail.status === 3" class="order-detail-page__status-cancel">鍙栨秷璁㈠崟</text>
+ <text class="order-detail-page__status-no">#{{ orderIndex }}</text>
</view>
</view>
</view>
@@ -42,50 +42,51 @@
<view v-if="showMapStatus" class="order-detail-page__summary">
<view class="order-detail-page__summary-left">
<view class="order-detail-page__head-left">
- <text class="order-detail-page__time">35鍒嗛挓鍐�</text>
- <text class="order-detail-page__time-sub">閫佽揪</text>
+ <text class="order-detail-page__time">{{ orderDetail.remainMinutes }}</text>
+ <text class="order-detail-page__time-sub">鍒嗛挓</text>
</view>
<view class="order-detail-page__tags">
- <image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
- <text class="order-detail-page__tag-text">璐甸噸鐗╁搧</text>
+ <image v-if="orderDetail.isUrgent === 1" class="order-detail-page__tag-icon" src="/static/image/ic_jisuda@2x.png" mode="widthFix"></image>
+ <image v-else class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
+ <text v-if="orderDetail.isValuable" class="order-detail-page__tag-text">璐甸噸鐗╁搧</text>
</view>
</view>
<view class="order-detail-page__summary-right">
- <text class="order-detail-page__price">楼20.5</text>
- <text class="order-detail-page__extra">鍚姞鎬ヂ�3.0</text>
+ <text class="order-detail-page__price">楼{{ (orderDetail.driverFee / 100).toFixed(1) }}</text>
+ <text v-if="orderDetail.urgentAmount" class="order-detail-page__extra">鍚姞鎬ヂ{ orderDetail.urgentAmount / 100 }}</text>
</view>
</view>
<view v-else class="order-detail-page__done-summary">
<view class="order-detail-page__done-summary-left">
- <text class="order-detail-page__done-title">{{ detailStatus === 'rated' ? '璁㈠崟宸茶瘎浠�' : '璁㈠崟宸插畬鎴�' }}</text>
+ <text class="order-detail-page__done-title">{{ statusTextMap[orderDetail.status] }}</text>
<view class="order-detail-page__tags order-detail-page__tags--done">
- <image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
- <text class="order-detail-page__tag-text">璐甸噸鐗╁搧</text>
+ <image v-if="orderDetail.isUrgent === 1" class="order-detail-page__tag-icon" src="/static/image/ic_jisuda@2x.png" mode="widthFix"></image>
+ <image v-else class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
+ <text v-if="orderDetail.isValuable" class="order-detail-page__tag-text">璐甸噸鐗╁搧</text>
</view>
</view>
<view class="order-detail-page__done-summary-right">
<view class="order-detail-page__done-price-row">
- <text v-if="detailStatus === 'rated'" class="order-detail-page__settled-tag">宸茬粨绠�</text>
- <text class="order-detail-page__price">楼20.5</text>
+ <text class="order-detail-page__price">楼{{ (orderDetail.driverFee / 100).toFixed(1) }}</text>
</view>
- <text class="order-detail-page__extra">鍚姞鎬ヂ�3.0</text>
+ <text v-if="orderDetail.urgentAmount" class="order-detail-page__extra">鍚姞鎬ヂ{ orderDetail.urgentAmount / 100 }}</text>
</view>
</view>
<view class="order-detail-page__route-list">
<view class="order-detail-page__route-item">
<view class="order-detail-page__route-left">
- <text class="order-detail-page__distance-top">349</text>
+ <text class="order-detail-page__distance-top">{{ orderDetail.takeDistance }}</text>
<text class="order-detail-page__distance-unit">m</text>
<view class="order-detail-page__route-divider"></view>
</view>
<view class="order-detail-page__route-main">
<view class="order-detail-page__route-texts">
- <text class="order-detail-page__route-title">涓搧蹇繍鍗楃珯鏃楄埌搴�</text>
- <text class="order-detail-page__route-desc">鑾茶姳璺�200鍙疯幉鑺变骇涓氬洯F鏍�401</text>
+ <text class="order-detail-page__route-title">{{ orderDetail.takeName }}</text>
+ <text class="order-detail-page__route-desc">{{ orderDetail.depositShopAddress }}</text>
</view>
<view class="order-detail-page__route-actions">
<image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
@@ -98,13 +99,13 @@
<view class="order-detail-page__route-left">
<view class="order-detail-page__route-pin"></view>
<view class="order-detail-page__route-divider order-detail-page__route-divider--light"></view>
- <text class="order-detail-page__distance-top">12.5</text>
- <text class="order-detail-page__distance-unit">km</text>
+ <text class="order-detail-page__distance-top">{{ orderDetail.depositDistance }}</text>
+ <text class="order-detail-page__distance-unit"></text>
</view>
<view class="order-detail-page__route-main">
<view class="order-detail-page__route-texts">
- <text class="order-detail-page__route-title">浣宠嫅宸撮粠閮藉競3鏈�10鏍�301瀹�</text>
- <text class="order-detail-page__route-desc">娲炲涵婀栬矾涓庢箹鍖楄矾浜ゅ弶鍙ｈタ150绫�</text>
+ <text class="order-detail-page__route-title">{{ orderDetail.depositShopName }}</text>
+ <text class="order-detail-page__route-desc">{{ orderDetail.depositShopAddress }}</text>
</view>
<view class="order-detail-page__route-actions">
<image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
@@ -114,11 +115,11 @@
</view>
</view>
- <view v-if="showMapStatus" class="order-detail-page__qrcode-wrap">
+ <view v-if="orderDetail.status === 4 && orderDetail.takeShopId" class="order-detail-page__qrcode-wrap">
<view class="order-detail-page__qrcode-box">
- <image class="order-detail-page__qrcode-image" src="/static/logo.png" mode="aspectFit"></image>
+ <image class="order-detail-page__qrcode-image" :src="'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + orderDetail.driverVerifyCode" mode="aspectFit"></image>
</view>
- <text class="order-detail-page__qrcode-value">767889</text>
+ <text class="order-detail-page__qrcode-value">{{ orderDetail.driverVerifyCode }}</text>
<text class="order-detail-page__qrcode-label">鍙栬揣鐮�</text>
</view>
</view>
@@ -126,10 +127,10 @@
<view class="order-detail-page__section">
<text class="order-detail-page__section-title">瀹㈡埛淇℃伅</text>
<view class="order-detail-page__row-info">
- <text class="order-detail-page__row-text">鍒樺厛鐢燂紙鎵嬫満鍙�2878锛�</text>
- <image class="order-detail-page__row-icon" src="/static/image/ic_call@2x.png" mode="aspectFit"></image>
+ <text class="order-detail-page__row-text">{{ orderDetail.contactPhone }}</text>
+ <image class="order-detail-page__row-icon" src="/static/image/ic_call@2x.png" mode="aspectFit" @click="makePhoneCall"></image>
</view>
- <view v-if="detailStatus === 'rated'" class="order-detail-page__comment-card">
+ <view v-if="orderDetail.status === 7" class="order-detail-page__comment-card">
<text class="order-detail-page__comment-title">瀹㈡埛宸茶瘎浠凤細</text>
<view class="order-detail-page__comment-score">
<text class="order-detail-page__comment-star">鈽�</text>
@@ -141,11 +142,11 @@
</view>
<view class="order-detail-page__section">
- <text class="order-detail-page__section-title">鐗╁搧娓呭崟锛堝叡8浠讹級</text>
+ <text class="order-detail-page__section-title">鐗╁搧娓呭崟锛堝叡{{ goodsList.length }}浠讹級</text>
<view class="order-detail-page__goods-list">
<view v-for="item in goodsList" :key="item.name" class="order-detail-page__goods-item">
- <text class="order-detail-page__goods-name">{{ item.name }}</text>
- <text class="order-detail-page__goods-count">x{{ item.count }}</text>
+ <text class="order-detail-page__goods-name" :style="item.isOversized === 1 ? 'color: #FF0020;' : ''">{{ item.name }}</text>
+ <text class="order-detail-page__goods-count">x{{ item.quantity }}</text>
</view>
</view>
</view>
@@ -163,19 +164,19 @@
<view class="order-detail-page__detail-list">
<view class="order-detail-page__detail-item">
<text class="order-detail-page__detail-label">璁㈠崟缂栧彿锛�</text>
- <text class="order-detail-page__detail-value">202107131749250001</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.code }}</text>
</view>
- <view class="order-detail-page__detail-item">
+ <view v-if="orderDetail.createTime" class="order-detail-page__detail-item">
<text class="order-detail-page__detail-label">涓嬪崟鏃堕棿锛�</text>
- <text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.createTime }}</text>
</view>
- <view class="order-detail-page__detail-item">
+ <view v-if="orderDetail.acceptTime" class="order-detail-page__detail-item">
<text class="order-detail-page__detail-label">鎺ュ崟鏃堕棿锛�</text>
- <text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.acceptTime }}</text>
</view>
<view class="order-detail-page__detail-item">
<text class="order-detail-page__detail-label">璁㈠崟澶囨敞锛�</text>
- <text class="order-detail-page__detail-value">-</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.remark || '-' }}</text>
</view>
</view>
</view>
@@ -211,16 +212,15 @@
</view>
<view class="photo-popup__photos">
- <view class="photo-popup__upload-card">
- <image class="photo-popup__upload-icon" src="/static/image/ic_photo@2x.png" mode="aspectFit"></image>
- <text class="photo-popup__upload-text">鐐瑰嚮鎷嶇収</text>
- </view>
-
- <view class="photo-popup__preview-card">
- <image class="photo-popup__preview-image" src="/static/logo.png" mode="aspectFill"></image>
- <view class="photo-popup__preview-mask">
+ <view v-for="(photo, index) in uploadedPhotos" :key="index" class="photo-popup__preview-card">
+ <image class="photo-popup__preview-image" :src="photo" mode="aspectFill"></image>
+ <view class="photo-popup__preview-mask" @click="deletePhoto(index)">
<text class="photo-popup__preview-delete">鍒犻櫎</text>
</view>
+ </view>
+
+ <view v-if="uploadedPhotos.length < 3" class="photo-popup__upload-card" @click="chooseImage">
+ <image class="photo-popup__upload-icon" src="/static/image/btn_upload2@2x.png" mode="aspectFit"></image>
</view>
</view>
</view>
@@ -240,31 +240,29 @@
export default {
data() {
return {
- detailStatus: 'pickup',
+ orderId: null,
+ orderIndex: null,
+ orderDetail: {},
statusBarHeight: 0,
topFixedHeight: 0,
showPhotoPopup: false,
photoPopupMode: '',
photoRemark: '',
+ uploadedPhotos: [],
statusTextMap: {
- pickup: '寰呭彇璐�',
- delivering: '閰嶉�佷腑',
- finished: '宸插畬鎴�',
- rated: '宸茶瘎浠�',
- cancelled: '宸插彇娑�'
+ 2: '寰呮帴鍗�',
+ 3: '寰呭彇璐�',
+ 4: '閰嶉�佷腑',
+ 7: '宸插畬鎴�',
+ 99: '宸插彇娑�'
},
- goodsList: [
- { name: '澶т欢琛屾潕', count: 1 },
- { name: '涓欢琛屾潕', count: 2 },
- { name: '灏忎欢琛屾潕', count: 3 },
- { name: '鑳屽寘', count: 2 }
- ],
- photos: ['/static/logo.png', '/static/logo.png', '/static/logo.png']
+ goodsList: [],
+ photos: []
}
},
computed: {
showMapStatus() {
- return this.detailStatus === 'pickup' || this.detailStatus === 'delivering'
+ return this.orderDetail.status === 2 || this.orderDetail.status === 3 || this.orderDetail.status === 4
},
mapData() {
const startPoint = { latitude: 31.829512, longitude: 117.239211 }
@@ -300,54 +298,206 @@
}
},
footerButtons() {
- const buttonMap = {
- pickup: [
- { text: '鍙栨秷璁㈠崟', primary: false },
- { text: '鎷嶇収鍙栬揣', primary: true }
- ],
- delivering: [
- { text: '鎷嶇収閫佽揪', primary: true }
- ],
- finished: [],
- rated: [],
- cancelled: []
+ const status = this.orderDetail.status
+ const takeShopId = this.orderDetail.takeShopId
+
+ if (status === 2) {
+ return [{ text: '绔嬪嵆鎶㈠崟', primary: true, action: 'grab' }]
}
- return buttonMap[this.detailStatus] || []
+ if (status === 3) {
+ return [
+ { text: '鍙栨秷璁㈠崟', primary: false, action: 'cancel' },
+ { text: '鎷嶇収鍙栬揣', primary: true, action: 'pickup' }
+ ]
+ }
+
+ if (status === 4) {
+ if (!takeShopId) {
+ return [{ text: '鎷嶇収閫佽揪', primary: true, action: 'deliver' }]
+ }
+ return []
+ }
+
+ return []
},
photoPopupTitle() {
- return this.photoPopupMode === 'delivering' ? '鎷嶇収閫佽揪' : '鎷嶇収鍙栬揣'
+ return this.photoPopupMode === 'deliver' ? '鎷嶇収閫佽揪' : '鎷嶇収鍙栬揣'
},
photoPopupLabel() {
- return this.photoPopupMode === 'delivering' ? '鎷嶆憚閫佽揪鐓х墖' : '鎷嶆憚鍙栬揣鐓х墖'
+ return this.photoPopupMode === 'deliver' ? '鎷嶆憚閫佽揪鐓х墖' : '鎷嶆憚鍙栬揣鐓х墖'
},
photoPopupSubmitText() {
- return this.photoPopupMode === 'delivering' ? '纭閫佽揪' : '纭鍙栬揣'
+ return this.photoPopupMode === 'deliver' ? '纭閫佽揪' : '纭鍙栬揣'
}
},
- onLoad() {
+ onLoad(options) {
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
- const options = currentPage && currentPage.options ? currentPage.options : {}
+ const pageOptions = currentPage && currentPage.options ? currentPage.options : {}
const systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = systemInfo.statusBarHeight || 0
- this.detailStatus = options.status || 'pickup'
+ this.orderId = options.id || pageOptions.id
+ this.orderIndex = options.index || pageOptions.index
this.topFixedHeight = uni.upx2px(500 + 92)
+ if (this.orderId) {
+ this.getOrderDetail()
+ }
},
methods: {
+ getOrderDetail() {
+ console.log('getOrderDetail', this.orderId)
+ this.$u.api.orderDetail({ orderId: this.orderId }).then(res => {
+ console.log(res)
+ if (res.code === 200) {
+ this.orderDetail = res.data
+ console.log(this.orderDetail)
+ this.goodsList = res.data.items || []
+ this.photos = res.data.photos || []
+ }
+ }).catch(err => {
+ console.log('err', err)
+ })
+ },
+
+ makePhoneCall() {
+ if (this.orderDetail.contactPhone) {
+ uni.makePhoneCall({
+ phoneNumber: this.orderDetail.contactPhone
+ })
+ }
+ },
+
handleFooterAction(button) {
- if (!button.primary) {
+ const action = button.action
+
+ if (action === 'cancel') {
+ this.handleCancelOrder()
return
}
- this.photoPopupMode = this.detailStatus === 'delivering' ? 'delivering' : 'pickup'
- this.showPhotoPopup = true
+ if (action === 'pickup' || action === 'deliver') {
+ this.uploadedPhotos = []
+ this.photoRemark = ''
+ this.photoPopupMode = action
+ this.showPhotoPopup = true
+ return
+ }
+
+ if (action === 'grab') {
+ this.handleGrabOrder()
+ return
+ }
+ },
+ handleCancelOrder() {
+ uni.showModal({
+ title: '娓╅Θ鎻愮ず',
+ content: '纭畾瑕佸彇娑堣鍗曞悧锛�',
+ confirmColor: '#0055FF',
+ cancelColor: '#666666',
+ success: (res) => {
+ if (res.confirm) {
+ this.$u.api.cancelOrder({ orderId: this.orderId }).then(res => {
+ if (res.code === 200) {
+ uni.showToast({ title: '鍙栨秷鎴愬姛', icon: 'success' })
+ this.getOrderDetail()
+ } else {
+ uni.showToast({ title: res.msg || '鍙栨秷澶辫触', icon: 'none' })
+ }
+ })
+ }
+ }
+ })
+ },
+ handleGrabOrder() {
+ uni.showModal({
+ title: '娓╅Θ鎻愮ず',
+ content: '鏄惁纭鎺ュ崟锛�',
+ confirmColor: '#0055FF',
+ cancelColor: '#666666',
+ success: (res) => {
+ if (res.confirm) {
+ this.$u.api.grabOrder({ orderId: this.orderId }).then(res => {
+ if (res.code === 200) {
+ uni.showToast({ title: '鎺ュ崟鎴愬姛', icon: 'success' })
+ uni.navigateBack()
+ } else {
+ uni.showToast({ title: res.msg || '鎺ュ崟澶辫触', icon: 'none' })
+ }
+ })
+ }
+ }
+ })
},
closePhotoPopup() {
this.showPhotoPopup = false
},
+ chooseImage() {
+ const count = 3 - this.uploadedPhotos.length
+ uni.chooseImage({
+ count: count,
+ sourceType: ['camera', 'album'],
+ success: (res) => {
+ const tempFilePaths = res.tempFilePaths
+ this.uploadedPhotos = this.uploadedPhotos.concat(tempFilePaths)
+ }
+ })
+ },
+ deletePhoto(index) {
+ this.uploadedPhotos.splice(index, 1)
+ },
submitPhotoPopup() {
- this.showPhotoPopup = false
+ if (this.uploadedPhotos.length === 0) {
+ uni.showToast({ title: '璇蜂笂浼犵収鐗�', icon: 'none' })
+ return
+ }
+ uni.showLoading({ title: '涓婁紶涓�...' })
+ const uploadTasks = this.uploadedPhotos.map(path => {
+ return new Promise((resolve, reject) => {
+ uni.uploadFile({
+ url: this.$baseUrl + 'web/public/upload',
+ filePath: path,
+ name: 'file',
+ formData: {
+ folder: 'order'
+ },
+ success: (uploadRes) => {
+ const data = JSON.parse(uploadRes.data)
+ if (data.code === 200) {
+ resolve(data.data)
+ } else {
+ reject(new Error(data.msg))
+ }
+ },
+ fail: (err) => {
+ reject(err)
+ }
+ })
+ })
+ })
+
+ Promise.all(uploadTasks).then(images => {
+ console.log(images)
+ const api = this.photoPopupMode === 'deliver' ? 'confirmDeliver' : 'confirmPickup'
+ const params = {
+ images: images.map(img => img.imgaddr),
+ orderId: this.orderId,
+ remark: this.photoRemark
+ }
+ return this.$u.api[api](params)
+ }).then(res => {
+ uni.hideLoading()
+ if (res.code === 200) {
+ uni.showToast({ title: '鎻愪氦鎴愬姛', icon: 'success' })
+ this.showPhotoPopup = false
+ this.getOrderDetail()
+ } else {
+ uni.showToast({ title: res.msg || '鎻愪氦澶辫触', icon: 'none' })
+ }
+ }).catch(err => {
+ uni.hideLoading()
+ uni.showToast({ title: err.message || '涓婁紶澶辫触', icon: 'none' })
+ })
}
}
}
@@ -969,9 +1119,9 @@
}
&__upload-icon {
- width: 48rpx;
- height: 48rpx;
- opacity: 0.55;
+ width: 160rpx;
+ height: 160rpx;
+ // opacity: 0.55;
}
&__upload-text {
--
Gitblit v1.9.3