Files
aishangjia-uniapp/pages/article/article.vue
2023-08-04 13:14:48 +08:00

123 lines
2.6 KiB
Vue

<template>
<view class="container">
<!-- <view class="search-wrapper">
<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords" @search="onSearch"></u-search>
</view> -->
<view class="user-list">
<u-list @scrolltolower="scrolltolower">
<view class="list">
<u-list-item v-for="(item, index) in list" :key="index">
<u-cell
@click="navTo('/pages/article/detail/detail',{id: item.articleId})">
<u-avatar slot="icon" size="50" :src="item.image ? `https://file.wsdns.cn/thumbnail${item.image}` : item.userAvatar" shape="square"
customStyle="margin: -3px 5px -3px 0"></u-avatar>
<view slot="title">{{ item.title }}</view>
</u-cell>
</u-list-item>
<u-empty
v-if="list.length == 0"
mode="search"
icon="http://cdn.uviewui.com/uview/empty/search.png"
>
</u-empty>
</view>
</u-list>
</view>
</view>
</template>
<script>
import * as ArticleApi from '@/api/article.js'
export default {
data() {
return {
list: [],
page: 0,
where: {},
// 控制onShow事件是否刷新订单列表
canReset: false,
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.where = options
this.onRefreshList()
},
methods: {
// 刷新会员列表
onRefreshList() {
const app = this
app.where.page = app.page
app.where.categoryId = 55
return new Promise((resolve, reject) => {
ArticleApi.pageArticle(app.where)
.then(result => {
const list = result.data.list
console.log("list: ",list);
// 合并新数据
app.list = app.list.concat(list)
console.log("app.list: ",app.list);
if(result.data.count > app.list.length){
app.canReset = true
}else{
app.canReset = false
}
resolve(list)
})
})
},
scrolltolower(e){
console.log("e: ",e);
},
navTo(url,userId){
this.$push(url,userId)
},
onFollow(e){
console.log("e11: ",e);
},
onSearch(){
this.list = []
this.where.page = 1
this.onRefreshList()
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0rpx;
background-color: #ffffff;
}
.search-wrapper {
display: flex;
height: 64rpx;
}
.user-list{
margin: 0rpx auto;
}
.follow-btn {
padding: 4rpx 20rpx;
color: #ffffff;
font-size: 26rpx;
border-radius: 50rpx;
margin-right: 10rpx;
background: linear-gradient(#47076b, #8d1a50);
image {
width: 24rpx;
height: 66rpx;
margin-right: 6rpx;
}
}
</style>