486 lines
10 KiB
Vue
486 lines
10 KiB
Vue
<template>
|
||
<view class="flex-col page">
|
||
<view class="flex-col section">
|
||
<view class="flex-col justify-start section_2">
|
||
<view class="flex-row justify-center items-center section_3">
|
||
<image class="image"
|
||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=49977e5fbfb65cc3b62ce79b9d6705a2.png" />
|
||
<text class="ml-4 font text">搜索订单</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col section_4">
|
||
<view class="flex-row justify-between self-stretch group">
|
||
<view class="font_2" :class="{ active: orderStatus === '全部', selected: isSelected('全部') }"
|
||
@click="changeTab('全部')">
|
||
全部
|
||
</view>
|
||
<view class="font_2" :class="{ active: orderStatus === '待支付', selected: isSelected('待支付') }"
|
||
@click="changeTab('待支付')">
|
||
待支付
|
||
</view>
|
||
<view class="font_2" :class="{ active: orderStatus === '待发货', selected: isSelected('待发货') }"
|
||
@click="changeTab('待发货')">
|
||
待发货
|
||
</view>
|
||
<view class="font_2" :class="{ active: orderStatus === '已发货', selected: isSelected('已发货') }"
|
||
@click="changeTab('已发货')">
|
||
已发货
|
||
</view>
|
||
<view class="font_2" :class="{ active: orderStatus === '售后', selected: isSelected('售后') }"
|
||
@click="changeTab('售后')">
|
||
售后
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class=" mt-11">
|
||
<view v-for="(order, index) in Status.displayedOrders" :key="order.id" class="text_7"
|
||
@click="goToText(index)">
|
||
<text class="self-end font_66">等待卖家发货</text>
|
||
<view class="flex-row items-baseline self-stretch group_2">
|
||
<text class="font_4 text_5">订单编号：</text>
|
||
<text class="font_4 text_6 ml-5">E20241005095840091406189</text>
|
||
</view>
|
||
<view class="flex-row self-stretch group_3">
|
||
<!-- <image class="image_2"
|
||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=5875e21da70a62be74e9dcc2c322ece9.png" /> -->
|
||
<view v-for="item in order.orderItemList" :key="item.id">
|
||
<image :src="item.goodSnapshot.goodImg" class="image_2"></image>
|
||
</view>
|
||
<view class="flex-col self-start">
|
||
<view class="name">
|
||
<!-- <text class="font text_7">非遗绒花</text> -->
|
||
<view view v-for="item in order.orderItemList" :key="item.id" class="font text_7">
|
||
{{ item.goodSnapshot.name }}
|
||
</view>
|
||
<!-- <text class="ml-4 font text_8">【材料包】</text> -->
|
||
<view view v-for="item in order.orderItemList" :key="item.id" class=" font text_8">
|
||
【{{ item.goodSnapshot.type }}】
|
||
</view>
|
||
</view>
|
||
<text class="self-start font_4 text_11 mt-11">已选种类：紫色</text>
|
||
</view>
|
||
<view style="margin-left: 130px;">
|
||
<view>
|
||
<view view v-for="item in order.orderItemList" :key="item.id">
|
||
{{ item.goodSnapshot.price }}
|
||
</view>
|
||
</view>
|
||
<text class="mt-22 self-end font text_12">×1</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-end items-center self-stretch group_5 view">
|
||
<text class="font_6 text_13">已优惠：</text>
|
||
<image class="image_3"
|
||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=fdc5706a15c3ea209832fbbc3f8f8100.png" />
|
||
<view class="group_6">
|
||
<text class="font_7 text_14">50</text>
|
||
<text class="font_5">.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-end items-center self-stretch group_5 view_2">
|
||
<text class="font_6 text_15">需付款：</text>
|
||
<image class="image_3"
|
||
src="https://ide.code.fun/api/image?token=672dbef4c471750012de4bf6&name=ea05ec17023763edb8cfe919508e0459.png" />
|
||
<view class="group_7">
|
||
<text class="font_7 text_16">88</text>
|
||
<text class="font_5 text_17">.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-row justify-end self-stretch group_5 view_3">
|
||
<view class="flex-col justify-start items-center text-wrapper">
|
||
<!-- <text class="font text_18">取消订单</text> -->
|
||
<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-col justify-start items-center text-wrapper_2 ml-21">
|
||
<text class="font_3 text_19">联系客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
toRaw
|
||
} from 'vue';
|
||
import {
|
||
baseUrl,
|
||
testUrl,
|
||
suiUrl
|
||
} from '@/api/request';
|
||
const currentColor = ref(0);
|
||
onMounted(async () => {
|
||
await Getorder();
|
||
Status.displayedOrders = Status.orders;
|
||
});
|
||
const userInfo = ref({
|
||
userInfo: uni.getStorageSync('userInfo'),
|
||
});
|
||
const Getorder = async () => {
|
||
const res = await uni.request({
|
||
url: baseUrl + '/order/list',
|
||
method: 'POST',
|
||
data: {
|
||
// id:userInfo.value.userInfo.id,
|
||
id: 215,
|
||
},
|
||
});
|
||
if (res.data.code === 1) {
|
||
Status.value.orders = res.data.data;
|
||
} else {
|
||
console.log('没拿到用户数据');
|
||
}
|
||
};
|
||
const Status = ref({
|
||
orderStatus: '全部',
|
||
orders: [],
|
||
displayedOrders: [],
|
||
});
|
||
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 isSelected = (tab) => Status.value.orderStatus === tab;
|
||
|
||
const goToText = (index) => {
|
||
console.log('下标-->', index);
|
||
uni.navigateTo({
|
||
url: '../../../pages/mine/OrderDetails/OrderDetails?info=' + JSON.stringify(Status.value.displayedOrders[index]),
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ml-5 {
|
||
margin-left: 9.38rpx;
|
||
}
|
||
|
||
.mt-11 {
|
||
margin: 10px 10px 0 10px;
|
||
}
|
||
|
||
.ml-21 {
|
||
margin-left: 39.38rpx;
|
||
}
|
||
.name{
|
||
|
||
}
|
||
.page {
|
||
padding-bottom: 1003.13rpx;
|
||
background-color: #f8e8c1;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
|
||
.section {
|
||
background-color: #fffef8;
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 15rpx 0;
|
||
background-color: #f5f5dc;
|
||
}
|
||
|
||
.section_3 {
|
||
margin: 0 35.63rpx;
|
||
padding: 9.38rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 75rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 37.5rpx;
|
||
height: 37.5rpx;
|
||
}
|
||
|
||
.section_4 {
|
||
padding-left: 33.75rpx;
|
||
padding-right: 30rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
|
||
|
||
.group {
|
||
padding: 22.5rpx 0 18.75rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 27.81rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
|
||
// .font_2.selected {
|
||
// background-color: brown;
|
||
// color: white;
|
||
// }
|
||
.font_2.selected {
|
||
position: relative;
|
||
}
|
||
|
||
.font_2.selected::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -5px; // 调整线条距离底部的距离
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px; // 调整线条的粗细
|
||
background-color: #f08b00; // 调整线条颜色
|
||
transition: all 0.3s ease; // 添加过渡效果
|
||
}
|
||
.text_2 {
|
||
line-height: 27.66rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
line-height: 27.69rpx;
|
||
}
|
||
|
||
.text_4 {
|
||
line-height: 27.71rpx;
|
||
}
|
||
|
||
.section_6 {
|
||
margin: 15rpx 15rpx;
|
||
padding: 30rpx 18.75rpx 20.63rpx 24.38rpx;
|
||
background-color: #fffef8;
|
||
border-radius: 18.75rpx;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.34rpx;
|
||
color: #fb8b05;
|
||
}
|
||
.font_66 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.34rpx;
|
||
color: #fb8b05;
|
||
float: right;
|
||
}
|
||
|
||
.group_2 {
|
||
margin-top: 18.75rpx;
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 22.5rpx;
|
||
font-family: Open Sans;
|
||
line-height: 21.99rpx;
|
||
color: #818181;
|
||
}
|
||
|
||
.text_5 {
|
||
line-height: 20.85rpx;
|
||
}
|
||
|
||
.text_6 {
|
||
line-height: 16.54rpx;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.image_2 {
|
||
border-radius: 9.38rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
.text_11 {
|
||
line-height: 20.79rpx;
|
||
}
|
||
|
||
.group_4 {
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.text_9 {
|
||
margin-left: 26.25rpx;
|
||
color: #323232;
|
||
font-size: 33.75rpx;
|
||
font-family: Open Sans;
|
||
font-weight: 600;
|
||
line-height: 24.88rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 30rpx;
|
||
height: 26.25rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
margin-left: -90rpx;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 19.39rpx;
|
||
font-weight: 600;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_10 {
|
||
margin-left: 60rpx;
|
||
line-height: 19.29rpx;
|
||
}
|
||
|
||
.font {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.34rpx;
|
||
color: #323232;
|
||
}
|
||
|
||
.text_8 {
|
||
line-height: 24.43rpx;
|
||
background-color: #fffef8;
|
||
}
|
||
|
||
.text_7 {
|
||
// line-height: 24.43rpx;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
background-color: #fffef8;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.text {
|
||
color: #c0c0c0;
|
||
}
|
||
|
||
.text_12 {
|
||
line-height: 18.73rpx;
|
||
}
|
||
|
||
.group_5 {
|
||
padding: 0 11.25rpx;
|
||
}
|
||
|
||
.view {
|
||
margin-top: 7.5rpx;
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 26.25rpx;
|
||
font-family: Open Sans;
|
||
line-height: 24.34rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.text_13 {
|
||
margin-right: -7.5rpx;
|
||
line-height: 24.09rpx;
|
||
}
|
||
|
||
.group_6 {
|
||
line-height: 22.05rpx;
|
||
height: 22.11rpx;
|
||
}
|
||
|
||
.font_7 {
|
||
font-size: 30rpx;
|
||
font-family: Open Sans;
|
||
line-height: 21.99rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.text_14 {
|
||
color: #323232;
|
||
line-height: 22.05rpx;
|
||
}
|
||
|
||
.view_2 {
|
||
margin-top: 18.75rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
margin-right: -7.5rpx;
|
||
line-height: 24.23rpx;
|
||
}
|
||
|
||
.group_7 {
|
||
line-height: 21.99rpx;
|
||
height: 22.05rpx;
|
||
}
|
||
|
||
.text_16 {
|
||
color: #fb8b05;
|
||
}
|
||
|
||
.text_17 {
|
||
color: #fb8b05;
|
||
}
|
||
|
||
.view_3 {
|
||
margin-top: 45rpx;
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 15rpx 0;
|
||
background-color: #fffef8;
|
||
border-radius: 75rpx;
|
||
width: 155.63rpx;
|
||
height: 56.25rpx;
|
||
border-left: solid 1.88rpx #cbcbcb;
|
||
border-right: solid 1.88rpx #cbcbcb;
|
||
border-top: solid 1.88rpx #cbcbcb;
|
||
border-bottom: solid 1.88rpx #cbcbcb;
|
||
}
|
||
|
||
.text_18 {
|
||
line-height: 24.15rpx;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
padding: 15rpx 0;
|
||
background-color: #fffef8;
|
||
border-radius: 75rpx;
|
||
width: 155.63rpx;
|
||
height: 56.25rpx;
|
||
border-left: solid 1.88rpx #fb8b05;
|
||
border-right: solid 1.88rpx #fb8b05;
|
||
border-top: solid 1.88rpx #fb8b05;
|
||
border-bottom: solid 1.88rpx #fb8b05;
|
||
}
|
||
|
||
.text_19 {
|
||
line-height: 24.36rpx;
|
||
}
|
||
|
||
@import url(/common/css/global.css);
|
||
</style> |