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">常规版 剩余5天到期</view>
				</view>

				<view class="card-right">
					<view class="benefit-item">
						<view class="benefit-label">查看权益</view>
						<view class="benefit-count">10/50</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">沟通权益</view>
						<view class="benefit-count">10/50</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">普通职位</view>
						<view class="benefit-count">10/50</view>
					</view>
					<view class="benefit-item">
						<view class="benefit-label">急聘职位</view>
						<view class="benefit-count">10/50</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 === 'regular' }"
						@click="selectPlan('regular')">
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedPlan === 'regular' }">
								<u-icon v-if="selectedPlan === 'regular'" name="checkmark" color="#ffffff"
									size="28"></u-icon>
							</view>
							<text class="option-text">常规版</text>
							<view class="price-tag">
								<text>¥599</text>
							</view>
						</view>
					</view>

					<view class="plan-option" :class="{ active: selectedPlan === 'vip' }" @click="selectPlan('vip')">
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedPlan === 'vip' }">
								<u-icon v-if="selectedPlan === 'vip'" name="checkmark" color="#ffffff"
									size="28"></u-icon>
							</view>
							<text class="option-text">VIP版</text>
							<view class="price-tag">
								<text>¥1599</text>
							</view>
						</view>
					</view>

					<view class="plan-option" :class="{ active: selectedPlan === 'flagship' }"
						@click="selectPlan('flagship')">
						<view class="option-left">
							<view class="radio-btn" :class="{ checked: selectedPlan === 'flagship' }">
								<u-icon v-if="selectedPlan === 'flagship'" name="checkmark" color="#ffffff"
									size="28"></u-icon>
							</view>
							<text class="option-text">旗舰版</text>
							<view class="price-tag">
								<text>¥2599</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',
				remainingDays: 5,
				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", //会员价格
				
				// 权益使用情况
				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: 'regular',
				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
			
			
			
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			//支付
			confirmPayment() {
			
				let that = this;
				if (that.isTrue == false) {
					return;
				}
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: "登录过期",
						icon: "none",
					});
					return
				}
			
				console.log('进入支付')
				that.isTrue = false;
				if (this.openWay == 2) {
					// #ifdef APP-PLUS
					// 微信APP支付 根据订单id获取支付信息
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 1,
							money: this.planPrices,
							type: 2,
						})
						.then((ret) => {
							this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
						});
					// #endif
			
					// #ifdef MP-WEIXIN
					// 微信小程序支付
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 3,
							money: this.planPrices,
							type: 2,
						})
						.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.show = false;
									that.isTrue = true;
									that.getUserInfo();
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
									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: this.planPrices,
							type: 2,
						};
						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: "支付失败!",
								});
							}
						});
					}
					// #endif
				} else {
					// APP支付宝支付
					// #ifdef APP
					console.log("APP进入支付。");
					const datas = {
						classify: 4,
						money: this.planPrices,
						type: 2,
					}
					this.$Request.postT("/app/aliPay/payMoneyOrder", datas).then((ret) => {
						this.show = false;
						console.log(ret);
						this.isCheckPay(ret.code, "alipay", ret.data);
					});
					// #endif
					// #ifdef H5
					let data = {
						classify: 5,//支付方式
						money:this.planPrices,
						type: 2,
					};
					this.$Request.postT("/app/aliPay/payMoneyOrder", data).then((res) => {
						if (res.code === 0) {
							this.show = 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: "支付失败!",
							});
						}
					});
					// #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;
						}
					});
				}
			},
			//获取个人信息
			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;
						}
					}
				});
			},
			
			
			//会员简历刷新次数
			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() {
				return this.planPrices[this.selectedPlan]
			},

			// 确认支付
			// 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>