首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
54
pages/ctms/news/list/list.css
Normal file
54
pages/ctms/news/list/list.css
Normal 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
310
pages/ctms/news/list/list.vue
Normal 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>
|
||||
Reference in New Issue
Block a user