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.

178 lines
3.8 KiB

3 years ago
<template>
<view class="list-page">
<view class="search-box">
<view class="search-content acea-row row-middle">
<view class="search-icon"><image src="../../../static/images/search.png"> </image></view>
<input type="text" placeholder="请输入相关关键词" />
<view class="search-btn">搜一下</view>
</view>
</view>
<view class="list-box">
<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="auth-info acea-row row-between">
<view class="auth">{{item.author}}</view>
</view>
<view class="acea-row row-middle">
<view class="auth time">{{item.createTime}}</view>
<view class="see acea-row row-middle">
<text>200</text>
<image src="../../../static/images/eye.png"></image>
</view>
</view>
</view>
<view class="item-r">
<image :src="item.imageInput" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</template>
<script>
import { getArticle } from "@/api/home";
3 years ago
export default{
data(){
return{
articleList: [],
page: 0,
size: 10,
isLoading: true
}
},
mounted() {
this.getArticleList()
},
onReachBottom() {
this.page= this.page+1
this.getArticleList()
},
methods:{
getArticleList(){
uni.showLoading({
title: '加载中...'
})
if(!this.isLoading) return
getArticle({page: this.page,size: this.size, isHot: 0}).then((res)=>{
res.data.content.length < this.size ? this.isLoading = false : this.isLoading = true
this.articleList = this.articleList.concat(res.data.content)
uni.hideLoading()
})
},
toDetail(id){
this.$yrouter.push({
path: '/pages/life/articleDetail/index',
query: {
id: id
}
})
}
}
}
</script>
<style lang="less">
.list-page{
width: 100%;
min-height: 100vh;
background: #EEEEEE;
.search-box{
width: 100%;
padding: 32rpx 40rpx;
background: #fff;
position: fixed;
top: 0;
.search-icon{
width: 35rpx;
height: 35rpx;
margin-right: 12rpx;
image{
width: 100%;
height: 100%;
}
}
.search-content{
width: 100%;
padding: 0 0 0 50rpx;
border: 2rpx solid #FF5100;
border-radius: 8rpx;
font-size: 28rpx;
border-right: 0;
input{
color: #BFBFBF;
}
.search-btn{
width: 132rpx;
height: 68rpx;
background: linear-gradient(39deg, #FF5100 0%, #FFA074 100%);
line-height: 68rpx;
text-align: center;
color: #fff;
border-radius: 8rpx;
margin-left: auto;
}
}
}
.list-box{
width: 100%;
padding: 180rpx 40rpx 40rpx;
.list-item{
width: 100%;
background: #fff;
border-radius: 12rpx;
padding: 30rpx 28rpx;
font-size: 24rpx;
color: #707070;
margin-bottom: 24rpx;
.item-l{
width: calc(100% - 280rpx);
display: flex;
flex-direction: column;
justify-content: space-between;
.title-box{
font-size: 32rpx;
color: #4A4A4A;
margin-bottom: 12rpx;
image{
width: 19rpx;
height: 22rpx;
margin-right: 20rpx;
}
.title{
width: calc(100% - 38rpx);
margin-top: -10rpx;
}
}
.auth-info{
margin-bottom: 12rpx;
}
.see{
margin-left: 20rpx;
image{
width: 24rpx;
height: 24rpx;
margin-left: 6rpx;
}
}
}
.item-r{
width: 240rpx;
image{
width: 100%;
height: 130rpx;
border-radius: 16rpx;
}
}
}
}
}
</style>