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.
258 lines
6.3 KiB
258 lines
6.3 KiB
<template>
|
|
<view class="main pageBg">
|
|
<view class="swiper-box" >
|
|
<view class="navPoz">
|
|
<topNavbar title="驾校详情"></topNavbar>
|
|
</view>
|
|
<u-swiper :list="swiperList" :height="261"></u-swiper>
|
|
<view class="radian">
|
|
<image :src="radianImg" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="pad traTop">
|
|
<!-- 驾校信息 -->
|
|
<view class="card " v-if="Object.keys(schoolDetail).length">
|
|
<schoolItme :item="schoolDetail" :showReviewTotal="true"/>
|
|
<view class="introduce" v-if=" schoolDetail.schoolIntroduceDO">
|
|
<u-read-more :showHeight="64" :toggle="true" :fontSize="12">
|
|
<rich-text :nodes="schoolDetail.schoolIntroduceDO.introduce" style="font-size: 24rpx;"></rich-text>
|
|
</u-read-more>
|
|
</view>
|
|
</view>
|
|
<!-- 驾校位置 -->
|
|
<view class="shoolPoz" style="margin-top: 20rpx; ">
|
|
<pozCard :info="{address: schoolDetail.address,distance: schoolDetail.distance, lat: schoolDetail.lat, lng: schoolDetail.lng, schoolName:schoolDetail.shortName}"></pozCard>
|
|
</view>
|
|
<!-- 驾校服务 -->
|
|
<view class="severCon card">
|
|
<view class="h1"><text class="active">驾校服务</text></view>
|
|
<view class="navBox">
|
|
<view class="nav" v-for="(item,index) in navList" :key="index" :class="{active: currentNav==item.id}" @click="changeNav(item)">{{ item.text }}</view>
|
|
</view>
|
|
|
|
<tab1 v-show="currentNav==1" :classList="schoolDetail.schoolClassDOList"></tab1>
|
|
<tab2 v-show="currentNav==2" :siteList="schoolDetail.trainingSiteDOS"></tab2>
|
|
<tab3 v-show="currentNav==3" :coachList="coachList" :status="tab3Status"></tab3>
|
|
<tab4 v-show="currentNav==4" :carList="schoolDetail.carDOS"></tab4>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tab1 from './comp/tab1.vue'
|
|
import tab2 from './comp/tab2.vue'
|
|
import tab3 from './comp/tab3.vue'
|
|
import tab4 from './comp/tab4.vue'
|
|
import { coachPage, getSchoolDetail, getListComment } from '@/config/api.js'
|
|
import { imgUrl } from '@/config/site.config'
|
|
import schoolItme from '@/pages/tabbar/index/comp/schoolItem.vue'
|
|
const jlcBg = require('@/static/images/bigImg/jlcbg.png')
|
|
const radian = require('@/static/images/bigImg/radian.png')
|
|
|
|
export default {
|
|
components: { tab1, tab2, tab3, tab4, schoolItme},
|
|
data() {
|
|
return {
|
|
swiperList: [],
|
|
radianImg: radian,
|
|
show: false,
|
|
navList: [
|
|
{text: '班型', id: 1},
|
|
{text: '场地', id: 2},
|
|
{text: '教练', id: 3},
|
|
{text: '教练车', id: 4},
|
|
],
|
|
params: {},
|
|
schoolDetail: {},
|
|
currentNav: 1,
|
|
coachParams: {
|
|
pageNo: 1,
|
|
pageSize: 20
|
|
},
|
|
commentParams: {
|
|
pageNo: 1,
|
|
pageSize: 20
|
|
},
|
|
schoolId: '',
|
|
coachList: [],
|
|
tab3Status: 'loading',
|
|
tab3Total: 20
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.schoolId = options.schoolId
|
|
this.coachParams.schoolId = this.schoolId
|
|
this.commentParams.schoolId = this.schoolId
|
|
|
|
this.coachPageFn()
|
|
let vuex_cityInfo = this.$store.state.user.vuex_cityInfo
|
|
if(!vuex_cityInfo.lat) {
|
|
this.$store.dispatch('getCity')
|
|
}else {
|
|
this.params.lat = vuex_cityInfo.lat
|
|
this.params.lng = vuex_cityInfo.lng
|
|
}
|
|
this.getSchoolDetailFn()
|
|
// this.getListCommentFn()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getSchoolDetailFn()
|
|
if(this.currentNav==3&&this.coachList.length<this.tab3Total) {
|
|
this.coachParams.pageNo = 1
|
|
this.coachList = []
|
|
this.coachPageFn()
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
if(this.currentNav==3&&this.coachList.length<this.tab3Total) {
|
|
this.coachPageFn()
|
|
}
|
|
},
|
|
methods: {
|
|
changeNav(item) {
|
|
this.currentNav = item.id
|
|
},
|
|
// 驾校详情
|
|
async getSchoolDetailFn() {
|
|
uni.showLoading({
|
|
title: '正在加载……'
|
|
})
|
|
const {data: res} = await getSchoolDetail(Object.assign(this.params,{id: this.schoolId}))
|
|
uni.hideLoading()
|
|
this.schoolDetail = res
|
|
this.swiperList = res.schoolIntroduceDO&&res.schoolIntroduceDO.headImages&&res.schoolIntroduceDO.headImages.split(',')
|
|
if(!this.swiperList||!this.swiperList.length) {
|
|
this.swiperList = [jlcBg]
|
|
}
|
|
console.log('this.swiperList')
|
|
console.log(this.swiperList)
|
|
},
|
|
// 教练分页
|
|
async coachPageFn() {
|
|
const {data: res} = await coachPage(this.coachParams)
|
|
this.coachParams.pageNo ++
|
|
this.coachList.push(...res.list)
|
|
this.tab3Total = res.total
|
|
if(this.coachList.length>=this.tab3Total) this.tab3Status = 'nomore'
|
|
},
|
|
// 驾校评论分页
|
|
// async getListCommentFn() {
|
|
// const {data: res} = await getListComment(this.commentParams)
|
|
// this.coachParams.pageNo ++
|
|
// this.commentList.push(...res.list)
|
|
// this.tab3Total = res.total
|
|
// if(this.commentList.length>=this.tab4Total) this.tab3Status = 'nomore'
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.severCon {
|
|
margin-top: 20rpx;
|
|
}
|
|
.navPoz {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 9;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.introduce {
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
.main {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
.swiper-box {
|
|
position: relative;
|
|
width: 100%;
|
|
.radian {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 84rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
}
|
|
}
|
|
|
|
.traTop {
|
|
position: relative;
|
|
top: -120rpx;
|
|
z-index: 99;
|
|
}
|
|
.card {
|
|
padding: 0 20rpx;
|
|
.flex {
|
|
position: relative;
|
|
.schoolLogo {
|
|
width: 204rpx;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.textCon {
|
|
flex: 1;
|
|
padding: 0 0 0 36rpx;
|
|
.name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.starBox {
|
|
padding: 12rpx 0 6rpx 0;
|
|
}
|
|
|
|
.evaluate {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
.txt {
|
|
font-size: 24rpx;
|
|
color: #363A44;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pozPhone {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 40rpx;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
.h1 {
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
|
|
.navBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10rpx 20rpx 20rpx 20rpx;
|
|
.nav {
|
|
width: 126rpx;
|
|
height: 50rpx;
|
|
background: #F6F7FA;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
&.active {
|
|
color: #fff;
|
|
background-color: $themC;;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|