pointsRight

api/monthGift.js

+import requestModule from './request.js';
+const {
+    api
+} = requestModule;
+
+/**
+ * 获取月礼包首页数据
+ * @param {Object} params
+ * @param {string} params.level - 用户等级 (diamond, starshine, starlight, gold, platinum)
+ * @returns {Promise<Object>}
+data:{
+    batchCoupon:[
+        {
+            equityCouponInfoId:1,//权益优惠券信息ID	
+            couponId:1,//优惠券ID	
+            couponName:1,//优惠券名称	
+            equityIcon:1,//权益图片	
+            gradeAllow:true,//等级是否允许 true允许	
+            startTime:1,//起始时间 2024-10-23 00:00:00	
+            endTime:1,//结束时间 2024-10-23 00:00:00	
+            stockUsage:1,//已使用库存数量	
+            stockLimit:1,//可使用库存总数量	
+            received:true,//是否已领取
+            stockBatchList:[
+                {
+                    stockBatchId:1,//批次ID
+                    startTime:1,//生效时间 例如：2024-10-28 23:00:00
+                    status:1,//状态 0-待开始 1-抢券中 2-已结束		
+                }
+            ]
+        }
+    ],
+    equityCouponList:[
+        {
+            equityCouponInfoId:1,//权益优惠券信息ID	    
+            couponId:1,//优惠券ID	
+            couponName:1,//优惠券名称	
+            couponSystem:1,//优惠券系统 : BMP: 业务中台系统, SF : 顺丰 , CRM : CRM系统	
+            equityIcon:1,//权益图片	
+            receiveStatus:1,//优惠券状态 0-未领取 1-已领取	
+            receiveTime:1,//领取时间
+        }
+    ]
+
+}
+ */
+export const monthlyGiftIndex = () => api.get('/c/equity/monthlyGift/index')
+
+/**
+ * 月月礼-领取精选好券
+ * @param {Object} data
+ * @param {string} data.stockBatchId - 批次ID
+ * @param {string} data.equityCouponInfoId - 权益优惠券信息ID
+ * @returns {Promise<Object>}
+ * {
+ *   "success": true,
+ *   "message": "领取成功",
+ *   "data": {
+ *     "couponId": "123",
+ *     "couponName": "精选好券",
+ *     "resourceId": "resource_123"
+ * “receiveResult”：0，//领取结果 0-失败 1-成功	F
+ *   }
+ * }
+ */
+export const monthlyGiftDrawOne = (data) => api.post('/c/equity/monthlyGift/drawOne', {
+    stockBatchId: data.stockBatchId,
+    equityCouponInfoId: data.equityCouponInfoId
+})
+
+/**
+ * 月月礼-领取限时1分购
+ * @returns {Promise<Object>}
+ * {
+ *   "success": true,
+ *   "message": "领取成功",
+ *   "data": {
+ *     "status": 1,
+ *     "receivedNormalCouponList": [
+ *       {
+ *         "couponId": "123",
+ *         "equityCouponInfoId": "456",
+ *         "couponName": "限时1分购券",
+ *         "equityIcon": "icon_url",
+ *         "resourceId": "resource_789"
+ *       }
+ *     ]
+ *   }
+ * }
+ */
+export const monthlyGiftDrawAll = (data) => api.post('/c/equity/monthlyGift/drawAll', {
+
+})
+
+
+

api/request.js

