我的页面

pages_app/myWelfare/myWelfare.vue

@@ -49,7 +49,7 @@
 					class="benefit-card" 
 					v-for="(benefit, index) in benefitsList" 
 					:key="index"
-					:class="benefit.type"
+					:class="[benefit.type, { 'disabled': !benefit.flag }]"
 					@click="claimBenefit(benefit)"
 				>
 				   <view class="card-title">{{ benefit.title }}</view>
@@ -60,21 +60,20 @@
 						
 						<view class="card-details">
 							<view class="left-section">
-								<text class="condition">{{ benefit.condition }}</text>
-								<text class="requirement">{{ benefit.requirement }}</text>
+								<text class="condition">{{ benefit.left_tip }}</text>
+								<text class="requirement">{{ benefit.left_result }}</text>
 							</view>
 							<view class="right-section">
-								<text class="reward-type">{{ benefit.rewardType }}</text>
-								<text class="reward-value">{{ benefit.rewardValue }}</text>
+								<text class="reward-type">{{ benefit.right_tip }}</text>
+								<text class="reward-value">{{ benefit.right_result }}</text>
 							</view>
 						</view>
+						
 					</view>
 				</view>
 			</scroll-view>
 		</view>
-        <!-- 兑换福利卡 -->
-		<view class="scrollbox">
-		</view>
+        
 		<!-- 底部导航栏 -->
 		<view class="bottom-nav">
 			<view class="nav-item" @click="goPointsDetail">
@@ -87,10 +86,10 @@
 </template>
 
 <script setup>
-	import { ref } from 'vue';
+	import { ref, onMounted } from 'vue';
 	import jifenImg from "@/static/duihuan.png"
-	
-
+	import api from '@/api/api';
+	import navTo  from "@/utils/navTo.js";
 	// 当前选中的标签页
 	const activeTab = ref(0);
 
@@ -102,7 +101,9 @@
 			condition: '赠送积分',
 			requirement: '200积分',
 			rewardType: '立即领取',
-			rewardValue: ''
+			rewardValue: '',
+			flag: true, // 表示是否可领取
+			num: 0 // 需要的新随访数量
 		},
 		{
 			type: 'video',
@@ -110,7 +111,9 @@
 			condition: '再新增随访',
 			requirement: '1个',
 			rewardType: '赠送下载',
-			rewardValue: '2集'
+			rewardValue: '2集',
+			flag: true,
+			num: 1
 		},
 		{
 			type: 'courseware',
@@ -118,7 +121,9 @@
 			condition: '再新增随访',
 			requirement: '6个',
 			rewardType: '赠送下载',
-			rewardValue: '1篇'
+			rewardValue: '1篇',
+			flag: true,
+			num: 6
 		},
 		{
 			type: 'usb',
@@ -126,7 +131,9 @@
 			condition: '再新增随访 (年度计算)',
 			requirement: '96个',
 			rewardType: '赠送U盘',
-			rewardValue: '1个'
+			rewardValue: '1个',
+			flag: true,
+			num: 96
 		}
 	]);
 
@@ -150,18 +157,32 @@
 
 	const switchTab = (index) => {
 		activeTab.value = index;
-		// 这里可以根据标签页切换加载不同的数据
-		uni.showToast({
-			title: `切换到${['领取福利', '使用福利', '兑福利卡'][index]}`,
-			icon: 'none'
-		});
+
+		if (index === 0) {
+			getWelfarePage();
+		} else if (index === 1) {
+			useWelfarePage();
+		} else if (index === 2) {
+			navTo({
+				url: '/pages_app/myWelfareCard/myWelfareCard'
+			});
+		}
 	};
 
 	const claimBenefit = (benefit) => {
+		if (!benefit.flag) {
+			uni.showToast({
+				title: `需${benefit.num}个新随访`,
+				icon: 'none'
+			});
+			return;
+		}
+		
 		uni.showToast({
 			title: `领取${benefit.title}`,
 			icon: 'none'
 		});
+		
 	};
 
 	const goPointsDetail = () => {
@@ -184,6 +205,37 @@
 			icon: 'none'
 		});
 	};
+
+	const useWelfarePage = () => {
+		api.useWelfarePage().then(res => {
+			if (res.code === '200' && res.data) {
+				// 更新福利列表数据
+				benefitsList.value = res.data;
+			}
+		});
+	};
+
+
+	const getWelfarePage = () => {
+		api.getWelfarePage().then(res => {
+			console.log(res);
+			if (res.code === '200' && res.data) {
+				
+				// 更新福利列表数据
+				benefitsList.value = res.data;
+			}
+		}).catch(err => {
+			console.error('获取福利数据失败:', err);
+			uni.showToast({
+				title: '获取福利数据失败',
+				icon: 'none'
+			});
+		});
+	};
+
+	onMounted(() => {
+		getWelfarePage();
+	});
 </script>
 
 <style lang="scss" scoped>
@@ -200,22 +252,6 @@
 	$segmented-height: 80rpx; // 分段控制器高度
 	$bottom-nav-height: 120rpx; // 底部导航高度
 
-	// 混合器
-	@mixin flex-center {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	@mixin flex-between {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	@mixin shadow {
-		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-	}
 
 	.benefits-page {
 		min-height: 100vh;
@@ -226,7 +262,9 @@
 	.status-bar {
 		height: 44rpx;
 		background-color: $white;
-		@include flex-between;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		padding: 0 30rpx;
 		font-size: 24rpx;
 		color: $text-primary;
@@ -262,7 +300,9 @@
 	.header {
 		height: 88rpx;
 		background-color: $white;
-		@include flex-between;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		padding: 0 30rpx;
 		border-bottom: 1rpx solid $border-color;
 
@@ -305,7 +345,9 @@
 
 		.tab-item {
 			flex: 1;
-			@include flex-center;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			height: 100%;
 			position: relative;
 
@@ -338,7 +380,7 @@
 	  box-sizing: border-box;
 	  bottom: $bottom-nav-height;
 	  margin: 30rpx 0 ;
-	  overflow-y: auto;
+	  overflow-y: scroll;
   }
 	.benefits-list {
 		
@@ -352,20 +394,9 @@
 			overflow: hidden;
 			border:2rpx solid #fff;
 
-			&.points {
-				
-			}
-
-			&.video {
-				
-			}
-
-			&.courseware {
-				
-			}
-
-			&.usb {
-				
+			
+			.disabled-text {
+				color: $text-light !important;
 			}
 
 			.card-bg {
@@ -374,9 +405,6 @@
 				right: 20rpx;
 				left:20rpx;
 			    z-index:0;
-				
-				
-
 			}
 
 			.card-content {
@@ -429,6 +457,22 @@
 					}
 				}
 			}
+
+			.status-indicator {
+				position: absolute;
+				top: 10rpx;
+				right: 10rpx;
+				background-color: #4CAF50;
+				border-radius: 20rpx;
+				padding: 4rpx 10rpx;
+				font-size: 20rpx;
+				color: $white;
+				z-index: 2;
+			}
+
+			.status-indicator.disabled {
+				background-color: #FF9800;
+			}
 		}
 	}
 
@@ -447,7 +491,8 @@
 		padding: 0 20rpx;
 
 		.nav-item {
-			@include flex-center;
+			align-items: center;
+			justify-content: center;
 			flex-direction: flex;
 			gap: 8rpx;