购物新增页面85%详情页20%
This commit is contained in:
tangxinyue
parent
21eb405746
commit
bce2fd578f
2
main.js
2
main.js
|
|
@ -27,7 +27,7 @@ export function createApp() {
|
||||||
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
const systemInfo = uni.getStorageSync('systemInfo') || {}
|
||||||
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
app.config.globalProperties.$system = systemInfo.platform == 'ios' ? 'iOS' : 'Android'
|
||||||
app.config.globalProperties.$systemInfo = systemInfo
|
app.config.globalProperties.$systemInfo = systemInfo
|
||||||
uni.setStorageSync('version', '1.0.4.sp4')
|
uni.setStorageSync('version', '1.0.4.sp5')
|
||||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||||
app.use(globalMethods);
|
app.use(globalMethods);
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
14
pages.json
14
pages.json
|
|
@ -66,6 +66,20 @@
|
||||||
"navigationBarTitleText": "添加订单",
|
"navigationBarTitleText": "添加订单",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "jingdong/add-waimai/add-waimai",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "添加外卖订单页面",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "jingdong/waimai-order-detail/waimai-order-detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "外卖订单详情",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -373,7 +373,7 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="order-info">
|
<view class="order-info ">
|
||||||
<view class="item flex-justify-between" v-for="item in order.orderInfo"
|
<view class="item flex-justify-between" v-for="item in order.orderInfo"
|
||||||
@click="onClickItemInfo(item)">
|
@click="onClickItemInfo(item)">
|
||||||
<text class="label shrink-0">{{ item.label }}</text>
|
<text class="label shrink-0">{{ item.label }}</text>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -395,5 +395,323 @@
|
||||||
"label": "已取消",
|
"label": "已取消",
|
||||||
"key": "yiquxiao"
|
"key": "yiquxiao"
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"waimaiClassfiy": {
|
||||||
|
"weizhifu": {
|
||||||
|
"id": "123211111",
|
||||||
|
"type": "weizhifu",
|
||||||
|
"shopType": "waimai",
|
||||||
|
"shopName": "",
|
||||||
|
"status": "等待付款",
|
||||||
|
"statusDesc": "29分钟",
|
||||||
|
"deliveryTime": "11:17-11:32",
|
||||||
|
"address": "",
|
||||||
|
"phone": "",
|
||||||
|
"consignee": "",
|
||||||
|
"discountCarriage": "",
|
||||||
|
"carriage": "",
|
||||||
|
"products": [
|
||||||
|
{
|
||||||
|
"image": "",
|
||||||
|
"title": "",
|
||||||
|
"desc": "一人份",
|
||||||
|
"price": "",
|
||||||
|
"count": "数量x1"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"productsInfo": {
|
||||||
|
"cutleryCount": "商家按餐量提供",
|
||||||
|
"deliveryPreference": "允许敲门/按门铃；允许发短信",
|
||||||
|
"outOfStock": "缺货时与我电话沟通"
|
||||||
|
},
|
||||||
|
"orderInfo": [
|
||||||
|
{
|
||||||
|
"label": "订单编号",
|
||||||
|
"key": "orderNumber",
|
||||||
|
"value": "",
|
||||||
|
"type": "number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "交易快照",
|
||||||
|
"key": "transactionSnapshot",
|
||||||
|
"value": "发生交易争执时，可作为判断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付方式",
|
||||||
|
"key": "paymentMethod",
|
||||||
|
"value": "微信支付",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "下单时间",
|
||||||
|
"key": "orderTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"promoType": "text",
|
||||||
|
"promoHighlight": "近90天600+人回购"
|
||||||
|
},
|
||||||
|
"beicanzhong": {
|
||||||
|
"id": 9632554,
|
||||||
|
"shopType": "waimai",
|
||||||
|
"type": "beicanzhong",
|
||||||
|
"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",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"productsInfo": {
|
||||||
|
"cutleryCount": "商家按餐量提供",
|
||||||
|
"deliveryPreference": "允许敲门/按门铃；允许发短信",
|
||||||
|
"outOfStock": "缺货时与我电话沟通"
|
||||||
|
},
|
||||||
|
"orderInfo": [
|
||||||
|
{
|
||||||
|
"label": "订单编号",
|
||||||
|
"key": "orderNumber",
|
||||||
|
"value": "",
|
||||||
|
"type": "number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "交易快照",
|
||||||
|
"key": "transactionSnapshot",
|
||||||
|
"value": "发生交易争执时，可作为判断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "下单时间",
|
||||||
|
"key": "orderTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付时间",
|
||||||
|
"key": "paymentTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付方式",
|
||||||
|
"key": "paymentMethod",
|
||||||
|
"value": "微信支付",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "如遇缺货",
|
||||||
|
"key": "outOfStock",
|
||||||
|
"value": "缺货时与我电话沟通",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"qvcanzhong": {
|
||||||
|
"id": "63254112",
|
||||||
|
"shopType": "waimai",
|
||||||
|
"type": "qvcanzhong",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"productsInfo": {
|
||||||
|
"cutleryCount": "商家按餐量提供",
|
||||||
|
"deliveryPreference": "允许敲门/按门铃；允许发短信",
|
||||||
|
"outOfStock": "缺货时与我电话沟通"
|
||||||
|
},
|
||||||
|
"orderInfo": [
|
||||||
|
{
|
||||||
|
"label": "订单编号",
|
||||||
|
"key": "orderNumber",
|
||||||
|
"value": "",
|
||||||
|
"type": "number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "交易快照",
|
||||||
|
"key": "transactionSnapshot",
|
||||||
|
"value": "发生交易争执时，可作为判断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "下单时间",
|
||||||
|
"key": "orderTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付时间",
|
||||||
|
"key": "paymentTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "送达时间",
|
||||||
|
"key": "paymentMethod",
|
||||||
|
"value": "微信支付",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "如遇缺货",
|
||||||
|
"key": "outOfStock",
|
||||||
|
"value": "缺货时与我电话沟通",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
"yiwancheng": {
|
||||||
|
"id": 78456211,
|
||||||
|
"shopType": "waimai",
|
||||||
|
"type": "yiwancheng",
|
||||||
|
"shopName": "瑞幸咖啡",
|
||||||
|
"status": "完成",
|
||||||
|
"statusColor": "gray",
|
||||||
|
"products": [
|
||||||
|
{
|
||||||
|
"image": "/static/image/shopping/jingdong/product1.png",
|
||||||
|
"title": "多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好",
|
||||||
|
"desc": "不支持7天无理由退货",
|
||||||
|
"service": "",
|
||||||
|
"tags": [],
|
||||||
|
"price": "69.00",
|
||||||
|
"count": "1"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"productsInfo": {
|
||||||
|
"cutleryCount": "商家按餐量提供",
|
||||||
|
"deliveryPreference": "允许敲门/按门铃；允许发短信",
|
||||||
|
"outOfStock": "缺货时与我电话沟通"
|
||||||
|
},
|
||||||
|
"orderInfo": [
|
||||||
|
{
|
||||||
|
"label": "订单编号",
|
||||||
|
"key": "orderNumber",
|
||||||
|
"value": "",
|
||||||
|
"type": "number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "交易快照",
|
||||||
|
"key": "transactionSnapshot",
|
||||||
|
"value": "发生交易争执时，可作为判断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "下单时间",
|
||||||
|
"key": "orderTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付时间",
|
||||||
|
"key": "paymentTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付方式",
|
||||||
|
"key": "paymentMethod",
|
||||||
|
"value": "微信支付",
|
||||||
|
"type": "text"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "如遇缺货",
|
||||||
|
"key": "outOfStock",
|
||||||
|
"value": "缺货时与我电话沟通",
|
||||||
|
"type": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"promoType": "coupon",
|
||||||
|
"promoText": "恭喜您获得3元京东购物券",
|
||||||
|
"promoAction": "去领券"
|
||||||
|
},
|
||||||
|
"yiquxiao": {
|
||||||
|
"id": "52322221",
|
||||||
|
"shopType": "waimai",
|
||||||
|
"type": "yiquxiao",
|
||||||
|
"shopName": "瑞幸咖啡",
|
||||||
|
"status": "已取消",
|
||||||
|
"statusColor": "gray",
|
||||||
|
"products": [
|
||||||
|
{
|
||||||
|
"image": "/static/image/shopping/jingdong/product1.png",
|
||||||
|
"title": "多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好",
|
||||||
|
"desc": "不支持7天无理由退货",
|
||||||
|
"tags": [],
|
||||||
|
"service": "",
|
||||||
|
"price": "69.00",
|
||||||
|
"count": "1"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"productsInfo": {
|
||||||
|
"cutleryCount": "商家按餐量提供",
|
||||||
|
"deliveryPreference": "允许敲门/按门铃；允许发短信",
|
||||||
|
"outOfStock": "缺货时与我电话沟通"
|
||||||
|
},
|
||||||
|
"orderInfo": [
|
||||||
|
{
|
||||||
|
"label": "订单编号",
|
||||||
|
"key": "orderNumber",
|
||||||
|
"value": "",
|
||||||
|
"type": "number"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "交易快照",
|
||||||
|
"key": "transactionSnapshot",
|
||||||
|
"value": "发生交易争执时，可作为判断依据"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "下单时间",
|
||||||
|
"key": "orderTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "支付时间",
|
||||||
|
"key": "paymentTime",
|
||||||
|
"value": "",
|
||||||
|
"type": "time"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"waimaiType": [
|
||||||
|
{
|
||||||
|
"label": "未支付",
|
||||||
|
"key": "weizhifu"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "备餐中",
|
||||||
|
"key": "beicanzhong"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "取餐中",
|
||||||
|
"key": "qvcanzhong"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "已完成",
|
||||||
|
"key": "yiwancheng"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "取消",
|
||||||
|
"key": "yiquxiao"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -112,6 +112,7 @@ import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
||||||
import { onShow } from '@dcloudio/uni-app';
|
import { onShow } from '@dcloudio/uni-app';
|
||||||
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
||||||
import { util } from '@/utils/common.js';
|
import { util } from '@/utils/common.js';
|
||||||
|
import { shoppingType, waimaiType } from './json/order.json';
|
||||||
|
|
||||||
const showActionMenu = ref(false);
|
const showActionMenu = ref(false);
|
||||||
const actionMenuState = ref({ x: 0, y: 0, item: null });
|
const actionMenuState = ref({ x: 0, y: 0, item: null });
|
||||||
|
|
@ -134,9 +135,12 @@ const buttonGroup = [
|
||||||
}, {
|
}, {
|
||||||
name: "新增秒送订单",
|
name: "新增秒送订单",
|
||||||
click: () => {
|
click: () => {
|
||||||
uni.showToast({
|
// uni.showToast({
|
||||||
title: '开发中，敬请期待',
|
// title: '开发中，敬请期待',
|
||||||
icon: 'none'
|
// icon: 'none'
|
||||||
|
// });
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shopping/jingdong/add-waimai/add-waimai'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -198,7 +202,9 @@ const handleCardClick = (item) => {
|
||||||
url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
|
url: '/pages/shopping/jingdong/order-detail/order-detail?id=' + item.id
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/shopping/jingdong/waimai-order-detail/waimai-order-detail?id=' + item.id
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -525,6 +531,36 @@ const tabList = ref([
|
||||||
const switchTab = (index) => {
|
const switchTab = (index) => {
|
||||||
if (tabList.value[index].disabled) return;
|
if (tabList.value[index].disabled) return;
|
||||||
currentTab.value = index;
|
currentTab.value = index;
|
||||||
|
// 重置筛选
|
||||||
|
currentFilter.value = -1;
|
||||||
|
// 动态更新筛选项
|
||||||
|
updateFilterList();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据当前Tab更新筛选项列表
|
||||||
|
*/
|
||||||
|
const updateFilterList = () => {
|
||||||
|
if (currentTab.value === 1) { // 购物
|
||||||
|
filterList.value = shoppingType.map(item => ({
|
||||||
|
name: item.label,
|
||||||
|
key: item.key
|
||||||
|
}));
|
||||||
|
} else if (currentTab.value === 2) { // 秒送 (外卖)
|
||||||
|
filterList.value = waimaiType.map(item => ({
|
||||||
|
name: item.label,
|
||||||
|
key: item.key
|
||||||
|
}));
|
||||||
|
} else { // 全部或服务
|
||||||
|
filterList.value = [
|
||||||
|
{ name: '待付款' },
|
||||||
|
{ name: '待收货' },
|
||||||
|
{ name: '待使用', disabled: false },
|
||||||
|
{ name: '已完成' },
|
||||||
|
{ name: '待评价' },
|
||||||
|
{ name: '已取消' }
|
||||||
|
];
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const currentFilter = ref(-1);
|
const currentFilter = ref(-1);
|
||||||
|
|
@ -582,13 +618,33 @@ const filteredOrderList = computed(() => {
|
||||||
if (currentFilter.value === -1) {
|
if (currentFilter.value === -1) {
|
||||||
result = baseList;
|
result = baseList;
|
||||||
} else {
|
} else {
|
||||||
const filterName = filterList.value[currentFilter.value].name;
|
const filterItem = filterList.value[currentFilter.value];
|
||||||
|
const filterName = filterItem.name;
|
||||||
|
const filterKey = filterItem.key;
|
||||||
|
|
||||||
result = baseList.filter(item => {
|
result = baseList.filter(item => {
|
||||||
|
// 如果有 key，优先使用 key 匹配 (适用于外卖或已定义的购物类型)
|
||||||
|
if (filterKey) {
|
||||||
|
if (item.shopType === 'waimai') {
|
||||||
|
if (filterKey === 'weizhifu') return item.status === '等待付款';
|
||||||
|
if (filterKey === 'beicanzhong') return item.status === '商家备餐中' || item.status === '骑手到店取餐中';
|
||||||
|
if (filterKey === 'qvcanzhong') return item.status === '取餐中' || item.status === '商家备餐中' || item.status === '骑手到店取餐中';
|
||||||
|
if (filterKey === 'yiwancheng') return item.status === '完成' || item.status === '已完成';
|
||||||
|
if (filterKey === 'yiquxiao') return item.status === '已取消';
|
||||||
|
}
|
||||||
|
// 购物类型 key 匹配
|
||||||
|
if (filterKey === 'dengdaifukuan') return item.status === '等待付款';
|
||||||
|
if (filterKey === 'zhengzaichuku') return item.status === '正在出库' || item.status === '仓库处理中';
|
||||||
|
if (filterKey === 'yiqianshou' || filterKey === 'wancheng') return item.status === '完成' || item.status === '已签收';
|
||||||
|
if (filterKey === 'yiquxiao') return item.status === '已取消';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 兜底使用原来基于名称的模糊模糊逻辑
|
||||||
if (filterName === '待付款') return item.status === '等待付款';
|
if (filterName === '待付款') return item.status === '等待付款';
|
||||||
if (filterName === '待收货') return item.status === '正在出库' || item.status === '待收货' || item.status === '运输中' || item.status === '已发货' || item.status === '商家备餐中' || item.status === '骑手到店取餐中';
|
if (filterName === '待收货') return ['正在出库', '待收货', '运输中', '已发货', '商家备餐中', '骑手到店取餐中', '仓库处理中'].includes(item.status);
|
||||||
if (filterName === '待使用') return item.status === '待使用';
|
if (filterName === '待使用') return item.status === '待使用';
|
||||||
if (filterName === '已完成') return item.status === '完成' || item.status === '已完成' || item.status === '已签收';
|
if (filterName === '已完成') return ['完成', '已完成', '已签收'].includes(item.status);
|
||||||
if (filterName === '待评价') return item.status === '待评价' || item.status === '完成' || item.status === '已完成';
|
if (filterName === '待评价') return ['待评价', '完成', '已完成'].includes(item.status);
|
||||||
if (filterName === '已取消') return item.status === '已取消';
|
if (filterName === '已取消') return item.status === '已取消';
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,484 @@
|
||||||
|
<template>
|
||||||
|
<view class="top-bg">
|
||||||
|
<nav-bar title="" bgColor="transparent" noBack>
|
||||||
|
<template v-slot:right>
|
||||||
|
<view v-if="order.type != 'weizhifu'" class="right-icon-box flex">
|
||||||
|
<image class="icon" src="/static/image/shopping/jingdong/waimai/fenxiang.png"></image>
|
||||||
|
<image class="icon" v-if="order.type != 'yiwancheng' && order.type != 'yiqvxiao'"
|
||||||
|
style="margin-left: 40rpx;" src="/static/image/shopping/jingdong/waimai/shuaxin.png"></image>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</nav-bar>
|
||||||
|
<!-- 未支付 -->
|
||||||
|
<view v-if="order.type == weizhifu" class="weizhifu-card card">
|
||||||
|
<view class="title">请在29:39 内支付</view>
|
||||||
|
<view class="time">现在支付，预计 <text class="time-text">11:17-11:32</text> 送达</view>
|
||||||
|
<view class="flex flex-justify-between flex-align-center" style="margin-top: 32rpx;">
|
||||||
|
<text>更多</text>
|
||||||
|
<view class="flex flex-align-center">
|
||||||
|
<view class="btn cancel-btn">取消订单</view>
|
||||||
|
<view class="btn pay-btn">立即支付 ¥14.5</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 备餐中/取餐中 -->
|
||||||
|
<view v-if="order.type == 'beicanzhong' || order.type == 'qvcanzhong'" class="card-box">
|
||||||
|
<view class="card beicanzhong-card">
|
||||||
|
<view class="title flex">
|
||||||
|
<text class="time">10:43-10:58</text>
|
||||||
|
<text>预计送达</text>
|
||||||
|
</view>
|
||||||
|
<view class="desc">{{ order.type == 'qvcanzhong' ? '骑手已到店，取餐中' : '商家备餐中' }}</view>
|
||||||
|
<view class="progress">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-bar-fill" :style="{ width: order.type == 'qvcanzhong' ? '70%' : '50%' }">
|
||||||
|
</view>
|
||||||
|
<image class="progress-icon fukuan" src="/static/image/shopping/jingdong/waimai/fukuan.png">
|
||||||
|
</image>
|
||||||
|
<image class="progress-icon beican" src="/static/image/shopping/jingdong/waimai/beican.png">
|
||||||
|
</image>
|
||||||
|
<image class="progress-icon songcan"
|
||||||
|
:src="`/static/image/shopping/jingdong/waimai/${order.type == 'qvcanzhong' ? 'qvcan' : 'songcan'}.png`">
|
||||||
|
</image>
|
||||||
|
<image class="progress-icon qianshou" src="/static/image/shopping/jingdong/waimai/qianshou.png">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="image-box flex-center">
|
||||||
|
<image class="add-img" src="/static/image/common/add.png" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box flex-align-center">
|
||||||
|
<view class="btn">查看发票</view>
|
||||||
|
<view class="btn">订单跟踪</view>
|
||||||
|
<view class="btn">申请退款</view>
|
||||||
|
<view class="btn">联系商家</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="notice-box flex-align-center">
|
||||||
|
<image class="icon" src="/static/image/shopping/jingdong/waimai/notice.png" mode="aspectFill"></image>
|
||||||
|
<text class="flex-1 notice-text">开启系统通知，第一时间获取订单聊天信息</text>
|
||||||
|
<view class="open-btn">去开启</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 已完成/已取消 -->
|
||||||
|
<view v-if="order.type == 'yiwancheng' || order.type == 'yiquxiao'" class="weizhifu-card card yiwancheng">
|
||||||
|
<view class="title flex-align-center">{{ order.type == 'yiwancheng' ? '订单已完成' : '订单已取消' }} <uni-icons
|
||||||
|
style="margin-left: 6rpx;" type="right" size="12" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view v-if="order.type == 'yiwancheng'" class="desc">订单已送达，请厉行节约，拒绝浪费，期待能再次光临</view>
|
||||||
|
<view v-if="order.type == 'yiquxiao'" class="desc quxiao">抱歉本次未能让您满意，我们会努力改进</view>
|
||||||
|
<view class="flex flex-justify-between flex-align-center" style="margin-top: 32rpx;">
|
||||||
|
<text style="font-size: 24rpx;color: #87868E;line-height: 24rpx;">{{ order.type == 'yiwancheng' ? '更多' :
|
||||||
|
'' }}</text>
|
||||||
|
<view class="flex flex-align-center">
|
||||||
|
<view v-if="order.type == 'yiquxiao'" class="btn cancel-btn">删除订单</view>
|
||||||
|
<view class="btn cancel-btn">联系商家</view>
|
||||||
|
<view v-if="order.type == 'yiwancheng'" class="btn cancel-btn">联系骑手</view>
|
||||||
|
<view v-if="order.type == 'yiwancheng'" class="btn cancel-btn primary">评价晒单</view>
|
||||||
|
<view class="btn cancel-btn primary">再次购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- 已取消 -->
|
||||||
|
<view v-if="order.type == 'yiquxiao'" class="cancel-progress-box">
|
||||||
|
<view class="cancel-content">
|
||||||
|
<view class="title-row">
|
||||||
|
<view class="left">
|
||||||
|
<image class="icon" src="/static/image/shopping/jingdong/detail/tuikuan.png" mode="aspectFit">
|
||||||
|
</image>
|
||||||
|
<text class="title">取消/退款进度</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<uni-icons type="right" size="10" color="#1A1A1A"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<text class="desc">您的订单已取消，请查看取消进度详情。</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="order.type == weizhifu" class="card location-box flex flex-justify-between flex-align-center">
|
||||||
|
<view>
|
||||||
|
<view class="card-title">
|
||||||
|
<image class="location-icon" src="/static/image/shopping/jingdong/waimai/location.png">
|
||||||
|
</image>
|
||||||
|
<text class="name">婷婷</text>
|
||||||
|
<text class="phone">13812345678</text>
|
||||||
|
<text class="desc">号码保护中</text>
|
||||||
|
</view>
|
||||||
|
<view class="loction-text">
|
||||||
|
重庆哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="edit-btn">修改</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
import { ref, computed, watch, onMounted, nextTick, reactive, toRefs } from "vue";
|
||||||
|
import NavBar from "@/components/nav-bar/nav-bar.vue";
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
order: {
|
||||||
|
type: 'yiquxiao'
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
let { order } = toRefs(data);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.top-bg {
|
||||||
|
::v-deep .uni-navbar__header-btns-right {
|
||||||
|
width: 100px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.right-icon-box {
|
||||||
|
margin-right: 12rpx;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bg {
|
||||||
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx 22rpx;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.weizhifu-card {
|
||||||
|
.title {
|
||||||
|
font-size: 52rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 52rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 30rpx;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.time-text {
|
||||||
|
color: #F10F1A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
color: #1a1a1a;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 0.5px solid #C7C7C7;
|
||||||
|
|
||||||
|
&.pay-btn {
|
||||||
|
width: 380rpx;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(87deg, #FF435B 0%, #FE1528 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-box {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
padding: 26rpx 22rpx;
|
||||||
|
|
||||||
|
.location-icon {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #87868E;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
background-color: #F3F3F5;
|
||||||
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 22rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
padding: 6rpx 8rpx;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loction-text {
|
||||||
|
margin: 10rpx 0 0 42rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #87868E;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-btn {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52rpx;
|
||||||
|
padding: 0 54rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
border: 0.5px solid #C7C7C7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-box {
|
||||||
|
margin: 0 16rpx;
|
||||||
|
background-color: #F6F7FB;
|
||||||
|
border: 2rpx solid #FFFFFF;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beicanzhong-card {
|
||||||
|
padding: 24rpx 20rpx;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
font-weight: 500;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-size: 60rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 52rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 32rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-top: 34rpx;
|
||||||
|
margin: 34rpx 27rpx 0;
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 24rpx;
|
||||||
|
background-color: #F2F2F4;
|
||||||
|
border-radius: 0rpx;
|
||||||
|
|
||||||
|
.progress-bar-fill {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FE0F22;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-icon {
|
||||||
|
position: absolute;
|
||||||
|
width: 54rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fukuan {
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.beican {
|
||||||
|
left: calc(30.3% - 27rpx/2);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.songcan {
|
||||||
|
left: calc(60.6% + 27rpx/2);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.qianshou {
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 432rpx;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
border-radius: 28rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.add-img {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 112rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 28rpx;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 62rpx;
|
||||||
|
border: 0.5px solid #C7C7C7;
|
||||||
|
padding: 0 16rpx;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-box {
|
||||||
|
padding: 20rpx 26rpx;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #4D4D4D;
|
||||||
|
line-height: 22rpx;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open-btn {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #4D4D4D;
|
||||||
|
line-height: 22rpx;
|
||||||
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
|
border: 1rpx solid #ACACAC;
|
||||||
|
padding: 10rpx 6rpx 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yiwancheng {
|
||||||
|
.title {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 26rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1A1A1A;
|
||||||
|
line-height: 30rpx;
|
||||||
|
|
||||||
|
&.quxiao {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #87868E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 22rpx;
|
||||||
|
line-height: 62rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
color: #ED1C04;
|
||||||
|
border-color: #ED1C04;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-progress-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
margin: 10rpx 16rpx;
|
||||||
|
padding: 26rpx 22rpx 30rpx;
|
||||||
|
|
||||||
|
.cancel-icon {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-content {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1A1A1A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #8C8C8C;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 直接在页面导入公共样式 */
|
||||||
|
@import '/common/main.css';
|
||||||
|
@import "@/common/specify-style.less";
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 727 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 803 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 597 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue