浅念
232 lines
5.0 KiB
Vue
232 lines
5.0 KiB
Vue
<template>
|
||
<view class="page">
|
||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="我的发布"></uni-nav-bar>
|
||
<view>
|
||
<view class="tabs">
|
||
<u-tabs :list="list1" @click="click" lineColor="#3BC6BD" :scrollable="false"></u-tabs>
|
||
</view>
|
||
<scroll-view
|
||
scroll-y
|
||
class="list-scroll"
|
||
refresher-enabled
|
||
:refresher-triggered="refreshing"
|
||
@refresherrefresh="onRefresh"
|
||
:lower-threshold="100"
|
||
@scrolltolower="onLoadMore"
|
||
>
|
||
<view class="feed-list">
|
||
<post-card
|
||
v-for="sitem in slist"
|
||
:key="sitem.id"
|
||
:item="sitem"
|
||
:ismysq="true"
|
||
@userClick="goto"
|
||
@view="goto"
|
||
@contact="handleContact"
|
||
@comment="handleComment">
|
||
</post-card>
|
||
|
||
<!-- 状态提示 -->
|
||
<view v-if="hasMore" class="load-more">
|
||
<text v-if="loadingMore">加载中...</text>
|
||
<text v-else>上拉加载更多</text>
|
||
</view>
|
||
<view v-else-if="slist.length > 0" class="load-more">
|
||
<text>没有更多了</text>
|
||
</view>
|
||
<view class="empty" v-if="slist.length === 0 && !loading">
|
||
<image src="/static/image/empty.png" mode="aspectFit"></image>
|
||
<view>暂无数据！</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 加载提示 -->
|
||
<view v-if="loading" class="loading-mask">
|
||
<view class="loading-text">加载中...</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { request } from '@/api/apiT.js'
|
||
import PostCard from '@/components/PostCard.vue'
|
||
import uTabs from '@/uni_modules/uview-ui/components/u-tabs/u-tabs.vue'
|
||
export default {
|
||
components: { PostCard,uTabs },
|
||
data() {
|
||
return {
|
||
list1: [{
|
||
name: '全部',
|
||
value:''
|
||
}, {
|
||
name: '已发布',
|
||
value:'1'
|
||
}, {
|
||
name: '审核中',
|
||
value:'2'
|
||
}, {
|
||
name: '未通过',
|
||
value:'3'
|
||
}, {
|
||
name: '已过期',
|
||
value:'4'
|
||
}],
|
||
status:'',
|
||
slist:[],
|
||
loading: false,
|
||
refreshing: false,
|
||
loadingMore: false,
|
||
page: 1,
|
||
pageSize: 10,
|
||
hasMore: true,
|
||
defaultTags: ['样机机', '9成新']
|
||
}
|
||
},
|
||
onShow() {
|
||
this.loadList()
|
||
// this.syncTabbar()
|
||
},
|
||
methods: {
|
||
leftClick() {
|
||
// uni.navigateBack()
|
||
uni.reLaunch({
|
||
url: '/pages/index/mine',// 替换为你要跳转的页面路径
|
||
});
|
||
},
|
||
goto(item){
|
||
uni.navigateTo({
|
||
url: '/pages/square/detiles?id='+item.id
|
||
});
|
||
},
|
||
click(item) {
|
||
this.page = 1
|
||
this.hasMore = true
|
||
this.slist = []
|
||
this.status=item.value
|
||
this.loadList()
|
||
},
|
||
loadList(isLoadMore = false) {
|
||
if (isLoadMore) {
|
||
if (this.loadingMore || this.loading || this.refreshing || !this.hasMore) return
|
||
this.loadingMore = true
|
||
this.page += 1
|
||
} else {
|
||
if (this.loading || this.loadingMore) return
|
||
this.loading = true
|
||
this.page = 1
|
||
this.hasMore = true
|
||
this.slist = []
|
||
}
|
||
request({
|
||
url: 'common/post/list',
|
||
method: 'GET',
|
||
data: {
|
||
current: this.page,
|
||
size: this.pageSize,
|
||
status: this.status
|
||
}
|
||
}).then(res => {
|
||
this.loading = false
|
||
this.loadingMore = false
|
||
this.refreshing = false
|
||
if (res.data.code === 200) {
|
||
const records = res.data.data.records || []
|
||
const total = res.data.data.total || 0
|
||
if (isLoadMore) {
|
||
this.slist = [...this.slist, ...records]
|
||
} else {
|
||
this.slist = records
|
||
}
|
||
this.hasMore = this.slist.length < total
|
||
}
|
||
}).catch(() => {
|
||
this.loading = false
|
||
this.loadingMore = false
|
||
this.refreshing = false
|
||
if (isLoadMore) {
|
||
this.page -= 1
|
||
}
|
||
})
|
||
},
|
||
onRefresh() {
|
||
if (this.loading || this.loadingMore) {
|
||
this.refreshing = false
|
||
return
|
||
}
|
||
this.refreshing = true
|
||
this.loadList(false)
|
||
},
|
||
onLoadMore() {
|
||
this.loadList(true)
|
||
},
|
||
navToList(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/square/detiles?id=' + item.id
|
||
})
|
||
},
|
||
leftClick() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page,
|
||
.page {
|
||
height: 100%;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.tabs{
|
||
background: #fff;
|
||
}
|
||
|
||
.list-scroll {
|
||
height: calc(100vh - 120rpx);
|
||
}
|
||
|
||
.feed-list {
|
||
// padding: 20rpx;
|
||
margin: 20rpx 30rpx;
|
||
}
|
||
.load-more {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
.empty {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 100rpx 0;
|
||
}
|
||
.empty image {
|
||
width: 252rpx;
|
||
height: 164rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.loading-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
|
||
.loading-text {
|
||
color: #fff;
|
||
font-size: 28upx;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
padding: 20upx 40upx;
|
||
border-radius: 8upx;
|
||
}
|
||
}
|
||
</style> |