650 lines
16 KiB
Vue
650 lines
16 KiB
Vue
<template>
|
||
<view class="top-fixed">
|
||
<nav-bar title="京东" bgColor="#F0F4F9">
|
||
<template v-slot:center>
|
||
<view class="search-box">
|
||
<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png" mode="aspectFit">
|
||
</image>
|
||
<input class="input" type="text" placeholder="搜索我的订单" disabled />
|
||
</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="right-box">
|
||
<image class="gift icon" src="/static/image/shopping/jingdong/gift.png" mode="aspectFit">
|
||
</image>
|
||
<image class="more icon" src="/static/image/shopping/jingdong/more.png" mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
</template>
|
||
</nav-bar>
|
||
<view class="tab-list">
|
||
<view class="tab-item" v-for="(item, index) in tabList" :key="index"
|
||
:class="{ active: currentTab === index }" @click="switchTab(index)">
|
||
<text class="title">{{ item.name }}</text>
|
||
<view class="line" v-if="currentTab === index"></view>
|
||
<image v-if="item.icon" class="badge-icon" :src="item.icon" mode="heightFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="filter-wrapper">
|
||
<scroll-view class="filter-scroll" scroll-x="true" :show-scrollbar="false">
|
||
<view class="filter-list">
|
||
<view class="filter-item" v-for="(item, index) in filterList" :key="index"
|
||
:class="{ active: currentFilter === index, disabled: item.disabled }"
|
||
@click="switchFilter(index)">
|
||
<text class="text">{{ item.name }}</text>
|
||
<text class="close-icon" v-if="currentFilter === index">×</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="filter-btn">
|
||
<image class="filter-icon" src="/static/image/shopping/jingdong/shaixuan.png" mode="aspectFit"></image>
|
||
<text class="filter-text">筛选</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content" :style="{ paddingTop: contentPaddingTop }">
|
||
<shopping-card v-for="(item, index) in filteredOrderList" :key="index" :item="item"></shopping-card>
|
||
</view>
|
||
<view class="bottom-fixed">
|
||
<view class="bottom-item">
|
||
<image class="like-icon" src="/static/image/shopping/jingdong/weinituijian.png" mode="aspectFit"></image>
|
||
<text>为你推荐</text>
|
||
</view>
|
||
<view class="upload-screenshot-box">
|
||
<view class="upload-screenshot-content">
|
||
<image class="upload-screenshot" src="/static/image/common/upload-screenshot.png" mode="aspectFit">
|
||
</image>
|
||
<view class="upload-screenshot-text">长按替换截图</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
||
import ShoppingCard from '@/components/shopping/jingdong/shopping-card.vue';
|
||
|
||
const contentPaddingTop = ref('0px');
|
||
const instance = getCurrentInstance();
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
const query = uni.createSelectorQuery().in(instance.proxy);
|
||
query.select('.top-fixed').boundingClientRect(data => {
|
||
if (data) {
|
||
contentPaddingTop.value = data.height + 'px';
|
||
}
|
||
}).exec();
|
||
}, 100);
|
||
});
|
||
|
||
const currentTab = ref(0);
|
||
const tabList = ref([
|
||
{ name: '全部' },
|
||
{ name: '购物' },
|
||
{ name: '秒送', icon: '/static/image/shopping/jingdong/waimai.png' },
|
||
{ name: '服务', icon: '/static/image/shopping/jingdong/jiazheng.png', disabled: true }
|
||
]);
|
||
|
||
const switchTab = (index) => {
|
||
if (tabList.value[index].disabled) return;
|
||
currentTab.value = index;
|
||
};
|
||
|
||
const currentFilter = ref(-1);
|
||
const filterList = ref([
|
||
{ name: '待付款' },
|
||
{ name: '待收货' },
|
||
{ name: '待使用', disabled: true },
|
||
{ name: '已完成' },
|
||
{ name: '待评价' },
|
||
{ name: '已取消' }
|
||
]);
|
||
|
||
const switchFilter = (index) => {
|
||
if (filterList.value[index].disabled) return;
|
||
if (currentFilter.value === index) {
|
||
currentFilter.value = -1;
|
||
} else {
|
||
currentFilter.value = index;
|
||
}
|
||
};
|
||
|
||
const filteredOrderList = computed(() => {
|
||
const tabName = tabList.value[currentTab.value].name;
|
||
let baseList = mockOrderList.value;
|
||
|
||
if (tabName === '购物') {
|
||
baseList = mockOrderList.value.filter(item => item.shopType !== 'waimai');
|
||
} else if (tabName === '秒送') {
|
||
baseList = mockOrderList.value.filter(item => item.shopType === 'waimai');
|
||
}
|
||
|
||
if (currentFilter.value === -1) {
|
||
return baseList;
|
||
}
|
||
const filterName = filterList.value[currentFilter.value].name;
|
||
|
||
return 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 === '待使用';
|
||
if (filterName === '已完成') return item.status === '完成' || item.status === '已完成' || item.status === '已签收';
|
||
if (filterName === '待评价') return item.status === '待评价' || item.status === '完成' || item.status === '已完成';
|
||
if (filterName === '已取消') return item.status === '已取消';
|
||
return true;
|
||
});
|
||
});
|
||
|
||
const mockOrderList = ref([
|
||
{
|
||
shopType: 'waimai',
|
||
shopName: '安野屋 (AARYE) 京...',
|
||
status: '等待付款',
|
||
statusDesc: '29分钟',
|
||
products: [
|
||
{
|
||
image: '/static/image/shopping/jingdong/product1.png',
|
||
title: '超值哈哈哈哈哈哈哈哈哈哈哈哈哈哈好一人份',
|
||
desc: '不支持7天无理由退货',
|
||
tags: [],
|
||
price: '69.00',
|
||
count: 1,
|
||
}
|
||
],
|
||
promoType: 'text',
|
||
promoHighlight: '近90天600+人回购',
|
||
buttons: [
|
||
{ text: '取消订单', type: 'default' },
|
||
{ text: '查看发票', type: 'default' },
|
||
{ text: '修改订单', type: 'default' },
|
||
{ text: '去支付', type: 'primary' }
|
||
]
|
||
},
|
||
{
|
||
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,
|
||
}
|
||
],
|
||
promoType: 'cashback',
|
||
promoText: '当笔订单返现成功到账，',
|
||
promoAction: '点击领取',
|
||
buttons: [
|
||
{ text: '申请退款', type: 'default' },
|
||
{ text: '查看发票', type: 'default' }
|
||
]
|
||
},
|
||
{
|
||
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,
|
||
}
|
||
],
|
||
promoType: 'cashback',
|
||
promoText: '当笔订单返现成功到账，',
|
||
promoAction: '点击领取',
|
||
buttons: [
|
||
{ text: '申请退款', type: 'default' },
|
||
{ text: '查看发票', type: 'default' }
|
||
]
|
||
},
|
||
{
|
||
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: '去领券',
|
||
buttons: [
|
||
{ text: '删除订单', type: 'default' },
|
||
{ text: '查看发票', type: 'default' },
|
||
{ text: '退换/售后', type: 'default' },
|
||
{ text: '再次购买', type: 'primary' }
|
||
]
|
||
},
|
||
{
|
||
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,
|
||
buttons: [
|
||
{ text: '删除订单', type: 'default' },
|
||
{ text: '查看发票', type: 'default' },
|
||
{ text: '退换/售后', type: 'default' },
|
||
{ text: '再次购买', type: 'primary' }
|
||
]
|
||
},
|
||
{
|
||
shopType: 'waimai',
|
||
shopName: '瑞幸咖啡',
|
||
status: '已取消',
|
||
statusColor: 'gray',
|
||
products: [
|
||
{
|
||
image: '/static/image/shopping/jingdong/product1.png',
|
||
title: '多肉桃桃哈哈哈哈哈哈哈哈哈哈好和和好',
|
||
desc: '不支持7天无理由退货',
|
||
tags: [],
|
||
price: '69.00',
|
||
count: 1,
|
||
}
|
||
],
|
||
buttons: [
|
||
{ text: '删除订单', type: 'default' },
|
||
{ text: '钱款去向', type: 'default' },
|
||
{ text: '再次购买', type: 'primary' }
|
||
]
|
||
},
|
||
{
|
||
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元优惠券',
|
||
buttons: [
|
||
{ text: '取消订单', type: 'default' },
|
||
{ text: '查看发票', type: 'default' },
|
||
{ text: '修改订单', type: 'default' },
|
||
{ text: '去支付', type: 'primary', badge: '减0.5元' }
|
||
]
|
||
},
|
||
{
|
||
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: '告别凑单, 享免运优惠',
|
||
buttons: [
|
||
{ text: '查看发票', type: 'default' },
|
||
{ text: '再次购买', type: 'default' },
|
||
{ text: '申请退款', type: 'default' },
|
||
{ text: '修改订单', type: 'default' }
|
||
]
|
||
},
|
||
{
|
||
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,
|
||
buttons: [
|
||
{ text: '卖了换钱', type: 'default' },
|
||
{ text: '退还/售后', type: 'default' },
|
||
{ text: '再次购买', type: 'primary' }
|
||
]
|
||
},
|
||
{
|
||
shopType: 'jd',
|
||
shopName: '甜小南旗舰店',
|
||
status: '完成',
|
||
statusColor: 'gray',
|
||
products: [
|
||
{
|
||
image: '/static/image/shopping/jingdong/product1.png',
|
||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||
tags: ['无理由退货政策'],
|
||
price: '1669.00',
|
||
count: 1,
|
||
}
|
||
],
|
||
hasMore: true,
|
||
buttons: [
|
||
{ text: '再次购买', type: 'default' },
|
||
{ text: '申请退款', type: 'default' },
|
||
{ text: '修改订单', type: 'default' }
|
||
]
|
||
},
|
||
{
|
||
shopType: 'self',
|
||
shopName: '甜小南旗舰店',
|
||
status: '已取消',
|
||
statusColor: 'gray',
|
||
products: [
|
||
{
|
||
image: '/static/image/shopping/jingdong/product1.png',
|
||
title: '安野哈哈哈哈哈哈哈哈哈哈哈哈好好',
|
||
desc: '联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||
tags: ['无理由退货政策'],
|
||
price: '1669.00',
|
||
count: 1,
|
||
}
|
||
],
|
||
buttons: [
|
||
{ text: '再次购买', type: 'default' },
|
||
{ text: '申请退款', type: 'default' },
|
||
{ text: '修改订单', type: 'primary' }
|
||
]
|
||
}
|
||
]);
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.top-fixed {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
background-color: #F0F4F9;
|
||
}
|
||
|
||
::v-deep .uni-navbar__header-btns {
|
||
width: auto !important;
|
||
}
|
||
|
||
::v-deep .uni-navbar__header-container {
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
.search-box {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 0 16rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #E5E5E5;
|
||
|
||
.search-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
|
||
::v-deep .input-placeholder {
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #CCCCCC;
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 22rpx;
|
||
}
|
||
}
|
||
|
||
.tab-list {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 36rpx 10rpx;
|
||
background-color: #F0F4F9;
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 58rpx;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #1A1A1A;
|
||
font-weight: 700;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
&.active {
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #F51919;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
left: -5%;
|
||
transform: translateX(50%);
|
||
width: 30rpx;
|
||
height: 4rpx;
|
||
background-color: #F51919;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.badge-icon {
|
||
position: relative;
|
||
top: 0;
|
||
margin-left: 2rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64rpx;
|
||
padding: 0 0 0 24rpx;
|
||
background-color: #F0F4F9;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 26rpx;
|
||
|
||
.filter-scroll {
|
||
flex: 1;
|
||
width: 0;
|
||
white-space: nowrap;
|
||
|
||
.filter-list {
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
padding-right: 24rpx;
|
||
}
|
||
|
||
.filter-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
vertical-align: middle;
|
||
height: 56rpx;
|
||
padding: 0 24rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
border: 2rpx solid transparent;
|
||
box-sizing: border-box;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.close-icon {
|
||
font-size: 18px;
|
||
color: #E40C24;
|
||
margin-top: -10rpx;
|
||
line-height: 14px;
|
||
margin-left: 6rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
&.active {
|
||
background-color: #FFECF5;
|
||
border-color: #E40C24;
|
||
|
||
.text {
|
||
color: #E40C24;
|
||
}
|
||
}
|
||
|
||
// &.disabled {
|
||
// background-color: #F8F8F8;
|
||
// border-color: transparent;
|
||
|
||
// .text {
|
||
// color: #CCCCCC;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.filter-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 82rpx;
|
||
height: 64rpx;
|
||
background-color: #F0F4F9;
|
||
position: relative;
|
||
z-index: 10;
|
||
box-shadow: -10rpx 0 10rpx -10rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.filter-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.filter-text {
|
||
font-size: 20rpx;
|
||
line-height: 20rpx;
|
||
color: #575757;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.bottom-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1A1A1A;
|
||
font-size: 28rpx;
|
||
line-height: 26rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.like-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.upload-screenshot-box {
|
||
width: 100%;
|
||
height: 540rpx;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.upload-screenshot {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
}
|
||
|
||
.upload-screenshot-content {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.upload-screenshot-text {
|
||
font-size: 36rpx;
|
||
color: #1777FF;
|
||
line-height: 50rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |