617 lines
14 KiB
Vue
617 lines
14 KiB
Vue
<template>
|
||
<s-layout title="订单详情" class="set-userinfo-wrap">
|
||
<view class="order-detail-page">
|
||
<!-- 地图占位（可替换为原生 map 组件或第三方地图组件） -->
|
||
<view class="map-area">
|
||
<!-- 真实项目建议使用 <map> 并渲染 polyline/markers -->
|
||
<image class="map-image" src="/static/img/map-placeholder.png" mode="widthFix" v-if="!mapAvailable" />
|
||
<map v-else class="map-native" :latitude="order?.pickupLat" :longitude="order?.pickupLng" show-location
|
||
enable-3D enable-zoom :scale="16"></map>
|
||
<view class="map-overlay">
|
||
<view class="eta">距离商家{{ distanceText }}，预计{{ etaText }}到达</view>
|
||
<view class="nav-btn" @click="navigateToShop">导航到商家</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 地址块 -->
|
||
<scroll-view class="content" scroll-y="true">
|
||
<view class="address-block">
|
||
<view class="addr-row">
|
||
<view class="badge pickup">取</view>
|
||
<view class="addr-body">
|
||
<text class="addr-title">{{ order?.shopName || '店铺名称' }}</text>
|
||
<text class="addr-sub">{{ order?.pickupAddress }}</text>
|
||
</view>
|
||
<view class="nav-icon" @click="openMap(order?.pickupLat, order?.pickupLng, order?.pickupAddress)">导航</view>
|
||
</view>
|
||
|
||
<view class="addr-row">
|
||
<view class="badge deliver">送</view>
|
||
<view class="addr-body">
|
||
<text class="addr-title">{{ order?.deliveryAddress }}</text>
|
||
<text
|
||
class="addr-sub">收货人：{{ order?.receiverName }} {{ order?.receiverPhone ? ('尾号' + (order.receiverPhone + '').slice(-4)) : ''}}</text>
|
||
</view>
|
||
<view class="nav-icon" @click="openMap(order?.deliveryLat, order?.deliveryLng, order?.deliveryAddress)">导航
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 顾客备注 -->
|
||
<view class="note" v-if="order?.note">
|
||
<text>顾客：{{ order.note }}</text>
|
||
</view>
|
||
|
||
<!-- 商品清单 -->
|
||
<view class="goods-list">
|
||
<view class="goods-header">
|
||
<text>商品清单</text>
|
||
<text class="item-count">{{ totalCount }}件</text>
|
||
<text class="total-price">¥{{ totalPrice.toFixed(2) }}</text>
|
||
</view>
|
||
<view class="goods-item" v-for="(g, idx) in order?.items || []" :key="idx">
|
||
<view class="g-left">
|
||
<text class="g-name">{{ g.name }}{{ g.spec ? ('·' + g.spec) : '' }}</text>
|
||
<text class="g-qty">×{{ g.quantity }}</text>
|
||
</view>
|
||
<view class="g-right">¥{{ (g.price || 0).toFixed(2) }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系/记录等 -->
|
||
<view class="action-record">
|
||
<!-- <view class="call" @click="callPhone(order?.receiverPhone)">
|
||
<text>电话联系</text>
|
||
</view> -->
|
||
<view class="record" @click="toRecord">交接记录</view>
|
||
</view>
|
||
|
||
<!-- 占位底部高度，避免内容被底部按钮遮挡 -->
|
||
<view style="height:140rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作 -->
|
||
<view class="fixed-actions">
|
||
<view class="left-actions">
|
||
<view class="icon-phone" @click="callPhone(order?.receiverPhone)"></view>
|
||
</view>
|
||
<view class="right-actions">
|
||
<view class="btn remind">催单</view>
|
||
<view class="btn remind" @click="openRemindPopup">电话联系</view>
|
||
<!-- <view class="btn confirm">转单</view> -->
|
||
<view class="btn confirm" @click="confirmArrive">确认到店</view>
|
||
</view>
|
||
</view>
|
||
<!-- 催单弹框 -->
|
||
<up-popup v-model:show="showRemind" mode="bottom" :closeable="false" border-radius="12">
|
||
<view class="remind-popup">
|
||
<view class="remind-row" @click="callShopPhone">
|
||
<text class="remind-title">联系商家</text>
|
||
<view class="remind-btn" @click.stop="callShopPhone">拨打电话</view>
|
||
</view>
|
||
<view class="remind-row" @click="callCustomerPhone">
|
||
<text class="remind-title">联系顾客</text>
|
||
<view class="remind-btn" @click.stop="callCustomerPhone">拨打电话</view>
|
||
</view>
|
||
</view>
|
||
<template #bottom>
|
||
<view class="remind-cancel" @click="showRemind = false">取消</view>
|
||
</template>
|
||
</up-popup>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
computed
|
||
} from 'vue';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import sheep from '@/sheep';
|
||
|
||
const orderId = ref(null);
|
||
const order = ref(null);
|
||
const loading = ref(false);
|
||
const mapAvailable = ref(false); // 如果需要使用 map 组件，置为 true
|
||
|
||
// 入口：从页面参数取 orderId，然后加载数据
|
||
onLoad((options = {}) => {
|
||
orderId.value = options.id || options.orderId || null;
|
||
fetchOrder();
|
||
});
|
||
|
||
async function fetchOrder() {
|
||
loading.value = true;
|
||
try {
|
||
// 优先尝试平台统一 request（项目内可能封装在 sheep.request 或 sheep.api）
|
||
if (sheep && typeof sheep.request === 'function') {
|
||
const res = await sheep.request({
|
||
url: '/order/detail',
|
||
method: 'GET',
|
||
data: {
|
||
id: orderId.value
|
||
}
|
||
});
|
||
// 根据封装不同，这里兼容 res.data 或 res
|
||
order.value = (res && res.data) ? res.data : res;
|
||
} else if (sheep && sheep.$api && sheep.$api.trade && typeof sheep.$api.trade.detail === 'function') {
|
||
const res = await sheep.$api.trade.detail({
|
||
id: orderId.value
|
||
});
|
||
order.value = res?.data || res;
|
||
} else {
|
||
// 回退 mock 数据，避免界面空白，开发时替换为真实接口
|
||
order.value = {
|
||
id: orderId.value || 1001,
|
||
shopName: '店铺名（示例）',
|
||
pickupAddress: '广东省广州市天河区学院站荷光路118-121号',
|
||
pickupLat: 23.1005,
|
||
pickupLng: 113.3301,
|
||
deliveryAddress: '广东省广州市天河区华景新城软件园区B栋西梯501',
|
||
deliveryLat: 23.105,
|
||
deliveryLng: 113.335,
|
||
receiverName: '张先生',
|
||
receiverPhone: '13900001234',
|
||
note: '依据餐量提供餐具',
|
||
items: [{
|
||
name: '商品名称A',
|
||
spec: '规格1',
|
||
quantity: 2,
|
||
price: 23.89
|
||
},
|
||
{
|
||
name: '商品名称B',
|
||
spec: '规格2',
|
||
quantity: 1,
|
||
price: 45.00
|
||
}
|
||
]
|
||
};
|
||
}
|
||
} catch (e) {
|
||
console.error('fetchOrder error', e);
|
||
// 友好提示
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('获取订单失败，请稍后重试');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
const totalCount = computed(() => {
|
||
if (!order.value || !order.value.items) return 0;
|
||
return order.value.items.reduce((s, it) => s + (it.quantity || 0), 0);
|
||
});
|
||
const totalPrice = computed(() => {
|
||
if (!order.value || !order.value.items) return 0;
|
||
return order.value.items.reduce((s, it) => s + ((it.price || 0) * (it.quantity || 0)), 0);
|
||
});
|
||
|
||
// 显示距离与预计时间（示例，真实项目可使用服务端或高德/百度 SDK 计算）
|
||
const distanceText = computed(() => {
|
||
// 此处为示例固定值，后续接入定位/路程计算替换
|
||
return order.value ? '873m' : '--';
|
||
});
|
||
const etaText = computed(() => {
|
||
return order.value ? '预计十分钟到达' : '--';
|
||
});
|
||
|
||
function goBack() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function openMap(lat, lng, name) {
|
||
if (!lat || !lng) {
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('无法获取坐标');
|
||
return;
|
||
}
|
||
uni.openLocation({
|
||
latitude: Number(lat),
|
||
longitude: Number(lng),
|
||
name: name || '',
|
||
scale: 18
|
||
});
|
||
}
|
||
|
||
function navigateToShop() {
|
||
openMap(order.value?.pickupLat, order.value?.pickupLng, order.value?.pickupAddress);
|
||
}
|
||
|
||
function callPhone(phone) {
|
||
if (!phone) {
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('未找到联系电话');
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
}
|
||
|
||
// 催单弹框控制
|
||
const showRemind = ref(false);
|
||
|
||
function openRemindPopup() {
|
||
showRemind.value = true;
|
||
}
|
||
|
||
function closeRemindPopup() {
|
||
showRemind.value = false;
|
||
}
|
||
|
||
function callShopPhone() {
|
||
// 商家电话优先使用 order.shopPhone，否则尝试 fallback
|
||
const phone = order.value?.shopPhone || order.value?.shopPhoneNumber || order.value?.receiverPhone || '';
|
||
if (!phone) {
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('未找到商家电话');
|
||
return;
|
||
}
|
||
callPhone(phone);
|
||
closeRemindPopup();
|
||
}
|
||
|
||
function callCustomerPhone() {
|
||
const phone = order.value?.receiverPhone || '';
|
||
if (!phone) {
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('未找到顾客电话');
|
||
return;
|
||
}
|
||
callPhone(phone);
|
||
closeRemindPopup();
|
||
}
|
||
|
||
function confirmArrive() {
|
||
// 确认到店：调用接口或本地改变状态
|
||
if (!order.value) return;
|
||
// 示例：调用后端接口（兼容性判断）
|
||
(async () => {
|
||
try {
|
||
if (sheep && typeof sheep.request === 'function') {
|
||
await sheep.request({
|
||
url: '/order/confirmArrive',
|
||
method: 'POST',
|
||
data: {
|
||
id: order.value.id
|
||
}
|
||
});
|
||
}
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('已确认到店');
|
||
// 可在此刷新订单状态
|
||
fetchOrder();
|
||
} catch (e) {
|
||
console.error(e);
|
||
sheep.$helper && sheep.$helper.toast && sheep.$helper.toast('确认失败，请重试');
|
||
}
|
||
})();
|
||
}
|
||
|
||
//跳转交接记录
|
||
function toRecord(id) {
|
||
uni.navigateTo({
|
||
url: `/pages/order/handoverRecord?orderId=${orderId.value}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.order-detail-page {
|
||
// background: #fff;
|
||
background: #f7f7f7;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
box-sizing: border-box;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.header {
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.back {
|
||
width: 44rpx;
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-right: 44rpx;
|
||
}
|
||
|
||
.map-area {
|
||
height: 360rpx;
|
||
background: #f3f3f3;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.map-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.map-native {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.map-overlay {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.eta {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-btn {
|
||
background: #fff;
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 20rpx;
|
||
color: #1e9fff;
|
||
border: 1rpx solid #dbeeff;
|
||
}
|
||
|
||
.content {
|
||
padding: 20rpx;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
background: #f7f7f7;
|
||
min-height: 200rpx;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.address-block {
|
||
background: #fff;
|
||
padding: 16rpx;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.addr-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 12rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.addr-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.badge {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
border-radius: 23rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 20rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.badge.pickup {
|
||
background: #87d6ff;
|
||
}
|
||
|
||
.badge.deliver {
|
||
background: #ffd591;
|
||
color: #333;
|
||
}
|
||
|
||
.addr-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.addr-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.addr-sub {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #888;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.nav-icon {
|
||
color: #1e9fff;
|
||
padding: 6rpx 8rpx;
|
||
}
|
||
|
||
.note {
|
||
margin-top: 12rpx;
|
||
background: #fff;
|
||
padding: 12rpx;
|
||
border-radius: 8rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.goods-list {
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.goods-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.goods-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx;
|
||
background: #fff;
|
||
margin-top: 8rpx;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.g-left {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.g-left {
|
||
min-width: 0;
|
||
}
|
||
|
||
.g-name {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
max-width: 62%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.g-qty {
|
||
color: #888;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.g-right {
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.action-record {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.call {
|
||
flex: 1;
|
||
background: #fff;
|
||
padding: 12rpx;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
border: 1rpx solid #ddd;
|
||
}
|
||
|
||
.record {
|
||
flex: 2;
|
||
background: #fff;
|
||
padding: 12rpx;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
border: 1rpx solid #ddd;
|
||
}
|
||
|
||
.fixed-actions {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 140rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
gap: 12rpx;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.left-actions {
|
||
width: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.right-actions {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 12rpx;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
padding: 16rpx 18rpx;
|
||
border-radius: 12rpx;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.btn.remind {
|
||
background: #f39c12;
|
||
}
|
||
|
||
.btn.confirm {
|
||
background: #1e9fff;
|
||
}
|
||
|
||
.remind-popup {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.remind-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
background: #f6f6f6;
|
||
margin: 10rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.remind-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.remind-btn {
|
||
background: #1e9fff;
|
||
color: #fff;
|
||
padding: 10rpx 18rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.remind-cancel {
|
||
text-align: center;
|
||
padding: 18rpx 0 70rpx;
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
background: #fff;
|
||
margin-top: 10rpx;
|
||
}
|
||
</style> |