jiangchengfeiyi-xiaochengxu/pages/mine/mineorders/mineorders.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 Status = ref({
		orderStatus: '全部',
		orders: [],
		displayedOrders: [],
	});
	const orderStatus = ''
	const currentColor = ref(0);
	const isSelected = (tab) => Status.value.orderStatus === tab;
	onMounted(async () => {
		await Getorder();
		Status.value.displayedOrders = Status.value.orders;
	});
	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.value.userInfo.id,
				id: userInfo.id,
			},
		});
		if (res.data.code === 1) {
			console.log('res.data.data--->',res.data.data);
			Status.value.orders = res.data.data;
		} else {
			console.log('没拿到用户数据');
		}
	};
	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 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>