hg_zlxc_h5/pages/schoolDetails/details.vue

<template>
	<view class="main pageBg">
		<view class="swiperBox">
			<u-swiper :list="list" :show-bar="false" :mode="'none'" @change="changeSwiper" :height="468"></u-swiper>
			<view class="tag">
				{{swiperIndex+1}} / {{list.length}}
			</view>
			<view class="pozArc">
				<image src="@/static/images/acr.png" mode=""></image>
			</view>
		</view>

		<view class="schooInfo">
			<view class="info">
				<view class="callPhone">
					<a :href="'tel:'+ 18674054687"></a>
					<image src="../../static/images/home_icon_telephone@3x.png" mode=""></image>
				</view>
				<view class="name">{{info.schoolName}}</view>
				<view class="star">
					<u-rate :count="5" v-model="info.starLevel" active-color="#F5682D" disabled></u-rate>
					<view class="starText">
						{{ $u.utils.priceTo(info.starLevel) }}分
					</view>
				</view>
				<view class="row">
					<view class="text">行业信用{{info.creditrating}}</view>
					<view class="text "
						@click="$goPage('/pages/schoolDetails/schoolPublicity/schoolPublicity?trainingSchoolId='+trainingSchoolId)">
						<view class="icon">
							<image src="../../static/images/second_icon_information@3x.png" mode=""></image>
						</view>
						<view class="blueTxt">公示信息</view>
					</view>
				</view>
			</view>
			<view class="" style="padding: 16rpx 0">
				<view class="addressCon">
					<view class="address">{{info.address}}</view>
					<view class="rightCon" @click="openMap">
						<view class="icon">
							<image src="../../static/images/second_icon_navigation@3x.png" mode=""></image>
						</view>
						<view class="txt">地图导航</view>
					</view>
				</view>
			</view>
			
		</view>

		<view class="card">
			<view class="h1">驾校简介</view>
			<view class="desc">{{info.introduce || '暂无信息'}}</view>
		</view>
		
		<view class="card">
			<view class="tabs">
				<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">班型</view>
				<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">场地</view>
			</view>
			<tabCon :siteList="siteList" :TrainingClass="TrainingClass" :current="currentTab"/>
		</view>

	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	import tabCon from './comp/tabCon.vue'
	export default {
		components: {
			tabCon
		},
		data() {
			return {
				trainingSchoolId: '',
				list: [],
				swiperIndex: 0,
				info: {},
				TrainingClass: [],
				sitePageIndex: 1,
				siteList: [],
				currentTab: 1
			}
		},
		onLoad(options) {
			this.trainingSchoolId = this.$store.state.currentSchool.trainingSchoolId
			this.getTrainingSchoolAppDetailsFn()
			this.queryTrainingClasssFn()
			this.queryTrainingSiteAppListFn()
		},
		methods: {
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: this.info.lat,
					longitude: this.info.lng
				})
			},
			changeTab(num) {
				this.currentTab = num
			},
			changeSwiper(index) {
				this.swiperIndex = index
			},
			// 获取详情数据
			async getTrainingSchoolAppDetailsFn() {
				const [nulls, res] = await indexApi.getTrainingSchoolAppDetails({
					trainingSchoolId: this.trainingSchoolId
				})
				this.info = res.data
				let imgArr = JSON.parse(res.data.images)
				this.list = imgArr.map(item => item.u1)
			},
			// 获取班型数据
			async queryTrainingClasssFn() {
				const [nulls,res] = await indexApi.queryTrainingClasss({trainingSchoolId: this.trainingSchoolId})
				this.TrainingClass = res.data
				console.log(res)
			},
			
			// 获取场地数据
			async queryTrainingSiteAppListFn() {
				const [nulls, res] = await indexApi.queryTrainingSiteAppList({trainingSchoolId: this.trainingSchoolId, pageIndex: this.sitePageIndex, pageSize: 40})
				this.sitePageIndex ++
				this.siteList.push(...res.data)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		position: relative;

		.tag {
			position: absolute;
			right: 48rpx;
			bottom: 64rpx;
			width: 76rpx;
			height: 32rpx;
			line-height: 32rpx;
			border-radius: 16rpx;
			white-space: nowrap;
			background: rgba(0, 0, 0, 0.4);
			font-size: 24rpx;
			color: #fff;
			text-align: center;
		}

		.pozArc {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 96rpx;
		}
	}

	.schooInfo {
		width: 100%;
		background: #fff;
		padding: 0 32rpx;

		.info {
			width: 100%;
			position: relative;

			.callPhone {
				width: 80rpx;
				height: 80rpx;
				top: 8rpx;
				right: 32rpx;
				position: absolute;
				a {
					position: absolute;
					opacity: 0;
					top: 0;
					left: 0;
					z-index: 9;
					width: 100%;
					height: 100%;
					display: block;
					background-color: red;
				}
			}

			.name {
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
			}


			.row {
				display: flex;
				align-items: center;
				padding: 28rpx 0 14rpx 0;
				border-bottom: 1px solid #E8E9EC;

				.text {
					font-size: 24rpx;
					color: #686B73;
					margin-right: 50rpx;
				}

				.text {
					display: flex;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}

					.blueTxt {
						color: #1989FA;
						font-size: 24rpx;
						text-decoration: underline;
						margin-left: 14rpx;
					}
				}
			}
		}

		.addressCon {
			margin: 24rpx 0;
			display: flex;
			align-items: center;
			width: 100%;
			background: url('../../static/images/second_img_map@3x.png');
			height: 116rpx;
			background-size: 100% 100%;

			.address {
				font-size: 28rpx;
				color: #333333;
				flex: 1;
				width: 0;
			}

			.rightCon {
				width: 96rpx;
				text-align: center;
				margin-right: 32rpx;

				.icon {
					width: 32rpx;
					height: 30rpx;
					margin: 0 auto;
				}

				.txt {
					font-size: 24rpx;
					color: #1989FA;
					margin-top: 10rpx;
				}
			}
		}
	}

	.card {
		width: 100%;
		padding: 32rpx;
		background: #fff;
		margin-top: 16rpx;
		.h1 {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 36rpx;
			font-weight: 600;
		}

		.desc {
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.tabs {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		.tab {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			color: #B3B5B9;
			&.active {
				color: #1989FA;
				font-weight: 600;
				position: relative;
				&::before {
					width: 48rpx;
					height: 4rpx;
					background: #1989FA;
					// border-radius: 200rpx 200rpx 0px 0px;
					content: '';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -12rpx;
				}
			}
		}
	}
</style>