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.
177 lines
3.8 KiB
177 lines
3.8 KiB
<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"; |
|
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>
|
|
|