personnel_management_mobile/pages/home/home.vue

<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">广西区直住房保障中心</text>
		</view>

		<!-- 预约功能区 -->
		<view class="reserve-section">
			<view class="reserve-card" @click="handleOnlineReserve">
				<view class="icon online-icon"></view>
				<text class="card-text">网上预约</text>
			</view>
			<view class="reserve-card" @click="handleMyReserve">
				<view class="icon my-icon"></view>
				<text class="card-text">我的预约</text>
			</view>
		</view>

		<!-- 热门服务区 -->
		<view class="service-section">
			<text class="section-title">热门服务</text>

			<view class="service-item" v-for="(item, index) in serviceList" :key="index"
				@click="handleServiceClick(item)">
				<view class="item-left">
					<view class="dot"></view>
					<text class="item-text">{{ item.name }}</text>
				</view>
				<view class="arrow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deptList,
		itemList
	} from '@/api/reserve.js'
	import {
		dictionary
	} from '@/api/system/dict.js'

	export default {
		data() {
			return {
				// 热门服务列表（和设计图完全一致）
				serviceList: [],
				statusList: []
			}
		},
		onLoad() {
			this.getItemList()
			this.getDictionary()
		},
		methods: {
			getDictionary() {
				dictionary({
					code: 'booking_status'
				}).then(res => {
					if (res.code === 200) {
						this.statusList = res.data
						uni.setStorageSync('statusList', this.statusList);
					}
				})
			},
			// 网上预约点击事件
			handleOnlineReserve() {
				uni.navigateTo({
					url: '/pages/reserve/index'
				})
			},
			// 我的预约点击事件
			handleMyReserve() {
				uni.navigateTo({
					url: '/pages/myReserve/index'
				})
			},
			getItemList() {
				let params = {
					size: 5,
					current: 1,
					status: 1,
				}
				itemList(params).then(res => {
					if (res.code === 200) {
						this.serviceList = res.data.records
					}
				})
			},
			// 服务项点击事件
			handleServiceClick(item) {
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
				})
				// uni.navigateTo({
				// 	url: `/pages/reserve/index?id=${item.id}`
				// })
			},
			// // 获取部门列表
			// getDeptList() {
			// 	let params = {
			// 		size: 10,
			// 		current: 1
			// 	}
			// 	deptList(params).then(res => {
			// 		if (res.code === 200) {
			// 			this.serviceList = res.data.records.filter(item => item.parentId != 0)
			// 		}
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	/* 全局容器 */
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}

	/* 顶部标题栏 */
	.header {
		width: 100%;
		height: 200rpx;
		background: linear-gradient(to bottom, #e8f3ff 0%, #f5f5f5 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('/static/images/newImg/home_bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 0;
	}

	.title {
		font-size: 40rpx;
		font-weight: 700;
		color: rgba(49, 134, 255, 1);
		z-index: 1;
	}

	/* 预约功能区 */
	.reserve-section {
		display: flex;
		padding: 0 30rpx 30rpx;
		gap: 20rpx;
	}

	.reserve-card {
		flex: 1;
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.online-icon {
		background-image: url('@/static/images/newImg/online_icon.png');
	}

	.my-icon {
		background-image: url('@/static/images/newImg/my_icon.png');
	}

	.card-text {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	/* 热门服务区 */
	.service-section {
		padding: 0 30rpx;
	}

	.section-title {
		display: block;
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.service-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 16rpx;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
		margin-right: 16rpx;
	}

	.item-text {
		font-size: 34rpx;
		color: #333333;
		font-weight: 500;
	}

	.arrow {
		width: 16rpx;
		height: 16rpx;
		border-right: 4rpx solid #165dff;
		border-top: 4rpx solid #165dff;
		transform: rotate(45deg);
	}
</style>