<template>
	<view class="page">

		<view class="fixed">
			<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
				back-icon-color='#fff' height='45'></u-navbar>
		</view>
		<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
	
		<view class="vipcard">
			<view class="card_top">
				<view class="name">
					17795402553
				</view>
				<view class="type" v-if="userinfo.vipType==0">
					未开通
				</view>
				<view class="type" v-if="userinfo.vipType==1">
					已开通
				</view>
			</view>
			<view class="card_bot">
				<view class="txts" v-if="userinfo.vipType==0">
					开通立享超值会员特权
				</view>
				<view class="txts" v-if="userinfo.vipType==1&&userinfo">
				  月卡会员{{ daysUntilExpiration }}天后到期
				</view>
				<view class="topage" @click="topage(1)">
					购买记录 >
				</view>
			</view>
		</view>
		<image class="mc" src="https://lxnapi.ccttiot.com/bike/img/static/uCIpavkHbM18al7gpxH8" mode=""></image>
		<view class="cont_box">

			<view class="cont_li" v-for="(item,index) in CouponList" :key="index" @click="choose(item,index)" :class="chooseidx==index?'act1':''">
				<view class="tit">
					{{item.name}}
				</view>
				<view class="money">
					￥	{{item.retailPrice}}
				</view>
				<view class="tips" style="text-decoration: line-through; ">
					￥{{item.originalPrice}}
				</view>
				<view class="tips">
					立省￥{{ (item.originalPrice - item.retailPrice).toFixed(2) }}
				</view>
			</view>
		</view>
		<view class="txt">
			该卡只能用于抵扣骑行费用，不能抵扣调度费、预约费等费用。 如您产生调度费、预约费等费用，需另支付差额。
		</view>
		<view class="pay_btn" @click="buy()">
			￥{{chooseInfo.retailPrice}}立即开通
		</view>
		<view class="tipss">
			更多优惠
		</view>
		<view class="fee_box">
			<view class="auto_box">
				<view class="auto_li" v-for="(item,index) in CouponLists" :key="index"  @click="tobuy">
					<view class="txt1">
					{{item.name}}
					</view>
					<view class="txt1">
						{{item.retailPrice}}元
					</view>
					<view class="txt2" v-if="item.desc">
						{{item.desc}}
						<!-- 每单最高抵3元 -->
					</view>
					<view class="buy_btn">
						购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				bgc: {
					backgroundColor: '#fff'
				},
				sn: '',
				istrue: false,
				CouponList:[],
				CouponLists:[],
				userinfo:{},
				chooseInfo:{},
				chooseidx:0,
				 daysUntilExpiration: 0 // 剩余天数
			}
		},
		onShow() {
			this.getCouponList()
			this.getinfo()
			this.getCouponLists()
		},
		methods: {
			topage(){
				uni.navigateTo({
					url:'/page_vip/vip_his'
				})
			},
			calculateDaysUntilExpiration() {
			      const currentDate = new Date();
			      const expirationDate = new Date(this.userinfo.expirationTime);
			      
			      // 计算时间差（毫秒）
			      const timeDifference = expirationDate - currentDate;
			
			      // 将毫秒转换为天
			      this.daysUntilExpiration = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
			    },
			tobuy(){
				uni.navigateTo({
					url:'/page_vip/buyCard'
				})
			},
			choose(itm,idx){
				this.chooseInfo=itm
				this.chooseidx=idx
			},
			buy(){
			
				let data={
					userId:this.userinfo.userId,
					couponId:this.chooseInfo.couponId
				}
				let that=this
				that.$u.get("/appVerify/coupon/buy?",data ).then((res) => {
							
					if (res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageVal,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {
								// 支付成功逻辑
								setTimeout(()=>{
									that.getinfo()
								},500)
							
							},
							fail(err) {
								// 支付失败逻辑
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								});
							}
						});
						
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				});
			},
			getCouponLists(){
				let data={
					type:'3,4'
				}
				this.$u.get("/app/couponList",data ).then((res) => {
							
					if (res.code == 200) {
						this.CouponLists = res.data
						
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				});
			},
			getinfo() {
				// uni.showLoading({
				// 	title:'加载中'
				// })
				this.$u.get("/getAppInfo").then((res) => {
			
					if (res.code == 200) {
					
						this.$store.commit('SET_USERID', res.user.userId);
						this.userinfo = res.user
						this.calculateDaysUntilExpiration()
					} else {
					
					}
				});
			},
			getCouponList(){
				let data={
					type:'1'
				}
				this.$u.get("/app/couponList",data ).then((res) => {
							
					if (res.code == 200) {
						this.CouponList = res.data
						this.chooseInfo=this.CouponList[0]
					} else {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		width: 750rpx;
		.fee_box {
		  margin-top: 18rpx;
		  position: relative;
		  margin-left: 38rpx;
		  width: 680rpx;
		  height: 288rpx;
		  background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ugciMYClSGgJxP8HYoRU');
		  background-size: cover;
		  background-position: center;
		  background-repeat: no-repeat;
			.auto_box::-webkit-scrollbar {
				display: none;
			}
		  .auto_box {
			  padding-left: 24rpx;
		    display: flex;
		    overflow-x: auto;  /* 允许横向滚动 */
		    flex-wrap: nowrap;  /* 禁止换行，保持所有元素在一行 */
		    position: absolute;
		    top: 90rpx;
		    width: 100%;  /* 根据需要调整宽度 */
		    height: auto; /* 根据内容自动调整高度 */
		
		    .auto_li {
				position: relative;
				padding: 24rpx 28rpx;
				margin-right: 22rpx;
		      width: 408rpx;
		      height: 176rpx;
		      flex-shrink: 0;  /* 防止子元素被压缩 */
		      background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ui88NWy9R1j2zFGojdHU');
		      background-size: cover;
		      background-position: center;
			  .txt1{
				  width: 100%;
				  font-weight: 600;
				  font-size: 32rpx;
				  color: #495E74;
			  }
			  .txt2{
				  font-weight: 400;
				  font-size: 24rpx;
				  color: #495E74;
			  }
			  .buy_btn{
				  position: absolute;
				  right: 26rpx;
				  bottom: 38rpx;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  width: 132rpx;
				  height: 50rpx;
				  background: #495E74;
				  border-radius: 25rpx 25rpx 25rpx 25rpx;
				  font-weight: 500;
				  font-size: 28rpx;
				  color: #FFF3DB;
			  }
		    }
		  }
		}
		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}
		.tipss{
			margin-left: 40rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.vipcard {
			padding: 36rpx ;
			position: fixed;
			top: 428rpx;
			left: 38rpx;
			width: 680rpx;
			height: 244rpx;
			z-index: 1;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u78FEc5oHRKzdvopQpZE');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;
			/* 背景图片居中显示 */
			background-repeat: no-repeat;
			.card_top{
				
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.name{
					font-weight: 500;
					font-size: 44rpx;
					color: #B07C1E;
				}
				.type{
					margin-left: 30rpx;
					padding: 4rpx 18rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #B07C1E;
					border-radius: 35rpx 35rpx 35rpx 35rpx;
					border: 1rpx solid #B07C1E;
				}
			}
			.card_bot{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.txts{
					font-weight: 400;
					font-size: 28rpx;
					color: #B07C1E;
				}
				.topage{
					margin-left: auto;
					font-weight: 400;
					font-size: 28rpx;
					color: #B07C1E;
				}
			}
			
		}
		.pay_btn{
			
			display: flex;
			align-items: center;
			justify-content: center;	
			margin: 20rpx auto ;
			width: 680rpx;
			height: 104rpx;
			background: linear-gradient( 90deg, rgba(255,201,87,0.84) 0%, rgba(255,224,158,0.58) 100%);
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-weight: 500;
			font-size: 44rpx;
			color: #B07C1E;
			
		}
		.backimg {
			position: fixed;
			width: 750rpx;
			height: 670rpx;
			top: 0;
			left: 0;
			z-index: -1; // 确保背景图片在所有内容之下
		}
		.txt{
			margin: 56rpx 48rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #64B6A7;
		}
		.cont_box {
			display: flex;
			flex-wrap: nowrap;
			padding: 0 38rpx;
			margin-top: 690rpx;
			z-index: 10;
			overflow-x: auto; // 允许横向滚动
			white-space: nowrap; // 保持内容不换行
			-webkit-overflow-scrolling: touch; // 使滚动更流畅

			// 隐藏横向滚动条
			::-webkit-scrollbar {
				display: none; // 针对 WebKit 浏览器 (如 Safari 和 Chrome)
				height: 0; // 设定横向滚动条高度为 0
			}

			scrollbar-width: none; // 针对 Firefox
			-ms-overflow-style: none; // 针对 Internet Explorer 和 Edge
			.act1{
				background: #FFFBF1;
			}
			.cont_li {
				width: 218rpx;
				height: 256rpx;
				background: rgba(255, 224, 158, 0.15) #FFFFFF;
				border-radius: 20rpx;
				border: 1rpx solid rgba(176, 124, 30, 0.56);
				z-index: 10;
				flex-shrink: 0; // 防止子元素缩小
				margin-right: 20rpx; // 子元素之间的间距
				.tit{
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #B07C1E;
				}
				.money{
					width: 100%;
					text-align: center;
					margin-top: 20rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #E46666;
				}
				.tips{
					margin-top: 20rpx;
					width: 100%;
					text-align: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #979797;
				}
			}
		}

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

		

		.mc {
			position: fixed;
			top: 611rpx;
			left: 0rpx;
			width: 750rpx;
			height: 107.29rpx;
			z-index: 2;
		}
	}
</style>