pet-system-merchant-app/pages/index/index.vue

<template>
	<view class="home-page">
		<!-- 顶部背景与搜索区域 @Author: Antigravity -->
		<view class="header-section">
			<image src="/static/images/index-header.png" class="header-bg" mode="widthFix"></image>
		</view>

		<!-- 系统通知栏 @Author: Antigravity -->
		<view class="notice-section">
			<view class="notice-bar">
				<image src="/static/images/index-notice.png" class="notice-icon" mode="aspectFit"></image>
				<text class="notice-text">【重要通知】尊敬的用户，由于近期接送需求激增，请各位宠主尽量提前24小时进行服务预约，感谢您的理解与配合！</text>
			</view>
		</view>

		<!-- 业务导航区 (左1右2) @Author: Antigravity -->
		<view class="main-nav-section">
			<view class="nav-container">
				<!-- 左侧大按钮: 宠物接送 -->
				<view class="nav-card large-card" @click="goToServiceDetail(transportService)">
					<image src="/static/images/pickup-dropoff.png" class="card-bg" mode="aspectFill"></image>
					<view class="card-info">
						<text class="card-title">{{ transportService?.name || '宠物接送' }}</text>
						<text class="card-desc">{{ transportService?.remark || '支持单程/往返服务' }}</text>
					</view>
				</view>

				<!-- 右侧分栏 -->
				<view class="right-stack">
					<!-- 右上: 上门喂遛 -->
					<view class="nav-card small-card" @click="goToServiceDetail(feedingService)">
						<image src="/static/images/feed-walk.png" class="card-bg" mode="aspectFill"></image>
						<view class="card-info">
							<text class="card-title">{{ feedingService?.name || '上门喂遛' }}</text>
							<text class="card-desc">{{ feedingService?.remark || '每次上门基础费用' }}</text>
						</view>
					</view>

					<!-- 右下: 上门洗护 -->
					<view class="nav-card small-card" @click="goToServiceDetail(washingService)">
						<image src="/static/images/laundry-clean.png" class="card-bg" mode="aspectFill"></image>
						<view class="card-info">
							<text class="card-title">{{ washingService?.name || '上门洗护' }}</text>
							<text class="card-desc">{{ washingService?.remark || '每次上门基础费用' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 中间横幅图片 @Author: Antigravity -->
		<view class="middle-section">
			<image src="/static/images/index-middle.png" class="middle-image" mode="widthFix"></image>
		</view>

		<!-- 底部居中标志 @Author: Antigravity -->
		<view class="symbol-section">
			<image src="/static/images/index-symbol.png" class="symbol-img" mode="widthFix"></image>
		</view>

		<!-- 底部手势与文字 @Author: Antigravity -->
		<view class="hand-section">
			<view class="hand-wrapper">
				<image src="/static/images/index-hand.png" class="hand-img" mode="widthFix"></image>
				<view class="hand-text-content">
					<text class="hand-title">好萌友提醒您~</text>
					<text class="hand-subtitle">懂你的爱，更懂你的小可爱~</text>
				</view>
			</view>
		</view>

		<custom-tabbar></custom-tabbar>

		<!-- 隐私政策弹窗 -->
		<view class="privacy-modal-mask" v-if="showPrivacyModal">
			<view class="privacy-modal-content">
				<view class="privacy-modal-header">
					<text class="privacy-modal-title">服务协议和隐私政策提示</text>
				</view>
				<scroll-view scroll-y="true" class="privacy-modal-body">
					<view class="privacy-text-content">
						<text class="text-p">欢迎您选择由重庆盈锐文化传播有限公司运营的“好萌友”！我们非常重视您的个人信息和隐私保护。</text>
						<text class="text-p">在您使用“好萌友”产品及相关服务前，请仔细阅读并同意</text>
						<text class="text-link-active" @click="goToPrivacy">《好萌友隐私政策》</text>
						<text
							class="text-p">，以了解我们如何收集、使用、共享及保护您的个人信息，包括收集您的设备制造商、设备型号、设备标识符（OAID/VAID/AAID等）等相关信息。</text>
						<text class="text-p">为了给您提供宠物接送、上门服务等核心功能，我们会请求定位、相机、相册及剪切板等权限。如果您同意，请点击“同意并继续”开始使用我们的服务。</text>
					</view>
				</scroll-view>
				<view class="privacy-modal-footer">
					<button class="btn-refuse" @click="handleRefuse">不同意并退出</button>
					<button class="btn-accept" @click="handleAccept">同意并继续</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import customTabbar from '@/components/custom-tabbar/index.vue'
import { listAll } from '@/api/service/list'

const showPrivacyModal = ref(false)
const transportService = ref(null)
const feedingService = ref(null)
const washingService = ref(null)

const SERVICE_IDS = {
	transport: '2026540079472181250',
	feeding: '2026541504596017154',
	washing: '2026542038396735489'
}

const fetchServices = async () => {
	try {
		const res = await listAll()
		const list = Array.isArray(res) ? res : (res?.data || res?.rows || [])
		transportService.value = list.find(item => String(item.id) === SERVICE_IDS.transport) || null
		feedingService.value = list.find(item => String(item.id) === SERVICE_IDS.feeding) || null
		washingService.value = list.find(item => String(item.id) === SERVICE_IDS.washing) || null
	} catch (err) {
		console.error('获取首页服务数据失败:', err)
	}
}

const goToServiceDetail = (service) => {
	if (!service || !service.id) {
		uni.showToast({ title: '服务暂不可用', icon: 'none' })
		return
	}
	uni.setStorageSync('currentService', service)
	uni.navigateTo({ url: `/pages/service/detail/index?serviceId=${service.id}&buyFlag=false` })
}

onMounted(() => {
	fetchServices()
	const agreed = uni.getStorageSync('privacy_agreed')
	if (!agreed) {
		showPrivacyModal.value = true
	} else {
		// 已同意隐私政策，若未登录，则自动重定向至登录页
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
	}
})

const goToPrivacy = () => {
	uni.navigateTo({
		url: `/pages/my/agreement/detail/index?id=2&title=${encodeURIComponent('好萌友隐私政策')}`
	})
}

const handleAccept = () => {
	uni.setStorageSync('privacy_agreed', true)
	showPrivacyModal.value = false
	uni.showToast({
		title: '已同意隐私政策',
		icon: 'success'
	})

	// 同意协议后，若没有 Token 则在一秒后重定向跳转至登录界面
	const token = uni.getStorageSync('token')
	if (!token) {
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}, 1000)
	}
}

