6666

components/integralArea/InviteGift.less

+.invite_gift_container {
+	width: 100%;
+	margin-bottom: 30rpx;
+
+	.invite_gift_title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 20rpx;
+		display: block;
+	}
+
+	.invite_card {
+		position: relative;
+		width: 100%;
+		height: 254rpx;
+		background: rgba(255, 255, 255, 0.3);
+		border-radius: 30rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+		padding: 30rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+
+		.card_content {
+			position: relative;
+			z-index: 2;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			// justify-content: space-between;
+
+			.card_title {
+				font-size: 36rpx;
+				font-weight: bold;
+				color: #1c1c1c;
+			}
+
+			.card_description {
+				font-size: 24rpx;
+				color: #999999;
+				margin-top: 10rpx;
+			}
+
+			.invite_button {
+				width: 172rpx;
+				height: 62rpx;
+				background: linear-gradient(90deg, #A07B4D 0%, #C09A60 100%);
+				border-radius: 30rpx;
+				display: flex;
+                margin-top: 20rpx;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 2rpx 8rpx rgba(160, 123, 77, 0.3);
+
+				.invite_button_text {
+					font-size: 28rpx;
+					// font-weight: bold;
+					color: #FFFFFF;
+				}
+			}
+		}
+
+		.record_button {
+			position: absolute;
+            width: 146rpx;
+            height: 62rpx;
+			top: 16rpx;
+            right: 20rpx;
+			z-index: 3;
+			background: rgba(255, 255, 255, 0.8);
+			border-radius: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.record_text {
+				font-size: 24rpx;
+				color: #999999;
+				margin-right: 8rpx;
+			}
+
+			.record_arrow {
+				font-size: 20rpx;
+				color: #999999;
+				font-weight: bold;
+			}
+		}
+
+		.star_character {
+			position: absolute;
+			right: -20rpx;
+			bottom: -20rpx;
+			z-index: 1;
+			width: 120rpx;
+			height: 120rpx;
+
+			.star_img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}

components/integralArea/InviteGift.vue

+<template>
+	<view class="invite_gift_container">
+		<!-- 主标题 -->
+		<text class="invite_gift_title">邀请得好礼</text>
+		
+		<!-- 邀请卡片 -->
+		<view class="invite_card">
+			<!-- 卡片内容区域 -->
+			<view class="card_content">
+				<!-- 卡片标题 -->
+				<text class="card_title">邀请好友注册得好礼</text>
+				
+				<!-- 描述文字 -->
+				<text class="card_description">成功邀请一位好友注册即可获得XXX</text>
+				
+				<!-- 去邀请按钮 -->
+				<view class="invite_button" @click="handleInviteClick">
+					<text class="invite_button_text">去邀请</text>
+				</view>
+			</view>
+			
+			<!-- 邀请记录按钮 -->
+			<view class="record_button" @click="handleRecordClick">
+				<text class="record_text">邀请记录</text>
+				<text class="record_arrow">{{`>`}}</text>
+			</view>
+			
+			<!-- 3D星星角色 -->
+			<view class="star_character">
+				<image 
+					class="star_img" 
+					:src="$baseUrl + 'integral/1023/star_character.png'" 
+					mode="aspectFit"
+				/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { defineEmits } from 'vue';
+
+// Emits 定义
+const emit = defineEmits(['invite', 'record']);
+
+// 去邀请按钮点击事件
+const handleInviteClick = () => {
+	console.log('去邀请按钮点击');
+	emit('invite');
+};
+
+// 邀请记录按钮点击事件
+const handleRecordClick = () => {
+	console.log('邀请记录按钮点击');
+	emit('record');
+};
+</script>
+
+<style lang="less" scoped>
+@import '@/components/integralArea/InviteGift.less';
+</style>

views/Integral.less

@@ -658,6 +658,11 @@
 			}
 		}
 	}
+
+	.invite_container {
+		height: 332rpx;
+		margin: 60rpx 32rpx 0 32rpx;
+	}
 	
 	.vip-active-area {
 		width: 686rpx;
@@ -1055,3 +1060,10 @@
 	}
 
 }
+
+// 邀请得好礼组件容器样式
+.invite_container {
+	width: 100%;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+}

views/Integral.vue

@@ -327,6 +327,9 @@
 			</view>
 		</view>
 
+		<!-- 邀请得好礼组件 -->
+		<InviteGift v-if="true"  class="invite_container" @invite="handleInviteClick" @record="handleRecordClick" />
+
 		<!-- 会员活动 -->
 		<view class="vip-active-area" v-if="vipActive?.length > 0">
 			<text class="vip-title" :style="{ color: itemIndex === 4 ? '#fff0df' : '#1d1e25' }">会员活动</text>
@@ -593,6 +596,7 @@ import SignRuleDes from '../components/qiandao/SignRuleDes.vue';
 import TaskPop from '../components/renwu/TaskPop.vue';
 import TaskPerson from '../components/renwu/TaskPerson.vue';
 import GongzhonghaoPop from '../components/renwu/GongzhonghaoPop.vue';
+import InviteGift from '../components/integralArea/InviteGift.vue';
 import bannerDataIntegral from '../mock/bannerDataIntegral.json';
 import jifenGoodsData from '../mock/jifenGoodsData.json';
 import { onShow } from "@dcloudio/uni-app";
@@ -1888,7 +1892,7 @@ onMounted(async () => {
 
 
 		if (islogin.value) {
-				itemIndex.value = vipLevel.value;
+			itemIndex.value = vipLevel.value;
 		} else {
 			itemIndex.value = 0;
 		}
@@ -2921,6 +2925,42 @@ const handleTaskPersonSubmit = (formData) => {
 	});
 }
 
+// 处理邀请按钮点击
+const handleInviteClick = () => {
+	console.log('去邀请按钮点击');
+	
+	// 埋点统计
+	md.sensorLogTake({
+		xcxClick: "积分服务页-邀请得好礼页面点击",
+		pageName: "积分服务页-邀请得好礼",
+		buttonName: "去邀请",
+	});
+	
+	// 这里可以添加邀请逻辑
+	uni.showToast({
+		title: '跳转到邀请页面',
+		icon: 'none'
+	});
+}
+
+// 处理邀请记录按钮点击
+const handleRecordClick = () => {
+	console.log('邀请记录按钮点击');
+	
+	// 埋点统计
+	md.sensorLogTake({
+		xcxClick: "积分服务页-邀请得好礼页面点击",
+		pageName: "积分服务页-邀请得好礼",
+		buttonName: "邀请记录",
+	});
+	
+	// 这里可以添加查看邀请记录的逻辑
+	uni.showToast({
+		title: '跳转到邀请记录页面',
+		icon: 'none'
+	});
+}
+
 // 任务点击事件
 const handleTaskClick = (data) => {
 	console.log('任务点击:', data);