431 lines
10 KiB
Vue
431 lines
10 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 }" @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 mockOrderList" :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, 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: '待使用' },
|
||
{ name: '已完成' },
|
||
{ name: '待评价' },
|
||
{ name: '已取消' }
|
||
]);
|
||
|
||
const switchFilter = (index) => {
|
||
currentFilter.value = index;
|
||
};
|
||
|
||
const mockOrderList = ref([
|
||
{
|
||
shopType: 'self',
|
||
shopName: '安野屋 (AARYE) 京联名哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好梦',
|
||
statusType: 'warning',
|
||
statusDesc: '20小时11分钟',
|
||
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: '正在出库',
|
||
statusColor: 'red',
|
||
trackingTitle: '仓库处理中',
|
||
trackingDesc: '预计 3月12日24:00 前发货，3月15日 24:00 前送达',
|
||
trackingTime: '2026-03-10 15:14:30',
|
||
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',
|
||
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',
|
||
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',
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style> |