VIP权益优化

pages/my/VIP/benefits.vue

@@ -44,71 +44,68 @@
 		<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">{{trialVersion.vipName}}</view>
-						<!-- <view class="plan-expire">剩余5天到期</view> -->
-					</view>
-					<view class="header-cell vip">{{monthlyPayment.vipName}}</view>
-					<view class="header-cell flagship recommended">
-						<view class="plan-tag">推荐</view>
-						<view class="plan-name">{{annual.vipName}}</view>
-					</view>
-				</view>
-
-				<!-- 表格内容 -->
-				<view class="table-row">
-					<view class="row-cell benefit-type">在线普通职位</view>
-					<view class="row-cell basic">1个</view>
-					<view class="row-cell regular">{{trialVersion.vipPostTimes}}个</view>
-					<view class="row-cell vip">{{monthlyPayment.vipPostTimes}}个</view>
-					<view class="row-cell flagship">{{annual.vipPostTimes}}</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">{{trialVersion.vipDueTimes}}个</view>
-					<view class="row-cell vip">{{monthlyPayment.vipDueTimes}}个</view>
-					<view class="row-cell flagship">{{annual.vipDueTimes}}个</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">{{trialVersion.vipViewTimes}}个</view>
-					<view class="row-cell vip">{{monthlyPayment.vipViewTimes}}</view>
-					<view class="row-cell flagship">{{annual.vipViewTimes}}</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">{{trialVersion.vipConTimes}}个</view>
-					<view class="row-cell vip">{{monthlyPayment.vipConTimes}}个</view>
-					<view class="row-cell flagship">{{annual.vipConTimes}}个</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">{{trialVersion.money}}/{{ vipNameTypeText(trialVersion.vipNameType) }}</view>
-					<view class="row-cell vip">{{monthlyPayment.money}}/{{ vipNameTypeText(monthlyPayment.vipNameType) }}</view>
-					<view class="row-cell flagship">{{annual.money}}/{{ vipNameTypeText(annual.vipNameType) }}</view>
-				</view>
+			  <view class="section-title">购买VIP, 享受更多权益</view>
+			
+			  <!-- 表头 -->
+			  <view class="table-header">
+			    <view class="header-cell benefit-type">权益类型</view>
+			    <view class="header-cell basic">基础权益</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['header-cell', index === 0 ? 'active' : index === 1 ? 'vip' : 'recommended']">
+			      <view v-if="vip.vipName === '年度版'" class="plan-tag">推荐</view>
+			      <view class="plan-name">{{ vip.vipName }}</view>
+			    </view>
+			  </view>
+			
+			  <!-- 在线普通职位 -->
+			  <view class="table-row">
+			    <view class="row-cell benefit-type">在线普通职位</view>
+			    <view class="row-cell basic">1个</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['row-cell', index === 0 ? 'regular' : index === 1 ? 'vip' : 'flagship']">
+			      {{ vip.vipPostTimes }}个
+			    </view>
+			  </view>
+			
+			  <!-- 在线急聘职位 -->
+			  <view class="table-row">
+			    <view class="row-cell benefit-type">在线急聘职位</view>
+			    <view class="row-cell basic">0个</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['row-cell', index === 0 ? 'regular' : index === 1 ? 'vip' : 'flagship']">
+			      {{ vip.vipDueTimes }}个
+			    </view>
+			  </view>
+			
+			  <!-- 每日查看总数 -->
+			  <view class="table-row">
+			    <view class="row-cell benefit-type">每日查看总数</view>
+			    <view class="row-cell basic">5个</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['row-cell', index === 0 ? 'regular' : index === 1 ? 'vip' : 'flagship']">
+			      {{ vip.vipViewTimes }}个
+			    </view>
+			  </view>
+			
+			  <!-- 每日沟通总数 -->
+			  <view class="table-row">
+			    <view class="row-cell benefit-type">每日沟通总数</view>
+			    <view class="row-cell basic">5个</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['row-cell', index === 0 ? 'regular' : index === 1 ? 'vip' : 'flagship']">
+			      {{ vip.vipConTimes }}个
+			    </view>
+			  </view>
+			
+			  <!-- 价格 -->
+			  <view class="table-row price-row">
+			    <view class="row-cell benefit-type">价格</view>
+			    <view class="row-cell basic">免费</view>
+			    <view v-for="(vip, index) in viplist" :key="vip.id"
+			          :class="['row-cell', index === 0 ? 'regular' : index === 1 ? 'vip' : 'flagship']">
+			      {{ vip.money }}/{{ vipNameTypeText(vip.vipNameType) }}
+			    </view>
+			  </view>
 			</view>
 
 			<!-- 说明文字 -->
