<template>
	<view class="page">
		<u-navbar title="购买会员" :border-bottom="false" :background="bgc" back-icon-color="#333333" title-color='#333333'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="list">
        	<view class="list_item" v-for="(item,index) in huiyuanlist" :key="index"  @click.stop="tobuy(item)">
        		<view class="lt">
        			<text class="discount">{{item.discountValue}}折</text>
        			<view class="decoration">
        				<view class="circle circle1"></view>
        				<view class="circle circle2"></view>
        				<view class="circle circle3"></view>
        			</view>
        		</view>
				<view class="rt">
					<view class="bd">
						<view class="name">
							{{item.name.length > 6 ? item.name.slice(0,6) + '...' : item.name}}
							<text class="hot-tag">热门</text>
						</view>
						<view class="qixian">
							<text class="icon">⏱</text>
							有效期{{item.validDays}}天
						</view>
						<view class="qixian">
							<text class="icon">📍</text>
							仅限{{item.areaName}}使用
						</view>
					</view>
					<view class="cz">
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
        	</view>
        </view>
		<u-mask :show="show" :z-index='100' />
		<view class="buy_box" v-if="show">
			<view class="taocan">
				<view class="top">
					<view class="tit1">
						折扣{{huiyuanobj.discountValue}}折
					</view>
					<view class="tit2">
					   {{huiyuanobj.price}}<span style="font-size: 28rpx;">元</span>
					</view>
				</view>
				<view class="bot">
					<view class="bot_left">
						<view class="txt4">
						  有效期{{huiyuanobj.validDays}}天
						</view>
						<view class="txt3">
							<text v-if="huiyuanobj.enableLimit">每{{huiyuanobj.limitRound}}天频率限制{{huiyuanobj.limitCount}}次,</text> <text v-else>无限制</text> 共可用{{huiyuanobj.limitTotal}}次
						</view>
					</view>
				</view>
			</view>
			<view class="tit_txt">
				说明
			</view>
			<view class="text">
				{{huiyuanobj.description == null ? '暂无说明' : huiyuanobj.description}}
			</view>
			<view class="btns_box">
				<view class="btn1" @click="show=false">
					取消
				</view>
				<view class="btn2" @click="btnkjorder">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#F7F8FA",
                },
				show: false,
				huiyuanobj:{},
				huiyuanlist:[],
				areaId:'',
				channelId:'',
				zfflag:true
			}
		},
		onLoad(option) {
			this.areaId = option.areaId
            this.gethuiyuan()
			this.getchannelid()
		},
		methods: {
			// 请求channelId
			getchannelid(){
				this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}&areaId=${this.areaId}&bstType=3`).then((res) => {
					if (res.code == 200) {
						this.channelId = res.data[0].id
					}
				})
			},
			// 点击支付购买会员卡
			btnkjorder(){
				if(this.zfflag == true){
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					this.zfflag = false
					let vip = this.huiyuanobj
					let data = {
						channelId:this.channelId,
						appId:this.$store.state.appid,
						vipId:this.huiyuanobj.id,
						vip
					}
					this.$u.post(`/app/vipOrder`,data).then(res=>{
						if(res.code == 200){
							let that = this
							if(res.data.needPay == true){
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.payParams.timeStamp,
									nonceStr: res.data.payParams.nonceStr,
									package: res.data.payParams.packageVal,
									signType: res.data.payParams.signType,
									paySign: res.data.payParams.paySign,
									success: (resp) => {
										console.log(resp, '支付成功')
										that.zfflag = true
										that.$u.put(`/app/pay/refreshPayResult?no=${res.data.pay.no}`).then((res) => {
											uni.showToast({
												title: '购买成功',
												icon: 'success',
												duration: 2000
											})
										    setTimeout(()=>{
												uni.navigateBack()
												uni.hideLoading()
											},2000)
										}) //刷新支付结果
									},
									fail(err) {
										that.zfflag = true
										setTimeout(() => {
											uni.hideLoading()
										}, 1000)
										console.log('取消或者支付失败')
									}
								})
							}else{
								uni.showToast({
									title: '购买成功',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									uni.navigateBack()
									uni.hideLoading()
								},2000)
							}
						}else {
							this.zfflag = true
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			// 点击选择会员卡详情
			tobuy(item){
				this.show = true
				this.huiyuanobj = item
			},
			// 请求会员卡列表
			gethuiyuan(){
			    this.$u.get(`/app/vip/listByArea?areaId=${this.areaId}`).then(res=>{
					if(res.code == 200){
						this.huiyuanlist = res.data
					}
				})				
			},
			handlePay() {
				// 处理支付逻辑
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
		padding-bottom: 50rpx;
		box-sizing: border-box;
	}
	
	.buy_box {
	    padding: 0 46rpx;
	    position: fixed;
	    bottom: 0rpx;
		left: 0rpx;
	    width: 750rpx;
	    height: 780rpx !important;
	    background: #FFFFFF;
	    border-radius: 40rpx 40rpx 0 0;
	    z-index: 101;
	    box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
	    
	    .tit_txt {
	        padding-top: 114rpx;
	        font-weight: 600;
	        font-size: 32rpx;
	        color: #333333;
	        overflow: hidden;
	    }
	
	    .text {
	        margin-top: 20rpx;
	        font-weight: 400;
	        font-size: 28rpx;
	        color: #666666;
	        line-height: 1.6;
	    }
	
	    .taocan {
	        padding: 46rpx 40rpx;
	        position: absolute;
	        top: -140rpx;
	        left: 36rpx;
	        width: 680rpx;
	        height: 204rpx;
	        background: #FFFFFF;
	        border-radius: 30rpx;
	        z-index: 102;
	        box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.12);
	
	        .top {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	
	            .tit1 {
	                font-weight: 600;
	                font-size: 36rpx;
	                color: #333333;
	            }
	
	            .tit2 {
	                font-weight: 600;
	                font-size: 44rpx;
	                color: #FF4D4F;
	            }
	        }
	
	        .bot_left {
	            margin-top: 24rpx;
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	
	            .txt3 {
	                padding: 6rpx 16rpx;
	                background: linear-gradient(90deg, rgba(255, 77, 79, 0.1) 0%, rgba(255, 77, 79, 0) 100%);
	                border-radius: 8rpx;
	                font-weight: 500;
	                font-size: 26rpx;
	                color: #FF4D4F;
	            }
	
	            .txt4 {
	                font-weight: 500;
	                font-size: 26rpx;
	                color: #999999;
	            }
	        }
	    }
	
	    .btns_box {
			display: flex;
			flex-wrap: nowrap;
			padding: 30rpx 46rpx;
			justify-content: space-between;
	        position: absolute;
	        bottom: 0;
	        left: 0;
	        width: 750rpx;
	        height: 184rpx;
	        background: #FFFFFF;
	        box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	        z-index: 200;
			
			.btn1{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 90rpx;
				border-radius: 45rpx;
				border: 2rpx solid #DDDDDD;
				font-weight: 600;
				font-size: 32rpx;
				color: #999999;
				transition: all 0.3s ease;
				
				&:active {
					background: #F5F5F5;
				}
			}
			
			.btn2{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 320rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 45rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				transition: all 0.3s ease;
				
				&:active {
					transform: translateY(2rpx);
				}
			}
	    }
	}
	
	.list{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		
		.list_item{
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.lt{
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 180rpx;
				background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
				color: #FFFFFF;
				font-size: 48rpx;
				font-weight: 600;
				position: relative;
				overflow: hidden;
				box-shadow: 0 8rpx 16rpx rgba(255, 77, 79, 0.2);
				border-right: 1px dashed #F7F8FA;
				.discount {
					position: relative;
					z-index: 2;
				}
				
				.decoration {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					
					.circle {
						position: absolute;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.1);
					}
					
					.circle1 {
						width: 60rpx;
						height: 60rpx;
						top: 20rpx;
						left: 20rpx;
					}
					
					.circle2 {
						width: 40rpx;
						height: 40rpx;
						bottom: 30rpx;
						right: 30rpx;
					}
					
					.circle3 {
						width: 30rpx;
						height: 30rpx;
						bottom: 20rpx;
						left: 40rpx;
					}
				}
			}
			
			.rt{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 490rpx;
				height: 180rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				padding: 24rpx;
				box-sizing: border-box;
				box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.06);
				
				.bd{
					.name{
						font-size: 34rpx;
						font-weight: 600;
						color: #333333;
						margin-bottom: 12rpx;
						display: flex;
						align-items: center;
						
						.hot-tag {
							margin-left: 12rpx;
							font-size: 22rpx;
							color: #FF4D4F;
							background: rgba(255, 77, 79, 0.1);
							padding: 2rpx 12rpx;
							border-radius: 12rpx;
						}
					}
					.qixian{
						color: #666666;
						font-size: 26rpx;
						margin-top: 12rpx;
						display: flex;
						align-items: center;
						
						.icon {
							margin-right: 8rpx;
							font-size: 28rpx;
						}
					}
				}
				
				.cz{
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
					text-align: center;
					line-height: 60rpx;
					color: #FFFFFF;
					border-radius: 30rpx;
					font-weight: 500;
					box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.2);
					
					.price {
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>