洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

137 lines
2.7 KiB

<template>
<!-- 选择驾校弹出框 -->
<view class="box">
<view class="schoolTit">
选择驾校
</view>
<view class="searchBox">
<u-search placeholder="请输入驾校名称" v-model.trim="keyword" @search="searchSchool" @custom="searchSchool" @clear="searchSchool">
</u-search>
</view>
<scroll-view scroll-y="true" style="height: 700rpx" @scrolltolower="loadMoreFn">
<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,
sercheType: '1',
}
}
},
created() {
if(this.vuex_cityInfo.lat) {
this.params.lat = this.vuex_cityInfo.lat
this.params.lng = this.vuex_cityInfo.lng
}
this.schoolPageFn()
this.params.name = ''
},
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)
},
searchSchool() {
this.params.pageNo = 1
this.params.name = this.keyword
this.listData = []
this.schoolPageFn()
},
loadMoreFn() {
if(this.listData.length<this.total) {
this.schoolPageFn()
}
}
}
}
</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>