360 lines
12 KiB
Vue
360 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="banner">
|
||
<image class="banner-img" :src="detail.thumb"></image>
|
||
<view class="banner-title">{{detail.title}}</view>
|
||
</view>
|
||
<view class="article-meta">
|
||
<text class="article-author">
|
||
<uni-icons type="contact"></uni-icons>{{detail.author_name}}
|
||
</text>
|
||
<text class="article-text">更新于</text>
|
||
<text class="article-time">{{detail.updateTime}}</text>
|
||
</view>
|
||
<view v-if="detail.des" class="des">
|
||
<text>内容摘要：</text>
|
||
{{detail.des}}
|
||
</view>
|
||
<view class="article-content">
|
||
<rich-text :nodes="htmlNodes" @itemclick="nodeClick"></rich-text>
|
||
</view>
|
||
<view class="article-meta">
|
||
<text class="article-footer">
|
||
<uni-icons type="eye">浏览</uni-icons>
|
||
{{detail.viewed}}
|
||
</text>
|
||
|
||
<text :class="'article-footer '+ activeReading" @click="actionReading">
|
||
<uni-icons type="hand-up" :style="styleReading">赞</uni-icons>
|
||
{{detail.reading}}
|
||
</text>
|
||
<text :class="'article-footer '+ activeLike" @click="actionLike">
|
||
<uni-icons type="heart" :style="styleLike">喜欢</uni-icons>
|
||
{{detail.liked}}
|
||
</text>
|
||
</view>
|
||
|
||
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
|
||
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "@/config/ctms.config.js";
|
||
import ctms from '@/apis/ctms/index.js';
|
||
import htmlParser from '@/common/html-parser.js'
|
||
const DETAIL_PAGE_PATH = config.pageDir + 'news/detail/detail';
|
||
export default {
|
||
data() {
|
||
return {
|
||
userinfo: {},
|
||
id: 0,
|
||
detail: {
|
||
id: 1,
|
||
viewed: 0,
|
||
liked: 0,
|
||
reading: 0
|
||
},
|
||
htmlNodes: [],
|
||
imgs: [], //可用于预览的图片
|
||
activeStyle: 'color:#fd8208;',
|
||
activeReading: '', //active
|
||
styleReading: '',
|
||
activeLike: '', //active
|
||
styleLike: '',
|
||
h5_url: '',
|
||
|
||
//悬浮按钮
|
||
fabs: {
|
||
horizontal: 'left',
|
||
vertical: 'bottom',
|
||
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
|
||
pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#fff',
|
||
iconColor: '#aaa'
|
||
},
|
||
content: [{
|
||
iconPath: '/static/fab/home.png',
|
||
selectedIconPath: '/static/fab/homeactive.png',
|
||
text: '首页',
|
||
active: false,
|
||
diyfn: 'home'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/guanzhu.png',
|
||
selectedIconPath: '/static/fab/guanzhuactive.png',
|
||
text: '关注',
|
||
active: false,
|
||
diyfn: 'news'
|
||
},
|
||
{
|
||
iconPath: '/static/fab/me.png',
|
||
selectedIconPath: '/static/fab/meactive.png',
|
||
text: '用户',
|
||
active: false,
|
||
diyfn: 'user'
|
||
},
|
||
|
||
{
|
||
iconPath: '/static/fab/news.png',
|
||
selectedIconPath: '/static/fab/newsactive.png',
|
||
text: '公告',
|
||
active: false,
|
||
diyfn: 'notice'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getNewsDetail: function() {
|
||
var _that = this;
|
||
ctms.news.checkDetail(this.id).then((res) => {
|
||
if (res) {
|
||
_that.detail = res.data;
|
||
_that.htmlNodes = htmlParser(_that.detail.content);
|
||
uni.showToast({
|
||
title: "查询完成!",
|
||
icon: "success"
|
||
});
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
});
|
||
},
|
||
checkRecords: function() {
|
||
// 检查文章在读等本地记录
|
||
if (ctms.news.mark(this.id, 'reading', 'get')) {
|
||
this.activeReading = "active";
|
||
this.styleReading = this.activeStyle;
|
||
}
|
||
if (ctms.news.mark(this.id, 'liked', 'get')) {
|
||
this.activeLike = 'active';
|
||
this.styleLike = this.activeStyle;
|
||
}
|
||
},
|
||
actionReading(e) {
|
||
var op = this.activeReading ? 'del' : 'set';
|
||
this.activeReading = !this.activeReading ? 'active' : false;
|
||
this.styleReading = !this.styleReading ? this.activeStyle : false;
|
||
ctms.news.mark(this.id, 'reading', op);
|
||
},
|
||
actionLike(e) {
|
||
var op = this.activeLike ? 'del' : 'set';
|
||
this.activeLike = !this.activeLike ? 'active' : '';
|
||
this.styleLike = !this.styleLike ? this.activeStyle : '';
|
||
ctms.news.mark(this.id, 'liked', op);
|
||
},
|
||
nodeClick(e) {
|
||
var _that = this;
|
||
// console.log(e.detail);
|
||
var url = e.detail.node.attrs.src;
|
||
_that.imgs.push(url)
|
||
uni.previewImage({
|
||
urls: _that.imgs,
|
||
indicator: "default",
|
||
current: url,
|
||
longPressActions: {
|
||
itemList: ['保存图片'],
|
||
success: function(data) {
|
||
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||
uni.showToast({
|
||
title: '平台禁止保存图片到本地！',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
fail: function(err) {
|
||
// console.log(err.errMsg);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
callTo(tel) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: tel
|
||
})
|
||
},
|
||
|
||
//浮窗按钮相关操作
|
||
fabClick(e) {
|
||
// utils.debug('点击了悬浮按钮')
|
||
},
|
||
fabTrigger(e) {
|
||
var eindex = e.index;
|
||
this.fabs.content[e.index].active = !e.item.active;
|
||
|
||
if (!e.item.diyfn) {
|
||
//未设置这个difyfn字段的，无操作
|
||
return false;
|
||
}
|
||
var diyfn = e.item.diyfn,
|
||
dir = config.pageDir,
|
||
page;
|
||
switch (diyfn) {
|
||
case 'home':
|
||
page = 'tabbar/index/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
case 'news':
|
||
page = 'news/list/list';
|
||
break;
|
||
case 'user':
|
||
page = 'me/index';
|
||
break;
|
||
case 'notice':
|
||
page = 'tabbar/notice/index';
|
||
return uni.reLaunch({
|
||
url: dir + page
|
||
})
|
||
break;
|
||
}
|
||
return uni.navigateTo({
|
||
url: dir + page
|
||
})
|
||
}
|
||
},
|
||
onLoad(o) {
|
||
this.id = o.id;
|
||
var res = ctms.news.detail(this.id);
|
||
if (res) {
|
||
this.detail = res;
|
||
} else {
|
||
this.getNewsDetail();
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title: this.detail.title
|
||
})
|
||
ctms.news.viewed(this.id);
|
||
},
|
||
onReady() {
|
||
var nodes = this.htmlNodes = htmlParser(this.detail.content);
|
||
// for (var i in nodes) {
|
||
// var ps = nodes[i].children;
|
||
// for (var j in ps) {
|
||
// var p = ps[j];
|
||
// if (p.name === 'img') {
|
||
// console.log(p.attrs.src)
|
||
// p.attrs.mode = 'aspectFit';
|
||
// };
|
||
// }
|
||
// }
|
||
// console.log(nodes)
|
||
},
|
||
onShow: function() {
|
||
this.checkRecords();
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getNewsDetail();
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.detail.title,
|
||
path: DETAIL_PAGE_PATH + '?id=' + this.id
|
||
}
|
||
},
|
||
//标题栏按钮响应,仅在APP-PLUS下支持
|
||
onNavigationBarButtonTap(e) {
|
||
//#ifdef APP-PLUS
|
||
uni.shareWithSystem({
|
||
summary: this.detail.des + "登陆APP查看更多信息",
|
||
href: this.h5_url + "?id=" + this.id,
|
||
success() {
|
||
// 分享完成，请注意此时不一定是成功分享
|
||
},
|
||
fail() {
|
||
// 分享失败
|
||
}
|
||
})
|
||
//#endif
|
||
//#ifdef H5
|
||
var summary = this.detail.des + "登陆APP查看更多信息";
|
||
uni.setClipboardData({
|
||
data: summary
|
||
})
|
||
//#endif
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("detail.css");
|
||
|
||
.des {
|
||
text-align: left;
|
||
text-indent: 2rem;
|
||
padding: 2rem 1rem;
|
||
color: #999;
|
||
}
|
||
|
||
.banner {
|
||
height: 360rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background-color: #ccc;
|
||
}
|
||
|
||
.banner-img {
|
||
width: 100%;
|
||
}
|
||
|
||
.banner-title {
|
||
max-height: 84rpx;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 30rpx;
|
||
bottom: 30rpx;
|
||
width: 90%;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
line-height: 42rpx;
|
||
color: white;
|
||
z-index: 11;
|
||
}
|
||
|
||
.article-meta {
|
||
padding: 20rpx 40rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
color: gray;
|
||
}
|
||
|
||
.article-text {
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.article-author,
|
||
.article-time {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.article-content {
|
||
padding: 0 30rpx;
|
||
overflow: hidden;
|
||
font-size: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.article-footer {
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.article-footer.active,
|
||
.article-footer.active>span {
|
||
color: #fd8208;
|
||
}
|
||
|
||
/* 修复详情内图片显示问题 */
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
</style> |