tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成外卖列表详情

This commit is contained in:
tangxinyue 2026-05-21 16:31:33 +08:00
parent 1bb582d51a
commit 4cb7784d4a
16 changed files with 2823 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/nav-bar/nav-bar.vue
View File

@ -6,7 +6,7 @@
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }">
<slot name="statusBar"></slot>
</view>
<view class="nav-box" style="width: 100%;height: 88rpx;" @click="openPopup">
<view class="nav-box" style="width: 100%;height: 88rpx;">
<slot>
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
v-on="$attrs">

2
main.js
View File

@ -29,7 +29,7 @@ export function createApp() {
app.config.globalProperties.$system = plus.os.name;
// #endif
app.config.globalProperties.$systemInfo = systemInfo
uni.setStorageSync('version', '1.0.5.sp3')
uni.setStorageSync('version', '1.0.5.sp4')
app.config.globalProperties.$version = uni.getStorageSync('version')
app.use(globalMethods);
return {

8
pages.json
View File

@ -108,6 +108,14 @@
"navigationBarTitleText": "淘宝闪购订单详情",
"navigationStyle": "custom"
}
},
{
"path" : "taobao/add-shangou-order/add-shangou-order",
"style" :
{
"navigationBarTitleText" : "添加淘宝闪购订单详情",
"navigationStyle": "custom"
}
}
]
},

27
pages/other/about-this-iphone/about-this-iphone.vue
View File