@@ -16,9 +16,9 @@ const {
 // request.js
 // 通常可以吧 baseUrl 单独放在一个 js 文件了
 // const baseUrl = "http://172.16.224.178:7777/pmall";
-// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
-let baseUrl = "https://momclub.feihe.com/pmall";//生产环境   
-// const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
+const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
+// let baseUrl = "https://momclub.feihe.com/pmall";//生产环境   
+// const baseUrl = "https://docs.dui88.com/mock/1956";//mock
 // const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"
 
 const request = (options = {}) => {

components/pointRightsCom/babyClass.vue

 <template>
-    <view class="babyclass ">
-        <view class="diamond">
+    <view class="babyclass">
+        <!-- 根据用户等级动态显示对应等级页面 -->
+        <view v-if="currentLevel === 'diamond'" class="diamond">
             <image class="diamondbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
             <image class="diamondtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.TITLE}`" mode="aspectFit"></image>
             <view class="diamondips">
@@ -13,11 +14,11 @@
                 <image class="diamondips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.IPS4}`" mode="aspectFit">
                 </image>
             </view>
-            <image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit"></image>
+            <image class="diamondbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.BTN}`" mode="aspectFit" @click="jump('diamond')"></image>
             <image class="diamonddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.DIAMOND.DESC}`" mode="aspectFit"></image>
         </view>
 
-        <view class="starshine">
+        <view v-if="currentLevel === 'starshine'" class="starshine">
             <image class="starshinebg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
             <image class="starshinetitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.TITLE}`" mode="aspectFit">
             </image>
@@ -31,12 +32,12 @@
                 <image class="starshineips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.IPS4}`" mode="aspectFit">
                 </image>
             </view>
-            <image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit"></image>
+            <image class="starshinebtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.BTN}`" mode="aspectFit" @click="jump('starshine')"></image>
             <image class="starshinedesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARSHINE.DESC}`" mode="aspectFit">
             </image>
         </view>
 
-        <view class="starlight">
+        <view v-if="currentLevel === 'starlight'" class="starlight">
             <image class="starlightbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
             <image class="starlighttitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.TITLE}`" mode="aspectFit">
             </image>
@@ -50,12 +51,12 @@
                 <image class="starlightips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.IPS4}`" mode="aspectFit">
                 </image>
             </view>
-            <image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit"></image>
+            <image class="starlightbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.BTN}`" mode="aspectFit" @click="jump('starlight')"></image>
             <image class="starlightdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.STARLIGHT.DESC}`" mode="aspectFit">
             </image>
         </view>
 
-        <view class="gold">
+        <view v-if="currentLevel === 'gold'" class="gold">
             <image class="goldipsbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
             <image class="goldipstitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.TITLE}`" mode="aspectFit"></image>
             <view class="goldips">
@@ -64,11 +65,11 @@
                 <image class="goldips3" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS3}`" mode="aspectFit"></image>
                 <image class="goldips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.IPS4}`" mode="aspectFit"></image>
             </view>
-            <image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit"></image>
+            <image class="goldbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.BTN}`" mode="aspectFit" @click="jump('gold')"></image>
             <image class="golddesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.GOLD.DESC}`" mode="aspectFit"></image>
         </view>
 
-        <view class="platinum">
+        <view v-if="currentLevel === 'platinum'" class="platinum">
             <image class="platinumbg" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
             <image class="platinumtitle" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.TITLE}`" mode="aspectFit">
             </image>
@@ -82,9 +83,10 @@
                 <image class="platinumips4" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.IPS4}`" mode="aspectFit">
                 </image>
             </view>
