hg_zlxc_h5/pages/index/index.vue

<template>
	<view class="content">
		<u-navbar title="优享驾培"></u-navbar>
		<view class="content">
			<view class="topCon">
				<view class="tag" @click="$goPage('/pages/payRecords/payRecords')">
					<image src="@/static/images/home_img_pay@2x.png" mode=""></image>
				</view>
				<view class="cardBox">
					<view class="card">
						<view class="h1">
							<view class="h1Icon">
								<image src="@/static/images/home_icon_btzuo@3x.png" mode=""></image>
							</view>
							<view class="txt">专属服务与优惠</view>
							<view class="h1Icon">
								<image src="@/static/images/home_icon_btyou@3x.png" mode=""></image>
							</view>
						</view>
						<view class="item_Box">
							<view class="h2">优质的服务</view>
							<view class="text">1.专属优享驾培服务团队，优秀教练员施教；</view>
							<view class="text">2.提供“一人一方案”培训教学、考试服务。</view>
						</view>
						<view class="item_Box">
							<view class="h2">优惠的价格</view>
							<view class="text">1.为工会会员，提供9.5折专享优惠价格；</view>
							<view class="text">2.工会会员可为家庭成员代报名，同享9.5折。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="listCon">
				<view class="h1">
					<view class="h1Icon">
						<image src="@/static/images/home_icon_btzuo@3x.png" mode=""></image>
					</view>
					<view class="txt">优质驾校</view>
					<view class="h1Icon">
						<image src="@/static/images/home_icon_btyou@3x.png" mode=""></image>
					</view>
				</view>
				<view class="area">
					<view class="areaLab">选择区/县</view>
					<view class="areaChoose" @click="show=true">
						<view class="txt">{{ regionName }}</view>
						<view class="iconImg">
							<image src="@/static/images/home_icon_xiahei@3x.png" mode=""></image>
						</view>
					</view>
				</view>
				<list :listData="listData"/>
				<view class="" style="padding: 40rpx 0 0 0; ">
					<u-loadmore :status="status" icon-type="circle" />
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="show" :range="region" @confirm="confirmRegion" range-key="regionName"></u-picker>
	</view>
</template>

<script>
	import list from './comp/list.vue'
	import indexApi from '@/api/index.js'
	export default {
		components: {
			list
		},
		data() {
			return {
				status: 'loadmore',
				queryParams: {
					pageIndex: 1,
					pageSize: 30,
					lat: 30.27419537786047,
					trainingScope: '',
					lng: 120.20633397715788,
					schoolName: ''
				},
				show: false,
				listData: [],
				region: [],
				regionName: '杭州市'
			}
		},

		onLoad() {
			this.listInit()
			this.queryRegionByParentCodeFn()
			const latLng = this.$u.utils.getLocation()
			console.log(latLng)
		},
		onReachBottom() {
			if(this.status=='nomore') return
			this.queryTrainingSchoolListFromAppFn()
		},
		onPullDownRefresh() {
			this.listInit()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1500)
		},
		methods: {

			listInit() {
				this.status=='loadmore'
				this.queryParams.pageIndex = 1
				this.listData = []
				this.queryTrainingSchoolListFromAppFn()
			},
			// 选择区域
			confirmRegion(i) {
				let index = i[0]
				let item = this.region[index]
				this.queryParams.district = item.regionCode
				this.regionName = item.regionName
				this.listInit()
			},
			// 获取区域数据
			async queryRegionByParentCodeFn() {
				const [nulls, res] = await indexApi.queryRegionByParentCode()
				this.region = res.data 
			},
			// 列表
			async queryTrainingSchoolListFromAppFn() {
				let obj = {}
				for(let key in this.queryParams) {
					if(this.queryParams[key]) {
						obj[key] = this.queryParams[key]
					}
				}
				const [nulls,res] = await indexApi.queryTrainingSchoolListFromApp(obj)
				this.queryParams.pageIndex ++
				this.listData.push(...res.data)
				console.log('驾校列表')
				console.log(res.data)
				if(res.data.length<this.queryParams.pageSize) this.status = 'nomore'
			},
		}
	}
</script>


<style lang="scss" scoped>
	.h1 {
		display: flex;
		justify-content: center;
		height: 96rpx;
		align-items: center;
		.h1Icon {
			width: 36rpx;
			height: 20rpx;
		}
	
		.txt {
			font-size: 32rpx;
			color: #333;
			padding: 0 12rpx;
		}
	}
	.topCon {
		width: 100%;
		height: 792rpx;
		padding: 0 32rpx;
		background: url('../../static/images/home_bg_dingbu@3x.png') no-repeat;
		background-size: 100% 100%;
		position: relative;

		.tag {
			position: absolute;
			right: 0;
			top: 96rpx;
			width: 40rpx;
			height: 146rpx;
		}

		.cardBox {
			position: absolute;
			bottom: 0;
			left: 0rpx;
			width: 100%;
			height: 504rpx;
			padding: 0 32rpx;
			.card {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 24rpx 24rpx 24rpx;
				

				.item_Box {
					width: 100%;
					height: 180rpx;
					background: #F2F9FF;
					border-radius: 16rpx;
					padding: 24rpx 0 0 0;
					color: #333;
					margin-bottom: 16rpx;
					.h2 {
						font-size: 32rpx;
						position: relative;
						padding: 0 0 8rpx 26rpx;
						font-weight: 600;
						&::before {
							position: absolute;
							content: '';
							left: 0;
							top: 8rpx;
							width: 6rpx;
							height: 28rpx;
							background: #1989FA;
							border-radius: 0px 6rpx 6rpx 0px;
							
						}
					}

					.text {
						font-size: 28rpx;
						padding: 2rpx 26rpx;
					}
				}
			}

		}

	}

	.listCon {
		width: 100%;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0px 0px;
		padding: 0 32rpx 32rpx 32rpx;
		margin-top: 32rpx;
		.area {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #686B73;
			margin-bottom: 40rpx;
			.areaLab {
				font-size: 28rpx;
				color: #686B73;
				margin-right: 16rpx;
			}
			.areaChoose {
				height: 56rpx;
				background: #F6F7F8;
				border-radius: 8rpx;
				padding: 8rpx 16rpx;
				display: flex;
				align-items: center;
				.txt {
					font-size: 28rpx;
					color: #686B73;
				}
				.iconImg {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}
		}
		
	}
</style>