<template>
	<view class="sharepage_container">
		<view class="background_image_container">
			<!-- 背景图片 -->
			<image class="background_image" :src="$baseUrl + 'homepage/shareImg_jf1.jpg'" mode="aspectFit" />
			
			<!-- 一键领取按钮 -->
			<view class="claim_button" @click="handleClaim">
				<text class="claim_text">一键领取</text>
			</view>
		</view>
		
		<!-- 分享登录弹窗 -->
		<sharepoplogin 
			:visible="showSharePopLogin" 
			@close="handleCloseSharePopLogin"
			@viewBenefits="handleViewBenefits"
		/>
		
		<!-- 分享未登录弹窗 -->
		<sharenpopnologin 
			:visible="showShareNPopNoLogin" 
			@close="handleCloseShareNPopNoLogin"
			@viewBenefits="handleViewBenefits"
		/>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
import sharepoplogin from '@/components/integralArea/sharepoplogin.vue';
import sharenpopnologin from '@/components/integralArea/sharenpopnologin.vue';

// 分享登录弹窗状态
const showSharePopLogin = ref(false);

// 分享未登录弹窗状态
const showShareNPopNoLogin = ref(true);

onMounted(() => {
	// 页面加载时显示分享未登录弹窗
	showShareNPopNoLogin.value = true;
});

// 关闭分享登录弹窗
const handleCloseSharePopLogin = () => {
	showSharePopLogin.value = false;
};

// 关闭分享未登录弹窗
const handleCloseShareNPopNoLogin = () => {
	showShareNPopNoLogin.value = false;
};

// 查看权益按钮点击
const handleViewBenefits = () => {
	console.log('查看我的权益');
	// 这里可以添加跳转到权益页面的逻辑
	uni.showToast({
		title: '跳转到权益页面',
		icon: 'none'
	});
};

// 一键领取按钮点击事件
const handleClaim = () => {
	console.log('一键领取按钮点击');
	// 这里可以添加领取逻辑
	uni.showToast({
		title: '领取成功',
		icon: 'success'
	});
};

// 分享配置
onShareAppMessage(() => {
	return {
		title: '积分分享',
		path: '/pages/invate/sharepage',
		imageUrl: ''
	};
});
</script>

<style lang="less" scoped>
@import './sharepage.less';
</style>
