570 lines
13 KiB
Vue
570 lines
13 KiB
Vue
<template>
|
||
<view class="flex-row relative page">
|
||
<view class="flex-row justify-center items-center section_2 pos">
|
||
<!-- <image class="image"
|
||
src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=49977e5fbfb65cc3b62ce79b9d6705a2.png" />
|
||
<text class="font text ml-4">搜索订单</text> -->
|
||
<input class="search-input" placeholder="请输入商品名称" v-model="searchKeyword" @input="handleSearch" />
|
||
</view>
|
||
<view class="flex-col section_44">
|
||
<view class="flex-row justify-between self-stretch groupp">
|
||
<view class="font_22" :class="{ active: orderStatus === '全部', selected: isSelected('全部') }"
|
||
@click="changeTab('全部')">
|
||
全部
|
||
</view>
|
||
<view class="font_22" :class="{ active: orderStatus === '待支付', selected: isSelected('待支付') }"
|
||
@click="changeTab('待支付')">
|
||
待支付
|
||
</view>
|
||
<view class="font_22" :class="{ active: orderStatus === '待发货', selected: isSelected('待发货') }"
|
||
@click="changeTab('待发货')">
|
||
待发货
|
||
</view>
|
||
<view class="font_22" :class="{ active: orderStatus === '已发货', selected: isSelected('已发货') }"
|
||
@click="changeTab('已发货')">
|
||
已发货
|
||
</view>
|
||
<view class="font_22" :class="{ active: orderStatus === '已退款', selected: isSelected('已退款') }"
|
||
@click="changeTab('已退款')">
|
||
售后/退款
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="flex-col pos_8">
|
||
<view class="flex-col section_4 list-item_1 mt-14" v-for="(order, index) in Status.displayedOrders"
|
||
:key="order.id" @click="goToText(index)">
|
||
<view class="flex-col">
|
||
<!-- <text class="self-end font_3 text_5">交易关闭</text> -->
|
||
<view class="flex-row items-center self-stretch mt-2">
|
||
<text class="font_4">订单编号：</text>
|
||
<text class="font_5 ml-5">{{order.orderNumber}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col group">
|
||
<view class="flex-row justify-between list-item group_3" v-for="item in order.orderItemList"
|
||
:key="item.id">
|
||
<view class="flex-row">
|
||
<image class="image_2" :src="item.goodSnapshot.goodImg" />
|
||
<view class="flex-col self-start group_1 ml-18">
|
||
<view class="flex-row self-stretch">
|
||
<text class="font">{{ item.goodSnapshot.name }}</text>
|
||
<text class="font text_10">【{{ item.goodSnapshot.type }}】</text>
|
||
</view>
|
||
<text class="self-start font_7 text_12 mt-36">×1</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row items-center self-start group_2">
|
||
{{ item.goodSnapshot.price }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="divider view_1"></view>
|
||
<view class="flex-row justify-end group_5">
|
||
<view v-if="order.orderStatus==='待支付'" class="font text_18">去支付</view>
|
||
<view v-if="order.orderStatus==='待发货'" class="font text_18">取消订单</view>
|
||
<view v-if="order.orderStatus==='已发货'" class="font text_18">确认收货</view>
|
||
<view v-if="order.orderStatus==='已退款'" class="font text_18">售后详情</view>
|
||
</view>
|
||
<view class="flex-row justify-end items-center view">
|
||
<text class="font_9 text_16">总 金额：</text>
|
||
<image class="image_4 image_5"
|
||
src="https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=f10bd62afae3562e9d76103ff6fb0f84.png" />
|
||
<text class="font_8 text_17">{{order.totalAmount}}</text>
|
||
</view>
|
||
<view class="flex-row justify-end group_7">
|
||
<view class="flex-col justify-start items-center text-wrapper"><text
|
||
class="font text_18">删除记录</text></view>
|
||
<view class="flex-col justify-start items-center text-wrapper_2 ml-14">
|
||
<text class="font_3">联系客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
toRaw
|
||
} from 'vue';
|
||
import {
|
||
baseUrl,
|
||
testUrl,
|
||
suiUrl
|
||
} from '@/api/request';
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
|
||
const Status = ref({
|
||
orderStatus: '全部',
|
||
orders: [],
|
||
displayedOrders: [],
|
||
});
|
||
const orderStatus = '';
|
||
const currentColor = ref(0);
|
||
const isSelected = (tab) => Status.value.orderStatus === tab;
|
||
const searchKeyword = ref(''); // 新增，用于存储搜索关键词
|
||
|
||
onMounted(async () => {
|
||
await Getorder();
|
||
// 根据当前的tab值来设置displayedOrders
|
||
if (Status.value.orderStatus === '全部') {
|
||
Status.value.displayedOrders = Status.value.orders;
|
||
} else {
|
||
Status.value.displayedOrders = Status.value.orders.filter((order) => {
|
||
switch (Status.value.orderStatus) {
|
||
case '待支付':
|
||
return order.orderStatus === '待支付'
|
||
case '待发货':
|
||
return order.orderStatus === '待发货'
|
||
case '已发货':
|
||
return order.orderStatus === '已发货'
|
||
case '已退款':
|
||
return order.orderStatus === '已退款'
|
||
default:
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
const userInfo = wx.getStorageSync('userInfo');
|
||
|
||
const Getorder = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/order/list',
|
||
method: 'POST',
|
||
header: {
|
||
cookie: wx.getStorageSync('cookie')
|
||
},
|
||
data: {
|
||
id: userInfo.id,
|
||
},
|
||
});
|
||
if (res.data.code === 1) {
|
||
Status.value.orders = res.data.data;
|
||
} else {
|
||
console.log('没拿到用户数据');
|
||
}
|
||
};
|
||
|
||
const zt = ref({
|
||
tab: ''
|
||
});
|
||
|
||
onLoad((options) => {
|
||
if (options.tab) {
|
||
zt.value.tab = JSON.parse(options.tab);
|
||
changeTab(zt.value.tab);
|
||
}
|
||
});
|
||
|
||
const changeTab = (tab) => {
|
||
if (tab === '全部') {
|
||
Status.value.displayedOrders = Status.value.orders;
|
||
Status.value.orderStatus = '全部';
|
||
} else {
|
||
Status.value.displayedOrders = Status.value.orders.filter((order) => {
|
||
switch (tab) {
|
||
case '待支付':
|
||
return order.orderStatus === '待支付';
|
||
case '待发货':
|
||
return order.orderStatus === '待发货';
|
||
case '已发货':
|
||
return order.orderStatus === '已发货';
|
||
case '已退款':
|
||
return order.orderStatus === '已退款';
|
||
default:
|
||
return false;
|
||
}
|
||
});
|
||
Status.value.orderStatus = tab;
|
||
}
|
||
};
|
||
|
||
// 新增，处理搜索逻辑的函数
|
||
const handleSearch = () => {
|
||
if (searchKeyword.value.trim() === '') {
|
||
// 如果关键词为空，恢复根据当前tab展示的数据（全部或筛选后的数据）
|
||
if (Status.value.orderStatus === '全部') {
|
||
Status.value.displayedOrders = Status.value.orders;
|
||
} else {
|
||
Status.value.displayedOrders = Status.value.orders.filter((order) => {
|
||
switch (Status.value.orderStatus) {
|
||
case '待支付':
|
||
return order.orderStatus === '待支付'
|
||
case '待发货':
|
||
return order.orderStatus === '待发货'
|
||
case '已发货':
|
||
return order.orderStatus === '已发货'
|
||
case '已退款':
|
||
return order.orderStatus === '已退款'
|
||
default:
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
const keyword = searchKeyword.value.toLowerCase(); // 转换为小写，方便不区分大小写搜索
|
||
Status.value.displayedOrders = Status.value.orders.filter((order) => {
|
||
return order.orderItemList.some((item) => {
|
||
return item.goodSnapshot.name.toLowerCase().includes(keyword);
|
||
});
|
||
});
|
||
};
|
||
|
||
const goToText = (index) => {
|
||
uni.navigateTo({
|
||
url: '../../../pages/mine/OrderDetails/OrderDetails?info=' + JSON.stringify(Status.value
|
||
.displayedOrders[index]),
|
||
})
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.groupp {
|
||
padding: 22.5rpx 0 18.75rpx;
|
||
}
|
||
|
||
.section_44 {
|
||
padding-left: 33.75rpx;
|
||
padding-right: 30rpx;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
.ml-5 {
|
||
margin-left: 9.38rpx;
|
||
}
|
||
|
||
.font_22.selected {
|
||
position: relative;
|
||
}
|
||
|
||
.font_22.selected::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px; // 调整线条距离底部的距离
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px; // 调整线条的粗细
|
||
background-color: #f6aaa4; // 调整线条颜色
|
||
transition: all 0.3s ease; // 添加过渡效果
|
||
}
|
||
|
||
.page {
|
||
padding: 46.88rpx 22.5rpx 401.25rpx;
|
||
background-color: #ffffff;
|
||
background-image: url('https://ide.code.fun/api/image?token=67610a10797f850011f30392&name=4ba8389730acda4f67d46a7370efec60.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
height: 2073.75rpx;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 9.38rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 75rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
left: 35.63rpx;
|
||
right: 35.63rpx;
|
||
top: 46.88rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
|
||
.font {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.54rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text {
|
||
color: #c0c0c0;
|
||
line-height: 25.84rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 28.84rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.font_22 {
|
||
font-size: 30rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 27.81rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_2 {
|
||
line-height: 28.48rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 33.99rpx;
|
||
top: 146.36rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
line-height: 28.24rpx;
|
||
}
|
||
|
||
.pos_3 {
|
||
position: absolute;
|
||
left: 147.66rpx;
|
||
top: 146.14rpx;
|
||
}
|
||
|
||
.pos_4 {
|
||
position: absolute;
|
||
left: 295.78rpx;
|
||
top: 145.78rpx;
|
||
}
|
||
|
||
.pos_5 {
|
||
position: absolute;
|
||
right: 214.22rpx;
|
||
top: 145.78rpx;
|
||
}
|
||
|
||
.text_4 {
|
||
line-height: 29.53rpx;
|
||
}
|
||
|
||
.pos_6 {
|
||
position: absolute;
|
||
right: 34.22rpx;
|
||
top: 147.07rpx;
|
||
}
|
||
|
||
.section_3 {
|
||
background-color: #ffaaa5;
|
||
width: 73.13rpx;
|
||
height: 5.63rpx;
|
||
}
|
||
|
||
.pos_7 {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 182.81rpx;
|
||
}
|
||
|
||
.pos_8 {
|
||
position: absolute;
|
||
left: 22.5rpx;
|
||
right: 30rpx;
|
||
top: 217.5rpx;
|
||
}
|
||
|
||
.section_4 {
|
||
padding: 34.61rpx 15rpx 31.88rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 31.88rpx;
|
||
}
|
||
|
||
.list-item_1:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.54rpx;
|
||
color: #ffaaa5;
|
||
}
|
||
|
||
.text_5 {
|
||
margin-right: 8.08rpx;
|
||
line-height: 24.62rpx;
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 22.14rpx;
|
||
color: #818181;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 22.5rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 15.04rpx;
|
||
color: #818181;
|
||
}
|
||
|
||
.group {
|
||
margin-top: 29.21rpx;
|
||
}
|
||
|
||
.list-item:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.image_2 {
|
||
border-radius: 9.38rpx;
|
||
width: 146.25rpx;
|
||
height: 144.38rpx;
|
||
}
|
||
|
||
.group_1 {
|
||
margin-top: 2.33rpx;
|
||
}
|
||
|
||
.text_10 {
|
||
line-height: 25.01rpx;
|
||
}
|
||
|
||
.font_7 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_12 {
|
||
margin-left: 5.34rpx;
|
||
line-height: 18.73rpx;
|
||
}
|
||
|
||
.group_2 {
|
||
margin-right: 8.23rpx;
|
||
margin-top: 89.19rpx;
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
line-height: 25.54rpx;
|
||
font-weight: 600;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_11 {
|
||
margin-left: 25.03rpx;
|
||
line-height: 24.88rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
margin-left: -90.66rpx;
|
||
width: 30rpx;
|
||
height: 26.25rpx;
|
||
}
|
||
|
||
.font_8 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.29rpx;
|
||
font-weight: 600;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_13 {
|
||
margin-left: 61.14rpx;
|
||
}
|
||
|
||
.divider {
|
||
background-color: #dad2d2;
|
||
height: 0.81rpx;
|
||
}
|
||
|
||
.view_1 {
|
||
margin: 30.43rpx 28.13rpx 0 39.38rpx;
|
||
}
|
||
|
||
.group_5 {
|
||
margin-top: 49.41rpx;
|
||
padding: 0 21.21rpx;
|
||
color: #ffaaa5;
|
||
}
|
||
|
||
.font_9 {
|
||
font-size: 26.25rpx;
|
||
font-family: FZSongKeBenXiuKaiS-R-GB;
|
||
line-height: 25.54rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.text_14 {
|
||
line-height: 24.62rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
margin-top: 2.17rpx;
|
||
line-height: 24rpx;
|
||
}
|
||
|
||
.view {
|
||
margin-top: 19.93rpx;
|
||
padding: 0 19.54rpx;
|
||
}
|
||
|
||
.text_16 {
|
||
margin-right: 6.99rpx;
|
||
line-height: 24.3rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 31.88rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.image_5 {
|
||
margin-right: -8.29rpx;
|
||
}
|
||
|
||
.text_17 {
|
||
color: #ffaaa5;
|
||
line-height: 19.39rpx;
|
||
}
|
||
|
||
.group_7 {
|
||
margin-top: 52.5rpx;
|
||
padding: 0 9.38rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 13.86rpx 0 13.52rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 75rpx;
|
||
width: 155.63rpx;
|
||
height: 56.25rpx;
|
||
border: solid 1.88rpx #cbcbcb;
|
||
}
|
||
|
||
.text_18 {
|
||
line-height: 25.13rpx;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
padding: 13.46rpx 0 13.5rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 75rpx;
|
||
width: 155.63rpx;
|
||
height: 56.25rpx;
|
||
border: solid 1.88rpx #ffaaa5;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
@import url("../common/css/global.css");
|
||
</style> |