You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

193 lines
4.1 KiB

<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>