<!-- 优惠劵 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #3D444E; font-size: 28rpx">优惠劵</view>
			</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-kefu icon-navigation"></text>
			<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
		</view>
		<view style="width:100%;height:30rpx;"></view>
		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
					<!-- 卡片 -->
					<view class="card-box" v-for="i in 10">
						<view class="ss-flex-2">
							<view class="coupon coupon-wave-left  coupon-wave-right coupon-yellow">
								<view class="ss-flex-2 ss-col-center" style="margin-top: 30rpx;margin-left: 10rpx;">
									<text class="textIcon icon-renminbi1688" style="font-size:60rpx;color:#fff;font-weight:650;"></text>
									<view style="color: #fff; font-size: 50rpx;font-weight:650;">100</view>
								</view>
								<view class="message-box">满500可用</view>
							</view>
							<view class="ss-flex-1 coupon1 coupon-wave-left1  coupon-wave-right1 coupon-yellow1">
								<view class="ss-flex-2 ss-col-center" style="margin-left: 30rpx;margin-top: 20rpx;">
									<view class="red-box">通用劵</view>
									<view style="font-size: 20rpx;margin-left: 20rpx;">新人注册10元劵</view>
								</view>
								<view class="ss-flex-2 ss-col-center">
									<view class="ss-flex-1"></view>
									<!-- <radio
									  :checked="agreeWith"
									  color="var(--ui-BG-Main)"
									  style="transform: scale(0.8)"
									  activeBackgroundColor="#FC495C"
									  @tap.stop="onAgree"
									/> -->
									<view class="goPath" @click="goPath">去使用</view>
								</view>
								<view style="font-size: 20rpx;margin-left: 40rpx;color:#666A6F;">有效期至：2024-09-15</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="bt-box" @click="goPath">去使用</view> -->
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();
	// 勾选同意
	const agreeWith=ref(false)
	function onAgree(){
		agreeWith.value=!agreeWith.value
	}

	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myHome/myHome',
		});
	};
	// 返回上一页
	const goPath=async()=>{
		uni.navigateBack({
			delta:1
		});
	}

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.goPath{
		padding:5rpx 20rpx;
		font-size:20rpx;
		background-color: #25ACE0;
		color: #fff;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
	.bt-box{
		padding:30rpx;
		text-align: center;
		background-color: #25ACE0;
		color: #fff;
		font-size: 30rpx;
	}
	.red-box{
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		background-color: red;
		font-size: 20rpx;
		color: #fff;
	}
	.message-box{
		color: #fff;
		 font-size: 26rpx;
		 font-weight:650;
		 margin-left: 10rpx;
		 margin-top: 10rpx;
		 text-align: center;
	}
	// ==========7777
	.coupon1 {
		position: relative;
		height: 160rpx;
		margin: 0 auto;
		overflow: hidden;
		margin-left: -2rpx;
		box-sizing: border-box;
	}

	/* 优惠券背景颜色 */

	.coupon-yellow1 {
		background-color: #FFF8F0;
	}

	/* 左边框的波浪  */

	.coupon-wave-right1::before,
	.coupon-wave-left1::after {
		content: '';
		position: absolute;
		top: 50%;
		margin-top: -90rpx;
		height: 115%;
		width: 28rpx;
		background-image: radial-gradient(#FBD9C0 0, #FBD9C0 8rpx, transparent 8rpx);
		background-size: 28rpx 28rpx;
		background-position: center center;
		z-index: 1;
	}

	.coupon-wave-left1::before {
		left: -11rpx;
	}

	.coupon-wave-left1::after {
		left: -11rpx;
	}

	// =====
	.coupon {
		position: relative;
		height: 160rpx;
		width: 200rpx;
		margin: 0 auto;
		overflow: hidden;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		margin-left: -100rpx;
	}

	/* 优惠券背景颜色 */

	.coupon-yellow {
		background-color: #E50112;
	}

	/* 左边框的波浪  */

	.coupon-wave-right::before,
	.coupon-wave-left::after {
		content: '';
		position: absolute;
		top: 50%;
		margin-top: -90rpx;
		height: 116%;
		width: 28rpx;
		background-image: radial-gradient(#FBD9C0 0, #FBD9C0 8rpx, transparent 8rpx);
		background-size: 28rpx 28rpx;
		background-position: center center;
		z-index: 1;
	}

	.coupon-wave-left::before {
		right: -11rpx;
	}

	.coupon-wave-left::after {
		right: -11rpx;
	}

	// =========
	.card-box {
		width: 80%;
		min-height: 160rpx;
		background-color: #FBD9C0;
		margin-left: 20%;
		margin-bottom:20rpx;
		padding: 10rpx 0rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 20rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		position: relative;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>