fm453/ctms-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首次完整推送，

Browse Source 
V：1.20240808.006
This commit is contained in:
fm453
2024-08-13 18:32:37 +08:00
parent 15be3e9373
commit c62d15b288
939 changed files with 111777 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pages/ctms/news/detail/detail.css Normal file
View 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
View 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>

54
pages/ctms/news/list/list.css Normal file
View File

@ -0,0 +1,54 @@
.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;
}
.pagination{
margin:20px 20px;
}

310
pages/ctms/news/list/list.vue Normal file
View File

@ -0,0 +1,310 @@
<template>
<view class="container">
<uni-search-bar class="uni-mt-10" radius="5" placeholder="点击快速搜索标题" clearButton="auto" cancelButton="none"
@clear="clearSearch" @confirm="search" />
<view class="uni-padding-wrap uni-common-mt">
<uni-segmented-control :current="current" :values="catsArr" style-type="button" @clickItem="changeCat" />
</view>
<view class="content">
<view class="nodata" v-if="!totalCount">
没有相关的内容
</view>
<view v-else :id="'newsCar-'+detail.id" v-for="(detail,index) in news" :data-id="detail.id"
:data-cid="detail.cid" :key="detail.id" :index="index">
<uni-card padding="10px 0">
<template v-if="detail.thumb" v-slot:cover :isFull="true">
<view class="custom-cover">
<image class="cover-image" mode="aspectFill" :src="detail.thumb">
</image>
<view class="cover-content">
<text class="uni-subtitle uni-white">{{detail.title}}</text>
</view>
</view>
</template>
<template v-else v-slot:title>
<uni-list>
<uni-list-item :show-switch="false" :title="detail.title" />
</uni-list>
</template>
<view class="uni-body">
<view>
<text>{{detail.des}}</text>
</view>
</view>
<view slot="actions" class="card-actions">
<view class="card-actions-item" @click="showCheck(detail.id)">
<uni-icons type="heart" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">{{detail.liked}}</text>
</view>
<view class="card-actions-item" @click="actionsRemark(detail.id)">
<uni-icons type="fire" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">{{detail.reading}}</text>
</view>
<view class="card-actions-item" @click="actionsDetail(detail.id)">
<uni-icons type="link" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">详情</text>
</view>
</view>
</uni-card>
</view>
</view>
<view class="pagination">
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
@change="newPage" />
</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 utils from "@/utils/common.js";
import config from "@/config/ctms.config.js";
import ctms from '@/apis/ctms/index.js';
export default {
data() {
return {
userinfo: {},
cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
news: {},
cats: {},
catsArr: ['全部'],
catIds: {
'0': {
id: 0
}
}, //与catsArr键对应的,单条完整cat的数据集
catid: 0, //当前分类ID
current: 0, //分段器对应当前分类
stitle: '',
totalCount: 0, //一共多少条数据
psize: 10,
page: 1,
//悬浮按钮
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: {
//搜索框响应
search(res) {
this.stitle = res.value;
this.getNews();
},
clearSearch() {
this.stitle = '';
this.getNews();
},
//切换分类
changeCat(e) {
var i = e.currentIndex;
this.catid = this.catIds[i].id;
this.getNews();
},
actionsDetail(e) {
uni.navigateTo({
url: '../detail/detail?id=' + e
})
},
//分页器动作
newPage(e) {
var page = e.current;
this.page = page;
var res = ctms.news.list(this.page);
if (res) {
this.news = res.news;
} else {
this.getNews();
}
},
getCats: function() {
var _that = this;
ctms.news.cats().then(
(res) => {
_that.cats = res;
for (var i in res) {
var r = res[i];
if (r.is_show) {
_that.catsArr.push(r.title);
_that.catIds[Number(i) + 1] = r;
}
}
}
);
},
//刷新列表
getNews() {
var _that = this;
var searchData = {
title: this.stitle,
cid: this.catid
};
ctms.news.search(searchData, this.page, this.psize).then(
function(res) {
if (res) {
_that.news = res.news;
_that.totalCount = res.total;
} else {
_that.news = {}
_that.totalCount = 0;
}
}
);
},
//浮窗按钮相关操作
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() {
// utils.debug('运单列表页启动')
var res = ctms.news.list(this.page);
if (res) {
this.news = res.news;
this.totalCount = res.total;
} else {
this.getNews();
}
this.getCats();
},
onShow() {
},
onPullDownRefresh() {
this.page = 1;
this.getNews();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 3000);
}
}
</script>
<style lang="scss">
@import url("list.css");
.content {
text-align: center;
}
.nodata {
padding: 2rem 1rem;
}
.uni-body,
.uni-list-item {
text-align: left;
}
.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;
}
</style>