forked from zhongyuanhaiju/uniapp
729 lines
19 KiB
Vue
729 lines
19 KiB
Vue
<template>
|
||
<!--<loading-cover v-if="loading" ref="loadingCover"></loading-cover>-->
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view id="articleList">
|
||
<!--搜索框-->
|
||
<!-- <van-search shape="round" v-model="search_title" show-action placeholder="请输入文章标题">-->
|
||
<!-- <template #action>-->
|
||
<!-- <view class="search" @click="goToSign">-->
|
||
<!-- <view class="img">-->
|
||
<!-- <image :src="$util.img('public/picture/aijiu/sign.png')" mode="aspectFit"></image>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="sign-button">签到</view>-->
|
||
<!-- </view>-->
|
||
<!-- </template>-->
|
||
<!-- </van-search>-->
|
||
<!--分类标题栏-->
|
||
<view class="top-buttons">
|
||
<view class="cate">
|
||
<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>
|
||
</view>
|
||
<!-- <view class="sort">-->
|
||
<!-- <van-dropdown-menu>-->
|
||
<!-- <van-dropdown-item v-model="sort_value" :options="sort_list" />-->
|
||
<!-- </van-dropdown-menu>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
<!--轮播图-->
|
||
<van-swipe v-if="set_info.banner_list && cate_ids === 'recommend'" class="swipe" :autoplay="3000" indicator-color="white">
|
||
<van-swipe-item v-for="item in set_info.banner_list">
|
||
<image class="image-item" :src="$util.img(item)" mode="aspectFit"></image>
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
<!-- 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">
|
||
<van-list v-model="list_loading" :finished="finished" finished-text="" @load="getList">
|
||
<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="./public/img/liulan.png"></image>
|
||
{{ item.read_num }}
|
||
</view>
|
||
<view class="content-info-item">
|
||
<image class="my-icon" src="./public/img/dianzan.png"></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>
|
||
</van-list>
|
||
</view>
|
||
</view>
|
||
<!--文章列表-->
|
||
<view class="article" v-if="cate_ids !== 'recommend'">
|
||
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
|
||
<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="./public/img/liulan.png"></image>
|
||
{{ item.read_num }}
|
||
</view>
|
||
<view class="content-info-item">
|
||
<image class="my-icon" src="./public/img/dianzan.png"></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>
|
||
</van-list>
|
||
</view>
|
||
</view>
|
||
<!-- 底部tabBar -->
|
||
<view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
cate_list: [],
|
||
set_info: [],
|
||
list: [],
|
||
hot_list: [],
|
||
recommend_list: [],
|
||
loading: false, // 是否处于加载状态，加载过程中不触发load事件
|
||
finished: false, // 是否已加载完成，加载完成后不再触发load事件
|
||
// 排序内容
|
||
sort_value: 'new',
|
||
sort_list: [
|
||
{ text: '最新', value: 'new' },
|
||
{ text: '推荐', value: 'recommend' },
|
||
{ text: '热门', value: 'hot' },
|
||
{ text: '点赞', value: 'fabulous' },
|
||
],
|
||
// 列表相关
|
||
page: 1,
|
||
search_title: '',
|
||
cate_ids: 'recommend',
|
||
};
|
||
},
|
||
onShow() {},
|
||
watch:{
|
||
'search_title':{
|
||
handler() {
|
||
this.page = 1;
|
||
this.list = [];
|
||
this.getList();
|
||
}
|
||
},
|
||
'cate_ids':{
|
||
handler() {
|
||
this.page = 1;
|
||
this.list = [];
|
||
this.getList();
|
||
}
|
||
},
|
||
'sort_value':{
|
||
handler() {
|
||
this.page = 1;
|
||
this.list = [];
|
||
this.getList();
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
this.getCateList();
|
||
this.getSetting();
|
||
this.getHotList();
|
||
this.getRecommendList();
|
||
},
|
||
methods: {
|
||
// 获取文章分类
|
||
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: '精选推荐'}
|
||
])
|
||
}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;
|
||
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_size: 10,
|
||
page: _this.page,
|
||
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;
|
||
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_promotion/article/detail', { article_id: id });
|
||
},
|
||
// 点击跳转 —— 签到
|
||
goToSign() {
|
||
this.$util.redirectTo('/pages_tool/member/signin');
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var title = '文章列表';
|
||
var path = '/pages_promotion/article/list';
|
||
return {
|
||
title: title,
|
||
path: path,
|
||
success: res => {},
|
||
fail: res => {}
|
||
};
|
||
}
|
||
};
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|