kc/pages/index/index.vue

<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header-bg">
			<view class="header">
				<view class="title-container">
					<view class="icon-school"><uni-icons type="school" size="28" color="#fff"></uni-icons></view>
					<text class="title">宽城区义务教育公办中小学学区查询</text>
				</view>
				<view class="header-decoration"></view>
			</view>
		</view>

		<!-- 查询说明区域 -->
		<view class="description-card">
			<view class="description">
				<view style="display: flex;align-items: center;margin-bottom: 5px;">

					<uni-icons type="info-filled" size="22" color="#1e88e5"></uni-icons>

					<text class="description-title">查询须知</text>
				</view>
				<view>
					<text
						class="description-text">1、本系统仅用于具有宽城区户籍的适龄儿童少年查询当年学区。请按提示要求输入适龄儿童少年本人户籍信息，主要包括户籍派出所、汉字委等信息。每个账号可以查询六次，查询结果仅作参考。</text>
				</view>
				<view>
					<text class="description-text">2、适龄儿童少年“入学”（入:即入校报到；学:即学习期间）片区学校应当符合“两个一致”原则。
						不符合“两个一致”的适龄儿童少年，由区教育局统筹安排入学。</text>
				</view>
				<view>
					<text class="description-text">3、未查到学区信息的家长请于工作时间致电：89990223/89990224。</text>
				</view>
			</view>
		</view>

		<!-- 查询表单区域 -->
		<view class="search-form-container">
			<view class="form-header">
				<text class="form-title">学区信息查询</text>
				<view class="form-decoration"></view>
			</view>

			<view class="search-form">
				<view class="form-items">
					<view class="form-item">
						<view class="label-container">
							<uni-icons type="calendar" size="18" color="#1e88e5"></uni-icons>
							<text class="label">入学学段</text>
						</view>
						<uni-data-select v-model="formData.stage" :localdata="stageOptions" placeholder="请选择入学学段"
							class="custom-select">
						</uni-data-select>
					</view>

					<view class="form-item">
						<view class="label-container">
							<uni-icons type="location" size="18" color="#1e88e5"></uni-icons>
							<text class="label">户籍派出所</text>
						</view>
						<uni-data-select v-model="formData.policeStation" :localdata="filteredPoliceStations"
							placeholder="请选择户籍派出所" class="custom-select">
						</uni-data-select>
					</view>

					<view class="form-item">
						<view class="label-container">
							<uni-icons type="home" size="18" color="#1e88e5"></uni-icons>
							<text class="label">所在委/村</text><text class="label" style="color: #909399;">例:天安委/五星村</text>
						</view>
						<uni-easyinput v-model="formData.streetCommittee" placeholder="请输入所在委/村" class="custom-input">
						</uni-easyinput>
					</view>

					<!-- 查询按钮独立一行 -->
					<view class="search-btn-container">
						<button class="search-btn" @click="searchSchool">
							<uni-icons type="search" size="18" color="#fff"></uni-icons>
							<text>查询</text>
						</button>

					</view>
					<view class="search-limit-tip">
						<uni-icons type="info" size="14" color="#90caf9"></uni-icons>
						<text>最多可查询学区信息<span style="color: #F56C6C;font-weight: bolder;">{{ maxQueryCount }}
							</span>次，当前已查询<span style="color: #F56C6C;font-weight: bolder;">{{ queryCount }} </span>
							次</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 查询结果区域 -->
		<view class="result-area" v-if="searchResults.length > 0">
			<view class="result-header">
				<uni-icons type="flag" size="20" color="#1e88e5"></uni-icons>
				<text class="result-title">查询结果</text>
			</view>

			<view class="card-list">
				<view v-for="(item, index) in searchResults" :key="index" class="result-card">
					<view class="card-header">
						<uni-icons type="school-filled" size="20" color="#1e88e5"></uni-icons>
						<text class="card-title">{{ item.school_name }}</text>
					</view>

					<view class="card-content">
						<view class="info-item">
							<text class="info-label">户籍派出所：</text>
							<text class="info-value">{{ item.pcs }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">所在委/村：</text>
							<text class="info-value">{{ item.jw }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="no-result" v-else-if="hasSearched">
			<view style="display: flex;align-items: center;margin-bottom: 5px;">
				<uni-icons type="info" size="32" color="#078ED6"></uni-icons>
				<text>暂未查询到相关结果</text>
			</view>

			<view style="color: red;text-align: left;padding: 0 20px">注意: 无需输入长春市宽城区等字样、无需输入小区楼宇门牌号、无需输入具体某街组号。</view>
			<view style="color: red;text-align: left;padding: 0 20px">请按照提示输入户口所在的“委”或“村”，例如:“天安委”或“五星村”。</view>
		</view>

		<view style="height: 10px;">

		</view>


	</view>
</template>

<script>
	import {
		getSearchApi
	} from '@/api/services/index.js';
	export default {
		data() {
			return {
				formData: {
					stage: '',
					policeStation: '',
					streetCommittee: ''
				},
				stageOptions: [{
						value: '0',
						text: '小学'
					},
					{
						value: '1',
						text: '初中'
					}
				],
				policeStationOptions: [{
						value: '10',
						stage: '0',
						text: '北京大街派出所'

					},
					{
						value: '11',
						stage: '0',
						text: '长新街派出所'

					},
					{
						value: '12',
						stage: '0',
						text: '东广场派出所'

					},
					{
						value: '13',
						stage: '0',
						text: '奋进派出所'

					},
					{
						value: '114',
						stage: '0',
						text: '凯旋路派出所'

					},
					{
						value: '5',
						stage: '0',
						text: '兰家派出所'

					},
					{
						value: '16',
						stage: '0',
						text: '柳影路派出所'

					},
					{
						value: '17',
						stage: '0',
						text: '孟家桥派出所'

					},
					{
						value: '18',
						stage: '0',
						text: '南广场派出所'

					},
					{
						value: '19',
						stage: '0',
						text: '西广场派出所'

					},
					{
						value: '20',
						stage: '0',
						text: '西三条派出所'

					},
					{
						value: '21',
						stage: '0',
						text: '兴业街派出所'

					},
					{
						value: "50",
						stage: '1',
						text: "北京大街派出所"
					},
					{
						value: "51",
						stage: '1',
						text: "长新街派出所"
					},
					{
						value: "52",
						stage: '1',
						text: "东广场派出所"
					},
					{
						value: "53",
						stage: '1',
						text: "奋进派出所"
					},
					{
						value: "54",
						stage: '1',
						text: "凯旋路派出所"
					},
					{
						value: "55",
						stage: '1',
						text: "兰家派出所"
					},
					{
						value: "56",
						stage: '1',
						text: "柳影路派出所"
					},
					{
						value: "57",
						stage: '1',
						text: "孟家桥派出所"
					},
					{
						value: "58",
						stage: '1',
						text: "南广场派出所"
					},
					{
						value: "59",
						stage: '1',
						text: "西广场派出所"
					},
					{
						value: "60",
						stage: '1',
						text: "西三条派出所"
					},
					{
						value: "61",
						stage: '1',
						text: "兴业街派出所"
					}
				],
				searchResults: [],
				hasSearched: false,
				queryCount: 0, // 添加查询次数计数器
				maxQueryCount: 6 // 最大查询次数
			}
		},
		computed: {
			filteredPoliceStations() {
				if (!this.formData.stage) {
					return [];
				}
				return this.policeStationOptions.filter(item => item.stage === this.formData.stage);
			}
		},
		watch: {
			'formData.stage'(newVal) {
				// 当学段改变时，清空已选择的派出所
				this.formData.policeStation = '';
			}
		},
		onLoad() {
			// 页面加载时从cookie中恢复数据
			this.loadDataFromCookie();
		},
		methods: {
			// 从cookie中加载数据
			loadDataFromCookie() {
				try {
					// 读取查询次数
					const countStr = uni.getStorageSync('queryCount');
					if (countStr) {
						this.queryCount = parseInt(countStr);
					}

					// 读取上次查询条件
					const lastQueryStr = uni.getStorageSync('lastQuery');
					if (lastQueryStr) {
						const lastQuery = JSON.parse(lastQueryStr);
						this.formData.stage = lastQuery.stage || '';
						// 使用nextTick或setTimeout等待DOM更新后再设置派出所
						this.$nextTick(() => {
							this.formData.policeStation = lastQuery.policeStation || '';
							this.formData.streetCommittee = lastQuery.streetCommittee || '';
						});
					}

					// 读取上次查询结果
					const resultsStr = uni.getStorageSync('searchResults');
					if (resultsStr) {
						this.searchResults = JSON.parse(resultsStr);
						if (this.searchResults.length > 0) {
							this.hasSearched = false;
						} else {
							this.hasSearched = this.searchResults.length === 0 && countStr !== null;
						}
					}
				} catch (e) {
					// 如果出错，重置数据
					console.error('从cookie加载数据出错:', e);
					this.resetCookieData();
				}
			},

			// 保存数据到cookie
			saveDataToCookie() {
				// 保存查询次数
				uni.setStorageSync('queryCount', this.queryCount.toString());

				// 保存查询条件
				const lastQuery = {
					stage: this.formData.stage,
					policeStation: this.formData.policeStation,
					streetCommittee: this.formData.streetCommittee
				};
				uni.setStorageSync('lastQuery', JSON.stringify(lastQuery));

				// 保存查询结果
				uni.setStorageSync('searchResults', JSON.stringify(this.searchResults));
			},

			// 重置cookie数据
			resetCookieData() {
				uni.removeStorageSync('queryCount');
				uni.removeStorageSync('lastQuery');
				uni.removeStorageSync('searchResults');
				this.queryCount = 0;
			},

			searchSchool() {
				// this.hasSearched = true;		

				if (this.queryCount >= this.maxQueryCount) {
					uni.showToast({
						title: '您已达到最大查询次数(6次)',
						icon: 'none',
						duration: 3000
					});
					return;
				}


				if (!this.formData.stage) {
					uni.showToast({
						title: '请选择入学学段',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (!this.formData.policeStation) {
					uni.showToast({
						title: '请选择户籍派出所',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (!this.formData.streetCommittee) {
					uni.showToast({
						title: '请输入所在委/村',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (this.formData.streetCommittee.length < 2) {
					uni.showToast({
						title: '您输入的所在委/村不能仅输入一个字符！',
						icon: 'none',
						duration: 2500
					});
					return;
				}


				// 模拟查询结果，实际项目中应通过API获取数据
				if (this.formData.stage && this.formData.policeStation && this.formData.streetCommittee) {

					// 增加查询次数
					this.queryCount++;

					const stageText = this.stageOptions.find(item => item.value === this.formData.stage)?.text || '';
					const policeStationText = this.policeStationOptions.find(item => item.value === this.formData
						.policeStation)?.text || '';

					getSearchApi({
						stage: stageText,
						police_station: policeStationText,
						street: this.formData.streetCommittee
					}).then((res) => {
						if (res.data.school_list.length > 0) {
							this.hasSearched = false;
						} else {
							this.hasSearched = true;
						}
						this.searchResults = res.data.school_list


						this.saveDataToCookie();


					}).catch((err) => {
						this.searchResults = [];
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500
						});
						// 查询失败不计入次数
						this.queryCount--;
						this.saveDataToCookie();
						return;
					}).finally(() => {
						// 添加滚动到底部的功能
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: 9999,
								duration: 200
							});
						}, 10);
					})

				} else {
					this.searchResults = [];
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 0;
		background-color: #f5f9fc;
		min-height: 100vh;
		position: relative;
	}

	/* 头部样式 */
	.header-bg {
		background: linear-gradient(135deg, #29b6f6, #0277bd);
		height: 180px;
		position: relative;
		overflow: hidden;
	}

	/* 确保下拉框不被遮盖 */
	.uni-select--mask {
		z-index: 100;
	}

	.uni-select__selector {
		z-index: 101;
	}

	.uni-select__selector-item {
		overflow: visible;
	}

	.search-form-container {
		overflow: visible !important;
	}

	.search-form {
		overflow: visible;
	}

	.form-items {
		overflow: visible;
	}

	.form-item {
		overflow: visible;
	}

	/* 确保下拉选项显示在其他元素上方 */
	.uni-select-cover {
		z-index: 102;
	}


	.header {
		padding: 30px 20px;
		position: relative;
		z-index: 5;
	}

	.title-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.icon-school {
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		letter-spacing: 1px;
	}

	.header-decoration {
		width: 80px;
		height: 3px;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 3px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* 查询说明样式 */
	.description-card {
		margin: -86px 20px 20px;
		background: #ffffff;
		border-radius: 12px;
		padding: 15px 20px;
		display: flex;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 10;
	}

	.card-icon {
		padding-right: 5px;
		/* padding-top: 3px; */
	}

	.description-title {
		font-size: 16px;
		font-weight: bold;
		color: #1e88e5;
		/* margin-bottom: 8px; */
		display: block;
		margin-left: 5px;
	}

	.description-text {
		font-size: 14px;
		color: #555;
		line-height: 1.6;
	}

	/* 查询表单样式 */
	.search-form-container {
		margin: 20px 20px 10px 20px;
		background-color: #ffffff;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}

	.form-header {
		background: linear-gradient(90deg, #29b6f6, #0288d1);
		padding: 12px 20px;
		position: relative;
	}

	.form-title {
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
	}

	.form-decoration {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 3px;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 3px;
	}

	.search-form {
		display: flex;
		padding: 20px;
	}

	.form-items {
		flex: 1;
	}

	.form-item {
		margin-bottom: 18px;
	}

	.label-container {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
	}

	.label {
		font-size: 15px;
		color: #333;
		margin-left: 6px;
		font-weight: 500;
	}

	.custom-select,
	.custom-input {
		border-radius: 6px;
		border: 1px solid #e0e0e0;
		background-color: #f9f9f9;
		transition: all 0.3s;
	}

	.custom-select:hover,
	.custom-input:hover {
		border-color: #90caf9;
		box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.1);
	}

	/* 添加查询次数提示样式 */
	.search-limit-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
		font-size: 13px;
		color: #5d93c5;
	}

	.search-limit-tip text {
		margin-left: 5px;
	}

	.search-btn-container {
		display: flex;
		justify-content: center;
		margin-top: 15px;
	}

	.search-btn {
		background: linear-gradient(135deg, #29b6f6, #0288d1);
		color: #ffffff;
		border: none;
		height: 45px;
		line-height: 45px;
		border-radius: 8px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 10px rgba(0, 150, 220, 0.3);
		transition: all 0.3s;
		width: 200px;
	}

	.search-btn:active {
		transform: translateY(2px);
		box-shadow: 0 2px 5px rgba(0, 150, 220, 0.3);
	}

	.search-btn text {
		margin-left: 6px;
	}

	/* 查询结果样式 */
	.result-area {
		margin: 30px 20px;
	}

	.result-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.result-title {
		font-size: 18px;
		font-weight: bold;
		color: #1e88e5;
		margin-left: 8px;

	}

	.card-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.result-card {
		border-radius: 10px;
		background-color: #ffffff;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		border-left: 4px solid #1e88e5;
		transition: all 0.3s;
	}

	.result-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		background-color: #e3f2fd;
		padding: 12px 15px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e3f2fd;
	}

	.card-title {
		color: #0277bd;
		font-size: 14px;
		font-weight: bold;
		margin-left: 8px;
	}

	.card-content {
		padding: 15px 15px 5px 15px;
		position: relative;
	}

	.info-item {
		display: flex;
		margin-bottom: 10px;
	}

	.info-label {
		color: #666;
		width: 90px;
		font-size: 14px;
	}

	.info-value {
		color: #333;
		font-size: 14px;
		font-weight: 500;
		flex: 1;
	}

	.card-footer {
		display: flex;
		justify-content: flex-end;
		padding-top: 5px;
	}

	.card-tag {
		background-color: #e3f2fd;
		color: #1e88e5;
		font-size: 12px;
		padding: 3px 10px;
		border-radius: 12px;
		font-weight: 500;
	}

	.no-result {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* padding: 50px 0; */
		color: #078ED6;
		text-align: center;
		margin-bottom: 10px;
	}

	.no-result text {
		margin-top: 15px;
		font-size: 16px;
	}

	.footer-decoration {
		position: fixed;
		/* 改为fixed定位 */
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		height: 100px;
		z-index: 0;
		/* 调整z-index为正值或0 */
	}

	.wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 100px;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2390caf9" fill-opacity="0.2" d="M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,202.7C1200,181,1320,139,1380,117.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>') repeat-x;
		background-size: 1440px 100px;
		animation: wave 12s linear infinite;
	}

	@keyframes wave {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}
</style>