yogaApp/pages/category/detail.vue

<template>
	<view class="page">
		
		<view class="acon">
			<view class="atitle">{{name}}</view>
			<view class="aother">
				<view class="txtpre">作者：{{author}}</view>
				<uni-icons type="eye" color="#868c99" size="18"></uni-icons>
				<view class="txt">{{num}}</view>
				<uni-icons type="calendar" color="#868c99" size="18"></uni-icons>
				<view class="txt">{{date}}</view>
			</view>
			<view class="aimg limg imgload">
				<image v-if="image" :src="image" style="width: 100%;" mode="aspectFill" @click="ViewImage(image)" ></image>
			</view>
			<view class="acontent">
				<mp-html :content="html" :markdown="true" :lazy-load="true"/>
			</view>
		</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:"",
				title:"",
				image:'',
				html:``,
				// `基础课、进修提升课、私教课<br>
				// 资深课程导师<br>
				// 国内知名大学专业毕业<br>
				// 系统的学习与研究，顺利通过了所授课程的等级证书考核<br>
				// 有丰富的授课教学经验，熟悉各种课程体系，性格活泼开朗，具有很强的亲和力<br>
				// 能及时发现学员的特点和学习问题，从根本上解决学员在学习中遇到的问题，是一位深受学员喜爱和信任的好老师！<br>
				// 多年来培养帮助了许多人获得提升改善，细致认真，温和，讲解详细到位，确保学员在健康安全的气氛中练习！<br>
				// 个人名言：“教学的艺术不在于传授本领，而在善于激励唤醒和鼓舞。”`,
				id:'',
				name:'',
				num:'',
				author:'yoga',
				date:''
			};
		},
		onLoad(options) {
			if(options.type){
				this.type=options.type;
			}
			if(options.data){
				var info=JSON.parse(decodeURIComponent(options.data));
				this.id= info.id;
				this.name= info.title;
				this.num= info.readNum;
				this.date= info.modifyTime;
				this.title= info.name;
				this.html= info.content;
				this.image=info.image?info.image:'';
				console.log(this.image)
				this.loadinfo();
			}
			else{
				uni.showModal({
					title: '提示',
					content: '当前信息不存在..',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						// 返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
		},
		onReady(){
			uni.setNavigationBarTitle({
			  title: this.title,
			});
		},
		onShow() {
			this.openId = myCache('openId');
			this.phone = myCache('phone');
			this.userid = myCache('userid');
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			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;
				}
			},
			ViewImage(img) {
				var imgList=[img];
				uni.previewImage({
					urls: imgList,
					current:0
				});
			},
			async loadinfo(){
				// 详情
				uni.showLoading({
					title: '数据加载中...'
				});
				var params = {
					id: this.id
				};
				try{
					var url="/api/inherit/getOne";
					if(this.type==0){
						// 瑜伽传承
						url="/api/inherit/getOne";
					}
					else if(this.type==3){
						// 练习瞬间
						url="/api/moments/getOne";
					}
					else if(this.type==4){
						// 瑜伽欣赏
						url="/api/appreciate/getOne";
					}
					else if(this.type==5){
						// 瑜伽常识
						url="/api/sense/getOne";
					}
					else if(this.type==6){
						// 健康饮食
						url="/api/healthy/getOne";
					}
					const {data: res1} = await uni.$http.post(url,params);
					console.log(res1);
					if (res1.success) {
						if(!res1.data){
							uni.showModal({
								title: '提示',
								content: '当前信息获取异常，请返回..',
								cancelText: '取消',
								confirmText: '确定',
								success: ress => {
									// 返回
									uni.navigateBack({
										delta: 1
									});
								}
							});
							return false;
						}
						var info=res1.data;
						this.name= info.title;
						this.num= info.readNum;
						this.date= info.modifyTime;
						this.title= info.title;
						this.html= info.content;
						this.image=info.image?info.image:'';
						console.log(this.image)
						this.$forceUpdate();
					}
					else{
						uni.showModal({
							title: '提示',
							content: '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
				catch(e){
					console.log(e)
					uni.showModal({
						title: '提示',
						content: '当前信息不存在..',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							// 返回
							uni.navigateBack({
								delta: 1
							});
						}
					});
				}
			},
			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
				}
			},
			// 获取状态栏高度
			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{
		display:flex;
		flex-direction: column;
		.atop{
			display:flex;
			flex-direction: row;
			margin: 0;
			align-items: center;
			image{
				flex-shrink: 0;
				width: 100%;
				height: 360rpx;
			}
		}
		.atitle{
			width: 100%;
			padding: 30rpx 30rpx 0 30rpx;
			font-size: 36rpx;
			color: #000;
		}
		.aimg{
			padding: 30rpx 30rpx 0 30rpx;
			width: 100%;
		}
		.acontent{
			background-color:  rgba(255, 255,255, 0.5);
			border-radius: 20rpx;
			margin: 30rpx 30rpx 0;
			padding: 30rpx 30rpx;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			line-height: 48rpx;
			image {
				width: 100%;
				height: 360rpx;
				margin-bottom: 20rpx;
			}
		}
		.aother{
			display: flex;
			flex-direction: row;
			color: #868c99;
			padding: 20rpx 30rpx 0;
			justify-content: center;
			align-items: center;
			.txtpre{
				display: flex;
				flex: 1;
				font-size: 28rpx;
				margin-right: 20rpx;
				width: 50rpx;
			}
			.txt{
				font-size: 28rpx;
				margin-right: 20rpx;
			}
		}
	}
	.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;
		}
	}
	
</style>