<template>
	<view class="index">
		<com-navbar :title="title" :titleStyle="{ color: '#000000', fontSize: '32rpx' }" />
		<view class="index-content">
			<view class="index-content-item">
				<view class="index-content-item-nav baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>可用优惠券(2)</view>
				</view>
				<view class="index-content-item-qu">
					<image class="index-content-item-qu-bg" src="@/static/icon/xy01.png" mode=""></image>
					<view class="index-content-item-qu-bl">
						<text class="index-content-item-qu-bl-tl">满减优惠券</text>
						<view class="index-content-item-qu-bl-lk">
							<view class="index-content-item-qu-bl-lk-t">
								<text>￥</text>
								<text>200</text>
								优惠券
							</view>
							<view class="index-content-item-qu-bl-lk-b">有效期：2022.3.1-2022.12.31</view>
						</view>
						<template v-if="optionData.type === 'coupon'">
							<view class="index-content-item-qu-bl-rk">
								<view class="index-content-item-qu-bl-rk-a">订单金额满</view>
								<view class="index-content-item-qu-bl-rk-b">9999元</view>
								<view class="index-content-item-qu-bl-rk-c">可使用</view>
								<view class="index-content-item-qu-bl-rk-d">当前可使用</view>
							</view>
						</template>
						<template v-if="optionData.type === 'pay'">
							<view class="index-content-item-qu-bl-rk">
								<view class="index-content-item-qu-bl-rk-a index-content-item-qu-bl-rk-axl">订单金额满</view>
								<view class="index-content-item-qu-bl-rk-b index-content-item-qu-bl-rk-bxl">9999元</view>
								<view class="index-content-item-qu-bl-rk-c index-content-item-qu-bl-rk-cxl">可使用</view>
								<view class="index-content-item-qu-bl-rk-d index-content-item-qu-bl-rk-dxl">去使用</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="index-content-item">
				<view class="index-content-item-nav index-content-item-navx baiyin-flex baiyin-flex-c-b">
					<text></text>
					<view>不可用优惠券(2)</view>
				</view>
				<view class="index-content-item-qu">
					<image class="index-content-item-qu-bg" src="@/static/icon/xy02.png" mode=""></image>
					<view class="index-content-item-qu-bl">
						<text class="index-content-item-qu-bl-tl index-content-item-qu-bl-tlx">满减优惠券</text>
						<view class="index-content-item-qu-bl-lk">
							<view class="index-content-item-qu-bl-lk-t index-content-item-qu-bl-lk-tx">
								<text>￥</text>
								<text>200</text>
								优惠券
							</view>
							<view class="index-content-item-qu-bl-lk-b index-content-item-qu-bl-lk-bx">有效期：2022.3.1-2022.12.31</view>
						</view>
						<view class="index-content-item-qu-bl-rk">
							<view class="index-content-item-qu-bl-rk-a index-content-item-qu-bl-rk-ax">订单金额满</view>
							<view class="index-content-item-qu-bl-rk-b index-content-item-qu-bl-rk-bx">200元</view>
							<view class="index-content-item-qu-bl-rk-c index-content-item-qu-bl-rk-cx">可使用</view>
							<view class="index-content-item-qu-bl-rk-d index-content-item-qu-bl-rk-dx">不可用</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiBaseConfig from '@/config/index.js';
export default {
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			scrollTopHeader: 0,
			optionData: {},
			title: ''
		};
	},
	onLoad(option) {
		let self = this;
		self.optionData = option;
		self.initial();
	},
	methods: {
		initial() {
			let self = this;
			switch (self.optionData.type) {
				case 'coupon': //优惠券
					self.title = '优惠券';
					break;
				case 'pay': //支付
					self.title = '确认支付';
					break;
			}
		}
	}
};
</script>

