<template>
	<view class="sharepage_container">
		<!-- 背景图片 -->
		<image class="background_image" :src="$baseUrl + 'shareImg.jpg'" mode="aspectFill" />
		
		<!-- 页面内容 -->
		<view class="page_content">
			<!-- 头部横幅区域 -->
			<view class="header_banner">
				<view class="banner_content">
					<text class="main_title">星妈会送你一份新人福利</text>
					<text class="sub_title">活动副标题活动副标题活动</text>
				</view>
				<view class="gift_box">
					<image class="gift_icon" :src="$baseUrl + 'integral/1023/gift_box.png'" mode="aspectFit" />
				</view>
			</view>
			
			<!-- 育儿课程区域 -->
			<view class="courses_section">
				<text class="section_title">育儿课程</text>
				<scroll-view class="courses_scroll" scroll-x="true" show-scrollbar="false">
					<view class="courses_container">
						<view class="course_card" v-for="(course, index) in courses" :key="index">
							<view class="course_header">
								<image class="logo_icon" :src="course.logo" mode="aspectFit" />
								<image class="tag_icon" :src="course.tag" mode="aspectFit" />
							</view>
							<image class="doctor_image" :src="course.doctorImage" mode="aspectFit" />
							<text class="course_title">{{ course.title }}</text>
							<text class="course_subtitle">{{ course.subtitle }}</text>
							<view class="doctor_info">
								<text class="doctor_name">{{ course.doctorName }}</text>
								<text class="doctor_title">{{ course.doctorTitle }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<text class="courses_description">5类课程:产检,儿童疫苗,婴幼儿护理,小儿发热,小儿7种常见病的治疗方法和用药原则</text>
			</view>
			
			<!-- 免费问诊区域 -->
			<view class="consultation_section">
				<text class="section_title">免费问诊</text>
				<scroll-view class="doctors_scroll" scroll-x="true" show-scrollbar="false">
					<view class="doctors_container">
						<view class="doctor_card" v-for="(doctor, index) in doctors" :key="index">
							<image class="doctor_avatar" :src="doctor.avatar" mode="aspectFill" />
							<text class="doctor_name">{{ doctor.name }}</text>
							<text class="doctor_position">{{ doctor.position }}</text>
							<text class="doctor_affiliation">{{ doctor.affiliation }}</text>
						</view>
					</view>
				</scroll-view>
				<text class="consultation_description">三甲医生免费在线问诊服务(5次/年)</text>
			</view>
			
			<!-- 限时1分购区域 -->
			<view class="limited_purchase_section">
				<text class="section_title">限时1分购</text>
				<view class="schedule_info">
					<text class="schedule_text">每月28号10、12、14、16点限量发放</text>
					<view class="vip_info">
						<image class="lock_icon" :src="$baseUrl + 'integral/1023/lock_icon.png'" mode="aspectFit" />
						<text class="vip_text">钻石、星光、星耀尊享</text>
					</view>
				</view>
				<view class="time_slots">
					<view class="time_slot" v-for="(slot, index) in timeSlots" :key="index">
						<text class="time_text">{{ slot.time }}</text>
						<text class="status_text">{{ slot.status }}</text>
					</view>
				</view>
				<view class="exchange_coupon">
					<image class="product_image" :src="$baseUrl + 'integral/1023/products.png'" mode="aspectFit" />
					<view class="coupon_info">
						<text class="coupon_title">商品兑换券</text>
						<text class="coupon_description">星妈优选多款商品任选</text>
					</view>
					<view class="unlock_button">
						<text class="unlock_text">待解锁</text>
					</view>
				</view>
			</view>
			
			<!-- 精选好券区域 -->
			<view class="coupons_section">
				<text class="section_title">精选好券</text>
				<scroll-view class="coupons_scroll" scroll-x="true" show-scrollbar="false">
					<view class="coupons_container">
						<view class="coupon_card" v-for="(coupon, index) in coupons" :key="index">
							<text class="coupon_label" v-if="coupon.label">{{ coupon.label }}</text>
							<text class="coupon_amount">{{ coupon.amount }}</text>
							<text class="coupon_description">{{ coupon.description }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 一键领取按钮 -->
			<view class="claim_button" @click="handleClaim">
				<text class="claim_text">一键领取</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 育儿课程数据
const courses = ref([
	{
		logo: '/static/images/feihe_logo.png',
		tag: '/static/images/orange_tag.png',
		doctorImage: '/static/images/doctor_xu.png',
		title: '2步拯救窒息宝宝(异物窒息)',
		subtitle: '家长必学的救命之法',
		doctorName: '徐. 营养',
		doctorTitle: '北京妇产医院营养中心'
	}
]);

// 医生数据
const doctors = ref([
	{
		avatar: '/static/images/doctor_li.png',
		name: '李志忠',
		position: '甘肃省营养学会食品营养分会副主任',
		affiliation: '兰州理工大学生物化学教授'
	}
]);

// 时间槽数据
const timeSlots = ref([
	{ time: '10:00', status: '待解锁' },
	{ time: '12:00', status: '待解锁' },
	{ time: '14:00', status: '待解锁' },
	{ time: '16:00', status: '待解锁' }
]);

// 优惠券数据
const coupons = ref([
	{ amount: '10元', description: '定制产品立减券' },
	{ label: '星妈优选', amount: '20元', description: '满99元使用' },
	{ amount: '10元', description: '定制产品立减券' },
	{ amount: '8折', description: '顺丰代金券' },
	{ amount: '40元', description: '功能营养无门槛券' }
]);

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

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