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

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="Coupons">
		<view class="tops">

		</view>
		<view class="secondBright-header">
			<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
				可用券
			</view>
			<view class="header-right" :class="{headerActive:headerindex==2}" @click="add">
				失效券
			</view>
		</view>
		<scroll-view class="secondaryCard-auto" scroll-y="true">
			<view class="card" v-for="(item,index) in demos" :key="item.id">
				<view class="boxs" v-if="item.status===1&& headerindex===1">
					<img class="card-l" src="" alt="" />
					<view class="card-c">
						<view class="t">
							<text class="w"><text class="blacks">4</text>次卡</text><text class="reds">团购券</text>
						</view>
						<view class="c" v-if="item.msgCode===1">
							每次上线尽可使用<text class="color-r">20</text>分钟
						</view>
						<view class="c" v-if="item.msgCode===2">
							抵用停车金额<text class="color-r">5</text>元
						</view>
						<view class="c1" v-if="item.msgCode===3">
							<text class="lefts">现价：<text class="color-r">20</text>元</text>
							<text class="rights">原价：20元</text>
							<view class="line">
						
							</view>
						</view>
						<view class="d">
							有效期至 2024-05-06
						</view>
					</view>
					<view class="card-r" v-if="item.status===1">
						使用
					</view>
					<view class="card-r1" v-if="item.status===2">
					
					</view>
				</view>
				<view class="boxs" v-if="item.status===2&&headerindex===2">
					<img class="card-l" src="" alt="" />
					<view class="card-c">
						<view class="t">
							<text class="w"><text class="blacks">4</text>次卡</text><text class="reds">团购券</text>
						</view>
						<view class="c" v-if="item.msgCode===1">
							每次上线尽可使用<text class="color-r">20</text>分钟
						</view>
						<view class="c" v-if="item.msgCode===2">
							抵用停车金额<text class="color-r">5</text>元
						</view>
						<view class="c1" v-if="item.msgCode===3">
							<text class="lefts">现价：<text class="color-r">20</text>元</text>
							<text class="rights">原价：20元</text>
							<view class="line">
						
							</view>
						</view>
						<view class="d">
							有效期至 2024-05-06
						</view>
					</view>
					<view class="card-r" v-if="item.status===1&&headerindex===1">
						使用
					</view>
					<view class="card-r1" v-if="item.status===2&&headerindex===2">
					
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const headerindex = ref(1)
	const demos = ref([{
		id:1,
		msgCode:1,
		status:1,
		price:0,
		min:0,
		oldPrice:0,
		diPrice:0,
		times:'2024-05-06'
	},{
		id:2,
		msgCode:2,
		status:2,
		price:20,
		min:0,
		oldPrice:20,
		diPrice:0,
		times:'2024-05-06'
	},{
		id:3,
		msgCode:3,
		status:1,
		price:20,
		diPrice:0,
		min:0,
		oldPrice:20,
		times:'2024-05-06'
	}
	])
	const titles = ref('优惠券')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const remo = () => {
		headerindex.value = 1
	}
	const add = () => {
		headerindex.value = 2
	}
</script>

<style lang="scss">
	.Coupons {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;
		overflow: hidden;

		.tops {
			width: 100%;
			height: 11%;
		}

		.secondBright-header {
			width: 100%;
			height: 80rpx;
			display: flex;
			font-size: 30rpx;
			color: black;
			background-color: #fff;

			.header-left {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.header-right {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.headerActive {
				border-bottom: 6rpx solid #009dd9;
				color: #009dd9;
			}
		}

		.secondaryCard-auto {
			width: 100%;
			height: 95%;
			margin-top: 15rpx;

			.card {
				width: 88%;
			margin-left: 50%;
			transform: translateX(-50%);

				.boxs{
					width: 100%;
					height: 200rpx;
					background-color: #fff;
				
					margin-top: 45rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.card-l {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #666;
						margin-left: 30rpx;
					}
					
					.card-c {
						width: 50%;
						height: 200rpx;
						font-size: 28rpx;
					
						.t {
							width: 100%;
							height: 66rpx;
							line-height: 66rpx;
							display: flex;
							margin-top: 6rpx;
							justify-content: space-between;
					
							.w {
								font-weight: 700;
								letter-spacing: 5rpx;
					
								.blacks {
									font-size: 35rpx;
								}
					
							}
					
							.reds {
								.color-r {
									color: #da0722;
									font-size: 35rpx;
								}
							}
					
						}
					
						.c {
							width: 100%;
							height: 66rpx;
							line-height: 66rpx;
							font-size: 26rpx;
					
							.color-r {
								color: #da0722;
								font-size: 35rpx;
							}
					
						}
					
						.c1 {
							width: 100%;
							height: 66rpx;
							position: relative;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 26rpx;
							box-sizing: border-box;
							padding-right: 20rpx;
					
							.color-r {
								color: #da0722;
								font-size: 35rpx;
							}
					
							.line {
								position: absolute;
								right: 20rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 100rpx;
								height: 6rpx;
								background-color: #666;
								transform: rotateZ(20deg);
							}
						}
					
						.d {
					
							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							box-sizing: border-box;
							padding-top: 10rpx;
							font-size: 26rpx;
						}
					}
					
					.card-r {
						width: 160rpx;
						height: 50rpx;
						background-color: #027db4;
						text-align: center;
						line-height: 50rpx;
						margin-right: 20rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						color: white;
					}
					
					.card-r1 {
						width: 120rpx;
						height: 120rpx;
						background-color: #027db4;
						text-align: center;
						line-height: 50rpx;
						margin-left: 20rpx;
						margin-right: 40rpx;
						border-radius: 50%;
						color: white;
					}
				}
			}
		}
	}
</style>