<style>
page {
	background-color: #f7f8f9;
}
</style>
<style lang="scss" scoped>
.index {
	&-content {
		margin: 24rpx 20rpx;
		width: calc(100% - 20rpx * 2);
		&-item {
			margin-bottom: 30rpx;
			&-nav {
				margin-bottom: 20rpx;
				> text {
					display: inline-block;
					width: 6rpx;
					height: 36rpx;
					background: #2c66ff;
					border-radius: 3rpx;
					margin-right: 10rpx;
				}
				> view {
					font-size: 28rpx;
					font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
					font-weight: 500;
					color: #333333;
					> text {
						color: #2c66ff;
					}
				}
			}
			&-nav:last-child {
				margin-bottom: 0rpx;
			}
			&-navx {
				> text {
					background: #666666;
				}
			}
			&-qu {
				width: 710rpx;
				height: 200rpx;
				background: #ffffff;
				box-shadow: 1rpx 1rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				position: relative;
				&-bg,
				&-bl {
					width: 710rpx;
					height: 200rpx;
				}
				&-bg {
					position: absolute;
					left: 0rpx;
					top: 0rpx;
				}
				&-bl {
					position: relative;
					> text,
					> view {
						position: absolute;
					}
					&-tl {
						font-size: 20rpx;
						font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
						font-weight: 400;
						color: #4384ff;
						top: 4rpx;
						left: 62rpx;
					}
					&-tlx {
						color: #666666;
					}
					&-lk {
						bottom: 20rpx;
						left: 20rpx;
						&-t {
							font-size: 30rpx;
							font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
							font-weight: 400;
							color: #333333;
							> text:nth-child(1) {
								font-size: 40rpx;
								font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
								font-weight: 500;
								color: #2c66ff;
							}
							> text:nth-child(2) {
								font-size: 72rpx;
								font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
								font-weight: bold;
								color: #2c66ff;
								margin-right: 20rpx;
							}
						}
						&-tx {
							color: #999999;
							> text:nth-child(1) {
								color: #999999;
							}
							> text:nth-child(2) {
								color: #999999;
							}
						}
						&-b {
							font-size: 20rpx;
							font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
							font-weight: 400;
							color: #333333;
						}
						&-bx {
							color: #999999;
						}
					}
					&-rk {
						width: 170rpx;
						height: 200rpx;
						right: 0rpx;
						top: 0rpx;
						> view {
							text-align: center;
						}
						&-a {
							font-size: 20rpx;
							font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
							font-weight: 400;
							color: #ffffff;
							margin-top: 26rpx;
						}
						&-ax {
							color: #999999;
							margin-top: 21rpx;
						}
						&-axl {
							margin-top: 21rpx;
						}
						&-b {
							font-size: 30rpx;
							font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
							font-weight: 500;
							color: #ffffff;
							margin-top: 10rpx;
						}
						&-bx {
							color: #666666;
							margin-top: 5rpx;
						}
						&-bxl {
							margin-top: 5rpx;
						}
						&-c,
						&-d {
							font-size: 20rpx;
							font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
							font-weight: 400;
							color: #ffffff;
							margin-top: 10rpx;
						}
						&-cx {
							color: #999999;
							margin-top: 5rpx;
						}
						&-cxl {
							margin-top: 5rpx;
						}
						&-d {
							font-weight: 500;
							margin-top: 21rpx;
						}
						&-dx {
							width: 120rpx;
							border: 1rpx solid #999999;
							margin: 0 calc((100% - 120rpx - 2rpx) / 2);
							height: 44rpx;
							line-height: 44rpx;
							border-radius: 10rpx;
							color: #999999;
							margin-top: 17rpx;
						}
						&-dxl {
							width: 120rpx;
							height: 44rpx;
							line-height: 44rpx;
							margin: 0 calc((100% - 120rpx) / 2);
							background: #ffffff;
							border-radius: 10rpx;
							color: #4486ff;
							background-color: #ffffff;
							margin-top: 17rpx;
						}
					}
				}
			}
		}
	}
}
</style>