forked from zhongyuanhaiju/uniapp
749 lines
20 KiB
Vue
749 lines
20 KiB
Vue
<template>
|
|
<!--<loading-cover v-if="loading" ref="loadingCover"></loading-cover>-->
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view id="articleList">
|
|
<!--分类标题栏-->
|
|
<view class="top-buttons">
|
|
<view class="cate">
|
|
<!-- #ifdef H5 -->
|
|
<van-tabs v-model="cate_ids" scrollspy :swipe-threshold="3" color="#527010">
|
|
<van-tab v-for="(item,index) in cate_list" :key="index" :name="item.category_id" :title="item.category_name"></van-tab>
|
|
</van-tabs>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<van-tabs swipeable :swipe-threshold="3" color="#527010" :active="cate_ids" @change="changeTabs">
|
|
<van-tab v-for="(item,index) in cate_list" :key="index" :name="item.category_id" :title="item.category_name"></van-tab>
|
|
</van-tabs>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<!--轮播图-->
|
|
<!-- #ifdef H5 -->
|
|
<van-swipe v-if="set_info.banner_list && cate_ids === 'recommend'" class="swipe" :autoplay="3000" indicator-color="white">
|
|
<van-swipe-item v-for="(item,index) in set_info.banner_list" :key="index">
|
|
<image class="image-item" :src="$util.img(item)" mode="aspectFit"></image>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<swiper class="swipe" circular indicator-dots autoplay :interval="3000" v-if="set_info.banner_list && cate_ids === 'recommend'" >
|
|
<swiper-item v-for="(item,index) in set_info.banner_list" :key="index">
|
|
<image class="image-item" :src="$util.img(item)" mode="aspectFit"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- #endif -->
|
|
|
|
<!-- hot阅读 -->
|
|
<view class="hot" v-if="cate_ids === 'recommend'">
|
|
<!--顶部内容-->
|
|
<view class="top">
|
|
<view class="title">热门文章</view>
|
|
</view>
|
|
<!--推荐列表-->
|
|
<view class="article">
|
|
<scroll-view scroll-x="true">
|
|
<view class="article-block" v-for="(item,index) in hot_list" :key="index" @click="goToDetail(item.article_id)">
|
|
<view class="img">
|
|
<image class="image" :src="$util.img(item.cover_img)"></image>
|
|
</view>
|
|
<view class="block-content">
|
|
<view class="content-title">{{ item.article_title }}</view>
|
|
<view class="content-abstract">{{ item.article_abstract }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<!-- 推荐阅读 -->
|
|
<view class="recommend" v-if="cate_ids === 'recommend'">
|
|
<!--顶部内容-->
|
|
<view class="top">
|
|
<view class="title">精选推荐</view>
|
|
<view class="more-info" @click="cate_ids = 'recommend-list'">
|
|
查看更多 <van-icon class="arrow" name="arrow" />
|
|
</view>
|
|
</view>
|
|
<!--推荐列表-->
|
|
<view class="article">
|
|
<view class="article-block" v-for="(item,index) in recommend_list" :key="index" @click="goToDetail(item.article_id)">
|
|
<view class="block-content">
|
|
<view class="content-title">{{ item.article_title }}</view>
|
|
<view class="content-abstract">{{ item.article_abstract }}</view>
|
|
<view class="content-info">
|
|
<view class="content-info-item">
|
|
<image class="my-icon" :src="liulan"></image>
|
|
{{ item.read_num }}
|
|
</view>
|
|
<view class="content-info-item">
|
|
<image class="my-icon" :src="dianzan"></image>
|
|
{{ item.dianzan_num }}
|
|
</view>
|
|
<view class="content-info-item" style="width: 160rpx">{{ item.create_time.split(" ")[0] || '' }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="img">
|
|
<image class="image" :src="$util.img(item.cover_img)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--文章列表-->
|
|
<view class="article" v-if="cate_ids !== 'recommend'">
|
|
<view class="article-block" v-for="(item,index) in list" :key="index" @click="goToDetail(item.article_id)">
|
|
<view class="block-content">
|
|
<view class="content-title">{{ item.article_title }}</view>
|
|
<view class="content-abstract">{{ item.article_abstract }}</view>
|
|
<view class="content-info">
|
|
<view class="content-info-item">
|
|
<image class="my-icon" :src="liulan"></image>
|
|
{{ item.read_num }}
|
|
</view>
|
|
<view class="content-info-item">
|
|
<image class="my-icon" :src="dianzan"></image>
|
|
{{ item.dianzan_num }}
|
|
</view>
|
|
<view class="content-info-item" style="width: 160rpx">{{ item.create_time.split(" ")[0] }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="img">
|
|
<image class="image" :src="$util.img(item.cover_img)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部tabBar -->
|
|
<view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: { },
|
|
data() {
|
|
return {
|
|
liulan: this.$util.img('public/picture/aijiu/liulan.png'),
|
|
dianzan: this.$util.img('public/picture/aijiu/dianzan.png'),
|
|
cate_list: [],
|
|
set_info: [],
|
|
list: [],
|
|
hot_list: [],
|
|
recommend_list: [],
|
|
// 排序内容
|
|
sort_value: 'new',
|
|
sort_list: [
|
|
{ text: '最新', value: 'new' },
|
|
{ text: '推荐', value: 'recommend' },
|
|
{ text: '热门', value: 'hot' },
|
|
{ text: '点赞', value: 'fabulous' },
|
|
],
|
|
// 列表相关
|
|
search_title: '',
|
|
cate_ids: '',
|
|
page: 1,
|
|
total_page: 1,
|
|
};
|
|
},
|
|
onShow() {},
|
|
watch:{
|
|
'search_title':{
|
|
handler() {
|
|
this.initGetList();
|
|
}
|
|
},
|
|
'cate_ids':{
|
|
handler() {
|
|
this.initGetList();
|
|
}
|
|
},
|
|
'sort_value':{
|
|
handler() {
|
|
this.initGetList();
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getCateList();
|
|
this.getSetting();
|
|
this.getHotList();
|
|
this.getRecommendList();
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
initGetList(){
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.getList();
|
|
},
|
|
// 获取文章分类
|
|
getCateList(){
|
|
let _this = this;
|
|
this.$api.sendRequest({
|
|
url: '/article/api/index/cateList',
|
|
success: res => {
|
|
if(res.code === 0){
|
|
let list = [
|
|
{category_id: 'recommend', category_name: '推荐'},
|
|
// {category_id: '', category_name: '全部'}
|
|
];
|
|
_this.cate_list = list.concat(res.data);
|
|
_this.cate_list = _this.cate_list.concat([
|
|
{category_id: 'recommend-list', category_name: '精选推荐'}
|
|
])
|
|
|
|
_this.cate_ids = 'recommend';
|
|
}else {
|
|
this.$util.showToast({
|
|
title: res.message
|
|
});
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
// 获取基本设置
|
|
getSetting(){
|
|
let _this = this;
|
|
this.$api.sendRequest({
|
|
url: '/article/api/index/setInfo',
|
|
success: res => {
|
|
if(res.code === 0){
|
|
let data = res.data;
|
|
if(typeof data.banner_list) data.banner_list = JSON.parse(data.banner_list);
|
|
|
|
_this.set_info = res.data;
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
// 获取文章列表
|
|
getList(){
|
|
let _this = this;
|
|
this.loading = true;
|
|
_this.$api.sendRequest({
|
|
url: '/article/api/index/articleList',
|
|
data: {
|
|
page: _this.page,
|
|
page_size: 10,
|
|
search_text: _this.search_title,
|
|
cate_ids: _this.cate_ids === 'recommend-list' ? '' : _this.cate_ids,
|
|
orders: _this.sort_value,
|
|
is_recommend: _this.cate_ids === 'recommend-list' ? 1 : 0
|
|
},
|
|
success: res => {
|
|
if(res.code === 0){
|
|
_this.loading = false;
|
|
let data = res.data;
|
|
if(_this.page === 1) {
|
|
_this.list = data.list;
|
|
_this.total_page = data.page_count;
|
|
}
|
|
else {
|
|
_this.list = _this.list.concat(data.list);
|
|
}
|
|
_this.page++;
|
|
// 加载完成 判断是否为最后一页
|
|
if (_this.page > data.page_count) _this.finished = true;
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
// 获取热门文章列表
|
|
getHotList(){
|
|
let _this = this;
|
|
this.loading = true;
|
|
_this.$api.sendRequest({
|
|
url: '/article/api/index/articleList',
|
|
data: {
|
|
page_size: 10,
|
|
is_hot: 1,
|
|
page: 1,
|
|
search_text: '',
|
|
cate_ids: '',
|
|
orders: ''
|
|
},
|
|
success: res => {
|
|
if(res.code === 0){
|
|
_this.loading = false;
|
|
let data = res.data;
|
|
_this.hot_list = _this.list.concat(data.list);
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
// 获取推荐文章列表
|
|
getRecommendList(){
|
|
let _this = this;
|
|
this.loading = true;
|
|
_this.$api.sendRequest({
|
|
url: '/article/api/index/articleList',
|
|
data: {
|
|
page_size: 10,
|
|
is_recommend: 1,
|
|
page: 1,
|
|
search_text: '',
|
|
cate_ids: '',
|
|
orders: ''
|
|
},
|
|
success: res => {
|
|
if(res.code === 0){
|
|
_this.loading = false;
|
|
let data = res.data;
|
|
_this.recommend_list = _this.list.concat(data.list);
|
|
}
|
|
},
|
|
fail: res => {
|
|
console.log(res);
|
|
}
|
|
});
|
|
},
|
|
// 点击跳转 —— 文章详情
|
|
goToDetail(id) {
|
|
this.$util.redirectTo('/pages_rush/article/detail', { article_id: id });
|
|
},
|
|
// 点击跳转 —— 签到
|
|
goToSign() {
|
|
this.$util.redirectTo('/pages_tool/member/signin');
|
|
},
|
|
// 改变顶部标签
|
|
changeTabs(event){
|
|
console.log(event);
|
|
this.cate_ids = event.detail.name;
|
|
}
|
|
|
|
},
|
|
onShareAppMessage(res) {
|
|
var title = '文章列表';
|
|
var path = '/pages_rush/article/list';
|
|
return {
|
|
title: title,
|
|
path: path,
|
|
success: res => {},
|
|
fail: res => {}
|
|
};
|
|
},
|
|
onReachBottom() {
|
|
//触底事件
|
|
if(this.total_page >= this.page) this.getList();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .van-search__content{
|
|
background-color: #f0f0f0;
|
|
}
|
|
#articleList{
|
|
padding: 0 10px;
|
|
background: #ffffff;
|
|
.search{
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
text-align: center;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
.img{
|
|
image{
|
|
width: 100%;
|
|
height: 34rpx;
|
|
display: block;
|
|
}
|
|
}
|
|
.sign-button{
|
|
height: 30rpx;
|
|
font-size: 26rpx;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
.top-buttons{
|
|
height: 90rpx;
|
|
width: 100%;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
align-items: flex-end;
|
|
|
|
.cate{
|
|
height: 100%;
|
|
//width: calc(100% - 150rpx);
|
|
width: 100%;
|
|
|
|
/deep/ .van-tabs{
|
|
height: 100%;
|
|
.van-tabs__wrap{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.sort{
|
|
--sort-width--: 140rpx;
|
|
height: 100%;
|
|
width: var(--sort-width--);
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
/deep/ .van-dropdown-menu{
|
|
height: 100%!important;
|
|
width: var(--sort-width--);
|
|
.van-dropdown-menu__bar{
|
|
height: 100%!important;
|
|
width: var(--sort-width--);
|
|
}
|
|
}
|
|
}
|
|
.sort::after{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc((100% - 60rpx) / 2);
|
|
width: 4rpx;
|
|
height: 60rpx;
|
|
background: #999999;
|
|
}
|
|
|
|
}
|
|
.swipe{
|
|
width: 100%;
|
|
height: calc(100vw / 2);
|
|
padding: 0;
|
|
margin: 20rpx 0;
|
|
|
|
.image-item{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
/deep/ div{
|
|
background-size: 100% 100% !important;
|
|
}
|
|
}
|
|
}
|
|
.article{
|
|
.article-block{
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 180rpx;
|
|
position: relative;
|
|
.img{
|
|
width: 260rpx;
|
|
height: 180rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
.image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.block-content{
|
|
width: calc(100% - 290rpx);
|
|
height: 100%;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
.content-title{
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.content-abstract{
|
|
height: 40rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
//text-align: center;
|
|
font-size: 24rpx;
|
|
//font-weight: bold;
|
|
line-height: 40rpx;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.content-info{
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: flex-end;
|
|
.content-info-item{
|
|
width: 85rpx;
|
|
font-size: 26rpx!important;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-block::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(100% - 40rpx);
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
.recommend{
|
|
.top{
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
margin: 50rpx 0 10rpx 0;
|
|
position: relative;
|
|
|
|
.title{
|
|
padding-left: 20rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 900;
|
|
|
|
}
|
|
//.title::after{
|
|
// content: "";
|
|
// position: absolute;
|
|
// left: 0;
|
|
// top: 14rpx;
|
|
// width: 6rpx;
|
|
// height: calc(100% - (14rpx * 2));
|
|
// background: #e02e42;
|
|
//}
|
|
.more-info{
|
|
font-size: 26rpx;
|
|
color: #8f9298;
|
|
.arrow{}
|
|
}
|
|
}
|
|
.article{
|
|
.article-block{
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 180rpx;
|
|
position: relative;
|
|
.img{
|
|
width: 260rpx;
|
|
height: 180rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
.image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.block-content{
|
|
width: calc(100% - 290rpx);
|
|
height: 100%;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
.content-title{
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.content-abstract{
|
|
height: 40rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
//text-align: center;
|
|
font-size: 24rpx;
|
|
//font-weight: bold;
|
|
line-height: 40rpx;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.content-info{
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: flex-end;
|
|
.content-info-item{
|
|
width: 85rpx;
|
|
font-size: 26rpx!important;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.article-block::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(100% - 40rpx);
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hot{
|
|
.top{
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
margin: 50rpx 0 10rpx 0;
|
|
position: relative;
|
|
|
|
.title{
|
|
padding-left: 20rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 900;
|
|
|
|
}
|
|
.more-info{
|
|
font-size: 26rpx;
|
|
color: #8f9298;
|
|
.arrow{}
|
|
}
|
|
}
|
|
.article{
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
height: calc(65vw / 2);
|
|
.article-block{
|
|
display: inline-block;
|
|
width: 55vw;
|
|
padding: 20rpx 16rpx;
|
|
height: calc(65vw / 2);
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
.image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.block-content{
|
|
width: calc(100%);
|
|
height: 100%;
|
|
display: block;
|
|
position: relative;
|
|
top: calc(-65vw / 4 - 36rpx);
|
|
color: #ffffff;
|
|
|
|
.content-title{
|
|
margin: auto;
|
|
overflow: hidden;
|
|
/*这里要显示的设置宽度*/
|
|
white-space:nowrap;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
width: 80%;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.content-abstract{
|
|
margin: auto;
|
|
overflow: hidden;
|
|
margin-top: 16rpx;
|
|
white-space:nowrap;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
width: 60%;
|
|
font-size: 24rpx;
|
|
//font-weight: bold;
|
|
line-height: 40rpx;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
}
|
|
.article-block::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(100% - 40rpx);
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
.article-block:nth-of-type(1){
|
|
margin-left: 0!important;
|
|
padding-left: 0!important;
|
|
}
|
|
.article-block:nth-last-of-type(1){
|
|
margin-right: 0!important;
|
|
padding-right: 0!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.my-icon {
|
|
top: 3px;
|
|
height: 15px;
|
|
width: 15px;
|
|
position: relative;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 'vant-icon';
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
</style> |