<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>
			<!-- 3D星星角色 -->
			<view class="star_character">
				<image 
					class="star_img" 
					:src="$baseUrl + 'integral/1023/invate_star_character1023.png'" 
					mode="aspectFit"
				/>
			</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>
