JiangxiMiniProgram/pages/indexEntry/enroll/registInfo/comp/searchSchool.vue

<template>
	<!-- 选择驾校弹出框 -->
	
	<view class="box">
		<view class="schoolTit">
			选择驾校
		</view>
		<view class="searchBox">
			<u-search placeholder="请输入驾校名称" v-model.trim="keyword" @search="searchSchool" @custom="searchSchool">
			</u-search>
		</view>
		<scroll-view scroll-y="true" style="height: 700rpx" @scrolltolower="loadMore">
			<view class="ul">
				<view class="li" v-for="(item,index) in listData" :key="index" @click="chooseSchool(item)">
					<view class="name">
						{{ $u.utils.truncateText(item.name, 18) }}
					</view>
					<view class="starText">
						{{item.stars}}分
					</view>
					<!-- <view class="distance">
						{{ $u.utils.distanceFn(item.distance)}}
					</view> -->
				</view>
			</view>
			<u-loadmore :status="status" icon-type="circle" />
		</scroll-view>
	</view>
</template>

<script>
	import { schoolPage } from '@/config/api.js'
	export default {
		data() {
			return {
				keyword: '',
				status: 'loadmore',
				listData: [],
				total: 10,
				params: {
					pageNo: 1,
					pageSize: 20,
					lat: 30.27419537786047,
					lng: 120.20633397715788,
				}
			}
		},
		created() {
			this.schoolPageFn()
		},
		methods: {
			// 选择驾校
			chooseSchool(item) {
				this.$emit('chooseSchool', item)
			},
			// 获取驾校列表
			async schoolPageFn() {
				const {data: res} = await schoolPage(this.params)
				this.params.pageNo ++
				this.listData.push(...res.list)
				this.total = res.total
				if(this.listData.length>=this.total) this.status = 'nomore'
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.schoolTit {
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
	}
	
	.searchBox {
		width: 100%;
		padding: 0 20rpx 20rpx 20rpx;
		border-bottom: 1rpx solid #ededed;
	}
	
	.ul {
		width: 100%;
		padding: 0 20rpx;
		.li {
			width: 100%;
			display: flex;
			align-items: center;
			height: 90rpx;
			font-size: 24rpx;
			border-bottom: 1rpx solid #ededed;
	
			&:last-child {
				border: none;
			}
	
			.name {
				width: 0;
				flex: 1;
				font-size: 28rpx;
			}
	
			.starText {
				color: red;
				width: 100rpx;
				text-align: right;
				flex-shrink: 0;
				white-space: nowrap;
			}
	
			.distance {
				width: 120rpx;
				text-align: right;
				flex-shrink: 0;
				white-space: nowrap;
			}
		}
	}
</style>