chanyiUniapp/pages/knowledge/detail.vue

<template>
	<view class="article-detail-index">
		<view class="lock-box" v-if="detail.isLock">
			<image src="../../static/lock.png" mode=""></image>
			<view>{{detail.chargeType == 1 ? '该文章需要付费阅读' : '该文章需要积分兑换'}}</view>
			<view class="lock-btn" @click="toUnlock">
				<text class="tips">￥{{detail.articleCharge}}</text>
				<text>立即解锁</text>
			</view>
		</view>
		<view :class="detail.isLock ? 'mask-box' : ''">
			<view class="article-title">{{detail.title}}</view>
			<view class="author-box acea-row row-middle">
				<view :class="detail.chargeType == 0 ? 'charge-type' : 'charge-type charge-type-price'">{{detail.chargeType == 0 ? '免费' : detail.chargeType == 1 ? '收费' : '积分兑换'}}</view>
				<view class="add-time">{{detail.addTime}}</view>
				<view>·{{detail.author}}</view>
			</view>
			<view class="d-line"></view>
			<view class="audio-box" v-if="detail.audio != ''">
				<luchAudio :src="detail.audio" :play.sync="aotuPlay" :author="detail.author" :name="detail.title"></luchAudio>
			</view>
			<view class="content-box">
				<rich-text class="content" :nodes="detail.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
import { getArticleDetails } from '@/api/knowledge';
import luchAudio from '@/components/luch-audio/luch-audio.vue';
export default{
	components: { luchAudio },
	data(){
		return {
			id:'',
			detail:null,
			aotuPlay: false,
			maskH:0
		}
	},
	onLoad(){
		this.id = this.$yroute.query.id;
		
	},
	onShow(){
		this.getDetail();
	},
	mounted() {
		
	},
	onShareAppMessage: function(res) {
		return {
			title: this.detail.title,
			imageUrl:this.detail.imageInput,
			path: '/pages/knowledge/detail?id=' + this.detail.id
		}
	},
	methods:{
		
		getDetail(){
			getArticleDetails(this.id).then((res)=>{
				// console.log(res)
				if(res.success){
					res.data.content = res.data.content.replace(/\<img/g, "<img style='width: 100%;'")
					this.detail = res.data
				}
			})
		},
		toUnlock(){
			this.$yrouter.push({
				path: '/pages/knowledge/unlock',
				query: {
					name: this.detail.title,
					chargeType: this.detail.chargeType,
					articleCharge:this.detail.articleCharge,
					id: this.id
				}
			})
		},
	}
}
</script>

<style lang="less" scoped>
.article-detail-index{
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	padding: 32rpx;
	background: #fff;
	.lock-box{
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 99;
		image{
			width: 92rpx;
			height: 92rpx;
		}
		.lock-btn{
			width: 260rpx;
			height: 86rpx;
			background: #F99C10;
			border-radius: 44rpx;
			margin-top: 38rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			.tips{
				font-size: 24rpx;
			}
		}
	}
	.mask-box{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		filter: blur(2px);
		position: absolute;
		top: 0;
		left: 0;
		user-select: none;
	}
	.mask-box::after{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		display: block;
		background: rgba(255, 253, 253, 0.2);
	}
	.d-line{
		width: 100%;
		height: 1px;
		background: #ECECEC;
	}
	.article-title{
		font-size: 40rpx;
		font-weight: 500;
		color: #333333;
		line-height: 56rpx;
	}
	.author-box{
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0 30rpx;
		// border-bottom: 1px solid #ECECEC;
		.charge-type{
			min-width: 60rpx;
			height: 34rpx;
			line-height: 32rpx;
			text-align: center;
			border-radius: 4rpx;
			border: 1px solid #D7FFA4;
			background: #8FB85B;
			color: #D7FFA4;
			padding: 0 6rpx;
			font-size: 22rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
		}
		.charge-type-price{
			background: #F99C10;
			color: #FFEDCC;
			border: 1px solid #F99C10;;
		}
	}
	.audio-box{
		margin: 30rpx 0 40rpx;
		audio{
			width: 100%;
		}
	}
	.content-box{
		width: 100%;
		overflow: hidden;
		margin-top: 40rpx;
	}
}
</style>