You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

273 lines
5.6 KiB

3 years ago
<template>
<view class="list-page">
3 years ago
3 years ago
<view class="search-box">
<view class="search-content acea-row row-middle">
3 years ago
<view class="search-icon">
<image src="../../../static/images/search.png"> </image>
</view>
3 years ago
<input type="text" placeholder="请输入相关关键词" />
<view class="search-btn">搜一下</view>
</view>
3 years ago
<view class="resource-tabs acea-row row-between-wrapper">
3 years ago
<view :class="'tab ' + (active == item.id ? 'tab-a' : '')" @tap="tabClick(item.id)" v-for="item in categortList" :key="item.id">{{item.name}}</view>
3 years ago
</view>
3 years ago
</view>
3 years ago
<view class="content-box">
3 years ago
<view class="list-box">
3 years ago
<view class="list-item acea-row row-between row-middle" v-for="(item,index) in articleList" :key="index"
@click="toDetail(item.id)">
<view class="item-l">
<view class="title-box acea-row">
<image src="../../../static/images/hot.png" v-if="item.isHot"></image>
<view class="title line2">{{item.title}}</view>
</view>
<view class="acea-row row-middle row-between">
<view class="auth">{{item.author}}</view>
<view class="auth time">{{item.createTime.split(' ')[0]}}</view>
<view class="see acea-row row-middle">
3 years ago
<text>{{item.visit}}</text>
3 years ago
<image src="../../../static/images/eye.png"></image>
</view>
3 years ago
</view>
</view>
3 years ago
<view class="item-r">
<image :src="item.imageInput" mode="aspectFill"></image>
</view>
3 years ago
</view>
3 years ago
</view>
3 years ago
</view>
3 years ago
<LoadStatus :loadStatus="loadStatus"></LoadStatus>
3 years ago
</view>
</template>
<script>
3 years ago
import { articleCategory, getArticleList } from "@/api/article";
import { getArticle } from "@/api/home";
3 years ago
import LoadStatus from '@/components/LoadStatus.vue'
3 years ago
export default{
3 years ago
components: {
LoadStatus
},
3 years ago
data(){
return{
3 years ago
categortList: [],
3 years ago
articleList: [],
page: 0,
size: 10,
3 years ago
isLoading: true,
3 years ago
active: null,
3 years ago
loadStatus: '没有更多了...'
3 years ago
}
},
3 years ago
onLoad(option) {
},
3 years ago
mounted() {
3 years ago
this.getArticleCategort().then(()=>{
this.active= this.$yroute.query.active;
this.getArticleList()
})
3 years ago
},
onReachBottom() {
3 years ago
this.page = this.page + 1
3 years ago
this.getArticleList()
},
3 years ago
methods: {
3 years ago
getArticleCategort(){
return new Promise((reslove)=>{
articleCategory().then((res)=>{
this.categortList = res.data
this.active = this.categortList[0].id
reslove()
})
})
},
3 years ago
getArticleList() {
3 years ago
if(!this.isLoading) return
3 years ago
uni.showLoading({
title: '加载中...'
})
3 years ago
this.loadStatus = '加载中...'
3 years ago
getArticleList({
3 years ago
page: this.page,
size: this.size,
3 years ago
cid: this.active
3 years ago
}).then((res) => {
3 years ago
if(res.data.content.length < this.size){
3 years ago
this.isLoading = false
3 years ago
this.loadStatus = '没有更多了...'
} else{
3 years ago
this.isLoading = true
this.loadStatus = '上拉加载更多...'
}
3 years ago
this.articleList = this.articleList.concat(res.data.content)
uni.hideLoading()
})
},
3 years ago
toDetail(id) {
3 years ago
this.$yrouter.push({
path: '/pages/life/articleDetail/index',
query: {
id: id
}
})
3 years ago
},
3 years ago
tabClick(id) {
this.active = id
this.isLoading = true
this.articleList = []
this.getArticleList()
3 years ago
},
3 years ago
}
}
</script>
<style lang="less">
3 years ago
.list-page {
3 years ago
width: 100%;
min-height: 100vh;
background: #EEEEEE;
3 years ago
.search-box {
3 years ago
width: 100%;
3 years ago
padding: 32rpx 40rpx 0 40rpx;
3 years ago
background: #fff;
3 years ago
.search-icon {
3 years ago
width: 35rpx;
height: 35rpx;
margin-right: 12rpx;
3 years ago
image {
3 years ago
width: 100%;
height: 100%;
}
}
3 years ago
.search-content {
3 years ago
width: 100%;
padding: 0 0 0 50rpx;
border: 2rpx solid #FF5100;
border-radius: 8rpx;
font-size: 28rpx;
border-right: 0;
3 years ago
input {
3 years ago
color: #BFBFBF;
}
3 years ago
.search-btn {
3 years ago
width: 132rpx;
3 years ago
height: 70rpx;
3 years ago
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%);
line-height: 68rpx;
text-align: center;
color: #fff;
border-radius: 8rpx;
margin-left: auto;
}
}
}
3 years ago
.resource-tabs {
3 years ago
width: 100%;
3 years ago
background: #fff;
.tab {
width: 150rpx;
padding: 22rpx 0;
font-size: 32rpx;
color: #707070;
position: relative;
font-weight: 500;
text-align: center;
}
.tab::after {
display: block;
content: '';
width: 84rpx;
height: 12rpx;
border-radius: 8rpx;
background: #FF5100;
position: absolute;
bottom: -6rpx;
left: 50%;
margin-left: -40rpx;
opacity: 0;
transform: scaleX(0);
transition: all .2s ease, opacity .15s ease;
}
.tab-a {
color: #1D1D1D;
font-weight: 600;
}
.tab-a::after {
opacity: 1;
transform: scaleX(1);
}
}
.list-box {
3 years ago
width: 100%;
3 years ago
padding: 26rpx 40rpx 0;
.list-item {
3 years ago
width: 100%;
background: #fff;
border-radius: 12rpx;
3 years ago
padding: 26rpx 32rpx 21rpx 32rpx;
3 years ago
font-size: 24rpx;
color: #707070;
margin-bottom: 24rpx;
3 years ago
.item-l {
width: calc(100% - 260rpx);
3 years ago
display: flex;
flex-direction: column;
justify-content: space-between;
3 years ago
height: 130prx;
.title-box {
3 years ago
font-size: 32rpx;
color: #4A4A4A;
3 years ago
image {
3 years ago
width: 19rpx;
height: 22rpx;
margin-right: 20rpx;
}
3 years ago
.title {
3 years ago
margin-top: -10rpx;
3 years ago
margin-bottom: 25rpx;
3 years ago
}
}
3 years ago
.see {
// margin-left: 20rpx;
image {
3 years ago
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
}
3 years ago
.item-r {
3 years ago
width: 240rpx;
3 years ago
image {
3 years ago
width: 100%;
height: 130rpx;
border-radius: 16rpx;
}
}
}
}
}
</style>