310 lines
10 KiB
Vue
310 lines
10 KiB
Vue
<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> |