-            <image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit"></image>
+            <image class="platinumbtn" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.BTN}`" mode="aspectFit" @click="jump('platinum')"></image>
             <image class="platinumdesc" :src="`${$baseUrl}${BABY_CLASS_IMAGES.PLATINUM.DESC}`" mode="aspectFit"></image>
         </view>
+
     </view>
 </template>
 
@@ -95,6 +97,29 @@ import { BABY_CLASS_IMAGES } from './babyClassImages.js'
 // 获取全局属性
 const { proxy } = getCurrentInstance()
 const $baseUrl = proxy.$baseUrl
+
+// 接收用户等级参数
+const props = defineProps({
+    currentLevel: {
+        type: String,
+        required: true,
+        validator: (value) => ['gold', 'platinum', 'diamond', 'starlight', 'starshine'].includes(value),
+    },
+})
+
+// 跳转方法
+const jump = (level) => {
+    console.log(`跳转到 ${level} 等级页面`)
+    
+    // 跳转到 H5 页面，地址暂时默认 https://www.baidu.com
+    // 可以根据不同等级跳转到不同的地址
+    const url = 'https://www.baidu.com'
+    
+    // 使用 uni.navigateTo 跳转到 webview 页面
+    uni.navigateTo({
+        url: `/pages/webview/webview?url=${encodeURIComponent(url)}&title=${level}等级页面`
+    })
+}
 </script>
 
 <style lang="less" scoped>
@@ -177,6 +202,12 @@ const $baseUrl = proxy.$baseUrl
             left: 97rpx;
             top: 493rpx;
             position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            
+            &:active {
+                transform: scale(0.95);
+            }
         }
 
         .diamonddesc {
@@ -258,6 +289,12 @@ const $baseUrl = proxy.$baseUrl
             left: 97rpx;
             top: 493rpx;
             position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            
+            &:active {
+                transform: scale(0.95);
+            }
         }
 
         .starshinedesc {
@@ -339,6 +376,12 @@ const $baseUrl = proxy.$baseUrl
             left: 97rpx;
             top: 493rpx;
             position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            
+            &:active {
+                transform: scale(0.95);
+            }
         }
 
         .starlightdesc {
@@ -420,6 +463,12 @@ const $baseUrl = proxy.$baseUrl
             left: 97rpx;
             top: 493rpx;
             position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            
+            &:active {
+                transform: scale(0.95);
+            }
         }
 
         .golddesc {
@@ -501,6 +550,12 @@ const $baseUrl = proxy.$baseUrl
             left: 97rpx;
             top: 493rpx;
             position: absolute;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            
+            &:active {
+                transform: scale(0.95);
+            }
         }
 
         .platinumdesc {
@@ -511,5 +566,18 @@ const $baseUrl = proxy.$baseUrl
             position: absolute;
         }
     }
+
+    .default-text {
+        width: 635rpx;
+        height: 713rpx;
+        left: 0rpx;
+        top: 0rpx;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 36rpx;
+        color: #999;
+    }
 }
 </style>

pages/testPage/testPage.vue

 <template>
 	<view class="test-page">
 		<view class="page-title">测试页面 - MonthGift 组件</view>
+		
+		<!-- 测试控制面板 -->
+		<view class="test-controls">
+			<view class="control-section">
+				<text class="control-title">组件切换</text>
+				<view class="component-buttons">
+					<button 
+						v-for="component in components" 
+						:key="component.value"
+						class="component-btn"
+						:class="{ active: currentComponent === component.value }"
+						@click="switchComponent(component.value)"
+					>
+						{{ component.label }}
+					</button>
+				</view>
+			</view>
+			
+			<view class="control-section">
+				<text class="control-title">用户等级设置</text>
+				<view class="level-buttons">
+					<button 
+						v-for="level in userLevels" 
+						:key="level.value"
+						class="level-btn"
+						:class="{ active: currentUserLevel === level.value }"
+						@click="setUserLevel(level.value)"
+					>
+						{{ level.label }}
+					</button>
+				</view>
+			</view>
+			
+		
+		</view>
+		
 		<view class="component-container">
-			<MonthGift />
+			<!-- MonthGift 组件 -->
+			<MonthGift 
+				v-if="currentComponent === 'monthGift'" 
+				:current-level="currentUserLevel" 
+				ref="monthGiftRef" 
+			/>
+			
+			<!-- YearGift 组件 -->
+			<YearGift 
+				v-if="currentComponent === 'yearGift'" 
+				:current-level="currentUserLevel" 
+				ref="yearGiftRef" 
+			/>
+			
+			<!-- BabyClass 组件 -->
+			<BabyClass 
+				v-if="currentComponent === 'babyClass'" 
+				:current-level="currentUserLevel" 
+				ref="babyClassRef" 
+			/>
 		</view>
+		
 		<view class="page-info">
 			<p class="info-title">组件信息</p>
-			<p>当前展示：月礼包权益组件 (MonthGift)</p>
-			<p>包含五个等级：Diamond、Starshine、Starlight、Gold、Platinum</p>
-			<p>每个等级包含：好券区域、购买区域、时间状态等</p>
+			<p>当前展示：{{ getCurrentComponentInfo().title }}</p>
+			<p>{{ getCurrentComponentInfo().description }}</p>
+			<p>包含五个等级：黄金、铂金、钻石、星光、星耀（从低到高）</p>
+			<p class="usage-info">使用方法：通过控制面板切换组件和用户等级，组件会根据等级动态显示对应页面</p>
 			<p class="note">注意：由于图片资源未配置，部分图片可能无法显示</p>
 		</view>
 	</view>
 </template>
 
 <script setup>
+import { ref, reactive } from 'vue'
 import BabyClass from '../../components/pointRightsCom/babyClass.vue';
 import YearGift from '../../components/pointRightsCom/yearGift.vue';
 import MonthGift from '../../components/pointRightsCom/monthGift.vue';
-// import xinrenliPopup from '../../components/quanyi/xinrenliPopup.vue'
+
+// 用户等级选项
+const userLevels = [
+	{ label: '黄金', value: 'gold' },
+	{ label: '铂金', value: 'platinum' },
+	{ label: '钻石', value: 'diamond' },
+	{ label: '星光', value: 'starlight' },
+	{ label: '星耀', value: 'starshine' }
+]
+
+const currentUserLevel = ref('diamond')
+const monthGiftRef = ref(null)
+
+// 组件切换选项
+const components = [
+	{ label: '月礼包', value: 'monthGift' },
+	{ label: '年礼包', value: 'yearGift' },
+	{ label: '宝宝权益', value: 'babyClass' }
+]
+
+const currentComponent = ref('monthGift')
+
+// 切换组件
+const switchComponent = (componentValue) => {
+	currentComponent.value = componentValue
+	console.log('切换组件到:', componentValue)
+}
+
+// 设置用户等级
+const setUserLevel = (level) => {
+	currentUserLevel.value = level
+	console.log('用户等级设置为:', level)
+	
+	// 这里应该通过props或事件传递给MonthGift组件
+	// 暂时通过console输出，实际项目中需要通过组件通信
+}
+
+
+
+// 获取当前组件的标题和描述
+const getCurrentComponentInfo = () => {
+	switch (currentComponent.value) {
+		case 'monthGift':
+			return {
+				title: '月礼包权益组件',
+				description: '包含好券区域、购买区域、时间状态等'
+			}
+		case 'yearGift':
+			return {
+				title: '年礼包权益组件',
+				description: '包含好券区域、购买区域、时间状态等'
+			}
+		case 'babyClass':
+			return {
+				title: '宝宝权益组件',
+				description: '包含好券区域、购买区域、时间状态等'
+			}
+		default:
+			return {
+				title: '未知组件',
+				description: '请切换到具体组件查看'
+			}
+	}
+}
 </script>
 
 <style lang="less" scoped>
@@ -29,7 +150,7 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 20rpx;
+	// padding: 20rpx;
 	box-sizing: border-box;
 	
 	.page-title {
@@ -40,15 +161,109 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
 		text-align: center;
 	}
 	
+	.test-controls {
+		width: 100%;
+		max-width: 700rpx;
+		background-color: #fff;
+		padding: 30rpx;
+		border-radius: 20rpx;
+		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+		margin-bottom: 30rpx;
+		
+		.control-section {
+			margin-bottom: 30rpx;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+			
+			.control-title {
+				display: block;
+				font-size: 28rpx;
+				font-weight: bold;
+				color: #333;
+				margin-bottom: 20rpx;
+			}
+			
+			.component-buttons, .level-buttons, .time-buttons {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 20rpx;
+				
+				.component-btn, .level-btn, .time-btn {
+					padding: 20rpx 30rpx;
+					border: 2rpx solid #e0e0e0;
+					border-radius: 25rpx;
+					background-color: #fff;
+					color: #666;
+					font-size: 26rpx;
+					transition: all 0.3s ease;
+					
+					&.active {
+						border-color: #FF6B6B;
+						background-color: #FF6B6B;
+						color: #fff;
+					}
+					
+					&:active {
+						transform: scale(0.95);
+					}
+				}
+				
+				.component-btn {
+					&.active {
+						border-color: #4ECDC4;
+						background-color: #4ECDC4;
+						color: #fff;
+					}
+				}
+			}
+			
+			.reset-btn {
+				width: 100%;
+				padding: 25rpx;
+				border: 2rpx solid #FF6B6B;
+				border-radius: 25rpx;
+				background-color: #fff;
+				color: #FF6B6B;
+				font-size: 28rpx;
+				font-weight: bold;
+				transition: all 0.3s ease;
+				
+				&:active {
+					background-color: #FF6B6B;
+					color: #fff;
+					transform: scale(0.98);
+				}
+			}
+		}
+	}
+	
 	.component-container {
 		width: 750rpx;
-		height: 1624rpx;
+		height: 1384rpx;
 		position: relative;
 		margin-bottom: 30rpx;
-		background-color: #fff;
+		// background-color: #fff;
 		border-radius: 20rpx;
-		overflow: hidden;
+		// overflow: hidden;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		
+		// 添加组件切换动画
+		.component-fade-in {
+			animation: fadeIn 0.3s ease-in-out;
+		}
+	}
+	
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(20rpx);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
 	}
 	
 	.page-info {
@@ -75,6 +290,16 @@ import MonthGift from '../../components/pointRightsCom/monthGift.vue';
 			text-align: center;
 		}
 		
+		.usage-info {
+			color: #555;
+			font-style: italic;
+			margin-top: 10rpx;
+			padding: 10rpx;
+			background-color: #f0f0f0;
+			border-radius: 8rpx;
+			border-left: 4rpx solid #666;
+		}
+		
 		.note {
 			color: #ff6b6b;
 			font-weight: 500;