product-uniapp/pages/mine/my_favorites.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>