From ea2fb93a0dfcde8f5b66825b20f9d9b835a28acc Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 22 五月 2026 10:54:09 +0800
Subject: [PATCH] 提交
---
app/pages/order-detail/order-detail.vue | 889 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 667 insertions(+), 222 deletions(-)
diff --git a/app/pages/order-detail/order-detail.vue b/app/pages/order-detail/order-detail.vue
index 2a53dc9..69ba6a6 100644
--- a/app/pages/order-detail/order-detail.vue
+++ b/app/pages/order-detail/order-detail.vue
@@ -1,14 +1,17 @@
<template>
- <view class="order-detail-page">
+ <view class="order-detail-page" v-if="orderDetail">
<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>
+ <u-icon name="arrow-left" color="#ffffff" size="20" @click="handleBack"></u-icon>
+ <text class="order-detail-page__simple-nav-title">璁㈠崟璇︽儏</text>
+ <u-icon name="arrow-left" color="#106EFA" size="20"></u-icon>
</view>
</view>
<view v-if="showMapStatus" class="order-detail-page__fixed-top">
<view class="order-detail-page__map-wrap">
<map
+ id="orderDetailMap"
class="order-detail-page__map"
:latitude="mapData.center.latitude"
:longitude="mapData.center.longitude"
@@ -19,19 +22,16 @@
:enable-zoom="true"
:enable-scroll="true"
></map>
- <view class="order-detail-page__map-bubble">
- <text class="order-detail-page__map-bubble-text">鍓╀綑3.2km锛岀害4鍒嗛挓</text>
- </view>
</view>
<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" @click="handleCancelOrder">鍙栨秷璁㈠崟</text>
+ <text class="order-detail-page__status-no" v-if="orderIndex">#{{ orderIndex }}</text>
</view>
</view>
</view>
@@ -42,140 +42,158 @@
<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>
+ <template v-if="formattedRemainTime">
+ <text class="order-detail-page__time">{{ formattedRemainTime }}鍐�</text>
+ <text class="order-detail-page__time-sub">閫佽揪</text>
+ </template>
+ <text class="order-detail-page__time" v-else>閰嶉�佸凡瓒呮椂锛岃灏藉揩閫佽揪</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.platformRewardAmount ? ((orderDetail.driverFee + orderDetail.platformRewardAmount) / 100).toFixed(2) : (orderDetail.driverFee / 100).toFixed(2) }}</text>
+ <text v-if="orderDetail.platformRewardAmount" class="order-detail-page__extra">鍚姞鎬ヂ{ (orderDetail.platformRewardAmount / 100).toFixed(2) }}</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(2) }}</text>
</view>
- <text class="order-detail-page__extra">鍚姞鎬ヂ�3.0</text>
+ <text v-if="orderDetail.isUrgent === 1" class="order-detail-page__extra">鍚姞鎬ヂ{ (orderDetail.urgentAmount / 100).toFixed(2) }}</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-unit">m</text>
+ <view class="order-detail-page__route-badge order-detail-page__route-badge--take">鍙�</view>
<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.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>
- <image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit"></image>
+ <view class="order-detail-page__route-actions" v-if="![7,99].includes(orderDetail.status)">
+ <image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit" v-if="[3,4,5].includes(orderDetail.status) && orderDetail.depositShopPhone" @click="makeShopCall('deposit')"></image>
+ <image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit" @click="navigateToAddress('deposit')"></image>
</view>
</view>
</view>
- <view class="order-detail-page__route-item order-detail-page__route-item--end">
+ <view class="order-detail-page__route-item order-detail-page__route-item--end" style="padding-bottom: 30rpx; box-sizing: border-box; border-bottom: 1px solid #E5E5E5;">
<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>
+ <view class="order-detail-page__route-badge order-detail-page__route-badge--send">閫�</view>
</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.takeName }}</text>
+ <text class="order-detail-page__route-desc">{{ orderDetail.takeAddress }}</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>
- <image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit"></image>
+ <view class="order-detail-page__route-actions" v-if="![7,99].includes(orderDetail.status)">
+ <image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit" v-if="[4,5].includes(orderDetail.status) && orderDetail.takeContactPhone" @click="makeShopCall('take')"></image>
+ <image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit" @click="navigateToAddress('take')"></image>
</view>
</view>
</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-label">鍙栬揣鐮�</text>
+ <text class="order-detail-page__qrcode-value">{{ orderDetail.driverVerifyCode }}</text>
+ <text class="order-detail-page__qrcode-label">{{ orderDetail.status === 3 ? '鍙栬揣鐮�' : '瀛樹欢鐮�' }}</text>
</view>
</view>
- <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>
- </view>
- <view v-if="detailStatus === 'rated'" 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>
- <text class="order-detail-page__comment-score-text">4.5</text>
+ <view class="order-detail-page__section" style="margin-top: 30rpx; padding: 0 30rpx; box-sizing: border-box;">
+ <view style="width: 100%; padding-bottom: 30rpx; box-sizing: border-box; border-bottom: 1px solid #E5E5E5;">
+ <text class="order-detail-page__section-title">瀹㈡埛淇℃伅</text>
+ <view class="order-detail-page__row-info">
+ <text class="order-detail-page__row-text">{{ orderDetail.customerInfo || '' }}</text>
+ <!-- <image class="order-detail-page__row-icon" v-if="[3,4].includes(orderDetail.status)" src="/static/image/ic_call@2x.png" mode="aspectFit" @click="makePhoneCall"></image> -->
</view>
- <text class="order-detail-page__comment-content">閫佺殑寰堝揩锛屼笢瑗垮畬濂芥棤鎹�</text>
- <image class="order-detail-page__comment-image" src="/static/logo.png" mode="aspectFill"></image>
+ <view v-if="orderDetail.commentStatus === 1" 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>
+ <text class="order-detail-page__comment-score-text">4.5</text>
+ </view>
+ <text class="order-detail-page__comment-content">{{ orderDetail.commentContent || '' }}</text>
+ <image class="order-detail-page__comment-image" src="/static/logo.png" mode="aspectFill"></image>
+ </view>
</view>
</view>
- <view class="order-detail-page__section">
- <text class="order-detail-page__section-title">鐗╁搧娓呭崟锛堝叡8浠讹級</text>
- <view class="order-detail-page__goods-list">
+ <view class="order-detail-page__section" style="margin-top: 30rpx; padding: 0 30rpx; box-sizing: border-box;">
+ <text class="order-detail-page__section-title">鐗╁搧娓呭崟锛堝叡{{ goodsList.length }}浠讹級</text>
+ <view class="order-detail-page__goods-list" style="width: 100%; padding-bottom: 30rpx; box-sizing: border-box; border-bottom: 1px solid #E5E5E5;">
<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>
- <view class="order-detail-page__section">
+ <view class="order-detail-page__section" style="margin-top: 30rpx; padding: 0 30rpx; box-sizing: border-box;">
<text class="order-detail-page__section-title">鐗╁搧淇℃伅</text>
- <text class="order-detail-page__goods-category">鏂囦欢</text>
+ <text class="order-detail-page__goods-category">{{ orderDetail.goodTypeName || '' }}</text>
<view class="order-detail-page__photos">
- <image v-for="(item, index) in photos" :key="index" class="order-detail-page__photo" :src="item" mode="aspectFill"></image>
+ <view class="order-detail-page__photo" v-for="(item, index) in photos" :key="index">
+ <image :src="item" mode="heightFix" @click="previewImage(item)"></image>
+ </view>
</view>
</view>
- <view class="order-detail-page__section order-detail-page__section--last">
+ <view style="width: 100%; height: 30rpx; background-color: #f9f9f9;"></view>
+
+ <view class="order-detail-page__section order-detail-page__section--last" style="margin-top: 30rpx; padding: 0 30rpx; box-sizing: border-box;">
<text class="order-detail-page__section-title">璁㈠崟淇℃伅</text>
<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="[3,4,5,6,7,99].includes(orderDetail.status)" 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">
+ <view v-if="[3,4,5,6,7,99].includes(orderDetail.status)" 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 v-if="[4,5,6,7,99].includes(orderDetail.status)" class="order-detail-page__detail-item">
+ <text class="order-detail-page__detail-label">鍙栬揣鏃堕棿锛�</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.driverTakeTime || '-' }}</text>
+ </view>
+ <view v-if="[5,6,7,99].includes(orderDetail.status)" class="order-detail-page__detail-item">
+ <text class="order-detail-page__detail-label">瀹屾垚鏃堕棿锛�</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.finishTime || '-' }}</text>
+ </view>
+ <view v-if="orderDetail.isEvaluated === 1" class="order-detail-page__detail-item">
+ <text class="order-detail-page__detail-label">璇勪环鏃堕棿锛�</text>
+ <text class="order-detail-page__detail-value">{{ orderDetail.commentTime || '-' }}</text>
</view>
</view>
</view>
@@ -183,17 +201,47 @@
</scroll-view>
<view v-if="footerButtons.length" class="order-detail-page__footer">
- <button
- v-for="button in footerButtons"
- :key="button.text"
- class="order-detail-page__footer-btn"
- :class="button.primary ? 'order-detail-page__footer-btn--primary' : 'order-detail-page__footer-btn--ghost'"
- hover-class="order-detail-page__footer-btn--hover"
- @click="handleFooterAction(button)"
- >
- {{ button.text }}
- </button>
+ <view></view>
+ <view style="display: flex; align-items: center; gap: 20rpx;">
+ <button
+ v-for="button in footerButtons"
+ :key="button.text"
+ class="order-detail-page__footer-btn"
+ :class="button.primary ? 'order-detail-page__footer-btn--primary' : 'order-detail-page__footer-btn--ghost'"
+ hover-class="order-detail-page__footer-btn--hover"
+ @click="handleFooterAction(button)"
+ >
+ {{ button.text }}
+ </button>
+ </view>
+
</view>
+
+ <u-modal
+ :show="showCancelModal"
+ showCancelButton
+ @cancel="showCancelModal = false"
+ cancelColor="#666666"
+ confirmColor="#0055FF"
+ title="鍙栨秷璁㈠崟纭"
+ @confirm="confirmCancelOrder">
+ <view style="text-align: center;color: #333333;font-size: 28rpx;font-weight: 400;">
+ 鎮ㄤ粖鏃ヨ繕鍙彇娑� {{ cancelRemain }} 娆¤鍗曪紝娆℃暟鐢ㄥ敖鍚庝粖鏃ュ皢鏃犳硶鎺ュ崟锛屾槸鍚︾‘璁ゅ彇娑堬紵
+ </view>
+ </u-modal>
+
+ <u-modal
+ :show="showGrabModal"
+ showCancelButton
+ @cancel="showGrabModal = false"
+ cancelColor="#666666"
+ confirmColor="#0055FF"
+ title="娓╅Θ鎻愮ず"
+ @confirm="confirmGrabOrder">
+ <view style="text-align: center;color: #333333;font-size: 28rpx;font-weight: 400;">
+ {{ orderDetail && orderDetail.hasOversized === 1 ? '鏈鍗曟湁鐗瑰ぇ浠跺昂瀵歌鏉庯紝璇风‘璁ゆ槸鍚︾户缁姠鍗曪紵' : '鏄惁纭鎺ュ崟锛�' }}
+ </view>
+ </u-modal>
<u-popup :show="showPhotoPopup" round="20" mode="bottom" @close="closePhotoPopup">
<view class="photo-popup">
@@ -211,16 +259,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>
@@ -237,117 +284,511 @@
</template>
<script>
+ import { mapState } from 'vuex'
+
export default {
data() {
return {
- detailStatus: 'pickup',
+ orderId: null,
+ orderIndex: null,
+ orderDetail: null,
statusBarHeight: 0,
topFixedHeight: 0,
showPhotoPopup: false,
photoPopupMode: '',
photoRemark: '',
+ uploadedPhotos: [],
+ showCancelModal: false,
+ cancelRemain: 0,
+ showGrabModal: false,
+ currentLocation: null,
+ routePoints: [],
+ locationTimer: null,
+ distance: 0,
+ duration: 0,
+ isWithinOperationRadius: true,
statusTextMap: {
- pickup: '寰呭彇璐�',
- delivering: '閰嶉�佷腑',
- finished: '宸插畬鎴�',
- rated: '宸茶瘎浠�',
- cancelled: '宸插彇娑�'
+ 2: '寰呮帴鍗�',
+ 3: '寰呭彇璐�',
+ 4: '閰嶉�佷腑',
+ 5: '宸查�佽揪',
+ 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: {
+ ...mapState(['userInfo']),
+ formattedRemainTime() {
+ const minutes = this.orderDetail.remainMinutes
+ if (!minutes) return null
+ if (minutes >= 60) {
+ const hours = Math.floor(minutes / 60)
+ const mins = minutes % 60
+ return mins > 0 ? `${hours}灏忔椂${mins}鍒嗛挓` : `${hours}灏忔椂`
+ }
+ return `${minutes}鍒嗛挓`
+ },
showMapStatus() {
- return this.detailStatus === 'pickup' || this.detailStatus === 'delivering'
+ return this.orderDetail.status === 3 || this.orderDetail.status === 4
},
mapData() {
- const startPoint = { latitude: 31.829512, longitude: 117.239211 }
- const endPoint = { latitude: 31.841268, longitude: 117.278695 }
- const routePoints = [
+ const startPoint = this.currentLocation || { latitude: this.orderDetail.navigateLat, longitude: this.orderDetail.navigateLng }
+ const hasEndPoint = this.orderDetail.navigateLat && this.orderDetail.navigateLng
+ const endPoint = { latitude: this.orderDetail.navigateLng, longitude: this.orderDetail.navigateLat }
+
+ let center
+ let scale = 12
+ if (this.currentLocation && hasEndPoint) {
+ const latSpan = Math.abs(this.currentLocation.latitude - endPoint.latitude)
+ const lngSpan = Math.abs(this.currentLocation.longitude - endPoint.longitude)
+ const maxSpan = Math.max(latSpan, lngSpan)
+ center = {
+ latitude: (this.currentLocation.latitude + endPoint.latitude) / 2,
+ longitude: (this.currentLocation.longitude + endPoint.longitude) / 2
+ }
+ if (maxSpan > 0.3) {
+ scale = 9
+ } else if (maxSpan > 0.15) {
+ scale = 10
+ } else if (maxSpan > 0.08) {
+ scale = 11
+ } else if (maxSpan > 0.04) {
+ scale = 12
+ } else if (maxSpan > 0.02) {
+ scale = 13
+ } else if (maxSpan > 0.01) {
+ scale = 14
+ } else if (maxSpan > 0.005) {
+ scale = 15
+ } else if (maxSpan > 0.002) {
+ scale = 16
+ } else {
+ scale = 17
+ }
+ } else if (this.currentLocation) {
+ center = this.currentLocation
+ } else {
+ center = { latitude: this.orderDetail.navigateLat, longitude: this.orderDetail.navigateLng }
+ }
+
+ const markers = [
+ { id: 1, latitude: startPoint.latitude, longitude: startPoint.longitude, iconPath: '/static/image/start.png', width: 32, height: 38, anchor: { x: 0.5, y: 1 } },
+ { id: 2, latitude: endPoint.latitude, longitude: endPoint.longitude, iconPath: '/static/image/end.png', width: 32, height: 38, anchor: { x: 0.5, y: 1 } },
+ { id: 3, latitude: startPoint.latitude, longitude: startPoint.longitude, iconPath: '/static/image/dizhi.png', width: 12, height: 12, anchor: { x: 0.5, y: 0.5 } }
+ ]
+
+ const routePoints = this.routePoints.length > 0 ? this.routePoints : [
startPoint,
- { latitude: 31.831624, longitude: 117.247836 },
- { latitude: 31.834918, longitude: 117.255467 },
- { latitude: 31.838214, longitude: 117.265358 },
- { latitude: 31.840126, longitude: 117.272481 },
endPoint
]
- return {
- center: { latitude: 31.83539, longitude: 117.258953 },
- markers: [
- { id: 1, latitude: startPoint.latitude, longitude: startPoint.longitude, iconPath: '/static/image/map_marker_start.svg', width: 32, height: 38, anchor: { x: 0.5, y: 1 } },
- { id: 2, latitude: endPoint.latitude, longitude: endPoint.longitude, iconPath: '/static/image/map_marker_end.svg', width: 32, height: 38, anchor: { x: 0.5, y: 1 } }
+ const result = {
+ center,
+ markers,
+ polyline: this.routePoints.length > 0 ? [
+ { points: routePoints, color: '#05be76', width: 25, arrowLine: true, dottedLine: false }
+ ] : [
+ { points: routePoints, color: '#05be76', width: 25, arrowLine: true, dottedLine: true }
],
- polyline: [
- { points: routePoints, color: '#00c67a', width: 20, arrowLine: true, dottedLine: true, borderColor: '#469972', borderWidth: 10 }
- ],
- includePoints: routePoints,
- scale: 12
+ includePoints: [startPoint, endPoint],
+ scale
}
+ return result
},
bodyStyle() {
const footerHeight = uni.upx2px(116)
const simpleNavHeight = this.statusBarHeight + uni.upx2px(88)
return {
paddingTop: (this.showMapStatus ? this.topFixedHeight : simpleNavHeight) + 'px',
- height: `calc(100vh - ${this.footerButtons.length ? footerHeight : 0}px)`
+ height: `calc(100vh - ${this.footerButtons.length ? footerHeight + 20 : 20}px)`
}
},
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
this.topFixedHeight = uni.upx2px(500 + 92)
+ if (this.orderId) {
+ this.getOrderDetail()
+ }
},
+
+ onUnload() {
+ if (this.locationTimer) {
+ clearInterval(this.locationTimer)
+ this.locationTimer = null
+ }
+ },
+
methods: {
+ handleBack() {
+ uni.navigateBack({ delta: 1 });
+ },
+ initOperationRadius() {
+ console.log('initOperationRadius')
+ return new Promise((resolve) => {
+ uni.getLocation({
+ type: 'gcj02',
+ success: (res) => {
+ this.$u.api.checkDriverOperationRadius({
+ lat: res.latitude,
+ lng: res.longitude,
+ orderId: this.orderId
+ }).then(res => {
+ if (res.code === 200) {
+ this.isWithinOperationRadius = res.data
+ console.log(res.data)
+ if (!this.isWithinOperationRadius) {
+ uni.showToast({
+ title: '鎮ㄥ綋鍓嶄綅缃笌鏀惰揣鍦板潃璺濈瓒呭嚭鑼冨洿锛岃鍦ㄥ湴鍧�闄勮繎閲嶆柊鎷嶇収',
+ icon: 'none'
+ })
+ resolve(false)
+ } else {
+ resolve(true)
+ }
+ } else {
+ resolve(false)
+ }
+ }).catch(() => {
+ resolve(false)
+ })
+ },
+ fail: () => {
+ this.isWithinOperationRadius = false
+ uni.showToast({
+ title: '鎮ㄥ綋鍓嶄綅缃潈闄愭病鏈夊紑鍚紝璇峰厛寮�鍚悗鍐嶆潵鎿嶄綔',
+ icon: 'none'
+ })
+ resolve(false)
+ }
+ })
+ })
+ },
+
+ getOrderDetail() {
+ this.$u.api.orderDetail({ orderId: this.orderId }).then(res => {
+ if (res.code === 200) {
+ console.log('orderDetail:', res.data)
+ this.orderDetail = res.data
+ this.goodsList = res.data.items || []
+ this.photos = res.data.orderImages || []
+ if ((this.orderDetail.status === 3 || this.orderDetail.status === 4) && this.orderDetail.navigateLat && this.orderDetail.navigateLng) {
+ this.getCurrentLocation()
+ } else {
+ console.log('Skipping getCurrentLocation - status or coordinates not available')
+ }
+ }
+ })
+ },
+
+ getCurrentLocation() {
+ this.fetchLocation()
+ this.locationTimer = setInterval(() => {
+ this.fetchLocation()
+ }, 60000)
+ },
+
+ fetchLocation() {
+ uni.getLocation({
+ type: 'gcj02',
+ success: (res) => {
+ this.currentLocation = {
+ latitude: res.latitude,
+ longitude: res.longitude
+ }
+ this.getRoutePlan()
+ },
+ fail: (err) => {
+ console.log('鑾峰彇浣嶇疆澶辫触', err)
+ }
+ })
+ },
+
+ getRoutePlan() {
+ if (!this.currentLocation || !this.orderDetail.navigateLat || !this.orderDetail.navigateLng) {
+ console.log('Skipping route plan - missing data')
+ return
+ }
+ const from = `${this.currentLocation.latitude},${this.currentLocation.longitude}`
+ const to = `${this.orderDetail.navigateLng},${this.orderDetail.navigateLat}`
+ console.log('driverType', this.userInfo.driverType)
+ this.$u.api.directionInfo({
+ from,
+ to,
+ mode: this.userInfo.driverType
+ }).then(res => {
+ console.log('paths success:', res.data.route.paths[0])
+ if (res.code === 200) {
+ const path = res.data.route.paths[0]
+ this.distance = path.distance
+ this.duration = path.duration
+ const points = []
+ path.steps.forEach(step => {
+ const polylineStr = step.polyline
+ const coordinates = polylineStr.split(';')
+ coordinates.forEach(coord => {
+ const [lng, lat] = coord.split(',')
+ points.push({
+ latitude: parseFloat(lat),
+ longitude: parseFloat(lng)
+ })
+ })
+ })
+ this.routePoints = points
+ this.$forceUpdate()
+ }
+ })
+ },
+
+ // makePhoneCall() {
+ // if (this.orderDetail.contactPhone) {
+ // uni.makePhoneCall({
+ // phoneNumber: this.orderDetail.contactPhone
+ // })
+ // }
+ // },
+
+ makeShopCall(type) {
+ const phone = type === 'take' ? this.orderDetail.takeContactPhone : this.orderDetail.depositShopPhone
+ if (phone) {
+ uni.makePhoneCall({
+ phoneNumber: phone
+ })
+ }
+ },
+
+ navigateToAddress(type) {
+ let latitude, longitude, name, address
+ if (type === 'deposit') {
+ latitude = this.orderDetail.depositShopLat
+ longitude = this.orderDetail.depositShopLng
+ name = this.orderDetail.depositShopName
+ address = this.orderDetail.depositShopAddress
+ } else {
+ latitude = this.orderDetail.takeLat
+ longitude = this.orderDetail.takeLng
+ name = this.orderDetail.takeName
+ address = this.orderDetail.takeAddress
+ }
+ if (!latitude || !longitude) {
+ uni.showToast({ title: '鍦板潃鍧愭爣缂哄け', icon: 'none' })
+ return
+ }
+ uni.openLocation({
+ latitude,
+ longitude,
+ name,
+ address,
+ success: () => {},
+ fail: (err) => {
+ uni.showToast({ title: '鎵撳紑鍦板浘澶辫触', icon: 'none' })
+ console.error('openLocation fail:', err)
+ }
+ })
+ },
+
+ previewImage(current) {
+ uni.previewImage({
+ current,
+ urls: this.photos
+ })
+ },
+
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.initOperationRadius().then((isValid) => {
+ console.log(isValid)
+ if (!isValid) return
+ this.uploadedPhotos = []
+ this.photoRemark = ''
+ this.photoPopupMode = action
+ this.showPhotoPopup = true
+ })
+ return
+ }
+
+ if (action === 'grab') {
+ this.handleGrabOrder()
+ return
+ }
+ },
+ handleCancelOrder() {
+ this.$u.api.cancelLimit().then(res => {
+ if (res.code === 200) {
+ this.cancelRemain = res.data.remain
+ }
+ }).finally(() => {
+ this.showCancelModal = true
+ })
+ },
+ confirmCancelOrder() {
+ this.$u.api.cancelOrder({ orderId: this.orderId }).then(res => {
+ this.showCancelModal = false
+ if (res.code === 200) {
+ uni.showToast({ title: '鍙栨秷鎴愬姛', icon: 'success' })
+ this.getOrderDetail()
+ }
+ }).finally(() => {
+ this.showCancelModal = false
+ })
+ },
+ handleGrabOrder() {
+ this.showGrabModal = true
+ },
+ confirmGrabOrder() {
+ this.$u.api.grabOrder({ orderId: this.orderId }).then(res => {
+ this.showGrabModal = false
+ if (res.code === 200) {
+ uni.showToast({ title: '鎺ュ崟鎴愬姛', icon: 'success' })
+ this.getOrderDetail()
+ uni.$emit('jiedanSuccess')
+ setTimeout(() => {
+ uni.navigateBack()
+ }, 1500)
+ } else {
+ uni.showToast({ title: res.msg || '鎺ュ崟澶辫触', icon: 'none' })
+ }
+ }).catch(() => {
+ this.showGrabModal = false
+ })
},
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: '涓婁紶涓�...' })
+ uni.getLocation({
+ type: 'gcj02',
+ success: (locationRes) => {
+ this.doUploadPhotos(locationRes.latitude, locationRes.longitude)
+ },
+ fail: () => {
+ this.doUploadPhotos(null, null)
+ }
+ })
+ },
+
+ doUploadPhotos(latitude, longitude) {
+ const uploadTasks = this.uploadedPhotos.map(path => {
+ return new Promise((resolve, reject) => {
+ const formData = { folder: 'orders' }
+ if (latitude && longitude) {
+ formData.latitude = latitude
+ formData.longitude = longitude
+ }
+ console.log('formData:', formData)
+ uni.uploadFile({
+ url: this.$baseUrl + 'web/public/upload',
+ filePath: path,
+ name: 'file',
+ formData: formData,
+ 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 => {
+ const api = this.photoPopupMode === 'deliver' ? 'confirmDeliver' : 'confirmPickup'
+ const params = {
+ images: images.map(img => img.imgaddr),
+ orderId: this.orderId,
+ remark: this.photoRemark
+ }
+ if (latitude && longitude) {
+ params.latitude = latitude
+ params.longitude = longitude
+ }
+ 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' })
+ })
}
}
}
@@ -355,9 +796,7 @@
<style lang="scss" scoped>
.order-detail-page {
- height: 100vh;
- background: #f6f8fc;
- overflow: hidden;
+ background: #ffffff;
&__simple-nav {
position: fixed;
@@ -372,7 +811,9 @@
height: 88rpx;
display: flex;
align-items: center;
- padding: 0 24rpx;
+ justify-content: space-between;
+ padding: 0 30rpx;
+ box-sizing: border-box;
}
&__simple-nav-title {
@@ -394,30 +835,15 @@
position: relative;
margin: 0;
height: 500rpx;
+ width: 750rpx;
border-radius: 0;
overflow: hidden;
background: #dbe8ff;
}
&__map {
- width: 100%;
- height: 100%;
- }
-
- &__map-bubble {
- position: absolute;
- left: 34rpx;
- bottom: 32rpx;
- padding: 12rpx 18rpx;
- border-radius: 14rpx;
- background: rgba(255, 255, 255, 0.96);
- box-shadow: 0 8rpx 18rpx rgba(23, 74, 163, 0.12);
- }
-
- &__map-bubble-text {
- font-size: 24rpx;
- font-weight: 600;
- color: #2f6ff2;
+ width: 750rpx;
+ height: 500rpx;
}
&__status-bar {
@@ -465,13 +891,11 @@
}
&__content {
- padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 26rpx);
+ // padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 26rpx);
}
&__section {
- margin: 16rpx 20rpx 0;
- padding: 26rpx 22rpx;
- border-radius: 20rpx;
+ // margin: 16rpx 20rpx 0;
background: #ffffff;
&--main {
@@ -487,13 +911,18 @@
display: flex;
justify-content: space-between;
align-items: flex-start;
+ padding: 30rpx;
+ box-sizing: border-box;
}
&__done-summary {
+ padding: 30rpx;
+ box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20rpx;
+ background: #F6F9FF;
}
&__done-summary-left {
@@ -549,9 +978,9 @@
}
&__time {
- font-size: 42rpx;
- font-weight: 700;
- color: #ff972c;
+ font-size: 34rpx;
+ font-weight: 600;
+ color: #FA8010;
}
&__time-sub,
@@ -572,7 +1001,7 @@
}
&__price {
- font-size: 44rpx;
+ font-size: 26rpx;
font-weight: 700;
color: #ff4132;
}
@@ -601,22 +1030,25 @@
&__tag-text {
padding: 5rpx 12rpx;
border-radius: 8rpx;
- background: #ff9c45;
+ background: linear-gradient(319deg, #EE9D0E 0%, #FF4E4E 100%);
font-size: 22rpx;
font-weight: 600;
color: #ffffff;
}
&__route-list {
- margin-top: 22rpx;
+ margin-top: 36rpx;
+ padding: 0 30rpx;
+ box-sizing: border-box;
}
&__route-item {
display: flex;
- align-items: flex-start;
+ align-items: stretch;
+ position: relative;
&--end {
- margin-top: 24rpx;
+ margin-top: 20rpx;
}
}
@@ -626,38 +1058,37 @@
flex-direction: column;
align-items: center;
flex-shrink: 0;
+ position: relative;
}
- &__distance-top {
- font-size: 28rpx;
+ &__route-badge {
+ width: 44rpx;
+ height: 44rpx;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24rpx;
font-weight: 600;
- color: #515866;
- }
+ color: #ffffff;
+ position: relative;
+ z-index: 1;
- &__distance-unit {
- font-size: 22rpx;
- color: #939aa6;
- }
+ &--take {
+ background: #10B2FA;
+ }
- &__route-divider {
- width: 4rpx;
- height: 42rpx;
- margin-top: 8rpx;
- border-radius: 999rpx;
- background: #d7dbe2;
-
- &--light {
- height: 18rpx;
- margin: 8rpx 0;
+ &--send {
+ background: #FA8010;
}
}
- &__route-pin {
- width: 18rpx;
- height: 18rpx;
- margin-top: 4rpx;
- border-radius: 50%;
- background: #888f9b;
+ &__route-divider {
+ position: absolute;
+ top: 64rpx;
+ bottom: 0;
+ width: 0;
+ border-left: 2rpx dashed #d7dbe2;
}
&__route-main {
@@ -665,6 +1096,7 @@
display: flex;
justify-content: space-between;
gap: 18rpx;
+ margin-left: 10rpx;
}
&__route-texts {
@@ -674,16 +1106,19 @@
&__route-title {
display: block;
- font-size: 38rpx;
- font-weight: 700;
+ font-weight: 600;
+ font-size: 34rpx;
+ color: #222222;
line-height: 1.3;
- color: #2b3139;
}
&__route-desc {
display: block;
margin-top: 8rpx;
line-height: 1.5;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #999999;
}
&__route-actions {
@@ -703,7 +1138,7 @@
display: flex;
flex-direction: column;
align-items: center;
- padding-top: 30rpx;
+ margin-top: 30rpx;
}
&__qrcode-box {
@@ -721,14 +1156,17 @@
}
&__qrcode-value {
- margin-top: 16rpx;
- font-size: 40rpx;
- font-weight: 700;
- color: #303640;
+ margin-top: 32rpx;
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #222222;
}
&__qrcode-label {
- margin-top: 6rpx;
+ margin-top: 12rpx;
+ font-weight: 400;
+ font-size: 26rpx;
+ color: #999999;
}
&__section-title {
@@ -818,14 +1256,23 @@
&__photos {
display: flex;
- gap: 16rpx;
- margin-top: 18rpx;
+ flex-wrap: wrap;
+ gap: 20rpx;
+ margin-top: 30rpx;
+ padding-bottom: 30rpx;
+ box-sizing: border-box;
}
&__photo {
- width: 92rpx;
- height: 92rpx;
- border-radius: 10rpx;
+ width: 120rpx;
+ height: 120rpx;
+ border-radius: 8rpx;
+ overflow: hidden;
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
}
&__detail-label {
@@ -842,7 +1289,7 @@
right: 0;
bottom: 0;
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
gap: 20rpx;
padding: 14rpx 20rpx calc(env(safe-area-inset-bottom) + 14rpx);
background: #ffffff;
@@ -953,9 +1400,8 @@
&__upload-card,
&__preview-card {
position: relative;
- width: 160rpx;
- height: 160rpx;
- border-radius: 8rpx;
+ width: 144rpx;
+ height: 144rpx;
overflow: hidden;
}
@@ -964,14 +1410,13 @@
flex-direction: column;
align-items: center;
justify-content: center;
- border: 2rpx solid #ebedf2;
background: #f8f9fb;
}
&__upload-icon {
- width: 48rpx;
- height: 48rpx;
- opacity: 0.55;
+ width: 160rpx;
+ height: 160rpx;
+ // opacity: 0.55;
}
&__upload-text {
--
Gitblit v1.9.3