<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" @click="optionData.type === 'pay'?jump():null">
					<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 === 'pay'">
							<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 === 'coupon'">
							<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;
			console.log(option)
			self.initial();
		},
		methods: {
			initial() {
				let self = this;
				switch (self.optionData.type) {
					case 'coupon': //优惠券
						self.title = '优惠券';
						break;
					case 'pay': //支付
						self.title = '确认支付';
						break;
				}
			},
			jump() {
				console.log('22222')
				// 获取所有页面栈实例列表
				let pages = getCurrentPages();

				// 上一页页面实例
				let prevPage = pages[pages.length - 2];

				// 修改上一页data里面的times参数值为100
				prevPage.$vm.times = 100;

				//uni.navigateTo跳转的返回，默认1为返回上一级
				uni.navigateBack({
					delta: 1
				});
				console.log('1111111')
			}
		}
	};
</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>