luoyang-uniapp-app/pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue

<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'
	export default {
		components: { tab1, tab2, tab3, tab4, schoolItme},
		data() {
			return {
				 swiperList: [],
				radianImg: imgUrl+'radian.png',
				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.split(',')
			},
			// 教练分页
			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>