veterans_H5/h5_web/pages/schoolDetails/schoolDetails.vue

<!-- 学校详情 -->
<template>
	<view class="school-details">
		<!-- 导航栏 -->
		<u-navbar title="" :background="background" title-color="#fff" back-icon-color="#fff" :border-bottom="false"/>
		<view class="school-details-bg"></view>
		<view class="school-details-content">
			<view class="school-details-content-logo">
				<u-image :src="schoolInfo.schoolLogoUrl" width="140" height="140" border-radius="70" mode="aspectFill">
					<view slot="error">
						<u-image src="../../static/img/default-company.png" width="140" height="140" border-radius="70" mode="aspectFill"/>
					</view>
				</u-image>
			</view>
			<view class="school-details-content-name">{{ schoolInfo.schoolName }}</view>
			<!-- <view class="school-details-content-evaluate">
				<view class="left">
					<view class="evaluate">优秀</view>
					<view class="describe">综合评分</view>
					<view class="star">
						<u-icon name="star-fill" color="#EF651F"></u-icon>
						<u-icon name="star-fill" color="#EF651F"></u-icon>
						<u-icon name="star-fill" color="#EF651F"></u-icon>
						<u-icon name="star-fill" color="#EF651F"></u-icon>
						<u-icon name="star-fill" color="#EF651F"></u-icon>
					</view>
					<view class="grade">4.8</view>
				</view>
				<view class="right">
					详情
					<u-icon class="icon" name="arrow-right" color="#666666"></u-icon>
				</view>
			</view> -->
			<!-- 学校概况 -->
			<view class="school-details-content-survey">
				<view class="title">学校概况</view>
				<view class="item">
					<view>学校名称：{{ schoolInfo.schoolName || '-' }}</view>
					<view>学校性质：{{ getSchoolTypeName(schoolInfo.schoolNature) }}</view>
					<view>培养方式：{{ schoolInfo.trainMethod || '-' }}</view>
					<view class="home" @click="jumpSchoolHome(schoolInfo.schoolUrl)">
						<view>
							学校主页：<text>{{ schoolInfo.schoolUrl || '-' }}</text>
						</view>
						<view>
							<u-icon name="arrow-right" color="#EF651F" size="24"/>
						</view>
					</view>
					<view>招生邮箱：{{ schoolInfo.email || '-' }}</view>
					<view>联系人：{{ schoolInfo.linkUser || '-' }}</view>
					<view>联系电话：{{ schoolInfo.linkPhone || '-' }}</view>
					<view>地址：{{ schoolInfo.schoolAddress || '-' }}</view>
					<!-- <view class="address">
						<view>
							<image src="../../static/img/dingwei.png"/>
							查看位置
						</view>
					</view> -->
				</view>
			</view>
			
			<!-- 学校信息 -->
			<view class="school-details-content-introduce">
				<view class="title">学校信息</view>
				<view class="content" v-if="schoolInfo.detatil">
					<u-parse :html="schoolInfo.detatil"/>
				</view>
				<u-empty v-else text="暂无学校信息" mode="data"></u-empty>
			</view>
			
			<!-- 学校相册 -->
			<!-- <view class="school-details-content-album">
				<view class="title">学校相册</view>
				<view class="pic-list">
					<view
						class="pic-list-item"
						v-for="(item, index) in picList"
						:key="index"
					>
						<image :src="item.url" mode=""></image>
					</view>
				</view>
			</view> -->
			
			<!-- 特色专业 -->
			<view class="school-details-content-major" v-if="schoolInfo.twinList && schoolInfo.twinList.length > 0">
				<view class="title">双高专业</view>
				<view class="major-list">
					<view class="major-list-item" v-for="(item, index) in schoolInfo.twinList" :key="index" @click="jumpPage('/pages/professionalDetails/professionalDetails', { id: item.id })">
						<view>{{ item.professionName }}（专业代码：{{ item.professionCode }}）</view>
						<view>
							<u-icon name="arrow-right"/>
						</view>
					</view>
				</view>
			</view>
			
			<view class="school-details-content-major" v-if="schoolInfo.enrollList && schoolInfo.enrollList.length > 0">
				<view class="title">招生专业</view>
				<view class="major-list">
					<view class="major-list-item" v-for="(item, index) in schoolInfo.enrollList" :key="index" @click="jumpPage('/pages/professionalDetails/professionalDetails', { id: item.id })">
						<view>{{ item.professionName }}（专业代码：{{ item.professionCode }}）</view>
						<view>
							<u-icon name="arrow-right"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#3D5D4C'
				},
				// 学校相册
				picList: [],
				// 学校id
				schoolId: '',
				// 学校信息
				schoolInfo: {},
				// 学校性质
				schoolTypeList: []
			}
		},
		onLoad(page) {
			if (page.schoolId) {
				this.schoolId = page.schoolId
			}
		},
		onShow() {
			this.getSchoolTypeList()
			if (this.schoolId) {
				uni.showLoading({
					title: '加载中'
				})
				this.getSchoolDetails(this.schoolId)
			}
		},
		methods: {
			/**
			 * 通过学校id获取学校详情
			 * @param { String } id 学校id
			 */
			getSchoolDetails(id) {
				this.$u.api.school.getSchoolDetails({
					id: id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.schoolInfo = res.data
					}
				}).catch(err => {
					uni.hideLoading()
					this.$refs.uToast.show({
						title: err.data.message,
						type: 'error'
					})
				})
			},
			/**
			 * 获取学校性质字典
			 */
			getSchoolTypeList() {
				this.$u.api.getDictdataUrl({
					key: 'school_nature'
				}).then(res => {
					if (res.code === 200) {
						this.schoolTypeList = res.data
					}
				})
			},
			/**
			 * 通过字典值去获取名称
			 * @param { String } val 字典text值
			 */
			getSchoolTypeName(val) {
				let name
				this.schoolTypeList.forEach(item => {
					if (Number(item.text) === Number(val)) {
						name = item.label
					}
				})
				return name
			},
			/**
			 * 跳转到外部网页
			 */
			jumpSchoolHome(url) {
				if (url) {
					location.href = url
				}
			},
			/**
			 * 跳转到到指定页面
			 */
			jumpPage(url, params) {
				this.$u.route({
					url: url,
					params: params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './schoolDetails.scss';
</style>