@@ -173,6 +170,24 @@
 						</view>
 					</view>
 				</view>
+				
+				<view style="padding: 32rpx;">
+					<view style="font-weight: 500;font-size: 16px;padding-bottom: 32rpx">
+						支付方式
+					</view>
+					<view v-for="(item, i) in openLists" :key="i" @click="selectWay(item)">
+						<view class="rule-item">
+							<image 
+							:src="item.id == openWay 
+							? require('@/static/images/jobApplicant/check.svg') 
+							: require('@/static/images/jobApplicant/border.svg')"
+							  mode="scaleToFill"
+							/>
+							<text>{{ item.text }}</text>
+						</view>
+					</view>
+				</view>
+
 
 				<!-- 支付按钮 -->
 				<view class="payment-button" @click="confirmPayment">
@@ -191,6 +206,7 @@
 				// 当前会员信息
 				currentPlan: 'regular',
 				openWay: 1,
+				openLists:[],
 				isVip: false,
 				isVipC: "",
 				dataTime: "", //到期时间
@@ -210,18 +226,18 @@
 				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,
+				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: {
@@ -250,10 +266,7 @@
 					regular: 599,
 					vip: 1599,
 					flagship: 2599
-				},
-				trialVersion:[],
-				monthlyPayment:[],
-				annual:[]
+				}
 			}
 		},
 		onLoad() {
@@ -317,12 +330,8 @@
 					id: 1,
 				}, ];
 			}
-
 			this.openWay = 1;
 			// #endif
-			
-
-
 		},
 		onShow() {
 			this.getUserInfoVipList();
@@ -639,7 +648,8 @@
 					},
 				});
 			},
-			selectWay: function(item) {
+			// 选择支付方式
+			selectWay(item) {
 				this.openWay = item.id;
 			},
 			//获取会员开通价格
@@ -671,12 +681,6 @@
 						if (this.viplist.length > 0) {
 							this.selectedPlan = this.viplist[0].id;
 						}
-						if(res.data){
-							
-						}
-						this.trialVersion = res.data[0];
-						this.monthlyPayment = res.data[1];
-						this.annual = res.data[2];
 					} else {
 						uni.showToast({
 							title: '暂无VIP套餐',
@@ -1022,12 +1026,13 @@
 		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
 
 		.table-header {
-			display: grid;
-			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+			display: flex;
+			// grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 			background: #f8f9fa;
 			border-bottom: 4rpx solid #FFFFFF;
 
 			.header-cell {
+				flex:1;
 				padding: 12rpx;
 				color: rgba(23, 23, 37, 1);
 				font-family: DM Sans;
@@ -1129,8 +1134,8 @@
 		}
 
 		.table-row {
-			display: grid;
-			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+			display: flex;
+			// grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 			border-bottom: 4rpx solid #FFFFFF;
 
 			&:last-child {
@@ -1151,6 +1156,7 @@
 			}
 
 			.row-cell {
+				flex: 1;
 				padding: 24rpx 12rpx;
 				font-size: 16rpx;
 				text-align: center;
@@ -1370,4 +1376,15 @@
 			font-weight: 600;
 		}
 	}
+	// 密码要求列表
+	.rule-item {
+	  display: flex;
+	  align-items: center;
+	  margin-bottom: 8rpx;
+	  image{
+	    width: 32rpx;
+	    height: 32rpx;
+	    margin-right: 16rpx;
+	  }
+	}
 </style>