@ -1,7 +1,7 @@
<template>
<view>
<!-- Custom Nav Bar -->
<view class="custom-nav-bar">
<view class="custom-nav-bar" :class="{ 'android-nav': isAndroid }">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="nav-content">
<view class="left-icon" @click="back">
@ -13,7 +13,7 @@
</view>
<!-- Placeholder to push content down -->
<view class="nav-placeholder" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="nav-placeholder" :style="{ height: statusBarHeight + 74 + 'px' }"></view>
<view class="info-container">
<block v-for="(group, groupIndex) in listData" :key="groupIndex">
@ -143,6 +143,8 @@ const defaultData = [
const listData = ref([]);
const statusBarHeight = ref(0);
const isAndroid = ref(false);
onShow(() => {
// #ifdef APP-PLUS
util.setAndroidSystemBarColor('#F2F1F6')
@ -166,6 +168,10 @@ onMounted(() => {
const systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight || 0;
if (systemInfo.osName === 'android' || systemInfo.platform === 'android') {
isAndroid.value = true;
}
const cached = uni.getStorageSync(CACHE_KEY);
if (cached) {
try {
@ -250,6 +256,20 @@ const confirmModal = () => {
}
}
/* 安卓手机降级：取消复杂的渐变、滤镜与遮罩，直接使用纯色 */
.custom-nav-bar.android-nav {
opacity: 1 !important;
background: #F2F1F6 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
.nav-content {
padding-bottom: 10rpx !important;
}
}
.nav-placeholder {
width: 100%;
padding-top: 146rpx;
@ -267,8 +287,8 @@ const confirmModal = () => {
.info-container {
padding: 30rpx;
padding-top: 0;
padding-bottom: 60rpx;
margin-top: 60rpx;
}
.info-group {
@ -323,6 +343,7 @@ const confirmModal = () => {
line-height: 32rpx;
margin-bottom: 16rpx;
color: #85858A;
font-weight: 500;
}
.custom-modal-mask {

1493
pages/shopping/taobao/add-shangou-order/add-shangou-order.vue Normal file
View File

File diff suppressed because it is too large Load Diff

284
pages/shopping/taobao/components/list-card/list-card.vue
View File

@ -4,72 +4,154 @@
@touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
<!-- 顶部店铺和状态 -->
<view class="card-header">
<view class="shop-info">
<image class="taobao-logo" :src="`/static/image/shopping/taobao/${item.shopType}.png`"
<view class="shop-info flex-align-center">
<image class="taobao-logo" :class="{ shangou: item.orderType === 'waimai' }"
:src="`/static/image/shopping/taobao/${item.orderType === 'waimai' ? 'shangou' : item.shopType}.png`"
mode="heightFix">
</image>
<text class="shop-name">{{ item.shopName || '淘宝店铺' }}</text>
<uni-icons style="margin-left: 4rpx;" type="right" size="10" color="#8C8C8C"></uni-icons>
<text class="shop-name flex-align-center"><text
:class="{ 'waimai-shop-name': item.orderType === 'waimai' }">{{ item.shopName || '淘宝店铺'
}}</text> <text v-if="item.orderType === 'waimai'" style="color: #7C8495;"
class="waimai-shop-name">{{
item.location }}</text></text>
<uni-icons style="margin-left: 4rpx;" type="right" size="12" color="#8C8C8C"></uni-icons>
<!-- <text class="iconfont icon-arrow-right arrow-icon">></text> -->
</view>
<view class="order-status" :class="item.statusType">
<view class="order-status" :class="[item.statusType, item.orderType]">
{{ item.statusText || getStatusText(item.statusType) }}
</view>
</view>
<!-- 商品列表 -->
<view class="goods-list" @tap="goToDetail(item)">
<view class="goods-item" v-for="(goods, gIdx) in item.goodsList" :key="gIdx">
<image class="goods-img" :class="{ refunding: item.statusType === 'refunding' }"
:src="goods.image || '/static/default-goods.png'" mode="aspectFill"
:style="{ width: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '', height: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '' }">
</image>
<view class="goods-info" :id="'goods-info-' + index + '-' + gIdx">
<view class="goods-title-row">
<view class="good-info-box" :id="'title-box-' + index + '-' + gIdx">
<text class="goods-title">{{ getTruncatedTitle(item, index, goods, gIdx) }}</text>
<view class="goods-spec" v-if="goods.specs">{{ goods.specs }}</view>
</view>
<view class="goods-price-box">
<text class="price-symbol wx-font-medium">￥</text>
<text class="price-val wx-font-medium">{{ goods.price }}</text>
<text class="goods-count">x{{ goods.count || 1 }}</text>
</view>
</view>
<view class="goods-tags" v-if="goods.tags && item.statusType !== 'refunding'">
<text class="tag">{{ goods.tags }}</text>
</view>
<!-- 单个商品的售后状态 -->
<view class="goods-evaluation" v-if="item.statusType == 'success'">
<view class="left">
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/pingjia.png'>
</image>
<text>评价将帮助70人</text>
</view>
<view class="right">
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/chaping.png'>
</image>
<text>差评</text>
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/zhongping.png'>
</image>
<text>中评</text>
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/haoping.png'>
</image>
<text>好评</text>
<template v-if="item.orderType === 'waimai'">
<!-- 外卖单个商品 -->
<!-- :style="{ width: imgHeights[index + '-0'] ? imgHeights[index + '-0'] + 'px' : '', height: imgHeights[index + '-0'] ? imgHeights[index + '-0'] + 'px' : '' }" -->
<view v-if="item.goodsList.length === 1" class="goods-item">
<image class="goods-img" :src="item.goodsList[0].image || '/static/default-goods.png'"
mode="aspectFill">
</image>
<view class="goods-info" :id="'goods-info-' + index + '-0'">
<view class="goods-title-row">
<view class="good-info-box" :id="'title-box-' + index + '-0'">
<text class="goods-title">{{ getTruncatedTitle(item, index, item.goodsList[0], 0)
}}</text>
<view class="goods-spec" style="margin-top: 18rpx; color: #999;">默认</view>
<view class="goods-tags" v-if="item.goodsList[0].tags || item.goodsList[0].tag"
style="margin-top: 18rpx;">
<text class="tag">{{ item.goodsList[0].tags || item.goodsList[0].tag }}</text>
</view>
</view>
<view class="goods-price-box">
<text class="price-symbol wx-font-medium">￥</text>
<text class="price-val wx-font-medium">{{ item.goodsList[0].actualPrice ||
item.goodsList[0].price }}</text>
<text class="goods-count">x{{ item.goodsList[0].count || 1 }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 外卖多个商品 -->
<view v-else class="waimai-multi-goods flex-align-center"
style="margin-bottom: 18rpx; height: 136rpx;">
<scroll-view scroll-x class="waimai-images"
style="flex: 1; white-space: nowrap; overflow: hidden; margin-right: 16rpx; height: 100%;">
<view v-for="(goods, gIdx) in item.goodsList" :key="gIdx"
style="display: inline-block; position: relative; margin-right: 16rpx; width: 136rpx; height: 136rpx;">
<image :src="goods.image || '/static/default-goods.png'" mode="aspectFill"
style="width: 100%; height: 100%; border-radius: 12rpx; background-color: #F5F5F5;">
</image>
<text
style="position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.4); color: #fff; font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 0 12rpx 0 12rpx;">x{{
goods.count || 1 }}</text>
</view>
</scroll-view>
<view class="waimai-total-count"
style="font-size: 24rpx; color: #7C8495; flex-shrink: 0; font-weight: 400;">共{{
getTotalCount(item.goodsList) }}件</view>
</view>
</template>
<template v-else>
<view class="goods-item" v-for="(goods, gIdx) in item.goodsList" :key="gIdx">
<image class="goods-img"
:class="{ refunding: item.statusType === 'refunding' && currentFilter == 4 }"
:src="goods.image || '/static/default-goods.png'" mode="aspectFill"
:style="{ width: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '', height: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '' }">
</image>
<view class="goods-info" :id="'goods-info-' + index + '-' + gIdx">
<view class="goods-title-row">
<view class="good-info-box" :id="'title-box-' + index + '-' + gIdx">
<text class="goods-title">{{ getTruncatedTitle(item, index, goods, gIdx) }}</text>
<view class="goods-spec" v-if="goods.specs">{{ goods.specs }}</view>
</view>
<view class="goods-price-box">
<text class="price-symbol wx-font-medium">￥</text>
<text class="price-val wx-font-medium">{{ goods.price }}</text>
<text class="goods-count">x{{ goods.count || 1 }}</text>
</view>
</view>
<view class="goods-tags" v-if="goods.tags && currentFilter != 4">
<text class="tag">{{ goods.tags }}</text>
</view>
<!-- 单个商品的售后状态 -->
<view class="goods-evaluation" v-if="item.statusType == 'success'">
<view class="left">
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/pingjia.png'>
</image>
<text>评价将帮助70人</text>
</view>
<view class="right">
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/chaping.png'>
</image>
<text>差评</text>
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/zhongping.png'>
</image>
<text>中评</text>
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/haoping.png'>
</image>
<text>好评</text>
</view>
</view>
<!-- 单个商品的售后状态 -->
<view class="goods-evaluation" v-if="item.statusType == 'refunding' && currentFilter != 4">
<view class="left">
<image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
src='/static/image/shopping/taobao/tuikuanchenggong.png'>
</image>
<text>退款成功</text>
</view>
<view class="desc">
{{ item.statusDesc }}
</view>
<uni-icons type="right" size="12" color="#7B7E8C"></uni-icons>
</view>
</view>
</view>
</template>
</view>
<!-- 各种提示信息 -->
<view v-if="item.statusType == 'wait_pay'" class="tips-box daifukuan">
<view v-if="item.orderType === 'waimai' && item.statusType === 'wait_recv'" class="tips-box waimai-delivery"
style="background-color: #F4F5F7; border-radius: 12rpx; padding: 16rpx 24rpx; margin-top: 16rpx; display: flex; align-items: center; height: auto;">
<image style="width: 36rpx; height: 36rpx; margin-right: 16rpx; flex-shrink: 0;"
src="/static/image/shopping/taobao/daocha.png"></image>
<view style="flex: 1; overflow: hidden;">
<view
style="font-size: 26rpx; color: #1A1A1A; font-weight: 500; display: flex; align-items: center;">
预计 <text style="color: #FF7824; margin: 0 8rpx;">{{ item.deliveryTime || '14:15-14:45' }}</text>
送达</view>
<view style="font-size: 22rpx; color: #999; margin-top: 6rpx;">下单时间 {{ item.orderInfo?.[8]?.value }}
</view>
</view>
<uni-icons type="right" size="12" color="#7C8495"></uni-icons>
</view>
<view v-else-if="item.statusType == 'wait_pay' && item.orderType != 'waimai'" class="tips-box daifukuan">
<image class="tip-icon" src="/static/image/shopping/taobao/daifukuan.png"></image>
<text class="text">订单即将关闭，建议尽快付款</text>
</view>
@ -87,32 +169,35 @@
<uni-icons v-if="item.statusDesc2" type="right" size="14" color="#7B7E8C"></uni-icons>
</view>
<view v-else-if="item.statusType == 'refunding'" class="tips-box yunshuzhong">
<view v-else-if="item.statusType == 'refunding' && props.currentFilter == 4" class="tips-box yunshuzhong">
<text class="title">退款成功</text>
<text class="text">{{ item.statusDesc }}</text>
</view>
<!-- 价格合计 -->
<view class="order-total">
<text class="total-label">共{{ getTotalCount(item.goodsList) }}件商品</text>
<text class="total-label">实付款</text>
<text class="total-label" :style="item.orderType === 'waimai' ? 'color: #7B7E8C;' : ''">共{{
getTotalCount(item.goodsList) }}件{{ item.orderType === 'waimai' ? ' (含包装/配送费)' : '商品' }}</text>
<text class="total-label" style="margin-left: 8rpx;">实付款</text>
<text class="total-symbol wx-font-medium">￥</text>
<text class="total-price wx-font-medium">{{ Number(
item.totalPrice).toFixed(2).split(".")[0] }}</text>
item.priceDetail?.actualPay || item.totalPrice || 0).toFixed(2).split(".")[0] }}</text>
<text class="total-price wx-font-medium" style="font-size: 28rpx;">.{{ Number(
item.totalPrice).toFixed(2).split(".")[1] }}</text>
item.priceDetail?.actualPay || item.totalPrice || 0).toFixed(2).split(".")[1] }}</text>
</view>
<!-- 底部按钮 -->
<view class="card-footer" v-if="getButtons(item.statusType).buttons.length > 0">
<view class="more-text"
v-if="getButtons(item.statusType).moreText.text || '更多' && getButtons(item.statusType).moreText.isShow"
:style="{ color: getButtons(item.statusType).moreText.color }">
{{ getButtons(item.statusType).moreText.text || '更多' }}
<view class="card-footer" v-if="getButtons(item.statusType, item.orderType).buttons.length > 0">
<view class="more-text" v-if="getButtons(item.statusType, item.orderType).moreText?.isShow"
:style="{ color: getButtons(item.statusType, item.orderType).moreText?.color || '#1A1A1A' }">
{{ getButtons(item.statusType, item.orderType).moreText?.text || '更多' }}
</view>
<view class="btn" :class="{ 'btn-primary': btn.primary }"
v-for="(btn, bIdx) in getButtons(item.statusType).buttons" :key="bIdx"
@tap.stop="handleAction(btn.action, item)">
v-for="(btn, bIdx) in getButtons(item.statusType, item.orderType).buttons" :key="bIdx"
@tap.stop="handleAction(btn.action, item)" style="position: relative;">
<text v-if="btn.tag"
style="position: absolute; top: -18rpx; left: 50%; transform: translateX(-50%); background-color: #FF7824; color: #fff; font-size: 16rpx; padding: 2rpx 8rpx; border-radius: 16rpx; border-bottom-left-radius: 4rpx; white-space: nowrap;">{{
btn.tag }}</text>
{{ btn.text }}
</view>
</view>
@ -127,6 +212,10 @@ const props = defineProps({
list: {
type: Array,
default: () => []
},
currentFilter: {
type: String,
default: ''
}
});
@ -170,7 +259,7 @@ const calcFitTitle = (originalTitle, containerWidth) => {
}
}
return found ? originalTitle.slice(0, cutIndex - 1) : originalTitle;
return found ? originalTitle.slice(0, cutIndex - 2) + '...' : originalTitle;
};
/**
@ -251,13 +340,50 @@ const getStatusText = (status) => {
'wait_recv': '卖家已发货',
'success': '交易成功',
'closed': '交易关闭',
'refunding': '退货'
'refunding': '交易关闭'
};
if (status == 'refunding' && props.currentFilter == 4) {
map[status] = '退款'
}
return map[status] || status;
};
// 状态对应的按钮配置
const getButtons = (status) => {
const getButtons = (status, orderType) => {
if (orderType === 'waimai') {
const waimaiMap = {
'wait_pay': {
moreText: { isShow: false },
buttons: [
{ text: '继续付款', action: 'pay', primary: true }
]
},
'wait_recv': {
moreText: { isShow: false },
buttons: [
{ text: '查看订单', action: 'view_order' },
{ text: '查看物流', action: 'view_logistics' }
]
},
'success': {
moreText: { isShow: false },
buttons: [
{ text: '删除订单', action: 'delete' },
{ text: '评价', action: 'comment' },
{ text: '再买一单', action: 'buy_again', primary: false }
]
},
'closed': {
moreText: { isShow: false },
buttons: [
{ text: '删除订单', action: 'delete' },
{ text: '再买一单', action: 'buy_again', primary: false }
]
}
};
return waimaiMap[status] || { moreText: { isShow: false }, buttons: [] };
}
const map = {
'wait_pay': {
moreText: {
@ -418,14 +544,27 @@ const goToDetail = (item) => {
.taobao-logo {
height: 28rpx;
margin-right: 6rpx;
&.shangou {
height: 36rpx;
}
}
.shop-name {
font-size: 28rpx;
line-height: 28rpx;
color: #333333;
font-weight: bold;
}
.waimai-shop-name {
display: inline-block;
max-width: 220rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arrow-icon {
font-size: 24rpx;
color: #999;
@ -477,6 +616,10 @@ const goToDetail = (item) => {
.good-info-box {
flex: 1;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
// margin-right: 8px;
}
.goods-title {
@ -485,6 +628,7 @@ const goToDetail = (item) => {
line-height: 36rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
margin-right: 18rpx;
font-weight: 500;
@ -562,7 +706,6 @@ const goToDetail = (item) => {
align-items: center;
text {
width: 176rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -586,6 +729,15 @@ const goToDetail = (item) => {
font-weight: 500;
line-height: 24rpx;
}
.desc {
flex: 1;
width: 100px;
font-size: 24rpx;
color: #7C8495;
line-height: 24rpx;
margin-left: 20rpx;
}
}
}
}

929
pages/shopping/taobao/json/order.json
View File

@ -517,8 +517,880 @@
]
}
],
//外卖类型
"waimaiType": [
{
"label": "待支付",
"key": "wait_pay"
},
{
"label": "骑手配送中",
"key": "wait_recv"
},
{
"label": "已送达",
"key": "success"
},
{
"label": "已取消",
"key": "closed"
}
],
//外卖类型字段分类
"waimaiClassfiy": {
"wait_pay": {
"id": "",
"orderType": "waimai",
"statusType": "wait_pay",
"statusText": "待支付",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "",
"location": "",
"deliveryPhoto": "",
"deliveryTime": "",
"remainingPayTime": "",
"goodsList": [
{
"image": "",
"title": "",
"count": 1,
"actualPrice": 0,
"oriPrice": 0,
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "24.61",
"actualPay": "20.78",
"details": [
{
"name": "总价",
"value": "￥45.39",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥10.21",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥3.4",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "备注",
"value": "1份餐具",
"isFoldDisplay": true
},
{
"label": "慢必赔",
"value": "平台赠送",
"hasArrow": true
},
{
"label": "其它服务",
"value": "号码保护",
"hasArrow": true
},
{
"label": "订单号",
"value": "8034160313365695921",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "尽快送达"
},
{
"label": "下单时间",
"value": "2026-03-31 11: 11: 55.220"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
"wait_recv": {
"id": "",
"orderType": "waimai",
"statusType": "wait_recv",
"statusText": "骑手送货中",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "",
"location": "",
"deliveryPhoto": "",
"deliveryTime": "",
"remainingPayTime": "",
"orderQty": "12单",
"surplusDeliveryTime": "40分钟",
"mapUrl": "/static/image/shopping/taobao/waimai/map1.png",
"goodsList": [
{
"image": "",
"title": "",
"count": 1,
"actualPrice": 0,
"oriPrice": 0,
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "24.61",
"actualPay": "20.78",
"details": [
{
"name": "总价",
"value": "￥45.39",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥10.21",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥3.4",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "联系不上时",
"value": "可设置暂存点放置外卖",
"hasSetting": true
},
{
"label": "备注",
"value": "1份餐具",
"isFoldDisplay": true
},
{
"label": "发票",
"value": "未添加开票信息",
"hasArrow": true
},
{
"label": "配送方式",
"value": "蜂鸟准时达",
"hasArrow": true
},
{
"label": "配送骑士",
"value": "赵乃炼",
"hasArrow": true
},
{
"label": "订单号",
"value": "8034160313365695921",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "03-31(周二)11: 41-11: 56"
},
{
"label": "下单时间",
"value": "2026-03-31 11: 11: 55.220"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
"success": {
"id": "",
"orderType": "waimai",
"statusType": "success",
"statusText": "已送达",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "",
"location": "",
"deliveryPhoto": "",
"deliveryTime": "",
"remainingPayTime": "",
"orderQty": "",
"surplusDeliveryTime": "",
"goodsList": [
{
"image": "",
"title": "",
"count": 1,
"actualPrice": 0,
"oriPrice": 0,
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "24.61",
"actualPay": "20.78",
"details": [
{
"name": "总价",
"value": "￥45.39",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥10.21",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥3.4",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "备注",
"value": "1份餐具"
},
{
"label": "发票",
"value": "未添加开票信息",
"hasArrow": true,
"isFoldDisplay": true
},
{
"label": "配送方式",
"value": "蜂鸟准时达",
"hasArrow": true
},
{
"label": "配送骑士",
"value": "赵乃炼",
"hasArrow": true
},
{
"label": "食无忧",
"value": "如有以无编制或引起就医,可申请理赔",
"hasApply": true,
"isFoldDisplay": true
},
{
"label": "超20分钟免单",
"value": "订单已准时送达,服务保障已结束",
"hasArrow": true,
"isFoldDisplay": true
},
{
"label": "其他服务",
"value": "号码保护",
"hasArrow": true
},
{
"label": "订单号",
"value": "8034160313365695921",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "03-31(周二)11: 41-11: 56"
},
{
"label": "下单时间",
"value": "2026-03-31 11: 11: 55.220"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
"closed": {
"id": "",
"orderType": "waimai",
"statusType": "closed",
"statusText": "已取消",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "",
"location": "",
"deliveryPhoto": "",
"deliveryTime": "",
"remainingPayTime": "",
"orderQty": "",
"surplusDeliveryTime": "",
"goodsList": [
{
"image": "",
"title": "",
"count": 1,
"actualPrice": 0,
"oriPrice": 0,
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "24.61",
"actualPay": "20.78",
"details": [
{
"name": "总价",
"value": "￥45.39",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥10.21",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥3.4",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "备注",
"value": "1份餐具",
"isFoldDisplay": true
},
{
"label": "慢必赔",
"value": "平台赠送"
},
{
"label": "其它服务",
"value": "号码保护",
"hasArrow": true
},
{
"label": "订单号",
"value": "8034160313365695921",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "03-31(周二)11: 41-11: 56"
},
{
"label": "下单时间",
"value": "2026-03-31 11: 11: 55.220"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
},
// "购物随机产品列表"
"waimaiProductList": [
{
"shopName": "喜茶",
"location": "上海中区广场店",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/xicha1.png",
"title": "多肉葡萄",
"desc": "标准冰/五分糖；一人份",
"price": "28.00",
"actualPrice": 0.06,
"oriPrice": 2,
"count": "1",
"discount": "2.00",
"tag": "食品安全理赔 慢必赔"
}
]
},
{
"shopName": "肯德基宅急送",
"location": "南京路店",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/kfc.png",
"title": "劲脆鸡腿堡单人餐",
"desc": "汉堡+薯条+可乐；一人份",
"price": "38.50",
"count": "1",
"discount": "9.00",
"tag": "食品安全理赔 慢必赔"
}
]
},
{
"shopName": "Wagas 沃歌斯",
"location": "嘉里中心店",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/shala.png",
"title": "沃歌斯冠军沙拉",
"desc": "含鸡肉/羽衣甘蓝；一人份",
"price": "68.00",
"count": "1",
"discount": "0.00",
"tag": "食品安全理赔 慢必赔"
}
]
},
{
"shopName": "海底捞外送",
"location": "火锅外卖",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/haidilao.png",
"title": "捞派肥牛 (半份)",
"desc": "精选谷饲肥牛；一人份",
"price": "36.00",
"count": "1",
"discount": "0.00",
"tag": "食品安全理赔 慢必赔"
}
]
},
{
"shopName": "星巴克专星送",
"location": "国金中心店",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/xingbake.png",
"title": "燕麦拿铁 (大杯)",
"desc": "不额外加糖/常温；一人份",
"price": "35.00",
"count": "1",
"discount": "7.00",
"tag": "食品安全理赔 慢必赔"
}
]
},
{
"shopName": "新荣记",
"location": "黑珍珠三钻·南京西路店",
"products": [
{
"image": "/static/image/shopping/jingdong/product/waimai/huajiaoji.png",
"title": "至尊黄焖两头干鲍鱼花胶鸡套餐",
"desc": "精选20头干鲍、深海花胶、清远走地鸡；单人尊享",
"price": "3888.00",
"count": "1",
"discount": "0.00",
"tag": "食品安全理赔 慢必赔"
}
]
}
],
//默认数据
"defualtData": [
{
"id": "1779342764434",
"orderType": "waimai",
"statusType": "wait_recv",
"statusText": "骑手送货中",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "海底捞外送",
"location": "火锅外卖",
"deliveryPhoto": "/static/image/shopping/taobao/waimai/deliveryPhoto2.png",
"deliveryTime": "14:17-14:47",
"remainingPayTime": "05:13",
"orderQty": "2单",
"surplusDeliveryTime": "20分钟",
"mapUrl": "/static/image/shopping/taobao/waimai/map1.png",
"goodsList": [
{
"image": "/static/image/shopping/jingdong/product/waimai/haidilao.png",
"title": "捞派肥牛 (半份)",
"spec": "精选谷饲肥牛；一人份",
"actualPrice": "36.00",
"oriPrice": "",
"count": "1",
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "9.70",
"actualPay": "38.60",
"details": [
{
"name": "总价",
"value": "￥36.00",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥0.00",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥0.70",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "联系不上时",
"value": "可设置暂存点放置外卖",
"hasSetting": true
},
{
"label": "备注",
"value": "1份餐具",
"isFoldDisplay": true
},
{
"label": "发票",
"value": "未添加开票信息",
"hasArrow": true
},
{
"label": "配送方式",
"value": "蜂鸟准时达",
"hasArrow": true
},
{
"label": "配送骑士",
"value": "赵乃炼",
"hasArrow": true
},
{
"label": "订单号",
"value": "813507450742414085",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "12-19(周六) 11:59-12:29"
},
{
"label": "下单时间",
"value": "2026-05-21 12:00:00.123"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
{
"id": "1779342647665",
"orderType": "waimai",
"statusType": "wait_pay",
"statusText": "待支付",
"isExpanded": false,
"isOrderInfoExpanded": false,
"shopName": "新荣记",
"location": "黑珍珠三钻·南京西路店",
"deliveryPhoto": "/static/image/shopping/taobao/waimai/deliveryPhoto1.png",
"deliveryTime": "13:44-14:14",
"remainingPayTime": "11:43",
"goodsList": [
{
"image": "/static/image/shopping/jingdong/product/waimai/huajiaoji.png",
"title": "至尊黄焖两头干鲍鱼花胶鸡套餐",
"spec": "精选20头干鲍、深海花胶、清远走地鸡；单人尊享",
"actualPrice": "3888.00",
"oriPrice": "",
"count": "1",
"tag": "食品安全理赔 慢必赔"
}
],
"fees": [
{
"name": "打包费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
},
{
"name": "配送费",
"showQuestion": true,
"actualPrice": 1.3,
"oriPrice": 2
}
],
"compensations": [
{
"name": "超20分钟免单",
"showQuestion": true,
"value": "商家赠送",
"isRed": true
},
{
"name": "满返红包",
"showQuestion": false,
"value": "满返￥2商家红包",
"isRed": true
}
],
"priceDetail": {
"totalDiscount": "9.70",
"actualPay": "3890.60",
"details": [
{
"name": "总价",
"value": "￥3888.00",
"isBold": true
},
{
"name": "商品优惠",
"value": "-￥0.00",
"isRed": true
},
{
"name": "配送费优惠",
"value": "-￥0.70",
"isRed": true
},
{
"name": "红包/抵用券",
"value": "-￥9.0",
"isRed": true
}
]
},
"orderInfo": [
{
"label": "收货信息",
"value": "上海市浦东新区汤臣一品 一单元1001 张三(男士) 13256325698",
"hasModify": true
},
{
"label": "备注",
"value": "1份餐具",
"isFoldDisplay": true
},
{
"label": "慢必赔",
"value": "平台赠送",
"hasArrow": true
},
{
"label": "其它服务",
"value": "号码保护",
"hasArrow": true
},
{
"label": "订单号",
"value": "859861823532161558",
"hasCopy": true,
"isFoldDisplay": true
},
{
"label": "送达时间",
"value": "尽快送达"
},
{
"label": "下单时间",
"value": "2026-12-07 11:03:50.123"
},
{
"label": "支付方式",
"value": "支付宝免密支付"
}
]
},
{
"id": "202605110001",
"orderType": "shopping",
@ -694,62 +1566,5 @@
"statusDesc2": "【上海市】 您已在上海市浦东新区汤臣一品完成取件",
"confirmReceiptCountdown": "9天7小时"
}
// {
// "id": "202605110008",
// "orderType": "waimai",
// "shopName": "美团外卖-麦当劳",
// "statusType": "success",
// "statusDesc": "订单已完成",
// "shopType": "taobao",
// "goodsList": [
// {
// "image": "",
// "title": "麦辣鸡腿堡套餐",
// "specs": "默认",
// "price": "32.00",
// "count": 1,
// "tags": "正品保障"
// }
// ],
// "totalPrice": "32.00"
// },
// {
// "id": "202605110009",
// "orderType": "waimai",
// "shopName": "饿了么-星巴克",
// "statusType": "wait_send",
// "statusDesc": "商家准备中",
// "shopType": "taobao",
// "goodsList": [
// {
// "image": "",
// "title": "拿铁咖啡",
// "specs": "大杯 / 热",
// "price": "28.00",
// "count": 1,
// "tags": "正品保障"
// }
// ],
// "totalPrice": "28.00"
// },
// {
// "id": "202605110010",
// "orderType": "waimai",
// "shopName": "淘鲜达-盒马鲜生",
// "statusType": "success",
// "statusDesc": "订单已完成",
// "shopType": "taobao",
// "goodsList": [
// {
// "image": "",
// "title": "进口智利车厘子 500g",
// "specs": "JJ级",
// "price": "59.00",
// "count": 1,
// "tags": "一小时送达"
// }
// ],
// "totalPrice": "59.00"
// }
]
}

29
pages/shopping/taobao/list-index.vue
View File

@ -80,7 +80,7 @@
</view>
</view>
<listCard v-if="displayList.length > 0" :list="displayList" @click-item="goDetail"
@longpress="onItemLongPress" />
@longpress="onItemLongPress" :currentFilter="currentFilter" />
<view v-else-if="displayList.length == 0 && currentTab != 2" class="null-data-box flex-center flex-column">
<image style="width: 254rpx;height: 200rpx;" src="/static/image/shopping/taobao/null.png"></image>
<text
@ -261,9 +261,8 @@ const buttonGroup = [
}, {
name: "新增闪购订单",
click: () => {
uni.showToast({
title: '开发中，敬请期待',
icon: 'none'
uni.navigateTo({
url: '/pages/shopping/taobao/add-shangou-order/add-shangou-order'
});
}
}, {
@ -303,11 +302,11 @@ const displayList = computed(() => {
}
}
// 3. 时间降序排列逻辑 (创建时间 || 申请时间)
// 3. 时间降序排列逻辑 (创建时间 || 申请时间 || 下单时间)
list.sort((a, b) => {
const getTime = (order) => {
if (!order.orderInfo) return '';
const create = order.orderInfo.find(i => i.key === 'createTime')?.value;
const create = order.orderInfo.find(i => i.key === 'createTime' || i.label === '下单时间')?.value;
const apply = order.orderInfo.find(i => i.key === 'applyTime')?.value;
return create || apply || '';
};
@ -555,7 +554,11 @@ const switchFilter = (index) => {
};
const goDetail = (item) => {
util.goPage(`/pages/shopping/taobao/shopping-order-detail/shopping-order-detail?id=${item.id}`)
if (item.orderType === 'waimai') {
util.goPage(`/pages/shopping/taobao/shangou-order-detail/shangou-order-detail?id=${item.id}`)
} else {
util.goPage(`/pages/shopping/taobao/shopping-order-detail/shopping-order-detail?id=${item.id}`)
}
}
/**
@ -587,9 +590,15 @@ const handleMenuAction = (action) => {
if (!item) return;
if (action === 'edit') {
uni.navigateTo({
url: `/pages/shopping/taobao/add-shopping-order/add-shopping-order?id=${item.id}&isEdit=true`
});
if (item.orderType === 'waimai') {
uni.navigateTo({
url: `/pages/shopping/taobao/add-shangou-order/add-shangou-order?id=${item.id}&isEdit=true`
});
} else {
uni.navigateTo({
url: `/pages/shopping/taobao/add-shopping-order/add-shopping-order?id=${item.id}&isEdit=true`
});
}
} else if (action === 'delete') {
uni.showModal({
title: '提示',

304
pages/shopping/taobao/shangou-order-detail/shangou-order-detail.vue
View File

@ -1,8 +1,9 @@
<template>
<view :class="{ 'wait-recv-page-container': order.statusType == 'wait_recv' }">
<nav-bar class="nav-bar" title="" :bgColor="order.statusType == 'wait_recv' ? 'transparent' : '#FFFFFF'"
:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list"
isTipLayer tipLayerText="添加订单信息">
<nav-bar class="nav-bar" title=""
:bgColor="(isScrolled || order.statusType != 'wait_recv') ? '#FFFFFF' : 'transparent'"
:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton" tipLayerType="taobao-shangou-detail"
isTipLayer tipLayerText="修改订单信息">
<template v-slot:left>
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"
@click="util.goBack()"></image>
@ -25,13 +26,17 @@
</view>
</template>
</nav-bar>
<view v-if="order.statusType == 'wait_recv'" class="map-box">
<image style="width: 100%;opacity: 0;" src="/static/image/shopping/taobao/waimai/map1.png" mode="widthFix">
<!-- 待收货骑手地图 -->
<view v-if="order.statusType == 'wait_recv'" class="map-box"
:style="{ 'background-image': 'url(' + (order.mapUrl || '/static/image/shopping/taobao/waimai/map1.png') + ')' }">
<image style="width: 100%;opacity: 0;"
:src="order.mapUrl || '/static/image/shopping/taobao/waimai/map1.png'" mode="widthFix">
</image>
<view class="qishou flex-align-center flex-column">
<view class="qishou-info">
<view class="title">骑手正在按序送货</view>
<text class="time">前方剩余<text class="num">2单</text>，约<text>11分钟</text>送达</text>
<text class="time">前方剩余<text class="num green">{{ order.orderQty }}</text>，约<text class="green">{{
order.surplusDeliveryTime }}</text>送达</text>
</view>
<image style="width: 80rpx;height: 80rpx;" src="/static/image/shopping/taobao/waimai/qishou.png">
</image>
@ -65,7 +70,7 @@
<view v-if="order.statusType != 'wait_recv'" class="wait_pay">
<view class="flex-align-center">
<text v-if="order.statusType == 'wait_pay'" class="main-text">待支付，剩余15:00</text>
<text v-if="order.statusType == 'wait_pay'" class="main-text">待支付，剩余{{ order.remainingPayTime }}</text>
<text v-else class="main-text">{{ order.statusType == 'success' ? '订单已送达' : '订单已取消' }}</text>
<uni-icons v-if="order.statusType != 'closed'" type="right" size="16" color="#1A1A1A"></uni-icons>
</view>
@ -81,13 +86,13 @@
<view v-if="order.statusType == 'wait_recv' || order.statusType == 'wait_pay'"
style="justify-content: baseline;">
<text class="label">预计</text>
<text class="time">16:32-16:47</text>
<text class="time">{{ order.deliveryTime }}</text>
</view>
<view v-if="order.statusType != 'closed'" class="flex"
style="margin-top: 26rpx;justify-content: flex-start;">
<text class="label">送至</text>
<view class="flex-1 address-info" style="max-width: 550rpx;">
<text>金星哈哈哈哈哈哈哈和和哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 王总(女士) 12563259856</text>
<text>{{order.orderInfo.find(item => item.label === '收货信息')?.value || ''}}</text>
<template v-if="order.statusType != 'success'">
<text class="split"></text>
<text class="edit-text">修改</text>
@ -95,7 +100,7 @@
</template>
</view>
<view class="delivery-photo" v-if="order.statusType == 'success'">
<image style="width: 80rpx;height: 80rpx;" src=""></image>
<image style="width: 80rpx;height: 80rpx;" :src="order.deliveryPhoto" mode="aspectFill"></image>
</view>
</view>
<view v-if="order.statusType == 'wait_recv'" class="flex"
@ -103,14 +108,14 @@
<text class="label">服务</text>
<view class="flex-1 address-info">
<text style="color: #1AA35B;">超20分钟免单-生效中</text>
<text> 若超时，即11:57后送达赔4元可叠加红包</text>
<text> 若超时，即{{ timeoutDelivery }}后送达赔4元可叠加红包</text>
<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
</view>
</view>
</view>
<view v-if="order.statusType == 'wait_pay'" class="wait_pay-buttom">
<view class="button flex-center flex-column">
<text style="font-size: 32rpx;line-height: 32rpx;">去支付 ￥15.6</text>
<text style="font-size: 32rpx;line-height: 32rpx;">去支付 ￥{{ order.priceDetail.actualPay }}</text>
<text style="font-size: 24rpx;line-height: 24rpx;margin-top: 4rpx;">支持更多支付方式</text>
</view>
</view>
@ -144,23 +149,22 @@
<!-- 订单详情卡片 -->
<view class="info-card">
<view class="shop-title-box">
<image style="width: 56rpx; height: 26rpx; margin-right: 10rpx;"
<image style="width: 56rpx; height: 26rpx; margin-right: 10rpx;flex-shrink: 0;"
src="/static/image/shopping/taobao/waimai/shangou.png"></image>
<text class="shop-name">{{ orderData.shopName }}</text>
<text class="shop-name">{{ order.shopName }}({{ order.location }})</text>
<uni-icons type="right" size="16" color="#8C8C8C"></uni-icons>
</view>
<view class="goods-collapsed flex-between" v-if="!orderData.isExpanded"
@click="orderData.isExpanded = true">
<view class="goods-collapsed flex-between" v-if="!isExpanded" @click="isExpanded = true">
<view class="images flex flex-1" style="overflow: hidden;">
<image v-for="(item, index) in orderData.goodsList.slice(0, 4)" :key="index" class="img"
<image v-for="(item, index) in order.goodsList.slice(0, 4)" :key="index" class="img"
:src="item.image" mode="aspectFill"></image>
</view>
<view class="count">共{{ orderData.goodsList.length }}件</view>
<view class="count">共{{ order.goodsList.length }}件</view>
</view>
<template v-else>
<view class="goods-item flex" v-for="(item, index) in orderData.goodsList" :key="index">
<view class="goods-item flex" v-for="(item, index) in order.goodsList" :key="index">
<view class="goods-img-box">
<image class="goods-img" :src="item.image" mode="aspectFill"></image>
</view>
@ -177,7 +181,7 @@
</view>
</view>
<view class="fee-item flex-between" v-for="(fee, index) in orderData.fees" :key="'fee-' + index">
<view class="fee-item flex-between" v-for="(fee, index) in order.fees" :key="'fee-' + index">
<view class="fee-left flex-align-center">
<text>{{ fee.name }}</text>
<uni-icons v-if="fee.showQuestion" type="help" size="16" color="#C6C6C6"
@ -192,7 +196,7 @@
</view>
<view class="fee-item flex-between" style="align-items: center;"
v-for="(comp, index) in orderData.compensations" :key="'comp-' + index">
v-for="(comp, index) in order.compensations" :key="'comp-' + index">
<view class="fee-left flex-align-center">
<text>{{ comp.name }}</text>
<uni-icons v-if="comp.showQuestion" type="help" size="16" color="#C6C6C6"
@ -204,39 +208,42 @@
</view>
</template>
<view class="price-detail-title flex-between" @click="orderData.isExpanded = !orderData.isExpanded"
:style="!orderData.isExpanded ? 'margin-bottom: 30rpx;' : ''">
<view class="price-detail-title flex-between" @click="isExpanded = !isExpanded"
:style="!isExpanded ? 'margin-bottom: 30rpx;' : ''">
<view class="left flex-align-center">
<text>价格明细</text>
<uni-icons :type="orderData.isExpanded ? 'up' : 'down'" size="14" color="#8C8C8C"
<uni-icons :type="isExpanded ? 'up' : 'down'" size="14" color="#8C8C8C"
style="margin-left: 6rpx;"></uni-icons>
</view>
<view class="right">
<text class="total-discount">总优惠
<text class="symbol wx-font-medium">￥
<text style="font-size: 34rpx;">{{ orderData.priceDetail.totalDiscount }}</text>
<text style="font-size: 34rpx;">{{ order.priceDetail.totalDiscount }}</text>
</text></text>
<text class="total-actual">实付<text class="symbol wx-font-medium">￥</text><text
class="num wx-font-medium">{{
orderData.priceDetail.actualPay }}</text></text>
order.priceDetail.actualPay }}</text></text>
</view>
</view>
<view class="price-detail-list" v-if="orderData.isExpanded">
<view class="detail-item flex-between" v-for="(detail, index) in orderData.priceDetail.details"
:key="'detail-' + index">
<text class="label">{{ detail.name }}</text>
<text class="val alipay-font" :class="{ 'bold-val': detail.isBold, 'red-val': detail.isRed }">{{
detail.value
}}</text>
</view>
<view class="price-detail-list" v-if="isExpanded">
<template v-for="(detail, index) in order.priceDetail.details" :key="'detail-' + index">
<view v-if="detail.name && detail.value" class="detail-item flex-between">
<text class="label">{{ detail.name }}</text>
<text class="val alipay-font" :class="{ 'bold-val': detail.isBold, 'red-val': detail.isRed }">{{
detail.value
}}</text>
</view>
</template>
</view>
<view class="divider-line"></view>
<view class="order-info-area">
<view class="order-item flex" v-for="(info, index) in orderData.orderInfo" :key="'info-' + index"
:style="info.label === '收货信息' ? 'align-items: flex-start;' : ''">
<template v-for="(info, index) in order.orderInfo" :key="'info-' + index">
<view class="order-item flex" v-if="isOrderInfoExpanded || info.isFoldDisplay"
:style="info.label === '收货信息' ? 'align-items: flex-start;' : ''">
<text class="label" :style="info.label === '收货信息' ? 'line-height:36rpx;' : ''">{{ info.label
}}</text>
<view class="val flex-1 flex-align-center" style="justify-content: flex-end;">
@ -257,87 +264,113 @@
<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
<text class="copy-btn">复制</text>
</template>
<template v-if="info.hasApply">
<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
<text class="copy-btn">申请</text>
</template>
</view>
</view>
</view>
</template>
<view class="order-bottom-title flex-align-center">
<view class="order-bottom-title flex-align-center"
@click="isOrderInfoExpanded = !isOrderInfoExpanded">
<text>订单信息</text>
<uni-icons type="down" size="14" color="#7C8495"
<uni-icons :type="isOrderInfoExpanded ? 'up' : 'down'" size="14" color="#7C8495"
style="margin-left: 8rpx;margin-top: 6rpx;"></uni-icons>
</view>
</view>
</view>
</view>
<view class="common-problem-box flex-align-center flex-justify-between">
<text>常见问题</text>
<view class="flex-align-center">
<view class="item">少送餐品</view>
<view class="item">餐品撒漏</view>
<view class="item">未收到餐品</view>
</view>
</view>
<view>
<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ref, reactive, computed } from 'vue';
import { onPageScroll, onShow, onLoad } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
const order = ref({
statusType: "wait_recv"
import { defualtData } from '../json/order.json';
const isScrolled = ref(false);
const screenshotImage = ref('')
//导航栏菜单按钮
const buttonGroup = [
{
name: "编辑订单信息",
click: () => {
uni.navigateTo({
url: `/pages/shopping/taobao/add-shangou-order/add-shangou-order?id=${order.value.id}&isEdit=true`
});
}
}
]
onPageScroll((e) => {
isScrolled.value = e.scrollTop > 10;
});
const order = ref({});
const currentId = ref('');
const isExpanded = ref(false);
const isOrderInfoExpanded = ref(false);
onLoad((options) => {
if (options.id) {
currentId.value = String(options.id);
}
});
onShow(() => {
// 加载拼图截图缓存
const savedScreenshot = uni.getStorageSync('taobao_screenshot');
if (savedScreenshot) {
screenshotImage.value = savedScreenshot;
}
// 从缓存读取最新订单数据
if (currentId.value) {
let list = uni.getStorageSync('taobaoShopping') || [];
let found = list.find(item => String(item.id) === currentId.value);
if (!found) {
found = defualtData.find(item => String(item.id) === currentId.value);
}
if (found) {
const parsedOrder = JSON.parse(JSON.stringify(found));
// 默认收起展开项
isExpanded.value = false;
isOrderInfoExpanded.value = false;
order.value = parsedOrder;
}
}
})
const orderData = ref({
isExpanded: false,
shopName: '沙县小吃(光电园总店)',
goodsList: [
{
image: '/static/image/shopping/taobao/waimai/leifan.png',
title: '好吃的蒜蓉剁椒 （限1份，多点 无效）',
count: 1,
actualPrice: '0.06',
oriPrice: '2',
tag: '折'
},
{
image: '/static/image/shopping/taobao/waimai/leifan.png',
title: '~福利鸡腿~',
count: 1,
actualPrice: '4.5',
oriPrice: '9.99',
tag: '折'
},
{
image: '/static/image/shopping/taobao/waimai/leifan.png',
title: '【减脂】五香鸡腿饭 （2份时蔬+卤蛋+豆干）',
count: 1,
actualPrice: '14.92',
oriPrice: '28',
tag: '折'
}
],
fees: [
{ name: '打包费', showQuestion: true, actualPrice: '1.3', oriPrice: '2' },
{ name: '配送费', showQuestion: false, actualPrice: '0', oriPrice: '3.4' },
],
compensations: [
{ name: '超20分钟免单', showQuestion: true, value: '商家赠送', isRed: true },
{ name: '满返红包', showQuestion: false, value: '满返￥2商家红包', isRed: true }
],
priceDetail: {
totalDiscount: '24.61',
actualPay: '20.78',
details: [
{ name: '总价', value: '￥45.39', isBold: true },
{ name: '商品优惠', value: '-￥10.21', isRed: true },
{ name: '配送费优惠', value: '-￥3.4', isRed: true },
{ name: '红包/抵用券', value: '-￥9.0', isRed: true },
{ name: '店铺活动/券(沙县小吃(光电园总店)专享券)', value: '-￥2.0', isRed: true }
]
},
orderInfo: [
{ label: '收货信息', value: '金星科技大厦A区金星科技大厦A区低楼4楼3A08 八条科技 罗婷(女士) 18725982563', hasModify: true },
{ label: '联系不上时', value: '可设置暂存点放置外卖', hasSetting: true },
{ label: '备注', value: '1份餐具' },
{ label: '发票', value: '未添加开票信息', hasArrow: true },
{ label: '配送方式', value: '蜂鸟准时达', hasArrow: true },
{ label: '配送骑士', value: '赵乃炼', hasArrow: true },
{ label: '订单号', value: '8034160313365695921', hasCopy: true },
{ label: '送达时间', value: '03-31(周二)11:41-11:56' },
{ label: '下单时间', value: '2026-03-31 11:11:55.220' },
{ label: '支付方式', value: '支付宝免密支付' }
]
})
const timeoutDelivery = computed(() => {
if (!order.value.deliveryTime) return '';
const parts = order.value.deliveryTime.split('-');
if (parts.length < 2) return '';
const timeParts = parts[1].trim().split(':');
if (timeParts.length < 2) return '';
let hours = parseInt(timeParts[0], 10);
let minutes = parseInt(timeParts[1], 10) + 20;
if (minutes >= 60) {
hours = (hours + Math.floor(minutes / 60)) % 24;
minutes = minutes % 60;
}
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
});
const items = [
{
@ -471,7 +504,6 @@ const items = [
.map-box {
position: relative;
background-image: url('/static/image/shopping/taobao/waimai/map1.png');
background-size: 100% 100%;
background-repeat: no-repeat;
@ -500,6 +532,10 @@ const items = [
color: #7B7E8C;
line-height: 26rpx;
}
.green {
color: #1AA35B;
}
}
}
@ -652,22 +688,25 @@ const items = [
}
.delivery-photo {
width: 80rpx;
height: 80rpx;
border-radius: 12rpx;
overflow: hidden;
background-color: #F0F0F0;
&::before {
content: '+1';
background-color: #000000;
opacity: 0.5;
border-radius: 12rpx 0 12rpx 0;
font-size: 20rpx;
color: #FFFFFF;
line-height: 20rpx;
padding: 6rpx 8rpx;
image {
width: 80rpx;
height: 80rpx;
border-radius: 12rpx;
}
// &::before {
// content: '+1';
// background-color: #000000;
// opacity: 0.5;
// border-radius: 12rpx 0 12rpx 0;
// font-size: 20rpx;
// color: #FFFFFF;
// line-height: 20rpx;
// padding: 6rpx 8rpx;
// }
}
}
@ -756,10 +795,13 @@ const items = [
.info-card {
background-color: #FFFFFF;
padding: 24rpx 32rpx;
margin-bottom: 24rpx;
margin-bottom: 16rpx;
.shop-title-box {
margin-bottom: 30rpx;
display: flex;
align-items: center;
flex-wrap: nowrap;
.tag {
background-color: #FE6306;
@ -772,6 +814,10 @@ const items = [
}
.shop-name {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
font-weight: 500;
color: #1A1A1A;
@ -1006,6 +1052,7 @@ const items = [
color: #7C8495;
width: 140rpx;
flex-shrink: 0;
white-space: nowrap;
}
.val {
@ -1040,6 +1087,29 @@ const items = [
}
}
}
.common-problem-box {
height: 108rpx;
background-color: #ffffff;
padding: 0 32rpx;
color: #1A1A1A;
font-size: 30rpx;
font-weight: bold;
margin-bottom: 16rpx;
.item {
font-size: 24rpx;
color: #465C72;
line-height: 24rpx;
background-color: #F1F5F8;
border-radius: 4rpx;
padding: 0 20rpx;
height: 48rpx;
line-height: 48rpx;
margin-left: 18rpx;
font-weight: 400;
}
}
</style>
<style>
@import "/common/main.css";

BIN
static/image/shopping/taobao/daocha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/image/shopping/taobao/shangou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
static/image/shopping/taobao/tuikuanchenggong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

BIN
static/image/shopping/taobao/waimai/deliveryPhoto1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
static/image/shopping/taobao/waimai/deliveryPhoto2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/image/shopping/taobao/waimai/map2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

BIN
static/image/watermarkBG.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB