hhrs/pages/index/index.vue

<template>
	<view class="page">
		<!-- 顶部 Banner -->
		<view class="banner">
			<image class="banner-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_header.png" mode="widthFix"></image>
		</view>

		<!-- 金刚区 -->
		<view class="king-area">
			<view class="king-item" v-for="(item, index) in kingList" :key="index" @click="item.isRights ? goRights() : goPage(item.url)">
				<image class="king-icon" :src="item.icon" mode="widthFix"></image>
			</view>
		</view>

		<!-- 活动指南 -->
		<view class="guide-section">
			<view class="section-title">
				<view class="title-line"></view>
				<text class="title-text">活动指南</text>
			</view>
			<view class="guide-list">
				<view class="guide-card" v-for="(item, index) in guideList" :key="index" @click="goPage(item.url)">
					<image class="guide-bg" :src="item.bg" mode="scaleToFill"></image>
					<view class="guide-info">
						<text class="guide-title">{{ item.title }}</text>
						<text class="guide-sub">{{ item.sub }}</text>
						<view class="guide-tag">官方指南</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kingList: [
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_wlcg.png', url: '/pages/venue/venue' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_shzk.png', url: '/pages/discount/discount' },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_qyb.png', url: '/pages/rights/rights', isRights: true },
					{ icon: 'https://aliyunoss.hn12301.net/hhrs/hhrs_zjmd.png', url: '/pages/winners/winners' }
				],
				guideList: [
					{
						title: '怀化社保卡惠民活动参加指南',
						sub: '本地文旅场馆、商户惠民福利',
						bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_cjzn.png',
						url: '/pages/guide/join'
					},
					{
						title: '社保卡领取及使用指南',
						sub: '全流程办理及激活指引',
						bg: 'https://aliyunoss.hn12301.net/hhrs/hhrs_syzn.png',
						url: '/pages/guide/use'
					}
				]
			}
		},
	onLoad() {
		this.getLocation()
	},
	methods: {
		getLocation() {
			import('@/common/location.js').then(module => {
				module.default.getLocation().then(({ lng, lat }) => {
					console.log('定位成功:', lng, lat)
				}).catch(err => {
					console.log('定位失败:', err)
				})
			})
		},
			goPage(url) {
				uni.navigateTo({ url })
			},
			goRights() {
				const phone = uni.getStorageSync('phone')
				if (!phone) {
					uni.navigateTo({ url: '/pages/index/login?redirect=rights' })
					return
				}
				const isAuth = uni.getStorageSync('isAuth')
				const hasWin = uni.getStorageSync('hasWin')
				let status = 'auth'
				if (isAuth) {
					status = hasWin ? 'info' : 'noWin'
				}
				uni.navigateTo({ url: `/pages/rights/rights?status=${status}` })
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
		background-color: #f5f5f5;
		overflow: hidden;
	}

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

	/* 金刚区 */
	.king-area {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.king-item {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.king-icon {
		width: 100rpx;
		height: 132rpx;
	}

	/* 活动指南 */
	.guide-section {
		background-color: #ffffff;
		margin-top: 10rpx;
		padding: 24rpx 20rpx 30rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title-line {
		width: 6rpx;
		height: 32rpx;
		background-color: #1890ff;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}

	.title-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.guide-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.guide-card {
		position: relative;
		width: 702rpx;
		height: 252rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.guide-bg {
		width: 702rpx;
		height: 252rpx;
		border-radius: 16rpx;
	}

	.guide-info {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
	}

	.guide-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #0088FF;
		margin-bottom: 10rpx;
	}

	.guide-sub {
		font-size: 22rpx;
		color: #949AA0;
		margin-bottom: 16rpx;
	}

	.guide-tag {
		display: inline-block;
		width: fit-content;
		padding: 4rpx 16rpx;
		background-color: #00C0E8;
		color: #ffffff;
		font-size: 20rpx;
		border-radius: 6rpx;
	}


</style>