完成京东购物新增删除编辑查看详情
This commit is contained in:
tangxinyue
parent
8c3298af2a
commit
107f39efef
|
|
@ -286,7 +286,7 @@ const getButtons = (shopType, status, item) => {
|
|||
.shop-name {
|
||||
white-space: nowrap;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
line-height: 28rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
|
|
@ -699,7 +699,7 @@ const getButtons = (shopType, status, item) => {
|
|||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
margin-left: 16rpx;
|
||||
border: 1rpx solid #C7C7C7;
|
||||
border: 0.5px solid #C7C7C7;
|
||||
color: #1A1A1A;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
<auto-width-input v-model="order.fullAddress" type="textarea" fontWeight="500"
|
||||
fontSize="30rpx" placeholder="收货地址" color="#1A1A1A" show-edit />
|
||||
</view>
|
||||
<view class="edit-btn" style="margin-left: 16rpx;">修改</view>
|
||||
<!-- <view class="edit-btn" style="margin-left: 16rpx;">修改</view> -->
|
||||
</view>
|
||||
<view class="flex" style="margin-top: 8rpx;">
|
||||
<view class="phone animate-scale flex-align-center" style="margin-right: 8rpx;">
|
||||
|
|
@ -165,8 +165,9 @@
|
|||
</view>
|
||||
<view class="order-status-box">
|
||||
<view class="status-main">
|
||||
|
||||
<image class="status-icon" src="/static/image/shopping/jingdong/detail/qianshou.png"
|
||||
mode="aspectFit">
|
||||
mode="aspectFit" @click="chooseCourierImg">
|
||||
</image>
|
||||
<view class="status-content">
|
||||
<view class="title-row">
|
||||
|
|
@ -182,8 +183,11 @@
|
|||
</view>
|
||||
<view class="upload-box flex1 w100">
|
||||
<view class="info-box flex-1 w100">
|
||||
<view class="image-box shrink-0">
|
||||
<view style="background-color: #EEEEEE;" class="w100 h100 flex-center">
|
||||
<view class="image-box shrink-0" @click="chooseCourierImg">
|
||||
<image v-if="order.courierImg" class="w100 h100" :src="order.courierImg"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
<view v-else style="background-color: #EEEEEE;" class="w100 h100 flex-center">
|
||||
<image style="width: 30rpx;height: 30rpx;" src="/static/image/common/add.png">
|
||||
</image>
|
||||
</view>
|
||||
|
|
@ -294,7 +298,7 @@
|
|||
</view>
|
||||
<view v-if="activeTab == 'dengdaifukuan' || activeTab == 'yiquxiao'" class="btn-box flex"
|
||||
style="margin-top: 60rpx;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 1rpx solid #D8D8D8;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
|
||||
<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
|
||||
<view class="name flex-column flex-align-center">
|
||||
<text>店铺客服</text>
|
||||
|
|
@ -355,7 +359,7 @@
|
|||
<view class="wx-font-medium flex flex-align-center">
|
||||
<view class="flex" style="align-items: baseline;color: #FF4444;">
|
||||
<text>共减￥</text>
|
||||
<auto-width-input class="wx-font-medium" v-model="order.totalPrice" fontSize="32rpx"
|
||||
<auto-width-input class="wx-font-medium" v-model="order.discount" fontSize="32rpx"
|
||||
placeholder="优惠价格" color="#F10F1A" fontWeight="500" type="number" show-edit />
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -464,7 +468,7 @@
|
|||
|
||||
<script setup>
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { ref, computed, onMounted, nextTick } from "vue";
|
||||
import { ref, computed, watch, onMounted, nextTick } from "vue";
|
||||
import NavBar from "@/components/nav-bar/nav-bar.vue";
|
||||
import { shoppingType, shoppingClassfiy } from "../json/order.json";
|
||||
import AutoWidthInput from "@/components/common/auto-width-input.vue";
|
||||
|
|
@ -479,8 +483,9 @@ const navTitle = computed(() => isEditMode.value ? "修改订单" : "新增订
|
|||
const shopTypeOptions = ['自营商店', '京东商店', '其它'];
|
||||
const shopTypeValues = ['self', 'jd', 'none'];
|
||||
const shopTypeIndex = computed(() => {
|
||||
if (!order.value || !order.value.shopType) return 2; // 默认“其它”
|
||||
const idx = shopTypeValues.indexOf(order.value.shopType);
|
||||
return idx > -1 ? idx : 2; // 默认“其它”
|
||||
return idx > -1 ? idx : 2;
|
||||
});
|
||||
|
||||
const statusBarHeight = ref(0);
|
||||
|
|
@ -600,19 +605,137 @@ onLoad((options) => {
|
|||
}
|
||||
console.log('编辑模式已激活，数据已回填:', activeTab.value);
|
||||
}
|
||||
} else {
|
||||
// 新增：如果是新增状态，初始化默认数据
|
||||
if (order.value) {
|
||||
const now = formatTime(new Date());
|
||||
// 初始化订单信息（时间、编号）
|
||||
if (order.value.orderInfo) {
|
||||
order.value.orderInfo.forEach(item => {
|
||||
if ((item.label === '下单时间' || item.label === '支付时间') && !item.value) {
|
||||
item.value = now;
|
||||
}
|
||||
if (item.label === '订单编号' && !item.value) {
|
||||
item.value = generateRandomOrder();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 初始化配送信息
|
||||
if (order.value.sendType) {
|
||||
order.value.sendType.forEach(item => {
|
||||
if (item.label === '期望配送时间' && (!item.value || item.value.trim() === '')) {
|
||||
item.value = generateDefaultExpectedTime();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 随机初始化特定状态字段
|
||||
if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
|
||||
const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
|
||||
const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
|
||||
const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
|
||||
order.value.statusDesc = `${h} : ${m} : ${s}`;
|
||||
}
|
||||
if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
|
||||
const date = new Date();
|
||||
date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
|
||||
order.value.trackingTime = formatTime(date);
|
||||
}
|
||||
if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
|
||||
date.setHours(date.getHours() + Math.floor(Math.random() * 12));
|
||||
order.value.trackingTime = formatTime(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 选择图片
|
||||
* 选择图片并转换为本地持久化路径 (并清理旧图)
|
||||
*/
|
||||
const chooseImage = () => {
|
||||
// 记录旧图路径用于清理
|
||||
const oldImagePath = order.value.products[0].image;
|
||||
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
order.value.products[0].image = res.tempFilePaths[0];
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uni.showLoading({ title: '处理图片中...' });
|
||||
|
||||
// 将新图保存为持久化文件
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (saveRes) => {
|
||||
// 1. 设置新图片路径
|
||||
order.value.products[0].image = saveRes.savedFilePath;
|
||||
|
||||
// 2. 如果旧图是本地持久化文件，则物理删除它
|
||||
if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
|
||||
uni.removeSavedFile({
|
||||
filePath: oldImagePath,
|
||||
success: () => console.log('旧图片已清理:', oldImagePath),
|
||||
fail: (err) => console.error('旧图片清理失败:', err)
|
||||
});
|
||||
}
|
||||
|
||||
uni.showToast({ title: '图片已更新', icon: 'success' });
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存图片失败:', err);
|
||||
uni.showToast({ title: '图片持久化失败', icon: 'none' });
|
||||
order.value.products[0].image = tempFilePath;
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择快递员头像并转换为本地持久化路径 (并清理旧图)
|
||||
*/
|
||||
const chooseCourierImg = () => {
|
||||
// 记录旧图路径用于清理
|
||||
const oldImagePath = order.value.courierImg;
|
||||
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
uni.showLoading({ title: '处理图片中...' });
|
||||
|
||||
// 将新图保存为持久化文件
|
||||
uni.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (saveRes) => {
|
||||
// 1. 设置新图片路径
|
||||
order.value.courierImg = saveRes.savedFilePath;
|
||||
|
||||
// 2. 如果旧图是本地持久化文件，则物理删除它
|
||||
if (oldImagePath && (oldImagePath.includes('_doc') || oldImagePath.includes('store_') || oldImagePath.includes('at_'))) {
|
||||
uni.removeSavedFile({
|
||||
filePath: oldImagePath,
|
||||
success: () => console.log('旧头像已清理:', oldImagePath),
|
||||
fail: (err) => console.error('旧头像清理失败:', err)
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('保存头像失败:', err);
|
||||
order.value.courierImg = tempFilePath;
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -621,6 +744,7 @@ const chooseImage = () => {
|
|||
* 点击列表项触发
|
||||
*/
|
||||
const onClickItemInfo = (item) => {
|
||||
if (item.label === '收货信息') return; // 收货信息不可手动修改
|
||||
if (item.type == 'time') {
|
||||
datePickerData.value.selectDate = item.value;
|
||||
datePickerData.value.endDate = formatTime(new Date());
|
||||
|
|
@ -708,17 +832,100 @@ const formatTime = (date) => {
|
|||
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机生成 18 位订单号
|
||||
*/
|
||||
const generateRandomOrder = () => {
|
||||
let orderNo = '30'; // 京东订单常见的开头
|
||||
for (let i = 0; i < 16; i++) {
|
||||
orderNo += Math.floor(Math.random() * 10);
|
||||
}
|
||||
return orderNo;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成默认期望配送时间 (明天 09:00-21:00)
|
||||
*/
|
||||
const generateDefaultExpectedTime = () => {
|
||||
const tomorrow = new Date();
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const y = tomorrow.getFullYear();
|
||||
const m = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
|
||||
const d = tomorrow.getDate().toString().padStart(2, '0');
|
||||
return `${y}-${m}-${d} 09:00-21:00`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换tab
|
||||
* @param item
|
||||
*/
|
||||
const switchTab = (item) => {
|
||||
// 备份当前输入，防止切换 tab 导致数据丢失
|
||||
const oldData = JSON.parse(JSON.stringify(order.value));
|
||||
|
||||
activeTab.value = item.key;
|
||||
order.value = shoppingClassfiy[activeTab.value];
|
||||
if (order.value) {
|
||||
order.value.consignee = order.value.consignee;
|
||||
order.value.phone = order.value.phone;
|
||||
order.value.fullAddress = order.value.fullAddress;
|
||||
order.value = JSON.parse(JSON.stringify(shoppingClassfiy[activeTab.value]));
|
||||
|
||||
if (order.value && oldData) {
|
||||
// 恢复通用字段
|
||||
order.value.consignee = oldData.consignee || order.value.consignee;
|
||||
order.value.phone = oldData.phone || order.value.phone;
|
||||
order.value.fullAddress = oldData.fullAddress || order.value.fullAddress;
|
||||
order.value.shopName = oldData.shopName || order.value.shopName;
|
||||
order.value.shopType = oldData.shopType || order.value.shopType;
|
||||
|
||||
// 恢复 orderInfo 中的手动输入值
|
||||
if (order.value.orderInfo && oldData.orderInfo) {
|
||||
order.value.orderInfo.forEach(newInfo => {
|
||||
const target = oldData.orderInfo.find(o => o.label === newInfo.label);
|
||||
if (target && target.value) {
|
||||
newInfo.value = target.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 针对新增模式，如果数据仍然为空，则自动生成
|
||||
if (!isEditMode.value && order.value) {
|
||||
const now = formatTime(new Date());
|
||||
// 订单信息
|
||||
if (order.value.orderInfo) {
|
||||
order.value.orderInfo.forEach(info => {
|
||||
if ((info.label === '下单时间' || info.label === '支付时间') && !info.value) {
|
||||
info.value = now;
|
||||
}
|
||||
if (info.label === '订单编号' && !info.value) {
|
||||
info.value = generateRandomOrder();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 配送信息
|
||||
if (order.value.sendType) {
|
||||
order.value.sendType.forEach(info => {
|
||||
if (info.label === '期望配送时间' && (!info.value || info.value.trim() === '')) {
|
||||
info.value = generateDefaultExpectedTime();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 随机初始化特定状态字段
|
||||
if (activeTab.value === 'dengdaifukuan' && !order.value.statusDesc) {
|
||||
const h = (Math.floor(Math.random() * 23) + 1).toString().padStart(2, '0');
|
||||
const m = Math.floor(Math.random() * 59).toString().padStart(2, '0');
|
||||
const s = Math.floor(Math.random() * 59).toString().padStart(2, '0');
|
||||
order.value.statusDesc = `${h} : ${m} : ${s}`;
|
||||
}
|
||||
if (activeTab.value === 'zhengzaichuku' && !order.value.trackingTime) {
|
||||
const date = new Date();
|
||||
date.setMinutes(date.getMinutes() + Math.floor(Math.random() * 50) + 10);
|
||||
order.value.trackingTime = formatTime(date);
|
||||
}
|
||||
if (activeTab.value === 'yiqianshou' && !order.value.trackingTime) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + Math.floor(Math.random() * 1) + 1);
|
||||
date.setHours(date.getHours() + Math.floor(Math.random() * 12));
|
||||
order.value.trackingTime = formatTime(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -778,6 +985,51 @@ const onShopTypeChange = (e) => {
|
|||
order.value.shopType = shopTypeValues[idx];
|
||||
}
|
||||
|
||||
// 自动同步“收货信息”与“收货地址”
|
||||
watch([
|
||||
() => order.value?.consignee,
|
||||
() => order.value?.phone,
|
||||
() => order.value?.fullAddress
|
||||
], ([name, phone, fullAddr]) => {
|
||||
if (!order.value) return;
|
||||
|
||||
// 1. 同步“收货信息”
|
||||
const userInfoValue = `${name || ''} ${phone || ''}`.trim();
|
||||
const findAndSet = (list, label, value, onlyIfEmpty = false) => {
|
||||
if (!list) return;
|
||||
const target = list.find(i => i.label === label);
|
||||
if (target) {
|
||||
if (!onlyIfEmpty || !target.value || target.value.trim() === '') {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
findAndSet(order.value.sendType, '收货信息', userInfoValue);
|
||||
findAndSet(order.value.orderInfo, '收货信息', userInfoValue);
|
||||
|
||||
// 2. 如果是正在出库，同步“收货地址” (允许手动修改：仅在为空时自动填充)
|
||||
if (order.value.status === '正在出库' && fullAddr) {
|
||||
findAndSet(order.value.sendType, '收货地址', fullAddr, true);
|
||||
findAndSet(order.value.orderInfo, '收货地址', fullAddr, true);
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
|
||||
// 自动计算实付款总额
|
||||
watch([
|
||||
() => order.value?.products?.[0]?.price,
|
||||
() => order.value?.discount,
|
||||
() => order.value?.carriage
|
||||
], ([price, discount, carriage]) => {
|
||||
if (!order.value) return;
|
||||
const p = parseFloat(price) || 0;
|
||||
const d = parseFloat(discount) || 0;
|
||||
const c = parseFloat(carriage) || 0;
|
||||
// 计算逻辑：原价 - 优惠 + 运费
|
||||
const total = (p - d + c).toFixed(2);
|
||||
order.value.totalPrice = total;
|
||||
}, { deep: true, immediate: true });
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -920,7 +1172,7 @@ const onShopTypeChange = (e) => {
|
|||
|
||||
height: 54rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #C5C5C5;
|
||||
border: 0.5px solid #C5C5C5;
|
||||
padding: 0 52rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 52rpx;
|
||||
|
|
@ -981,7 +1233,7 @@ const onShopTypeChange = (e) => {
|
|||
width: 116rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 1rpx solid #C5C5C5;
|
||||
border: 0.5px solid #C5C5C5;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
|
|
@ -1273,7 +1525,7 @@ const onShopTypeChange = (e) => {
|
|||
text-overflow: ellipsis;
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -1308,7 +1560,7 @@ const onShopTypeChange = (e) => {
|
|||
text-overflow: ellipsis;
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -1356,7 +1608,7 @@ const onShopTypeChange = (e) => {
|
|||
height: 60rpx;
|
||||
line-height: 58rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #C7C7C7;
|
||||
border: 0.5px solid #C7C7C7;
|
||||
color: #1A1A1A;
|
||||
margin-left: 22rpx;
|
||||
|
||||
|
|
@ -1458,7 +1710,7 @@ const onShopTypeChange = (e) => {
|
|||
|
||||
.order-info {
|
||||
padding-bottom: 34rpx;
|
||||
border-bottom: 1rpx solid #F2F2F2;
|
||||
border-bottom: 0.5px solid #F2F2F2;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"phone": "",
|
||||
"fullAddress": "",
|
||||
"totalPrice": "",
|
||||
"carriage": "",
|
||||
"carriage": "0.00",
|
||||
"products": [
|
||||
{
|
||||
"image": "",
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
{
|
||||
"label": "收货方式",
|
||||
"key": "shippingMethod",
|
||||
"value": ""
|
||||
"value": "送货上门"
|
||||
}
|
||||
],
|
||||
"promoType": "text",
|
||||
|
|
@ -78,14 +78,15 @@
|
|||
"shopName": "",
|
||||
"status": "正在出库",
|
||||
"trackingTitle": "仓库处理中",
|
||||
"trackingDesc": "",
|
||||
"trackingDesc2": "",
|
||||
"trackingDesc": "预计明天9:00-15:00送达",
|
||||
"trackingDesc2": "快递运输 · 温馨提示：您的订单预计x月xx日09:00- 15:00送达",
|
||||
"trackingTime": "",
|
||||
"consignee": "",
|
||||
"phone": "",
|
||||
"fullAddress": "",
|
||||
"totalPrice": "",
|
||||
"carriage": "",
|
||||
"carriage": "0.00",
|
||||
"discount": "0.00",
|
||||
"products": [
|
||||
{
|
||||
"image": "",
|
||||
|
|
@ -122,7 +123,8 @@
|
|||
{
|
||||
"label": "下单时间",
|
||||
"key": "orderTime",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "time"
|
||||
}
|
||||
],
|
||||
"sendType": [
|
||||
|
|
@ -139,7 +141,8 @@
|
|||
{
|
||||
"label": "收货地址",
|
||||
"key": "address",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "textarea"
|
||||
},
|
||||
{
|
||||
"label": "期望配送时间",
|
||||
|
|
@ -164,9 +167,12 @@
|
|||
"statusColor": "gray",
|
||||
"trackingTitle": "已签收",
|
||||
"courier": "",
|
||||
"courierImg": "",
|
||||
"trackingDesc": "您的订单已签收，可对快递员的服务进行评价或打赏哦~",
|
||||
"trackingDesc2": "",
|
||||
"trackingDesc2": "快递运输 · 温馨提示：您的订单已签收",
|
||||
"trackingTime": "",
|
||||
"carriage": "0.00",
|
||||
"discount": "0.00",
|
||||
"products": [
|
||||
{
|
||||
"image": "",
|
||||
|
|
@ -197,12 +203,14 @@
|
|||
{
|
||||
"label": "支付时间",
|
||||
"key": "paymentTime",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "time"
|
||||
},
|
||||
{
|
||||
"label": "下单时间",
|
||||
"key": "orderTime",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "time"
|
||||
}
|
||||
],
|
||||
"sendType": [
|
||||
|
|
@ -233,6 +241,8 @@
|
|||
"shopName": "",
|
||||
"status": "完成",
|
||||
"statusColor": "gray",
|
||||
"carriage": "0.00",
|
||||
"discount": "0.00",
|
||||
"products": [
|
||||
{
|
||||
"image": "",
|
||||
|
|
@ -269,7 +279,8 @@
|
|||
{
|
||||
"label": "下单时间",
|
||||
"key": "orderTime",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "time"
|
||||
}
|
||||
],
|
||||
"sendType": [
|
||||
|
|
@ -286,7 +297,8 @@
|
|||
{
|
||||
"label": "收货地址",
|
||||
"key": "address",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "textarea"
|
||||
}
|
||||
],
|
||||
"hasMore": true
|
||||
|
|
@ -297,6 +309,11 @@
|
|||
"shopName": "",
|
||||
"status": "已取消",
|
||||
"statusColor": "gray",
|
||||
"carriage": "0.00",
|
||||
"discount": "0.00",
|
||||
"consignee": "",
|
||||
"phone": "",
|
||||
"fullAddress": "",
|
||||
"products": [
|
||||
{
|
||||
"image": "",
|
||||
|
|
@ -332,7 +349,8 @@
|
|||
{
|
||||
"label": "下单时间",
|
||||
"key": "orderTime",
|
||||
"value": ""
|
||||
"value": "",
|
||||
"type": "time"
|
||||
}
|
||||
],
|
||||
"sendType": [
|
||||
|
|
|
|||
|
|
@ -173,15 +173,22 @@ const handleCardClick = (item) => {
|
|||
const handleDeleteOrder = () => {
|
||||
const itemToDel = actionMenuState.value.item;
|
||||
|
||||
// 1. 尝试删除本地持久化图片文件
|
||||
// 1. 尝试删除本地持久化图片文件 (商品图 + 快递员头像)
|
||||
const productImage = itemToDel?.products?.[0]?.image;
|
||||
if (productImage && (productImage.includes('_doc/') || productImage.includes('_downloads/') || productImage.includes('store_'))) {
|
||||
const courierImage = itemToDel?.courierImg;
|
||||
|
||||
const cleanupFile = (path) => {
|
||||
if (path && (path.includes('_doc/') || path.includes('_downloads/') || path.includes('store_') || path.includes('at_'))) {
|
||||
uni.removeSavedFile({
|
||||
filePath: productImage,
|
||||
success: () => console.log('图片文件删除成功:', productImage),
|
||||
fail: (err) => console.error('图片文件删除失败:', err)
|
||||
filePath: path,
|
||||
success: () => console.log('文件删除成功:', path),
|
||||
fail: (err) => console.error('文件删除失败:', err)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
cleanupFile(productImage);
|
||||
cleanupFile(courierImage);
|
||||
|
||||
// 2. 从列表中移除数据
|
||||
const realIndex = mockOrderList.value.findIndex(item => item === itemToDel);
|
||||
|
|
@ -227,6 +234,8 @@ onShow(() => {
|
|||
if (cachedData && Array.isArray(cachedData)) {
|
||||
mockOrderList.value = cachedData;
|
||||
}
|
||||
|
||||
console.log("mockOrderList", mockOrderList.value);
|
||||
});
|
||||
|
||||
const currentTab = ref(0);
|
||||
|
|
@ -270,25 +279,40 @@ const switchFilter = (index) => {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 提取订单的时间戳用于排序
|
||||
*/
|
||||
const getOrderTimestamp = (item) => {
|
||||
let timeStr = "";
|
||||
if (item.orderInfo) {
|
||||
const target = item.orderInfo.find(i => i.label === '下单时间' || i.label === '支付时间');
|
||||
if (target && target.value) timeStr = target.value;
|
||||
}
|
||||
if (!timeStr && item.trackingTime) {
|
||||
timeStr = item.trackingTime;
|
||||
}
|
||||
return timeStr ? new Date(timeStr.replace(/-/g, '/')).getTime() : 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* 筛选订单列表
|
||||
*/
|
||||
const filteredOrderList = computed(() => {
|
||||
const tabName = tabList.value[currentTab.value].name;
|
||||
let baseList = mockOrderList.value;
|
||||
let baseList = [...mockOrderList.value];
|
||||
|
||||
if (tabName === '购物') {
|
||||
baseList = mockOrderList.value.filter(item => item.shopType !== 'waimai');
|
||||
baseList = baseList.filter(item => item.shopType !== 'waimai');
|
||||
} else if (tabName === '秒送') {
|
||||
baseList = mockOrderList.value.filter(item => item.shopType === 'waimai');
|
||||
baseList = baseList.filter(item => item.shopType === 'waimai');
|
||||
}
|
||||
|
||||
let result = [];
|
||||
if (currentFilter.value === -1) {
|
||||
return baseList;
|
||||
}
|
||||
result = baseList;
|
||||
} else {
|
||||
const filterName = filterList.value[currentFilter.value].name;
|
||||
|
||||
return baseList.filter(item => {
|
||||
result = baseList.filter(item => {
|
||||
if (filterName === '待付款') return item.status === '等待付款';
|
||||
if (filterName === '待收货') return item.status === '正在出库' || item.status === '待收货' || item.status === '运输中' || item.status === '已发货' || item.status === '商家备餐中' || item.status === '骑手到店取餐中';
|
||||
if (filterName === '待使用') return item.status === '待使用';
|
||||
|
|
@ -297,233 +321,237 @@ const filteredOrderList = computed(() => {
|
|||
if (filterName === '已取消') return item.status === '已取消';
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
// 执行倒序排序
|
||||
return result.sort((a, b) => getOrderTimestamp(b) - getOrderTimestamp(a));
|
||||
});
|
||||
|
||||
/**
|
||||
* 模拟订单列表
|
||||
*/
|
||||
const mockOrderList = ref([
|
||||
{
|
||||
id: 123211111,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '等待付款',
|
||||
statusDesc: '29分钟',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
||||
desc: '不支持7天无理由退货',
|
||||
service: "",
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'text',
|
||||
promoHighlight: '近90天600+人回购',
|
||||
},
|
||||
{
|
||||
id: 9632554,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '骑手到店取餐中',
|
||||
trackingTitle: '10:22-10:55',
|
||||
trackingDesc: '骑手已到店，大王',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
desc: '不支持7天无理由退货',
|
||||
service: "",
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 63254112,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '商家备餐中',
|
||||
trackingTitle: '10:22-10:55',
|
||||
trackingDesc: '商家已接单，商品备餐中',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
desc: '不支持7天无理由退货',
|
||||
service: "",
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 78456211,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
desc: '不支持7天无理由退货',
|
||||
service: "",
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'coupon',
|
||||
promoText: '恭喜您获得3元京东购物券',
|
||||
promoAction: '去领券'
|
||||
},
|
||||
{
|
||||
id: 56322115,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
}
|
||||
],
|
||||
price: '17.00',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
id: 52322221,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '已取消',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
service: "",
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8562245551,
|
||||
shopType: 'self',
|
||||
shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
status: '等待付款',
|
||||
statusDesc: '20小时11分钟',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
service: "无理由退货政策",
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'text',
|
||||
promoHighlight: '白条支付券0.5元优惠券',
|
||||
},
|
||||
{
|
||||
id: 5504455,
|
||||
shopType: 'none',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '正在出库',
|
||||
trackingTitle: '仓库处理中',
|
||||
trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
service: "无理由退货政策",
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'plus',
|
||||
promoText: '告别凑单, 享免运优惠',
|
||||
},
|
||||
{
|
||||
id: 585552,
|
||||
shopType: 'self',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
trackingTitle: '已签收',
|
||||
trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
service: "无理由退货政策",
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'plus',
|
||||
promoText: '告别凑单, 享免运优惠',
|
||||
hasMore: true,
|
||||
},
|
||||
{
|
||||
id: 4545451,
|
||||
shopType: 'jd',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
service: "无理由退货政策",
|
||||
price: '1669.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
hasMore: true,
|
||||
},
|
||||
{
|
||||
id: 1236524,
|
||||
shopType: 'self',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '已取消',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
service: "无理由退货政策",
|
||||
price: '1669.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
}
|
||||
// {
|
||||
// id: 123211111,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '安野屋 (AARYE) 京...',
|
||||
// status: '等待付款',
|
||||
// statusDesc: '29分钟',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
||||
// desc: '不支持7天无理由退货',
|
||||
// service: "",
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// promoType: 'text',
|
||||
// promoHighlight: '近90天600+人回购',
|
||||
// },
|
||||
// {
|
||||
// id: 9632554,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '安野屋 (AARYE) 京...',
|
||||
// status: '骑手到店取餐中',
|
||||
// trackingTitle: '10:22-10:55',
|
||||
// trackingDesc: '骑手已到店，大王',
|
||||
// trackingTime: '2026-03-10 15:14:30',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
// desc: '不支持7天无理由退货',
|
||||
// service: "",
|
||||
// tags: [],
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 63254112,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '安野屋 (AARYE) 京...',
|
||||
// status: '商家备餐中',
|
||||
// trackingTitle: '10:22-10:55',
|
||||
// trackingDesc: '商家已接单，商品备餐中',
|
||||
// trackingTime: '2026-03-10 15:14:30',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
// desc: '不支持7天无理由退货',
|
||||
// service: "",
|
||||
// tags: [],
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 78456211,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '瑞幸咖啡',
|
||||
// status: '完成',
|
||||
// statusColor: 'gray',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
// desc: '不支持7天无理由退货',
|
||||
// service: "",
|
||||
// tags: [],
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// promoType: 'coupon',
|
||||
// promoText: '恭喜您获得3元京东购物券',
|
||||
// promoAction: '去领券'
|
||||
// },
|
||||
// {
|
||||
// id: 56322115,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '瑞幸咖啡',
|
||||
// status: '完成',
|
||||
// statusColor: 'gray',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// },
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// },
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// }
|
||||
// ],
|
||||
// price: '17.00',
|
||||
// count: 2,
|
||||
// },
|
||||
// {
|
||||
// id: 52322221,
|
||||
// shopType: 'waimai',
|
||||
// shopName: '瑞幸咖啡',
|
||||
// status: '已取消',
|
||||
// statusColor: 'gray',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
// desc: '不支持7天无理由退货',
|
||||
// tags: [],
|
||||
// service: "",
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// id: 8562245551,
|
||||
// shopType: 'self',
|
||||
// shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// status: '等待付款',
|
||||
// statusDesc: '20小时11分钟',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
// desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// tags: ['无理由退货政策'],
|
||||
// service: "无理由退货政策",
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// promoType: 'text',
|
||||
// promoHighlight: '白条支付券0.5元优惠券',
|
||||
// },
|
||||
// {
|
||||
// id: 5504455,
|
||||
// shopType: 'none',
|
||||
// shopName: '甜小南旗舰店',
|
||||
// status: '正在出库',
|
||||
// trackingTitle: '仓库处理中',
|
||||
// trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
|
||||
// trackingTime: '2026-03-10 15:14:30',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
// desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// tags: ['无理由退货政策'],
|
||||
// service: "无理由退货政策",
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// promoType: 'plus',
|
||||
// promoText: '告别凑单, 享免运优惠',
|
||||
// },
|
||||
// {
|
||||
// id: 585552,
|
||||
// shopType: 'self',
|
||||
// shopName: '甜小南旗舰店',
|
||||
// status: '完成',
|
||||
// statusColor: 'gray',
|
||||
// trackingTitle: '已签收',
|
||||
// trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
|
||||
// trackingTime: '2026-03-10 15:14:30',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
// desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// tags: ['无理由退货政策'],
|
||||
// service: "无理由退货政策",
|
||||
// price: '69.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// promoType: 'plus',
|
||||
// promoText: '告别凑单, 享免运优惠',
|
||||
// hasMore: true,
|
||||
// },
|
||||
// {
|
||||
// id: 4545451,
|
||||
// shopType: 'jd',
|
||||
// shopName: '甜小南旗舰店',
|
||||
// status: '完成',
|
||||
// statusColor: 'gray',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
// desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// tags: ['无理由退货政策'],
|
||||
// service: "无理由退货政策",
|
||||
// price: '1669.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ],
|
||||
// hasMore: true,
|
||||
// },
|
||||
// {
|
||||
// id: 1236524,
|
||||
// shopType: 'self',
|
||||
// shopName: '甜小南旗舰店',
|
||||
// status: '已取消',
|
||||
// statusColor: 'gray',
|
||||
// products: [
|
||||
// {
|
||||
// image: '/static/image/shopping/jingdong/product1.png',
|
||||
// title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
// desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
// tags: ['无理由退货政策'],
|
||||
// service: "无理由退货政策",
|
||||
// price: '1669.00',
|
||||
// count: 1,
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
|
@ -553,7 +581,7 @@ const mockOrderList = ref([
|
|||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1rpx solid #E5E5E5;
|
||||
border: 0.5px solid #E5E5E5;
|
||||
|
||||
.search-icon {
|
||||
width: 36rpx;
|
||||
|
|
@ -824,7 +852,7 @@ const mockOrderList = ref([
|
|||
}
|
||||
|
||||
.menu-line {
|
||||
height: 1rpx;
|
||||
height: 0.5px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 24rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,11 +33,11 @@
|
|||
<view>
|
||||
<view>
|
||||
<image class="location" src="/static/image/shopping/jingdong/detail/location.png"></image>
|
||||
<text class="name">肖战</text>
|
||||
<text class="number">152633221112</text>
|
||||
<text class="name">{{ order.consignee }}</text>
|
||||
<text class="number">{{ formattedPhone }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="address">上海市浦东新区世纪大道123号</text>
|
||||
<text class="address">{{ order.fullAddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-btn">
|
||||
|
|
@ -54,18 +54,18 @@
|
|||
<view class="outbound-info-content">
|
||||
<view class="title-info">
|
||||
<view>
|
||||
<text>已下单 </text>
|
||||
<text>预计明天 09:00-15:00送达</text>
|
||||
<text>{{ order.status === '正在出库' ? '已下单' : order.status }} </text>
|
||||
<text>{{ order.trackingDesc || '预计送达时间' }}</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||
</view>
|
||||
<text class="desc">快递运输 · 温馨提示：您的订单预计3月11日09:00- 15:53送达</text>
|
||||
<text class="desc">{{ order.trackingDesc2 }}</text>
|
||||
<view class="address-box">
|
||||
<view class="top">
|
||||
<text class="address">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||
<text class="address">{{ order.fullAddress }}</text>
|
||||
<view class="edit-btn">修改</view>
|
||||
</view>
|
||||
<view class="phone">肖战123****1234</view>
|
||||
<view class="phone">{{ order.consignee }} {{ formattedPhone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -106,8 +106,8 @@
|
|||
<view class="bottom-box">
|
||||
<view class="dot"></view>
|
||||
<view>
|
||||
<text class="desc">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||
<view class="name">肖战123****1234</view>
|
||||
<text class="desc">{{ order.fullAddress }}</text>
|
||||
<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -132,9 +132,9 @@
|
|||
<view class="upload-box">
|
||||
<view class="info-box">
|
||||
<view class="image-box">
|
||||
|
||||
<image class="w100 h100" :src="order.courierImg" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="name">肖战</text>
|
||||
<text class="name">{{ order.courier }}</text>
|
||||
</view>
|
||||
<view class="btn-box">
|
||||
<view class="btn grey">联系Ta</view>
|
||||
|
|
@ -146,8 +146,8 @@
|
|||
<view class="bottom-box">
|
||||
<view class="dot"></view>
|
||||
<view>
|
||||
<text class="desc">华哈哈哈哈哈哈哈哈哈2栋 22-1</text>
|
||||
<view class="name">肖战123****1234</view>
|
||||
<text class="desc">{{ order.fullAddress }}</text>
|
||||
<view class="name">{{ order.consignee }} {{ formattedPhone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -157,27 +157,50 @@
|
|||
<view class="product-card">
|
||||
<view class="title-box">
|
||||
<view class="left-box">
|
||||
<image class="img" src="/static/image/shopping/jingdong/detail/ziyin.png"></image>
|
||||
<text class="title">安野屋（AARYE）红红火火恍恍惚惚哈哈哈哈哈好</text>
|
||||
<image v-if="order.shopType == 'self'" class="img"
|
||||
src="/static/image/shopping/jingdong/detail/ziyin.png">
|
||||
</image>
|
||||
<image v-if="order.shopType == 'jd'" style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
|
||||
src="/static/image/shopping/jingdong/JD.png">
|
||||
</image>
|
||||
<text class="title">{{ order.shopName }}</text>
|
||||
</view>
|
||||
<uni-icons class="right-icon" size="14" color="#1A1A1A" type="right"></uni-icons>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<view class="image-box">
|
||||
|
||||
<image v-if="order.products && order.products[0]" class="w100 h100" :src="order.products[0].image">
|
||||
</image>
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<view class="name">联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦</view>
|
||||
<view class="desc">联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦联名哈哈哈哈哈哈哈哈与哈哈哈哈哈哈梦</view>
|
||||
<view class="tag">无理由退货政策</view>
|
||||
<view class="name">{{ order.products && order.products[0]?.title }}</view>
|
||||
<view class="desc">{{ order.products && order.products[0]?.desc }}</view>
|
||||
<view class="tag">{{ order.products && order.products[0]?.service }}</view>
|
||||
</view>
|
||||
<view class="price-box">
|
||||
<text class="price wx-font-medium">￥69.9</text>
|
||||
<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
|
||||
class="flex-center" style="display: inline-block;">
|
||||
<image style="width: 22rpx;height: 22rpx;margin-right: 4rpx;"
|
||||
src="/static/image/shopping/jingdong/detail/help.png">
|
||||
</image>
|
||||
<text
|
||||
style="font-size: 22rpx;height: 22rpx;color: #87868E;font-weight: 300;line-height: 22rpx;margin-right: 2rpx;">到手价</text>
|
||||
</view>
|
||||
<text class="price wx-font-medium">￥{{
|
||||
order.status == '等待付款' || order.status == '已取消' ?
|
||||
Number(order.products[0]?.price).toFixed(2) :
|
||||
Number(order.products[0]?.price - order.discount).toFixed(2)
|
||||
}}</text>
|
||||
<view v-if="(order.status != '等待付款' && order.status != '已取消') && order.discount > 0"
|
||||
class="wx-font-medium"
|
||||
style="margin-top: 2rpx;text-align: right;color: #87868E;font-weight: 500;">
|
||||
<text style="font-size: 24rpx;">￥{{ Number(order.products[0]?.price).toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="order.status == '等待付款' || order.status == '已取消'" class="btn-box flex"
|
||||
style="margin-top: 60rpx;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 1rpx solid #D8D8D8;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
|
||||
<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
|
||||
<view class="name flex-column flex-align-center">
|
||||
<text>店铺客服</text>
|
||||
|
|
@ -199,19 +222,124 @@
|
|||
{{ btn }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view v-if="!(order.status == '等待付款' || order.status == '已取消')" class="order-info-box product-info-box">
|
||||
<view v-if="activeTab != 'dengdaifukuan' && activeTab != 'yiquxiao'" class="item flex-justify-between"
|
||||
style="margin-top: 32rpx;">
|
||||
<text class="label shrink-0 flex-align-center">实付款</text>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;align-items: baseline;overflow-y: hidden;">
|
||||
<view v-if="order.discount > 0" class="wx-font-medium flex flex-align-center"
|
||||
style="height: 32rpx;">
|
||||
<view class="flex" style="align-items: baseline;color: #FF4444;">
|
||||
<text>共减￥</text><text style="font-size: 32rpx;font-weight: 500;">{{ order.discount
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wx-font-medium flex flex-align-center" style="margin-left: 8rpx; height: 32rpx;">
|
||||
<view class="flex" style="align-items: baseline;color: #1A1A1A;">
|
||||
<text>合计￥</text><text style="font-size: 36rpx;font-weight: 500;">{{ order.totalPrice
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="item flex-justify-between" v-for="item in order.orderInfo"
|
||||
v-show="isOrderInfoExpanded || ['订单编号', '支付方式'].includes(item.label)"
|
||||
@click="onClickItemInfo(item)">
|
||||
<text class="label shrink-0 flex-align-center" style="color: #87868E;font-size: 26rpx;">{{
|
||||
item.label
|
||||
}}</text>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
|
||||
<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
|
||||
<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
|
||||
style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
|
||||
<view v-if="item.type == 'number'" class="flex-center"
|
||||
style="color: #1A1A1A;font-size: 26rpx;">
|
||||
<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;">
|
||||
</view>
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-info" v-if="isOrderInfoExpanded">
|
||||
<view class="item flex-justify-between" v-for="item in order.sendType"
|
||||
@click="onClickItemInfo(item)">
|
||||
<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
|
||||
<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center" style="padding-top: 10rpx;"
|
||||
@click="isOrderInfoExpanded = !isOrderInfoExpanded">
|
||||
<text style="color: #87868E;font-size: 26rpx;">{{ isOrderInfoExpanded ? '收起' : '全部订单信息' }}</text>
|
||||
<uni-icons style="margin-left: 8rpx;" :type="isOrderInfoExpanded ? 'up' : 'down'" size="9"
|
||||
color="#87868E"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品总价 -->
|
||||
<view v-if="order.status == '等待付款' || order.status == '已取消'" class="product-price">
|
||||
<view class="title flex-justify-between">
|
||||
<text>商品总价</text>
|
||||
<text class="wx-font-medium" style="font-weight: 500;">￥69</text>
|
||||
<text class="wx-font-medium" style="font-weight: 500;">￥{{ order.products && order.products[0]?.price
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="item flex-justify-between">
|
||||
<text class="label">运费</text>
|
||||
<text class="value wx-font-medium">￥0</text>
|
||||
<text class="value wx-font-medium">￥{{ order.carriage }}</text>
|
||||
</view>
|
||||
<view class="price">需付款 <text class="number wx-font-medium">￥{{ order.totalPrice }}</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 (等待付款/已取消状态) -->
|
||||
<view v-if="order.status == '等待付款' || order.status == '已取消'" class="order-info-box">
|
||||
<view class="title flex-justify-between" @click="isOrderInfoExpanded = !isOrderInfoExpanded">
|
||||
<text>订单信息</text>
|
||||
<view style="font-size: 22rpx;margin-right: 6rpx;font-weight: 400;color: #87868E;"
|
||||
class="flex-align-center">
|
||||
{{ isOrderInfoExpanded ? '收起' : '展开' }}
|
||||
<uni-icons :type="isOrderInfoExpanded ? 'up' : 'down'" size="9" color="#87868E"
|
||||
style="margin-left: 8rpx;"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="item flex-justify-between" v-for="item in order.orderInfo"
|
||||
v-show="isOrderInfoExpanded || ['订单编号', '支付方式', '发票类型'].includes(item.label)"
|
||||
@click="onClickItemInfo(item)">
|
||||
<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
|
||||
<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.label === '订单编号' ? item.value :
|
||||
item.value
|
||||
}}</text>
|
||||
<uni-icons v-if="!item.type" type="right" size="10" color="#1A1A1A"
|
||||
style="margin-top: 0rpx;margin-left: 4rpx;"></uni-icons>
|
||||
<view v-if="item.type == 'number'" class="flex-center" style="color: #1A1A1A;font-size: 26rpx;">
|
||||
<view style="width: 2rpx;height: 16rpx;background-color: #8D8D8D;margin: 0 8rpx;"></view>
|
||||
复制
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delivery-info" v-if="isOrderInfoExpanded">
|
||||
<view class="item flex-justify-between" v-for="item in order.sendType" @click="onClickItemInfo(item)">
|
||||
<text class="label shrink-0" style="color: #87868E;font-size: 26rpx;">{{ item.label }}</text>
|
||||
<view class="flex-1 flex-align-center"
|
||||
style="justify-content: flex-end;width: 300rpx;overflow-x: auto;margin-left: 20rpx;">
|
||||
<text style="color: #1A1A1A;font-size: 26rpx;">{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="price">需付款 <text class="number wx-font-medium">￥69</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 快速解决问题 -->
|
||||
|
|
@ -224,7 +352,7 @@
|
|||
</view>
|
||||
|
||||
<view class="btn-box flex" style="margin-top: 30rpx;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 1rpx solid #D8D8D8;">
|
||||
<view class="left flex-1 flex-center " style="border-right : 0.5px solid #D8D8D8;">
|
||||
<image class="img" src="/static/image/shopping/jingdong/detail/dianpukefu.png"></image>
|
||||
<view class="name flex-column">
|
||||
<text>店铺客服</text>
|
||||
|
|
@ -317,238 +445,13 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { util } from '@/utils/common.js';
|
||||
|
||||
/**
|
||||
* 模拟订单列表
|
||||
*/
|
||||
const mockOrderList = ref([
|
||||
{
|
||||
id: 123211111,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '等待付款',
|
||||
statusDesc: '29分钟',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
orderInfo: {
|
||||
'orderNo': "123652632566",
|
||||
'payMethod': '在线支付',
|
||||
'payTime': '2026-03-10 15:14:30',
|
||||
'orderTime': '2026-03-10 15:14:30',
|
||||
},
|
||||
deliveryInfo: {
|
||||
'method': '快递运输',
|
||||
'receiptInfo': '张三 12******44444',
|
||||
'address': '啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦',
|
||||
'deliveryTime': '2026-03-10 15:14:30',
|
||||
'deliveryMethod': '送货上门',
|
||||
},
|
||||
promoType: 'text',
|
||||
promoHighlight: '近90天600+人回购',
|
||||
},
|
||||
{
|
||||
id: 9632554,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '骑手到店取餐中',
|
||||
trackingTitle: '10:22-10:55',
|
||||
trackingDesc: '骑手已到店，大王',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 63254112,
|
||||
shopType: 'waimai',
|
||||
shopName: '安野屋 (AARYE) 京...',
|
||||
status: '商家备餐中',
|
||||
trackingTitle: '10:22-10:55',
|
||||
trackingDesc: '商家已接单，商品备餐中',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好热 少糖',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 78456211,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'coupon',
|
||||
promoText: '恭喜您获得3元京东购物券',
|
||||
promoAction: '去领券'
|
||||
},
|
||||
{
|
||||
id: 56322115,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
},
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
}
|
||||
],
|
||||
price: '17.00',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
id: 52322221,
|
||||
shopType: 'waimai',
|
||||
shopName: '瑞幸咖啡',
|
||||
status: '已取消',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||||
desc: '不支持7天无理由退货',
|
||||
tags: [],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8562245551,
|
||||
shopType: 'self',
|
||||
shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
status: '等待付款',
|
||||
statusDesc: '20小时11分钟',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'text',
|
||||
promoHighlight: '白条支付券0.5元优惠券',
|
||||
},
|
||||
{
|
||||
id: 5504455,
|
||||
shopType: 'none',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '正在出库',
|
||||
trackingTitle: '仓库处理中',
|
||||
trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'plus',
|
||||
promoText: '告别凑单, 享免运优惠',
|
||||
},
|
||||
{
|
||||
id: 585552,
|
||||
shopType: 'self',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
trackingTitle: '已签收',
|
||||
trackingDesc: '您的订单已签收，可对快递员的服务进行评价或打赏哦~',
|
||||
trackingTime: '2026-03-10 15:14:30',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
price: '69.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
promoType: 'plus',
|
||||
promoText: '告别凑单, 享免运优惠',
|
||||
hasMore: true,
|
||||
},
|
||||
{
|
||||
id: 4545451,
|
||||
shopType: 'jd',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '完成',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
price: '1669.00',
|
||||
count: 1,
|
||||
}
|
||||
],
|
||||
hasMore: true,
|
||||
},
|
||||
{
|
||||
id: 1236524,
|
||||
shopType: 'self',
|
||||
shopName: '甜小南旗舰店',
|
||||
status: '已取消',
|
||||
statusColor: 'gray',
|
||||
products: [
|
||||
{
|
||||
image: '/static/image/shopping/jingdong/product1.png',
|
||||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||||
tags: ['无理由退货政策'],
|
||||
price: '1669.00',
|
||||
count: 1,
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
const mockOrderList = ref([]);
|
||||
|
||||
const bottomBtns = computed(() => {
|
||||
if (order.value.status == '正在出库') {
|
||||
|
|
@ -588,13 +491,52 @@ const btnList = computed(() => {
|
|||
return btns
|
||||
})
|
||||
|
||||
const order = ref(null);
|
||||
const order = ref({});
|
||||
onLoad((options) => {
|
||||
console.log(options);
|
||||
console.log('详情页参数:', options);
|
||||
const id = options.id;
|
||||
order.value = mockOrderList.value.find(item => item.id == id);
|
||||
console.log(order.value);
|
||||
if (!id) return;
|
||||
|
||||
// 1. 优先从本地缓存查找
|
||||
const cachedList = uni.getStorageSync('jingdongShopping') || [];
|
||||
let target = cachedList.find(item => String(item.id) === String(id));
|
||||
|
||||
// 2. 如果缓存没有，再从静态 mock 列表查找
|
||||
if (!target) {
|
||||
target = mockOrderList.value.find(item => String(item.id) === String(id));
|
||||
}
|
||||
|
||||
if (target) {
|
||||
order.value = target;
|
||||
console.log('成功匹配订单数据:', order.value);
|
||||
} else {
|
||||
console.error('未找到指定的订单数据, ID:', id);
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
// #ifdef APP-PLUS
|
||||
util.setAndroidSystemBarColor('#FFFFFF')
|
||||
setTimeout(() => {
|
||||
plus.navigator.setStatusBarStyle("dark");
|
||||
}, 500);
|
||||
// #endif
|
||||
})
|
||||
|
||||
// 手机号脱敏处理 (增强容错版)
|
||||
const formattedPhone = computed(() => {
|
||||
const phone = order.value?.phone;
|
||||
if (!phone) return "";
|
||||
const p = String(phone);
|
||||
// 只要长度大于等于 7 位，就执行脱敏
|
||||
if (p.length >= 7) {
|
||||
return p.slice(0, 3) + '****' + p.slice(-4);
|
||||
}
|
||||
return p;
|
||||
});
|
||||
|
||||
// 订单信息展开状态 (进入页面默认收起)
|
||||
const isOrderInfoExpanded = ref(false);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -680,7 +622,7 @@ onLoad((options) => {
|
|||
|
||||
height: 54rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #C5C5C5;
|
||||
border: 0.5px solid #C5C5C5;
|
||||
padding: 0 52rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 52rpx;
|
||||
|
|
@ -741,7 +683,7 @@ onLoad((options) => {
|
|||
width: 116rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 1rpx solid #C5C5C5;
|
||||
border: 0.5px solid #C5C5C5;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
|
|
@ -1030,7 +972,7 @@ onLoad((options) => {
|
|||
text-overflow: ellipsis;
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -1066,7 +1008,7 @@ onLoad((options) => {
|
|||
text-overflow: ellipsis;
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
line-height: 28rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -1114,7 +1056,7 @@ onLoad((options) => {
|
|||
height: 60rpx;
|
||||
line-height: 58rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #C7C7C7;
|
||||
border: 0.5px solid #C7C7C7;
|
||||
color: #1A1A1A;
|
||||
margin-left: 22rpx;
|
||||
|
||||
|
|
@ -1385,6 +1327,7 @@ onLoad((options) => {
|
|||
min-height: calc(90rpx + env(safe-area-inset-bottom));
|
||||
min-height: calc(90rpx + constant(safe-area-inset-bottom));
|
||||
background-color: #FFFFFF;
|
||||
border-top: 0.5px solid #F2F2F2;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
|
|
@ -1434,4 +1377,52 @@ onLoad((options) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info-box {
|
||||
margin: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 22rpx;
|
||||
|
||||
&.product-info-box {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
padding-bottom: 34rpx;
|
||||
|
||||
}
|
||||
|
||||
.delivery-info {
|
||||
border-top: 0.5px solid #F2F2F2;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
height: 38rpx;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #87868E;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #1A1A1A;
|
||||
line-height: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 802 B |
Loading…
Reference in New Issue