456 lines
10 KiB
Vue
456 lines
10 KiB
Vue
<template>
|
|
<view class="page-container flex-column">
|
|
<view class="top-fixed">
|
|
<nav-bar v-if="!selectedImage" title="淘宝" bgColor="#ffffff" :buttonGroup="buttonGroup"
|
|
@button-click="util.clickTitlePopupButton" tipLayerType="jingdong-shopping-list" isTipLayer
|
|
tipLayerText="添加订单信息">
|
|
<template v-slot:left>
|
|
<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"></image>
|
|
</template>
|
|
<template v-slot:center>
|
|
<view class="search-box flex-align-center">
|
|
<image class="search-icon" src="/static/image/shopping/jingdong/search-icon.png"
|
|
mode="aspectFit">
|
|
</image>
|
|
<input class="input" type="text" placeholder="搜索我的订单" :disabled="true" />
|
|
</view>
|
|
</template>
|
|
<template v-slot:right>
|
|
<view class="right-box flex-align-center">
|
|
<view class="item flex-column flex-align-center">
|
|
<image class="icon" src="/static/image/shopping/taobao/shaixuan.png"></image>
|
|
<text class="text">筛选</text>
|
|
</view>
|
|
<view class="item flex-column flex-align-center">
|
|
<image class="icon" src="/static/image/shopping/taobao/guanli.png"></image>
|
|
<text class="text">管理</text>
|
|
</view>
|
|
<view class="item flex-column flex-align-center">
|
|
<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
|
|
<text class="text" style="opacity: 0;">消息</text>
|
|
</view>
|
|
</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)">
|
|
<view class="title">
|
|
<text>{{ item.name }}</text>
|
|
<view class="line" v-if="currentTab === index"></view>
|
|
</view>
|
|
<!-- <view class="line" v-if="currentTab === index"></view> -->
|
|
<image v-if="item.icon" class="badge-icon" :class="{ 'android-m-top': $system == 'Android' }"
|
|
:src="item.icon" mode="heightFix"></image>
|
|
</view>
|
|
</view>
|
|
<view class="filter-wrapper">
|
|
<view class="position-l">
|
|
<view class="filter-item" :class="{ active: currentFilter === 0 }" @click="switchFilter(0)">
|
|
<text class="text">全部</text>
|
|
</view>
|
|
</view>
|
|
<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>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
</view>
|
|
<scroll-view class="flex-1" style="height: 100px;" scroll-y="true">
|
|
<view v-if="currentTab === 0 && currentFilter === 0"
|
|
class="shangou-tips flex-align-center flex-justify-between">
|
|
<view class="left flex-align-center">
|
|
<image style="width: 64rpx;height: 28rpx;margin-right: 8rpx;"
|
|
src="/static/image/shopping/taobao/shangou-logo.png"></image>
|
|
<text>暂无进行中订单</text>
|
|
</view>
|
|
<view class="right">
|
|
<text>查看全部</text>
|
|
<uni-icons type="right" size="14" color="#5E6367"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<listCard :list="displayList" @click-item="goDetail" />
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 水印 -->
|
|
<!-- <view v-if="$isVip()">
|
|
<watermark dark="light" source="uni_alipay_shopping_taobao" />
|
|
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_shopping_taobao')">
|
|
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
|
</liu-drag-button>
|
|
</view> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
|
|
import { onShow } from '@dcloudio/uni-app';
|
|
import { util } from '@/utils/common.js';
|
|
import listCard from './components/list-card/list-card.vue';
|
|
import { defualtData } from './json/order.json'
|
|
|
|
const mockList = ref(defualtData);
|
|
|
|
//导航栏菜单按钮
|
|
const buttonGroup = [
|
|
{
|
|
name: "新增购物订单",
|
|
click: () => {
|
|
uni.navigateTo({
|
|
url: '/pages/shopping/taobao/add-order/add-order'
|
|
});
|
|
}
|
|
}, {
|
|
name: "新增闪购订单",
|
|
click: () => {
|
|
uni.showToast({
|
|
title: '开发中，敬请期待',
|
|
icon: 'none'
|
|
});
|
|
// uni.navigateTo({
|
|
// url: '/pages/shopping/jingdong/add-waimai/add-waimai'
|
|
// });
|
|
}
|
|
},
|
|
]
|
|
|
|
const displayList = computed(() => {
|
|
let list = mockList.value;
|
|
|
|
// 1. 一级 Tab 过滤 (orderType)
|
|
if (currentTab.value === 1) { // 购物
|
|
list = list.filter(item => item.orderType === 'shopping');
|
|
} else if (currentTab.value === 2) { // 闪购
|
|
list = list.filter(item => item.orderType === 'waimai');
|
|
}
|
|
|
|
// 2. 二级分类过滤 (currentFilter)
|
|
if (currentFilter.value > 0) {
|
|
const filterName = filterList.value[currentFilter.value]?.name;
|
|
|
|
// 统一定义状态映射
|
|
const statusMap = {
|
|
'待付款': ['wait_pay'],
|
|
'待发货': ['wait_send'],
|
|
'待收货': ['wait_recv'],
|
|
'退款/售后': ['refunding'],
|
|
'已关闭': ['closed'],
|
|
'待评价': ['success'] // 闪购下 success 状态代表已送达可评价
|
|
};
|
|
|
|
const targetStatus = statusMap[filterName];
|
|
if (targetStatus) {
|
|
list = list.filter(item => targetStatus.includes(item.statusType));
|
|
}
|
|
}
|
|
|
|
return list;
|
|
});
|
|
|
|
const currentFilter = ref(0);
|
|
const filterList = ref([
|
|
{ name: '全部' },
|
|
{ name: '待付款' },
|
|
{ name: '待发货' },
|
|
{ name: '待收货' },
|
|
{ name: '退款/售后' },
|
|
{ name: '已关闭' }
|
|
]);
|
|
|
|
const currentTab = ref(0);
|
|
const tabList = ref([
|
|
{ name: '全部订单' },
|
|
{ name: '购物' },
|
|
{ name: '闪购', icon: '/static/image/shopping/taobao/waimai.png' },
|
|
{ name: '飞猪', icon: '/static/image/shopping/taobao/lvxing.png', disabled: true }
|
|
]);
|
|
|
|
/**
|
|
* 切换tab
|
|
* @param index
|
|
*/
|
|
const switchTab = (index) => {
|
|
if (tabList.value[index].disabled) return;
|
|
currentTab.value = index;
|
|
// 重置筛选为“全部”
|
|
currentFilter.value = 0;
|
|
// 动态更新筛选项
|
|
updateFilterList();
|
|
};
|
|
|
|
/**
|
|
* 动态更新筛选项
|
|
*/
|
|
const updateFilterList = () => {
|
|
let sourceList = [];
|
|
// 根据tab切换不同的筛选项数据
|
|
switch (currentTab.value) {
|
|
case 0:
|
|
sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
|
|
break;
|
|
case 1:
|
|
sourceList = ["全部", "待付款", "待发货", "待收货", "退款/售后", "已关闭"];
|
|
break;
|
|
case 2:
|
|
sourceList = ["全部", "待付款", "待发货", "待收货", "待评价", "已关闭"];
|
|
break;
|
|
case 3:
|
|
sourceList = ["全部", "全部行程", "已完成", "退款/售后"];
|
|
break;
|
|
}
|
|
filterList.value = sourceList.map((name, index) => ({
|
|
name,
|
|
disabled: index === 2 && currentTab.value === 1 // 示例：只有待发货可以被禁用
|
|
}));
|
|
};
|
|
|
|
/**
|
|
* 切换筛选
|
|
* @param index 索引
|
|
*/
|
|
const switchFilter = (index) => {
|
|
if (filterList.value[index].disabled) return;
|
|
if (currentFilter.value === index) {
|
|
currentFilter.value = 0;
|
|
} else {
|
|
currentFilter.value = index;
|
|
}
|
|
};
|
|
|
|
const goDetail = (item) => {
|
|
util.goPage(`/pages/shopping/taobao/shopping-order-detail/shopping-order-detail?id=${item.id}`)
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.page-container {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top-fixed {
|
|
background-color: #ffffff;
|
|
|
|
::v-deep .uni-navbar__header-btns {
|
|
width: auto !important;
|
|
}
|
|
|
|
::v-deep .uni-navbar__header-container {
|
|
padding: 0 14rpx;
|
|
padding-left: 34rpx;
|
|
}
|
|
|
|
.back-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.search-box {
|
|
background-color: #F1F5F8;
|
|
padding: 0 18rpx;
|
|
width: 100%;
|
|
border-radius: 16rpx;
|
|
|
|
.search-icon {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: 72rpx;
|
|
font-size: 26rpx;
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #7E8C9D;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-box {
|
|
.item {
|
|
margin: 0 14rpx;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 20rpx;
|
|
color: #1A1A1A;
|
|
line-height: 20rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16rpx 36rpx 10rpx;
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 58rpx;
|
|
|
|
.title {
|
|
position: relative;
|
|
font-size: 30rpx;
|
|
color: #00032A;
|
|
font-weight: 500;
|
|
line-height: 16px !important;
|
|
}
|
|
|
|
&.active {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.title {
|
|
color: #EF7518;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: -12rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 22rpx;
|
|
height: 4rpx;
|
|
background-color: #EF7518;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.badge-icon {
|
|
margin-left: 6rpx;
|
|
width: 52rpx;
|
|
height: 14px;
|
|
|
|
&.android-m-top {
|
|
margin-top: -3rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 22rpx 0 30rpx;
|
|
margin-top: 28rpx;
|
|
padding-bottom: 16rpx;
|
|
|
|
.filter-scroll {
|
|
flex: 1;
|
|
width: 0;
|
|
white-space: nowrap;
|
|
|
|
.filter-list {
|
|
padding-right: 24rpx;
|
|
}
|
|
}
|
|
|
|
.position-l {
|
|
position: absolute;
|
|
left: 0;
|
|
padding-left: 30rpx;
|
|
background-color: #ffffff;
|
|
z-index: 1;
|
|
|
|
.filter-item {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.filter-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
height: 56rpx;
|
|
padding: 0 22rpx;
|
|
background-color: #F1F4F9;
|
|
border-radius: 12rpx;
|
|
margin-right: 16rpx;
|
|
border: 2rpx solid transparent;
|
|
box-sizing: border-box;
|
|
|
|
.text {
|
|
font-size: 26rpx;
|
|
line-height: 26rpx;
|
|
color: #00032A;
|
|
}
|
|
|
|
.close-icon {
|
|
font-size: 18px;
|
|
color: #E40C24;
|
|
margin-top: -4rpx;
|
|
line-height: 14px;
|
|
margin-left: 6rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&.active {
|
|
background-color: #FFEEE6;
|
|
|
|
.text {
|
|
color: #EF7518;
|
|
}
|
|
}
|
|
|
|
// &.disabled {
|
|
// background-color: #F8F8F8;
|
|
// border-color: transparent;
|
|
|
|
// .text {
|
|
// color: #CCCCCC;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
.shangou-tips {
|
|
padding: 28rpx 22rpx 36rpx 32rpx;
|
|
background-color: #ffffff;
|
|
|
|
.left {
|
|
height: 28rpx;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
line-height: 28rpx;
|
|
color: #00032A;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
color: #5E6367;
|
|
font-size: 26rpx;
|
|
line-height: 28rpx;
|
|
|
|
text {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
@import '@/common/main.css';
|
|
</style> |