yogaApp/pages/teacher/detail.vue

<template>
	<view class="page">
		
		<view class="fixhead" :style="{ paddingTop: geStatusBarHeight() + 'px'}">
			<view class="leftarr">
				<uni-icons type="back" size="24" color="#fff"  @tap="gotoBack"></uni-icons>
			</view>
			<!-- <view class="htitle"> 老师介绍 </view> -->
		</view>
		
		<view class="acon">
			<view class="atop">
				<swiper class="swiperb" @change="change" :current="swiperCurrent"
				  :indicator-dots="false"
				  :autoplay="true"
				  :interval="3000"
				  :duration="1000"
				  :circular="true">
					<swiper-item v-for="(item, i) in swiperList" :key="i">
						<view class="swiper-item">
							<image :src="item.ban_img" mode="aspectFill"></image>
						</view> 
					</swiper-item>
				</swiper>
				<view class="dots">
					<block v-for="(item,index) in swiperList" :key="index">
						<view class="dot" :class="index==swiperCurrent ? ' active' : ''"  @click="dotclick(index)">
						</view>
					</block>
				</view>
				<!-- <image :src="url" mode="aspectFill"></image> -->
			</view>
			<view class="atitle">
				<image :src="avatar" mode="aspectFill"></image>
				<text>{{teacherName}}</text>
				<text style="margin-left: 10rpx;">{{sex}}</text>
			</view>
			<view class="aintro">
				<text>{{intro}}</text>
			</view>
			<view class="acontent">
				<mp-html :content="html" :markdown="true" :lazy-load="true"/>
			</view>
		</view>
		
		<view class="submitcon">
			<button type="primary" class="bbtn" @tap="goconsult()">咨询</button>
			<button type="primary" class="bbtn" @tap="gocourse()">查看课表</button>
		</view>
 
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile,getRemoteHtmlFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				nickName:"",
				html:``,
				id:'',
				intro:'',
				teacherName:'',
				sex:'',
				swiperList:[],
				swiperCurrent:0,
				url:require("@/static/image/t.jpg"),
				avatar:require("@/static/image/i1.png")
			};
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id;
				this.loadinfo();
			}
			else{
				uni.showModal({
					title: '提示',
					content: '当前信息不存在..',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						// 返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
			if(options.name){
				this.teacherName=options.name;
			}
		},
		onShow() {
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.nickName = user.nickName? user.nickName:'';
			this.phone = user.userphone;
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			change(e) {
				this.swiperCurrent = e.detail.current;
				this.$forceUpdate();
			},
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					return getRemoteFile(img)
				}
				else{
					return require("@/static/image/theme/t2.png")
				}
			},
			goservice(val){
				console.log(val);
			}, 
			iflogin(){
				this.openId = myCache('openId');
				this.phone = myCache('phone');
				this.userid = myCache('userid');
				if(this.userid==""||this.userid=="0"){
					this.$refs.loginId.open();
					return false;
				}
				else{
					return true;
				}
			},
			async loadinfo(){
				// 详情
				uni.showLoading();
				var params = {
					userId: this.id
				};
				try{
					const {data: res} = await uni.$http.post('/api/context/getOne',params);
					console.log(res.data);
					if (res&&res.success) {
						var data=res.data;
						this.teacherName=data.userName;
						this.sex=data.sex=='1'?'女':(data.sex=='2'?'男':'未知');
						this.html=getRemoteHtmlFile(data.context);
						this.intro=getRemoteHtmlFile(data.intro);
						this.avatar=data.avatar?data.avatar:require("@/static/image/i1.png");
						var urls=data.url?data.url.split(','):[];
						urls.forEach(item=>{
							this.swiperList.push({
								ban_img:item
							})
						})
						console.log(this.swiperList);
						this.$forceUpdate();
					}
					else{
						uni.showModal({
							title: '提示',
							content: '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					console.log(e)
				}
			},
			gotoBack(){
				// 返回
				uni.navigateBack({
					delta: 1
				});
			},
			gotoHome(){
				// 跳转 首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			// 咨询
			async goconsult(){
				// 获取某个会话中已读消息的最大id（已读完的最后一条）
				uni.showLoading("会话创建中.."); 
				var params = {
					friendId: this.id
				};
				try{ 
					const {data: res} = await uni.$http.get("/api/message/private/maxReadedId",params);
					var timestamp = new Date().getTime();
					var info={
						chatId: "teacher-" + this.userid +"-"+ this.id,
						chatType: "teacher",
						chatName: this.teacherName,
						chatAvatar: this.avatar,
						chatTime: timestamp,
						minId: res.data, // 已读消息的最大id
						friendId: this.id, // 会话人id
					}
					var data=encodeURIComponent(JSON.stringify(info));
					uni.navigateTo({
						url: `/pages/teacher/chat?data=${data}`
					})
				}
				catch(e){
					console.log(e);
					uni.showModal({
						title: '提示',
						content: '当前会话创建失败..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {}
					});
				}
			},
			gocourse(){
				// 课程表
				uni.navigateTo({
					url: `/pages/teacher/course?type=1&id=${this.id}&name=${this.teacherName}`
				})
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: 100vh;
	}
	.fixhead{
		position: fixed;
		top:20rpx;
		left:20rpx;
		z-index: 999;
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;
		.leftarr{
			background-color: #b9af9d;
			padding: 10rpx;
			border-radius: 10rpx;
		}
		.htitle{
			font-size: 32rpx;
			color:#000;
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
		}
	}
	.acon{
		position: relative;
		display:flex;
		flex-direction: column;
		.atop{
			position: relative;
			display:flex;
			flex-direction: row;
			margin: 0;
			align-items: center;
			image{
				flex-shrink: 0;
				width: 100%;
				height: 660rpx;
			}
		}
		.atitle{
			width: 100%;
			padding: 30rpx 30rpx 0 20rpx;
			font-size: 36rpx;
			color: #000;
			display: flex;
			flex-direction: row;
			align-items: center;
			image{
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
		.aintro{
			width: 100%;
			padding: 10rpx 30rpx 0 20rpx;
			font-size: 28rpx;
			color: #586789;
			display: flex;
			flex-direction: row;
		}
		.acontent{
			background-color:  rgba(255, 255,255, 0.5);
			border-radius: 20rpx;
			margin: 30rpx;
			padding: 30rpx 30rpx;
			font-size: 28rpx;
			margin-bottom: 175rpx;
			line-height: 48rpx;
		}
	}
	.submitcon{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 60rpx 2rpx rgba(1,31,63,0.1);
		opacity: 1;
		display: flex;
		flex-direction: row;
	}
	.bbtn{
		margin: 20rpx 30rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 314rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	
	.swiperb {
		width: 100%;
		height: 660rpx;
		margin: 0 0 0 0;
		.swiper-item, image {
			margin: auto;
			height: 100%;
			width: 100%;
		}
	}
	.dots {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		// 这里一定要注意兼容不然很可能踩坑          
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.dot {
			width: 16rpx;
			height: 16rpx;
			transition: all .6s;
			background: rgba(255, 255, 255, .3);
			margin-right: 16rpx;
			border-radius: 16rpx;
		}
		.active {
			width: 16rpx;
			height: 16rpx;
			background: #fff;
		}
	}
	
</style>