const handleRefuse = () => {
	uni.showModal({
		title: '提示',
		content: '我们需要您的授权同意隐私政策，以保障服务体验。若不同意，您将无法使用本应用服务。确认退出吗？',
		confirmText: '确认退出',
		cancelText: '重新阅读',
		success: (res) => {
			if (res.confirm) {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.runtime.quit()
				} else {
					uni.showToast({
						title: '请手动关闭应用',
						icon: 'none'
					})
				}
				// #endif
				// #ifndef APP-PLUS
				uni.showToast({
					title: '已拒绝，将限制部分功能使用',
					icon: 'none'
				})
				showPrivacyModal.value = true
				// #endif
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.home-page {
	background: #f8f9fb;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* ====== 顶部搜索与背景 ====== */
.header-section {
	position: relative;
	width: 100%;
}

.header-bg {
	width: 100%;
	display: block;
}

/* ====== 通知栏 ====== */
.notice-section {
	padding: 20rpx 32rpx;
}

.notice-bar {
	display: flex;
	align-items: center;
	background: #fffbef;
	border-radius: 20rpx;
	padding: 16rpx 24rpx;
	gap: 16rpx;
}

.notice-icon {
	width: 40rpx;
	height: 40rpx;
	flex-shrink: 0;
}

.notice-text {
	font-size: 24rpx;
	color: #e6a23c;
	line-height: 1.4;
}

/* ====== 核心卡片布局 @Author: Antigravity ====== */
.main-nav-section {
	padding: 10rpx 32rpx;
}

.nav-container {
	display: flex;
	height: 280rpx;
	/* 将之前较高的 380rpx 调低，使整体按钮高度变矮 */
	gap: 20rpx;
}

.nav-card {
	border-radius: 24rpx;
	position: relative;
	overflow: hidden;
	background: #fff;
}

.card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.card-info {
	position: relative;
	z-index: 2;
	padding: 30rpx 24rpx;
}

.large-card {
	flex: 1;
}

.right-stack {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.small-card {
	flex: 1;
}

.card-title {
	font-size: 32rpx;
	font-weight: 800;
	color: #333;
	margin-bottom: 4rpx;
	display: block;
}

/* 根据图片色系微调文字颜色以匹配 UI 稿 */
.large-card .card-title {
	color: #d35400;
}

.right-stack .small-card:first-child .card-title {
	color: #2c5ba7;
}

.right-stack .small-card:last-child .card-title {
	color: #c0392b;
}

.card-desc {
	font-size: 20rpx;
	color: #8e8e8e;
	display: block;
}

/* ====== 中间横幅 @Author: Antigravity ====== */
.middle-section {
	padding: 10rpx 0;
	/* 缩小自身上下间距 */
	display: flex;
	justify-content: center;
}

.middle-image {
	width: 65%;
	/* 进一步缩小宽度到 65% */
	border-radius: 20rpx;
	display: block;
}

/* ====== 底部标志 @Author: Antigravity ====== */
.symbol-section {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 32rpx 20rpx;
	/* 控制绿色横幅的 padding 以对齐上方 */
}

.symbol-img {
	width: 100%;
	/* 中间的标志（绿色大横幅）完美等宽于三个按钮 */
	border-radius: 20rpx;
	display: block;
}

/* ====== 底部手势与文字 @Author: Antigravity ====== */
.hand-section {
	padding: 30rpx 32rpx 60rpx;
	display: flex;
	justify-content: center;
}

.hand-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hand-img {
	width: 100%;
	display: block;
}

.hand-text-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
}

.hand-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.hand-subtitle {
	font-size: 24rpx;
	color: #999;
}

/* ====== 隐私政策弹窗样式 ====== */
.privacy-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(16rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 48rpx;
}

.privacy-modal-content {
	width: 100%;
	max-height: 75vh;
	background: #ffffff;
	border-radius: 36rpx;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.privacy-modal-header {
	padding: 40rpx 40rpx 24rpx;
	text-align: center;
}

.privacy-modal-title {
	font-size: 34rpx;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -0.5rpx;
}

.privacy-modal-body {
	flex: 1;
	overflow-y: auto;
}

.privacy-text-content {
	padding: 0 40rpx 32rpx;
	line-height: 1.6;
}

.text-p {
	font-size: 28rpx;
	color: #4a4a4a;
}

.text-link-active {
	font-size: 28rpx;
	color: #ff9500;
	font-weight: 700;
	text-decoration: underline;
	display: inline-block;
	margin: 0 4rpx;
}

.privacy-modal-footer {
	padding: 24rpx 40rpx 40rpx;
	display: flex;
	gap: 20rpx;
	border-top: 2rpx solid #f5f6f8;
	background: #ffffff;
}

.btn-refuse {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 28rpx;
	color: #666666;
	background: #f5f6f8;
	border-radius: 44rpx;
	border: none;
	font-weight: 600;

	&::after {
		border: none;
	}
}

.btn-accept {
	flex: 1.2;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 28rpx;
	color: #ffffff;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	border-radius: 44rpx;
	border: none;
	font-weight: 700;
	box-shadow: 0 8rpx 20rpx rgba(255, 149, 0, 0.2);

	&::after {
		border: none;
	}
}
</style>