<template>
|
<view :data-theme="theme()" :class="theme() || ''" class="article-detail" v-if="loadding">
|
<view class="title fb">{{ article.article_title }}</view>
|
<view class="info d-b-c f24">
|
<view>
|
<text class="red">{{ article.category.name }}</text>
|
<text class="ml30">{{ article.create_time }}</text>
|
</view>
|
<button class="share-box" open-type="share" @click="shareFunc"><image class="share_img" src="/static/icon/fenxiang.png" mode=""></image></button>
|
</view>
|
<view class="article-content" v-html="article.article_content"></view>
|
<tabBar></tabBar>
|
<!--app分享-->
|
<AppShare :isAppShare="isAppShare" :appParams="appParams" @close="closeAppShare"></AppShare>
|
</view>
|
</template>
|
|
<script>
|
import utils from '@/common/utils.js';
|
import AppShare from '@/components/app-share.vue';
|
export default {
|
components: {
|
AppShare
|
},
|
data() {
|
return {
|
/*是否加载完成*/
|
loadding: false,
|
indicatorDots: true,
|
autoplay: true,
|
interval: 2000,
|
duration: 500,
|
/*文章id*/
|
article_id: 0,
|
/*文章详情*/
|
article: {
|
image: {}
|
},
|
urldata: '',
|
/*app分享*/
|
isAppShare: false,
|
appParams: {
|
title: '',
|
summary: '',
|
path: ''
|
}
|
};
|
},
|
onLoad(e) {
|
/*分类id*/
|
this.article_id = e.article_id;
|
//#ifdef H5
|
this.urldata = window.location.href;
|
//#endif
|
},
|
mounted() {
|
/*获取产品详情*/
|
this.getData();
|
},
|
/*分享*/
|
onShareAppMessage() {
|
let self = this;
|
// 构建页面参数
|
let params = self.getShareUrlParams({
|
article_id: self.article_id
|
});
|
self.taskFunc();
|
return {
|
title: self.article.article_title,
|
path: '/pages/article/detail/detail?' + params
|
};
|
},
|
methods: {
|
taskFunc() {
|
let self = this;
|
self._post(
|
'plus.task.Task/dayTask',
|
{
|
task_type: 'article'
|
},
|
res => {
|
console.log('分享成功')
|
}
|
);
|
},
|
/*复制*/
|
copyUrl() {
|
var input = document.createElement('input');
|
let message = window.location.href;
|
input.value = message;
|
document.body.appendChild(input);
|
input.select();
|
input.setSelectionRange(0, input.value.length), document.execCommand('Copy');
|
document.body.removeChild(input);
|
uni.showToast({
|
title: '复制成功',
|
icon: 'success',
|
mask: true,
|
duration: 2000
|
});
|
},
|
shareFunc() {
|
let self = this;
|
this.taskFunc();
|
//#ifdef H5
|
self.copyUrl();
|
//#endif
|
//#ifdef APP-PLUS
|
self.appParams.title = self.detail.product_name;
|
self.appParams.summary = self.detail.product_name;
|
// 构建页面参数
|
let params = self.getShareUrlParams({
|
article_id: self.article_id
|
});
|
self.appParams.path = '/pages/article/detail/detail?' + params;
|
self.appParams.image = self.detail.image[0].file_path;
|
self.isAppShare = true;
|
//#endif
|
},
|
//关闭分享
|
closeAppShare(data) {
|
this.isAppShare = false;
|
},
|
/*获取文章详情*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self.loading = true;
|
let article_id = self.article_id;
|
self._get(
|
'plus.article.article/detail',
|
{
|
article_id: article_id,
|
url: self.urldata
|
},
|
function(res) {
|
/*详情内容格式化*/
|
res.data.detail.article_content =utils.format_content(res.data.detail.article_content);
|
console.log(res.data.detail.article_content);
|
self.article = res.data.detail;
|
// 配置微信分享参数
|
//#ifdef H5
|
if (self.url != '') {
|
let params = {
|
article_id: self.article_id
|
};
|
self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
|
}
|
//#endif
|
self.loadding = true;
|
uni.hideLoading();
|
}
|
);
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.article-detail {
|
padding: 30rpx;
|
background: #ffffff;
|
}
|
|
.article-detail .title {
|
font-size: 44rpx;
|
}
|
|
.article-detail .info {
|
padding: 40rpx 0;
|
color: #999999;
|
}
|
|
.article-detail .article-content {
|
width: 100%;
|
box-sizing: border-box;
|
line-height: 60rpx;
|
font-size: 34 rpx;
|
overflow: hidden;
|
}
|
.article-detail .article-content image,
|
.article-detail .article-content img {
|
display: block;
|
max-width: 100%;
|
}
|
.share-box {
|
background: none;
|
}
|
.share_img {
|
width: 32rpx;
|
height: 32rpx;
|
}
|
</style>
|
