WashingCar-frontend-Ver3.0/pages/orderForm/orderForm.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="orderForm">
		<view class="tops">
			
		</view>
		<view class="orderForm-h">
			<view class="txt" v-for="(item,index) in tag" :key="index" @click="tagBtn(index)">
				<text class="txt-a" :class='{active:tagIndex===index}'>{{item}}</text>
			</view>
		</view>
		<view class="ding-h">

		</view>
		<view class="orderForm-b" v-for="(item,index) in demos" :key="item.id">
			<view class="orderForm-b-t">
				<text>订单:xxxxxxxxxxxxxx</text> <text class="blues" v-if="item.type===1">进行中</text>
				<text class="greens" v-if="item.type===2">已完成</text>
				<text class="greens" v-if="item.type===3">已退款</text>
				<text class="reds" v-if="item.type===4">退款失败</text>

			</view>
			<view class="orderForm-b-b">
				<img class="b-b-i" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<view class="b-b-r">
					<view class="b-b-r-t">
						<text class="maxs">{{item.networkName}}</text><text>设备编号:{{item.machine}}</text>
					</view>
					<view class="b-b-r-b">
						{{item.attribute}}
					</view>
					<view class="b-b-r-b">
						2024-05-10 13:59:24
					</view>
				</view>
			</view>
			<view class="orderForm-b-m">
				<text>订单金额：{{item.orderPrice}}云</text> <text class="blues">实收：{{item.price}}元</text>
				<view class="btns" v-if="item.type===1">
					申请退款
				</view>
				<view class="btnst" v-if="item.type===3">
					申请退款
				</view>
				<view class="btns" v-if="item.type===4">
					查看原因
				</view>
			</view>
		</view>
		<view class="ding">
			
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const tagIndex = ref(6)
	const tag = ref(['全部', '进行中', '已完成', '已退款', '退款失败'])
	const demos = ref([])
	const titles = ref('洗车订单')
	const bgcolor= ref('#fff')
	const color = ref('#000')
	const tagBtn = (index) => {
		switch (index) {
			case 0:
				demos.value = [{
					id: 1,
					orderId: 12345678910,
					//进行中
					type: 1,
					networkName: "杭州网点1",
					machine: 1,
					attribute: "6元10分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 1
				}, {
					id: 2,
					orderId: 12345678910,
					//已完成
					type: 2,
					networkName: "杭州网点2",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 2
				}, {
					id: 3,
					orderId: 12345678910,
					//已退款
					type: 3,
					networkName: "杭州网点3",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 3
				}, {
					id: 4,
					orderId: 12345678910,
					//退款失败
					type: 4,
					networkName: "杭州网点3",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 4
				}];
				tagIndex.value = index;
				break;
			case 1:
				tagIndex.value = index;
				demos.value = [{
					id: 1,
					orderId: 12345678910,
					//进行中
					type: 1,
					networkName: "杭州网点1",
					machine: 1,
					attribute: "6元10分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 1
				}];
				break;
			case 2:
				tagIndex.value = index;
				demos.value = [{
					id: 2,
					orderId: 12345678910,
					//已完成
					type: 2,
					networkName: "杭州网点2",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 2
				}];
				break;
			case 3:
				tagIndex.value = index;
				demos.value = [{
					id: 3,
					orderId: 12345678910,
					//已退款
					type: 3,
					networkName: "杭州网点3",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 3
				}];
				break;
			case 4:
				tagIndex.value = index;
				demos.value = [{
					id: 4,
					orderId: 12345678910,
					//退款失败
					type: 4,
					networkName: "杭州网点3",
					machine: 1,
					attribute: "10元20分钟套餐",
					orderPrice: 8,
					price: 8,
					btnType: 4
				}];
				break;
			default:
				uni.showToast({
					icon: "none",
					title: "异常错误"
				})

		}
	}
	tagBtn(0);
</script>

<style lang="scss">
	.orderForm {
		width: 100%;
		// height: 100%;
		position: absolute;
		background-color: #f2f2f2;
	
		.orderForm-h {
			margin-top: 160rpx;
			position: fixed;
			top: 0rpx;
			width: 100%;
			height: 84rpx;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;

			.txt {
				width: 25%;
				height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				margin-right: 20rpx;
				line-height: 84rpx;

				.txt-a {
					box-sizing: border-box;
					padding-top: 5rpx;
					height: 80rpx;
					display: inline-block;
				}

			}

			.active {
				border-bottom: 8rpx solid #169bd5;
			}
		}

		.ding-h {
			width: 100%;
			height: 250rpx;
		}

		.orderForm-b {
			width: 90%;
			position: relative;
			// height: 500rpx;
			background-color: white;
			margin-top: 20rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.orderForm-b-t {
				width: 92%;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				box-sizing: border-box;
				padding-left: 5rpx;
				padding-right: 5rpx;
				border-bottom: 2rpx solid #eee;

				.blues {
					color: blue;
				}

				.greens {
					color: #17bd69;
				}

				.reds {
					color: #d9001b;
				}
			}

			.orderForm-b-b {
				width: 96%;
				height: 240rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;

				.b-b-i {
					width: 180rpx;
					height: 180rpx;
				}

				.b-b-r {
					width: 65%;
					height: 180rpx;
					box-sizing: border-box;
					padding-left: 25rpx;

					.b-b-r-t {
						width: 100%;
						height: 60rpx;
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.maxs {
							font-size: 34rpx;
							font-weight: 700;
						}
					}

					.b-b-r-b {
						width: 100%;
						height: 60rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
					}
				}
			}

			.orderForm-b-m {
				width: 92%;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				box-sizing: border-box;
				padding-left: 5rpx;
				padding-right: 5rpx;
				border-top: 2rpx solid #eee;
				color: #d9001b;

				.btns {
					width: 130rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #d9001b;
					color: white;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					margin-top: 10rpx;
				}

				.btnst {}
			}
		}
		.ding{
			width: 100%;
			height: 100rpx;
		}
	}
</style>