yizhizan-h5/pages/my/VIP/benefits.vue

<template>
	<view class="benefits-page" :style="{ paddingTop: (12 + statusBarHeight + 44) + 'px' }">
		<!-- 顶部导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
				</view>
				<view class="nav-title">我的权益</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 当前会员状态卡片 -->
		<view class="membership-card">
			<view class="card-content">
				<view class="card-left">
					<view class="card-title">我的权益</view>
					<view class="card-subtitle">{{vipName}} 剩余{{remainingDays}}天到期</view>
				</view>

				<view class="card-right">
					<view class="benefit-item">
						<view class="benefit-label">查看权益</view>
						<view class="benefit-count">{{myViewTimes}}/{{vipViewTimes}}</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">沟通权益</view>
						<view class="benefit-count">{{myConTimes}}/{{vipConTimes}}</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">普通职位</view>
						<view class="benefit-count">{{myPostTimes}}/{{vipPostTimes}}</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">急聘职位</view>
						<view class="benefit-count">{{myDueTimes}}/{{vipDueTimes}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 购买VIP享受更多权益 -->
		<view class="benefits-section">
			<!-- 权益对比表格 -->
			<view class="benefits-table">
				<view class="section-title">购买VIP, 享受更多权益</view>
				<!-- 表头 -->
				<view class="table-header">
					<view class="header-cell benefit-type">权益类型</view>
					<view class="header-cell basic">基础权益</view>
					<view class="header-cell regular active">
						<!-- <view class="plan-tag">生效中</view> -->
						<view class="plan-name">常规版</view>
						<view class="plan-expire">剩余5天到期</view>
					</view>
					<view class="header-cell vip">VIP版</view>
					<view class="header-cell flagship recommended">
						<view class="plan-tag">推荐</view>
						<view class="plan-name">旗舰版</view>
					</view>
				</view>

				<!-- 表格内容 -->
				<view class="table-row">
					<view class="row-cell benefit-type">在线普通职位</view>
					<view class="row-cell basic">10个</view>
					<view class="row-cell regular">35个</view>
					<view class="row-cell vip">45个</view>
					<view class="row-cell flagship">不限</view>
				</view>

				<view class="table-row">
					<view class="row-cell benefit-type">在线急聘职位</view>
					<view class="row-cell basic">0个</view>
					<view class="row-cell regular">5个</view>
					<view class="row-cell vip">15个</view>
					<view class="row-cell flagship">50个</view>
				</view>

				<view class="table-row">
					<view class="row-cell benefit-type">每日查看总数</view>
					<view class="row-cell basic">20个</view>
					<view class="row-cell regular">50个</view>
					<view class="row-cell vip">不限</view>
					<view class="row-cell flagship">不限</view>
				</view>

				<view class="table-row">
					<view class="row-cell benefit-type">每日沟通总数</view>
					<view class="row-cell basic">5个</view>
					<view class="row-cell regular">20个</view>
					<view class="row-cell vip">50个</view>
					<view class="row-cell flagship">100个</view>
				</view>

				<view class="table-row">
					<view class="row-cell benefit-type">查看沟通范围</view>
					<view class="row-cell basic">仅普通职位</view>
					<view class="row-cell regular">仅普通职位</view>
					<view class="row-cell vip">不限</view>
					<view class="row-cell flagship">不限</view>
				</view>

				<view class="table-row price-row">
					<view class="row-cell benefit-type">价格</view>
					<view class="row-cell basic">免费</view>
					<view class="row-cell regular">¥599/年</view>
					<view class="row-cell vip">¥1599/年</view>
					<view class="row-cell flagship">¥2599/年</view>
				</view>
			</view>

			<!-- 说明文字 -->
			<view class="notes">
				<view class="note-item">
					<text class="note-number">1.</text>
					<text class="note-text">基础&常规权益中,查看和开聊权限仅限普通职位使用</text>
				</view>
				<view class="note-item">
					<text class="note-number">2.</text>
					<text class="note-text">在常规版本体验期中购买VIP及以上版本体验卡将会立即失效</text>
				</view>
				<view class="note-item">
					<text class="note-number">3.</text>
					<text class="note-text">你可以直接购买VIP,也可以</text>
					<text class="note-link" @click="viewAllBenefits">查看全部权益包</text>
					<text class="note-text">进行购买</text>
				</view>
				<view class="note-item">
					<text class="note-number">4.</text>
					<text class="note-text">如有问题,请联系我的客服</text>
				</view>
			</view>

		</view>

		<!-- 升级VIP按钮 -->
		<view class="flex flex-column justify-evenly" style="width:100%;flex-direction: column;padding-bottom: 16px;">
			<view class="flex flex-direction align-start flex-wrap" style="width: 88%; margin: auto;">
				<view class="flex" style="width: 100%">
					<u-checkbox size="28rpx" v-model="checked" shape="circle">
						<view class="flex" style="flex-direction: row;">开通即同意<navigator style="color: #016bf6"
								url="/my/setting/weekXiYi" open-type="navigate">《会员开通协议》</navigator>
						</view>
					</u-checkbox>
				</view>
			</view>
			<view class="upgrade-button" @click="showPaymentModal">
				升级VIP
			</view>
		</view>

		<!-- 支付弹窗 -->
		<u-popup v-model="showPayment" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
			<view class="payment-picker">
				<view class="picker-header">
					<text class="picker-title">选择会员版本</text>
				</view>

				<view class="picker-content">
					<view class="plan-option" :class="{ active: selectedPlan === item.id }" @click="selectPlan(item.id)"
						v-for="(item,index) in viplist" :key="item.id || index">
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedPlan === item.id }">
								<u-icon v-if="selectedPlan === item.id" name="checkmark" color="#ffffff"
									size="28"></u-icon>
							</view>
							<text class="option-text">{{item.vipName}}</text>
							<view class="price-tag">
								<text>¥{{item.money}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 支付按钮 -->
				<view class="payment-button" @click="confirmPayment">
					<text>确认支付 ¥{{ getSelectedPrice() }}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				// 当前会员信息
				currentPlan: 'regular',
				openWay: 1,
				isVip: false,
				isVipC: "",
				dataTime: "", //到期时间
				dataTimeC: "",
				isTrue: true,
				msgNum: 0, //非会员每天免费联系次数
				vipMsgNum: 0, //会员每天免费联系次数
				msgPrice: 0, //非会员每次联系价格
				vipMsgPrice: 0, //会员每次联系价格
				vipNum: 0,
				noVipNum: 0,
				vipNumCom: 0,
				noVipNumCom: 0,
				userMonthTime: "", //用户会员到期时间
				companyMonthTime: "", //企业会员到期时间
				vipPrice: "0", //会员价格
				viplist: [],
				endTime:"",
				createTime:"",
				  remainingDays: 0, // 剩余天数
				  vipName:"",
					vipStatus: "未开通VIP", // VIP状态文字（已过期/剩余x天到期/未开通VIP）
					totalValidDays: 0, // 总有效期天数（可选）
					myPostTimes:0,
					vipDueTimes:0,
					vipConTimes:0,
					myViewTimes:0,
					vipViewTimes:0,
					myConTimes:0,
					vipPostTimes:0,
					myDueTimes:0,
					
				// 权益使用情况
				benefits: {
					view: {
						used: 10,
						total: 50
					},
					communicate: {
						used: 10,
						total: 50
					},
					regularJobs: {
						used: 10,
						total: 50
					},
					urgentJobs: {
						used: 10,
						total: 50
					}
				},
				checked: false,
				// 支付弹窗
				showPayment: false,
				selectedPlan: '',
				planPrices: {
					regular: 599,
					vip: 1599,
					flagship: 2599
				}
			}
		},
		onLoad() {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;


			this.userType = uni.getStorageSync("userType");
			if (this.userType == 1) {
				//用户简历的刷新次数
				this.getVipPeople();
				this.getNoVipPeople();
			} else {
				this.getVipCom();
				this.getNoVipCom();
			}
			// this.getVipPrice();
			// #ifdef APP-PLUS
			this.openLists = [{
					image: "../../static/images/my/zhifubao.png",
					text: "支付宝",
					id: 1,
				},
				{
					image: "../../static/images/my/icon_weixin.png",
					text: "微信",
					id: 2,
				},
			];
			this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: "../../static/share/icon_weixin.png",
				text: "微信",
				id: 2,
			}, ];
			this.openWay = 2;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf("micromessenger") !== -1) {
				this.openLists = [{
						image: "../../static/images/my/zhifubao.png",
						text: "支付宝",
						id: 1,
					},
					{
						image: "../../static/share/icon_weixin.png",
						text: "微信",
						id: 2,
					},
				];
			} else {
				this.openLists = [{
					image: "../../static/images/my/zhifubao.png",
					text: "支付宝",
					id: 1,
				}, ];
			}

			this.openWay = 1;
			// #endif



		},
		onShow() {
			this.selectVipDetails();
			this.getVipdetile();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			//支付
			// 确认支付
			confirmPayment() {
				let that = this;

				// 验证是否选择了会员套餐
				if (!this.selectedPlan) {
					uni.showToast({
						title: "请选择会员套餐",
						icon: "none"
					});
					return;
				}

				// 验证是否勾选了协议
				if (!this.checked) {
					uni.showToast({
						title: "请阅读并同意《会员开通协议》",
						icon: "none"
					});
					return;
				}

				if (that.isTrue == false) {
					return;
				}

				let token = uni.getStorageSync('token');
				if (!token) {
					uni.showToast({
						title: "登录过期",
						icon: "none"
					});
					return;
				}

				console.log('进入支付，选择的套餐ID：', this.selectedPlan);
				that.isTrue = false;

				// 获取选中的套餐详情
				const selectedPackage = this.viplist.find(item => item.id === this.selectedPlan);
				const amount = selectedPackage ? selectedPackage.money : 0;

				// 根据不同平台和支付方式调用不同的支付接口
				if (this.openWay == 2) {
					// 微信支付
					// #ifdef APP-PLUS
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 1,
							money: amount,
							type: this.selectedPlan,
							//Id: this.selectedPlan, // 传递选中的VIP套餐ID
							//vipName: selectedPackage ? selectedPackage.vipName : '' // 传递套餐名称
						})
						.then((ret) => {
							this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
						})
						.catch(() => {
							that.isTrue = true;
							uni.showToast({
								title: "请求失败，请重试",
								icon: "none"
							});
						});
					// #endif

					// #ifdef MP-WEIXIN
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 3,
							money: amount,
							type: this.selectedPlan,
						//Id: this.selectedPlan, // 传递选中的VIP套餐ID
						//vipName: selectedPackage ? selectedPackage.vipName : '' // 传递套餐名称
						})
						.then((ret) => {
							uni.hideLoading();
							console.log(ret.data);
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: ret.data.timestamp,
								nonceStr: ret.data.noncestr,
								package: ret.data.package,
								signType: ret.data.signType,
								paySign: ret.data.sign,
								success: function(suc) {
									console.log("success:" + JSON.stringify(suc));
									uni.showToast({
										title: "支付成功",
										icon: "success",
									});
									that.showPayment = false;
									that.isTrue = true;
									that.getUserInfo();
									// 支付成功后刷新页面数据
									that.selectVipDetails();
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
									that.isTrue = true;
									uni.showToast({
										title: "支付失败",
										icon: "none",
									});
								},
							});
						})
						.catch(() => {
							that.isTrue = true;
							uni.showToast({
								title: "请求失败，请重试",
								icon: "none"
							});
						});
					// #endif

					// #ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					if (ua.indexOf("micromessenger") !== -1) {
						let data = {
							classify: 2,
							money: amount,
							type: this.selectedPlan,
						//Id: this.selectedPlan, // 传递选中的VIP套餐ID
						//vipName: selectedPackage ? selectedPackage.vipName : '' // 传递套餐名称
						};
						this.$Request.postJson("/app/wxPay/wxPayOrder", data).then((res) => {
							if (res.code == 0) {
								this.callPay(res.data);
							} else {
								that.isTrue = true;
								uni.showToast({
									icon: "none",
									title: "支付失败!",
								});
							}
						}).catch(() => {
							that.isTrue = true;
							uni.showToast({
								title: "请求失败，请重试",
								icon: "none"
							});
						});
					}
					// #endif
				} else {
					// 支付宝支付
					// #ifdef APP
					console.log("APP进入支付。");
					const datas = {
						classify: 4,
						money: amount,
						type: this.selectedPlan,
						//Id: this.selectedPlan, // 传递选中的VIP套餐ID
						//vipName: selectedPackage ? selectedPackage.vipName : '' // 传递套餐名称
					};
					this.$Request.postT("/app/aliPay/payMoneyOrder", datas).then((ret) => {
						this.showPayment = false;
						console.log(ret);
						this.isCheckPay(ret.code, "alipay", ret.data);
					}).catch(() => {
						that.isTrue = true;
						uni.showToast({
							title: "请求失败，请重试",
							icon: "none"
						});
					});
					// #endif

					// #ifdef H5
					let data = {
						classify: 5, //支付方式
						money: 0.1,
						type: this.selectedPlan,
						//Id: this.selectedPlan, // 传递选中的VIP套餐ID
						//vipName: selectedPackage ? selectedPackage.vipName : '' // 传递套餐名称
					};
					this.$Request.postT("/app/aliPay/payMoneyOrder", data).then((res) => {
						if (res.code === 0) {
							this.showPayment = false;
							that.isTrue = true;
							const div = document.createElement("div");
							div.innerHTML = res.data; //此处form就是后台返回接收到的数据
							document.body.appendChild(div);
							document.forms[0].submit();
						} else {
							that.isTrue = true;
							uni.showToast({
								icon: "none",
								title: "支付失败!",
							});
						}
					}).catch(() => {
						that.isTrue = true;
						uni.showToast({
							title: "请求失败，请重试",
							icon: "none"
						});
					});
					// #endif
				}
			},

			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							this.onBridgeReady(response),
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(response));
						document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				console.log(response, "++++++++");
				WeixinJSBridge.invoke(
					"getBrandWCPayRequest", {
						appId: response.appid, //公众号名称，由商户传入
						timeStamp: response.timestamp, //时间戳，自1970年以来的秒数
						nonceStr: response.noncestr, //随机串
						package: response.package,
						signType: response.signType, //微信签名方式：
						paySign: response.sign, //微信签名
					},
					function(res) {
						console.log(res, "/*-/*-/*-");
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: "支付成功",
							});
							setTimeout(function() {
								that.isTrue = true;
								uni.hideLoading();
							}, 1000);
							that.show = false;
							that.getUserInfo();
						} else {
							that.isTrue = true;
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				let that = this;
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					that.isTrue = true;
					uni.showToast({
						title: "支付信息有误",
						icon: "none",
					});
				}
			},
			setPayment(name, order) {
				let that = this;
				console.log("*-*-*");
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res);
						uni.hideLoading();
						uni.showLoading({
							title: "支付成功",
						});
						that.show = false;
						that.getUserInfo();
						that.isTrue = true;
					},
					fail: function(err) {
						console.log(err);
						that.isTrue = true;
						uni.hideLoading();
					},
					complete() {
						that.isTrue = true;
						uni.hideLoading();
					},
				});
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			//获取会员开通价格
			getVipPrice() {
				if (uni.getStorageSync("userType") == 1) {
					//用户会员价格
					this.$Request.get("/app/common/type/331").then((res) => {
						if (res.code == 0) {
							this.planPrices = res.data.value;
						}
					});
				} else {
					//企业会员价格
					this.$Request.get("/app/common/type/332").then((res) => {
						if (res.code == 0) {
							this.planPrices = res.data.value;
						}
					});
				}
			},



			//vip 套餐
			selectVipDetails() {
				this.$Request.get("/app/VipDetails/selectVipDetails").then((res) => {
					if (res.code == 0) {
						this.viplist = res.data
						if (this.viplist.length > 0) {
							this.selectedPlan = this.viplist[0].id;
						}
					} else {
						uni.showToast({
							title: '暂无VIP套餐',
							icon: 'none'
						})
					}
				});
			},

			//获取个人信息
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then((res) => {
					if (res.code == 0) {
						if (res.data.isUserVip + "" == 1) {
							this.isVip = true;
							this.dataTime = res.data.userMonthTime;
						} else {
							this.isVip = false;
						}
						if (res.data.isCompanyVip + "" == "1") {
							this.isVipC = true;
							this.dataTimeC = res.data.companyMonthTime;
						} else {
							this.isVipC = false;
						}
					}
				});
			},
			//获取vip个人信息
			getUserInfo() {
				this.$Request.get("/app/user/vipData").then((res) => {
					if (res.code == 0) {
				
								this.myPostTimes=res.data.myPostTimes || 0
						        this.vipDueTimes=res.data.vipDueTimes || 0
						        this.vipConTimes=res.data.vipConTimes || 0
						        this.myViewTimes=res.data.myViewTimes || 0
						        this.vipViewTimes=res.data.vipViewTimes || 0
						        this.myConTimes=res.data.myConTimes || 0
						        this.vipPostTimes=res.data.vipPostTimes || 0
						        this.myDueTimes=res.data.myDueTimes || 0
					}
				});
			},


			//会员剩余天数
			getVipdetile() {
				 this.$Request.get("/app/UserVip/selectUserVip").then((res) => {
				        if (res.code == 0) {
				            const endTimeStr = res.data.endTime; // 到期时间（格式：yyyy-MM-dd HH:mm:ss 或 yyyy-MM-dd）
				            const createTimeStr = res.data.createTime; // 创建时间（格式同上）
				            
				            // 1. 时间字符串转时间戳（兼容不同格式）
				            const endTime = this.formatTimeToTimestamp(endTimeStr);
				            const createTime = this.formatTimeToTimestamp(createTimeStr);
				            const currentTime = new Date().getTime(); // 当前时间戳
				            
				            // 2. 验证时间有效性
				            if (!endTime || !createTime) {
				                console.error("时间格式错误", { endTimeStr, createTimeStr });
				                this.remainingDays = 0;
				                this.vipStatus = "已过期";
							
				                return;
				            }
				            if(res.data.vipDetails){
									this.vipName=res.data.vipDetails.vipName
							}
				            // 3. 计算剩余时间（毫秒）：到期时间 - 当前时间
				            const remainingTime = endTime - currentTime;
				            
				            // 4. 处理不同情况
				            if (remainingTime <= 0) {
				                // 已过期
				                this.remainingDays = 0;
				                this.vipStatus = "已过期";
				            } else {
				                // 计算剩余天数（向上取整，不足1天按1天算）
				                const days = Math.ceil(remainingTime / (1000 * 60 * 60 * 24));
				                this.remainingDays = days;
				                this.vipStatus = `剩余${days}天到期`;
				                
				                // 可选：如果需要显示总有效期（创建到到期的总天数）
				                this.totalValidDays = Math.ceil((endTime - createTime) / (1000 * 60 * 60 * 24));
				            }
				            
				            console.log("VIP剩余天数：", this.remainingDays);
				            console.log("VIP状态：", this.vipStatus);
				        } else {
				            // 无VIP数据
				            this.remainingDays = 0;
				            this.vipStatus = "未开通VIP";
				            // uni.showToast({
				            //     title: res.msg || "获取VIP信息失败",
				            //     icon: "none"
				            // });
				        }
				    }).catch((err) => {
				        console.error("获取VIP详情失败", err);
				        this.remainingDays = 0;
				        this.vipStatus = "未开通VIP";
				        // uni.showToast({
				        //     title: "获取VIP信息失败，请重试",
				        //     icon: "none"
				        // });
				    });
			},
			
			// 辅助方法：时间字符串转时间戳（兼容 yyyy-MM-dd HH:mm:ss 和 yyyy-MM-dd 格式）
			formatTimeToTimestamp(timeStr) {
			    if (!timeStr) return null;
			    
			    // 处理 iOS 不兼容的 "-" 分隔符（替换为 "/"）
			    const formattedTime = timeStr.replace(/-/g, "/");
			    const timestamp = new Date(formattedTime).getTime();
			    
			    // 验证是否为有效时间戳
			    return isNaN(timestamp) ? null : timestamp;
			},

			//会员简历刷新次数
			getVipPeople() {
				this.$Request.get("/app/common/type/328").then((res) => {
					if (res.code == 0) {
						this.vipNum = res.data.value;
					}
				});
			},
	
			
			//非会员简历刷新次数
			getNoVipPeople() {
				this.$Request.get("/app/common/type/327").then((res) => {
					if (res.code == 0) {
						this.noVipNum = res.data.value;
					}
				});
			},
			//会员岗位刷新次数
			getVipCom() {
				this.$Request.get("/app/common/type/330").then((res) => {
					if (res.code == 0) {
						this.vipNumCom = res.data.value;
					}
				});
			},
			//非会员岗位刷新次数
			getNoVipCom() {
				this.$Request.get("/app/common/type/329").then((res) => {
					if (res.code == 0) {
						this.noVipNumCom = res.data.value;
					}
				});
			},

			// 查看全部权益包
			viewAllBenefits() {
				uni.showToast({
					title: '查看全部权益包',
					icon: 'none'
				})
			},

			// 显示支付弹窗
			showPaymentModal() {
				if (this.checked == false) {
					uni.showToast({
						title: "请阅读并同意《会员开通协议》",
						icon: "none",
					});
					return;
				}
				console.log('准备支付')



				this.showPayment = true
			},

			// 选择会员计划
			selectPlan(plan) {
				this.selectedPlan = plan
			},

			// 获取选中计划的价格
			getSelectedPrice() {
				const selectedItem = this.viplist.find(item => item.id === this.selectedPlan);
				return selectedItem ? selectedItem.money : 0;

			},

			// 确认支付
			// confirmPayment() {
			// 	uni.showToast({
			// 		title: `支付¥${this.getSelectedPrice()}成功`,
			// 		icon: 'success'
			// 	})
			// 	this.showPayment = false
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.benefits-page {
		min-height: 100vh;
		background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 80%));
		background-size: 100% 40%;
		background-repeat: no-repeat;
	}

	// 顶部导航栏
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;

		.nav-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			padding: 0 32rpx;

			.nav-left,
			.nav-right {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.nav-title {
				font-size: 36rpx;
				font-weight: 600;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	// 当前会员状态卡片
	.membership-card {
		background: linear-gradient(66.73deg, rgba(255, 160, 162, 1), rgba(255, 203, 204.5, 0.3) 49%, rgba(255, 181.5, 183.25, 0.56) 100%);
		border-radius: 20rpx;
		padding: 32rpx;
		margin: 0 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.3);

		.card-content {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.card-left {
				flex: 1;

				.card-title {
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 48rpx;
					font-weight: 700;
					line-height: 60rpx;
					letter-spacing: 0px;
					text-align: left;
					margin-bottom: 8rpx;
				}

				.card-subtitle {
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 32rpx;
					letter-spacing: 0%;
					text-align: left;
				}
			}

			.card-right {
				display: grid;
				grid-template-columns: 1fr 1fr;
				border-radius: 12rpx;
				background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%, rgba(255, 102, 0, 0.35), rgba(255, 65, 86, 1) 100%);
				gap: 16rpx;
				padding: 14rpx 38rpx;

				.benefit-item {
					text-align: center;

					.benefit-label {
						color: rgba(255, 255, 255, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 32rpx;
						letter-spacing: 0%;
						text-align: left;
						margin-bottom: 8rpx;
					}

					.benefit-count {
						color: rgba(255, 255, 255, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 32rpx;
						letter-spacing: 0%;
						text-align: left;
					}
				}
			}
		}
	}

	// 权益对比区域
	.benefits-section {
		margin: 20rpx 40rpx;

		.section-title {
			color: rgba(23, 23, 37, 1);
			font-family: DM Sans;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44rpx;
			letter-spacing: 0.5%;
			text-align: left;
			margin-bottom: 20rpx;
		}
	}

	// 权益对比表格
	.benefits-table {
		background: #fff;
		border-radius: 16rpx;
		padding: 26rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

		.table-header {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			background: #f8f9fa;
			border-bottom: 4rpx solid #FFFFFF;

			.header-cell {
				padding: 12rpx;
				color: rgba(23, 23, 37, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 26rpx;
				letter-spacing: 0.5%;
				text-align: center;
				position: relative;
				border-right: 4rpx solid #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&:first-child {
					border-top-left-radius: 16rpx;
				}

				&:last-child {
					border-right: none;
					border-top-right-radius: 16rpx;
				}

				&.benefit-type {
					color: rgba(23, 23, 37, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 26rpx;
					letter-spacing: 0.5%;
					text-align: center;
					background: rgba(219, 216, 216, 1);
				}

				&.basic {
					background: rgba(219, 216, 216, 1);
				}

				&.active {
					background: linear-gradient(135.00deg, rgba(255, 187, 141, 0.4), rgba(255, 102, 0, 0.4) 100%);
					color: rgba(224, 90, 0, 1);
				}

				&.vip {
					background: linear-gradient(135.00deg, rgba(255, 180, 180, 0.6), rgba(255, 89, 89, 0.6) 100%);
					color: rgba(255, 62, 62, 1);
				}

				&.recommended {
					background: linear-gradient(133.74deg, rgba(251, 231, 185, 1), rgba(240, 176, 72, 1) 100%);
					color: rgba(212, 131, 0, 1);
				}

				.plan-tag {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					background: var(--线性渐变, linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96), rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%));
					color: rgba(255, 255, 255, 1);
					font-family: DM Sans;
					font-size: 12rpx;
					font-weight: 400;
					line-height: 14rpx;
					letter-spacing: 0px;
					text-align: left;
					padding: 4rpx 12rpx;
					border-radius: 0rpx 16rpx 0rpx 16rpx;
					transform-origin: center;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: inherit;
						transform: rotate(-45deg);
						z-index: -1;
					}
				}

				.plan-name {
					font-size: 24rpx;
					font-weight: 600;
					margin-bottom: 4rpx;
				}

				.plan-expire {
					font-size: 16rpx;
					color: rgba(224, 90, 0, 1);
				}
			}
		}

		.table-row {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			border-bottom: 4rpx solid #FFFFFF;

			&:last-child {
				border-bottom: none;

				.row-cell:first-child {
					border-bottom-left-radius: 16rpx;
				}

				.row-cell:last-child {
					border-bottom-right-radius: 16rpx;
				}
			}

			&.price-row {
				background: #f8f9fa;
				font-weight: 600;
			}

			.row-cell {
				padding: 24rpx 12rpx;
				font-size: 16rpx;
				text-align: center;
				border-right: 4rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					border-right: none;
				}

				&.benefit-type {
					text-align: center;
					color: rgba(23, 23, 37, 1);
					font-weight: 500;
					align-items: center;
					justify-content: center;
					background: rgba(246, 246, 246, 1);
				}

				&.basic {
					color: #666;
					background: rgba(246, 246, 246, 1);
				}

				&.regular {
					color: rgba(224, 90, 0, 1);
					font-weight: 600;
					background: rgba(254, 240, 229, 1);
				}

				&.vip {
					color: rgba(255, 62, 62, 1);
					font-weight: 600;
					background: rgba(255, 235, 235, 1);
				}

				&.flagship {
					color: #f57c00;
					font-weight: 600;
					background: rgba(254, 238, 209, 1);
				}
			}
		}
	}

	// 说明文字
	.notes {
		margin-top: 32rpx;

		.note-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			line-height: 1.5;
			gap: 8rpx;

			.note-number,
			.note-text {
				color: rgba(102, 102, 102, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 26rpx;
				letter-spacing: 0.5%;
				text-align: left;
			}

			.note-link {
				color: #1976d2;
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 26rpx;
				letter-spacing: 0.5%;
				text-decoration: underline;
			}
		}
	}

	// 升级VIP按钮
	.upgrade-button {
		//position: fixed;
		// bottom: 32rpx;
		// left: 32rpx;
		// right: 32rpx;
		width: 88%;
		height: 88rpx;
		background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%));
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
		margin: auto;
	}

	// 支付弹窗样式 - 仿照 tagManage 页面
	.payment-picker {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	}

	.picker-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 40rpx 20rpx;
		border-bottom: 1rpx solid #F2F2F2;
		position: relative;

		.picker-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 23px;
			letter-spacing: 0px;
			text-align: center;
		}
	}

	.picker-content {
		padding: 32rpx;
	}

	.plan-option {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 16rpx 28rpx;
		box-sizing: border-box;
		border: 1px solid rgba(227, 231, 236, 1);
		border-radius: 24px;
		background: rgba(255, 255, 255, 1);
		margin-bottom: 32rpx;

		&:active {
			background-color: #F9F9F9;
		}

		&.active {
			border-color: #007AFF;
			background: #F0F9FF;
		}

		.option-left {
			display: flex;
			align-items: center;
			flex: 1;

			.radio-btn {
				width: 40rpx;
				height: 40rpx;
				border: 2rpx solid #E5E5EA;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 24rpx;
				background: #fff;
				transition: all 0.2s;

				&.checked {
					border-color: #007AFF;
					background: #007AFF;
				}
			}

			.option-text {
				font-size: 28rpx;
				color: rgba(29, 33, 41, 1);
				font-weight: 400;
				flex: 1;
			}

			.price-tag {
				background: rgba(153, 196, 250, 0.4);
				border-radius: 8rpx;
				padding: 4rpx 12rpx;

				text {
					font-size: 24rpx;
					line-height: 24rpx;
					color: rgba(1, 107, 246, 1);
					font-weight: 500;
				}
			}
		}
	}

	.picker-content :last-child {
		margin-bottom: 0rpx;
	}

	.payment-button {
		width: 90%;
		height: 88rpx;
		background: linear-gradient(90deg, #007AFF 0%, #42a5f5 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);

		text {
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
</style>