首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
50
pages/ctms/news/detail/detail.css
Normal file
50
pages/ctms/news/detail/detail.css
Normal file
@ -0,0 +1,50 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-cover {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-top: 1px #eee solid;
|
||||
}
|
||||
.card-actions-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.card-actions-item-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.cover-image {
|
||||
flex: 1;
|
||||
height: 150px;
|
||||
}
|
||||
.no-border {
|
||||
border-width: 0;
|
||||
}
|
||||
360
pages/ctms/news/detail/detail.vue
Normal file
360
pages/ctms/news/detail/detail.vue
Normal file
@ -0,0 +1,360 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user