<template>
	<!-- 顶部菜单 -->
	<view class="tagClass">
		<view class="tag-item" @tap="pageData.status.active=index" :class="{active:index===pageData.status.active}"
			v-for="(item,index) in pageData.status.list" :key="index">
			{{item}}
		</view>
	</view>
	<!-- 搜搜 -->
	<view class="search">
		<view class="inputsearch">
			搜索优惠券名称
		</view>
		<view class="searchBtn">
			搜索
		</view>
	</view>
	<!-- 内容 -->
	<view class="couponContent">
		<view class="couponContentList">
			<view class="couponContentListTop">
				<view>
					充值20元优惠券
				</view>
				<view>
					ID:258792
				</view>
			</view>
			<view class="couponContentListcontent">
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						券类型
					</view>
					<view>
						店铺领取可用
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view class="JQclass">

				</view>
			</view>
			<view class="couponContentListcontent2">
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
			</view>
			<view class="couponContentListbottom">
				<button>编辑</button>
				<button>删除</button>
				<button>同步</button>
			</view>
		</view>
	</view>
	<view class="couponContent">
		<view class="couponContentList">
			<view class="couponContentListTop">
				<view>
					充值20元优惠券
				</view>
				<view>
					ID:258792
				</view>
			</view>
			<view class="couponContentListcontent">
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						券类型
					</view>
					<view>
						店铺领取可用
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view class="JQclass">

				</view>
			</view>
			<view class="couponContentListcontent2">
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
			</view>
			<view class="couponContentListbottom">
				<button>编辑</button>
				<button>删除</button>
				<button>同步</button>
			</view>
		</view>
	</view>
	<view class="couponContent">
		<view class="couponContentList">
			<view class="couponContentListTop">
				<view>
					充值20元优惠券
				</view>
				<view>
					ID:258792
				</view>
			</view>
			<view class="couponContentListcontent">
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						券类型
					</view>
					<view>
						店铺领取可用
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view>
					<view>
						使用门槛门槛
					</view>
					<view>
						满200.00元减20.00元
					</view>
				</view>
				<view class="JQclass">

				</view>
			</view>
			<view class="couponContentListcontent2">
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
				<view class="">
					<view class="">
						1000
					</view>
					<view class="">
						发放数量
					</view>
				</view>
			</view>
			<view class="couponContentListbottom">
				<button>编辑</button>
				<button>删除</button>
				<button>同步</button>
			</view>
		</view>
	</view>
	<view class="bottomPop">
		<button @click="adddiscount">+添加满减优惠券</button>
	</view>
</template>

<script setup>
	import go from '@/commons/utils/go.js'
	import {
		reactive,
		ref,
		toRef,
		watch
	} from 'vue';
	const pageData = reactive({
		status: {
			list: ['全部', '储存中储存中', '已取完', '已过期', '储存中', '已取完', '已过期', ],
			active: 0,
		}
	})
	const adddiscount = ()=>{
		go.to('PAGES_COUPON_DISCOUNTCOUPONS')
	}
</script>

<style lang='scss'>
	.tagClass {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-top: 44rpx;

		.tag-item {
			display: inline-block;
			padding: 8rpx 22rpx;
			margin-left: 16rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			text-align: center;
			color: #666;
			background: #F7F7FA;

			&.active {
				background: #E6F0FF;
				color: $my-main-color;
			}
		}
	}

	.tagClass::-webkit-scrollbar {
		display: none;
	}

	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 32rpx;

		.inputsearch {
			color: #999999;
			width: 542rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #F9F9F9;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
		}

		.searchBtn {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-left: 32rpx;
			text-align: center;
			color: #FFFFFF;
			background: #318AFE;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
		}
	}

	.couponContent {
		background-color: #f9f9f9;
		padding: 32rpx 0;

		.couponContentList {
			width: 694rpx;
			height: 544rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin: 0 auto;
			padding: 32rpx 24rpx;

			.couponContentListTop {
				display: flex;
				justify-content: space-between;
				align-items: center;

				>view:last-child {
					width: 98rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					background: #F7F7FA;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 18rpx;
					color: #999999;

				}
			}

			.couponContentListcontent {
				margin-top: 24rpx;
				padding-top: 1rpx;
				width: 646rpx;
				height: 228rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				position: relative;

				>view {
					display: flex;
					align-items: center;
					margin-top: 12rpx;

					>view:first-child {
						width: 180rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						text-align: right;
					}

					>view:last-child {
						margin-left: 48rpx;

						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 0rpx;

					}
				}

				.JQclass {
					width: 48rpx;
					height: 48rpx;
					background-color: #318AFE;
					position: absolute;
					right: 48rpx;
					top: 90rpx;
				}
			}

			.couponContentListcontent2 {
				display: flex;
				justify-content: space-between;
				text-align: center;
				padding-top: 24rpx;
			}

			.couponContentListbottom {
				margin-top: 24rpx;

				>button {
					float: right;
					width: 140rpx;
					height: 56rpx;
					margin-right: 22rpx;
					line-height: 56rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #E5E5E5;
					font-size: 28rpx;
				}

				>button:first-child {
					background-color: #318afe;
					color: #fff;
				}
			}
		}
	}

	.bottomPop {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 150rpx;
		width: 100%;
		background-color: #fff;

		>button {
			width: 530rpx;
			margin: 30rpx 0;
			margin-left: 50%;
			transform: translateX(-50%);
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			background: #318AFE;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}
</style>