H5_module/topic/about/about.vue

<template>
	<view v-if="isShowPage">
		<view class="ttop" :style="'height:' + systems.barHeight + 'rpx;'">
			<view class="back"
				:style="'margin-top:' + systems.ktxStatusHeight + 'rpx;height:' + systems.navigationHeight + 'rpx;'"
				@click="back()">
				<image :src="picUrlss+'back_black.png'"></image>
			</view>
		</view>
		<view class="top">
			<!-- <swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
				<block v-for="(item, index) in info.images" :key="index">
					<swiper-item><image lazy-load="true" :src="item" mode="aspectFill"></image></swiper-item>
				</block>
			</swiper>
			<view class="dots ddflex">
				<block v-for="(item, index) in info.images" :key="index"><view :class="['dot', index == swiperCurrent ? 'active' : '']"></view></block>
			</view> -->
			<image :src="params.mainGraph" mode="aspectFill"></image>
		</view>
		<view class="infos">
			<view class="title ddflex">
				<image :src="params.logo" mode="aspectFill"></image>
				<view class="fflex">{{params.title}}</view>
			</view>
			<!-- <view class="brief">
				<rich-text :nodes="params.briefIntroduction"></rich-text>
			</view> -->
			<view class="http ddflex" v-if="params.website">
				<image src="../../static/pages/images/http.png"></image>
				<view class="fflex">{{params.website}}</view>
				<view class="copy" @click="copy(params.website)">复制</view>
			</view>
			<view class="area ddflex">
				<view class="addr fflex">
					<view>{{params.address}}</view>
					<text>{{params.title}}</text>
				</view>
				<view class="aico" @click="location()">
					<image src="../../static/pages/images/a_ico1.png"></image>导航
				</view>
				<view class="aico call" @click="call()">
					<image src="../../static/pages/images/a_ico2.png"></image>致电
				</view>
			</view>
		</view>
		<view class="intro">
			<view class="a-tit">简介</view>
			<view class="con">
				<mp-html :content="params.briefIntroduction" :lazy-load="true"></mp-html>
			</view>
		</view>
		<view class="intro" v-if="doctorList&&doctorList.length>0">
			<navigator :url="'/topic/teacher/teacher?id='+opt.id" hover-class="none" class="a-tit ddflex">专家团队<image
					src="../../static/pages/images/crico1.png" class="rico"></image>
			</navigator>
			<view class="tea ddflex">
				<navigator :url="'/topic/teacherDet/teacherDet?id=' + item.id" hover-class="none" class="li"
					v-for="(item,index) in doctorList" :key="index">
					<view class="lis">
						<image :src="item.headUrl" mode="aspectFill"></image>
						<view class="tea-tit tover">{{item.realName}}</view>
						<view class="rec-tag ddflex" v-if="item.userExtend && item.userExtend.label">
							<text class="ddflex" v-for="(it,idx) in item.userExtend.label.split(',')" :key="idx"
								v-if="idx == 0">{{it}}</text>
						</view>
						<view class="tea-bri tovers" v-if="item.userExtend.brief&&item.userExtend.brief!='<p><br></p>'">
							<rich-text :nodes="item.userExtend.brief"></rich-text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="intro" v-if="params.environment.length > 0">
			<view class="a-tit">环境设施</view>
			<view class="eviron ddflex">
				<view class="li" v-for="(item,index) in params.environment" :key="index"
					@click="preview(params.environment,index)">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- <view class="intro" v-if="honor.images && honor.images.length > 0">
			<view class="a-tit">{{honor.title}}</view>
			<view class="eviron ddflex">
				<view class="li" v-for="(item,index) in honor.images" :key="index" @click="preview(honor.images,index)"><image :src="item" mode="aspectFill"></image></view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const util = require('../../utils/util.js');
	const app = getApp();
	import mpHtml from "../../components/mp-html/components/mp-html/mp-html.vue"

	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				isShowPage: false,
				systems: {},
				opt: {},
				params: {},
				swiperCurrent: 0,
				info: '',
				environment: '',
				merchant: {},
				doctorList: []
			};
		},
		onLoad(options) {
			this.opt = options;
			// this.getTeacherList();
			this.getDoctorList();
			this.getParams();
		},
		onShow() {},

		methods: {
			getParams() {
				req.getRequest('/api/merchant/detail', {
					id: this.opt.id
				}, data => {
					if (data.environment) {
						data.environment = JSON.parse(data.environment);
					}
					this.params = data;
					this.isShowPage = true;
				})
			},
			getDoctorList() {
				let form = {
					merchantId: this.opt.id,
					page: 1,
					limit: 3,
					status: 1,
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/v3/sysUser/getDoctorV2', form, data => {
						if (data && data.length > 0) {
							data.map(it => {
								if (it.userExtend.brief && it.userExtend.brief != '<p><br></p>')
									it.userExtend.brief =
									'<div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;">' +
									it.userExtend.brief + '</div>'
							})
						}
						this.doctorList = data;
						resolve();
					})
				})
			},
			back() {
				uni.navigateBack();
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			splitLabel(label) {
				if (!label) {
					return false;
				} else {
					if (label.indexOf("，") > 0) {
						return label.split('，');
					} else {
						return label.split(',');
					}
				}
			},
			getTeacherList() {
				let that = this;
				let form = {
					page: 1,
					limit: 6,
					code: req.public.teacherCode,
					merchantId: this.opt.id
				}
				req.getRequest('/api/content/list', form, data => {
					if (data) {
						data.map(it => {
							if (it.fieldValues && it.fieldValues.label) {
								it.fieldValues.label = that.splitLabel(it.fieldValues.label)
							}
							return it;
						})
						that.teacherList = data;
					}
				});
			},
			preview(list, index) {
				uni.previewImage({
					urls: list,
					current: list[index]
				})
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function(res) {
						req.msg('复制成功')
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.params.phone
				})
			},
			location() {
				let that = this;
				// #ifdef MP-WEIXIN
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = '绿萝云'; //调用插件的app的名称
				let themeColor = '#F06520';
				let endPoint = JSON.stringify({ //终点
					'name': that.params.title,
					'latitude': that.params.lat,
					'longitude': that.params.lng
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint +
						'&themeColor=' + themeColor
				});
				// #endif
				// #ifdef H5
				util.openMapNavigation(that.params.lat, that.params.lng, that.params.title, that.params.address ? that
					.params.address : '');
				// #endif
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		}
	};
</script>

<style>
	@import "./about.css";
</style>