recycle-mobile/src/pages/profile/shop/index.vue

<template>
  <view class="app-container">
    <!-- <view class="swiper-container">
      <u-swiper
        indicator
        indicatorMode="line"
        circular
        :list="swiperList">
      </u-swiper>
    </view> -->
    <view class="nav-container">
      <view class="item" @tap="linkTo('pages/profile/shop/myScore', {})">
        <img src="@/static/shop/icon_1.png" alt="">
        <view>积分查询</view>
      </view>
      <view class="item" @tap="linkTo('pages/profile/shop/goodsList', {type: 1})">
        <img src="@/static/shop/icon_2.png" alt="">
        <view>我能兑换</view>
      </view>
      <view class="item" @tap="linkTo('pages/profile/shop/goodsList', {})">
        <img src="@/static/shop/icon_3.png" alt="">
        <view>分类查询</view>
      </view>
      <view class="item" @tap="linkTo('pages/profile/shop/orderList', {})">
        <img src="@/static/shop/icon_4.png" alt="">
        <view>兑换记录</view>
      </view>
    </view>
    <view class="title-container">
      <view class="title">积分兑好礼</view>
      <view class="more" @tap="linkTo('pages/profile/shop/goodsList', {})">更多<u-icon size="12" name="arrow-right" color="var(--theme-color)"></u-icon></view>
    </view>
    <view class="list-container">
      <view
        class="item"
        v-for="(item, index) in dataList"
        :key="index"
        @tap="linkTo('pages/profile/shop/goodsDetail', {id: item.goodsId})">
        <div @tap.stop>
          <u--image class="img" :showLoading="true" :src="$imageUrl + item.imageUrl" width="140rpx" height="140rpx"></u--image>
        </div>
        <view class="main">
          <view class="name ellipsis-2">{{item.goodsName}}</view>
          <view class="price">{{item.score}}积分</view>
        </view>
      </view>
    </view>
    <u-empty
      mode="data"
      :icon="require('@/static/common/empty_data.png')"
      v-if="loadStatus == 'nomore' && dataList.length < 1">
    </u-empty>
    <u-loadmore :status="loadStatus" v-else />
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      ],
      dataList: [],
      pageNum: 1,
      loadStatus: 'loadmore', // 加载前=loadmore，加载中=loading，没有数据=nomore
    }
  },

  onLoad() {
    this.getList();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getList();
  },

  // 上拉加载
  onReachBottom() {
    this.getList(1);
  },

  methods: {
    // 获取列表
    getList(loadMore) {
      if(this.loadStatus == 'nomore' && loadMore) return;
      this.loadStatus = 'loadmore';
      if(!loadMore){
      	this.pageNum = 1;
      }else{
      	this.loadStatus = 'loading';
      }
      this.$api.post('/mall/get-goods', {
        pageNum: this.pageNum,
        pageSize: 10,
        categoryId: '',
        goodsName: '',
      }).then(res => {
        let _list = res.data.records;
        let pageTotal = res.data.pages;
        if(this.pageNum >= pageTotal){
        	this.loadStatus = 'nomore';
        }
        if (_list.length) {
        	this.pageNum += 1;
        }
        if (loadMore) {
        	this.dataList = this.dataList.concat(_list);
        	this.loadStatus = 'loadmore';
        } else {
        	this.dataList = _list;
        }
      }).catch(res => {
        this.loadStatus = 'nomore';
      }).finally(res => {
        uni.stopPullDownRefresh();
      })
    },

    // 页面跳转
    linkTo(url, query) {
      let str = '';
      if(query) {
        for(let i in query) {
          str = '?' + str + i + '=' + query[i];
        }
      }
      uni.navigateTo({
        url: `${url}${str}`
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - 88rpx);
  background: #ffffff;
  padding-bottom: 1px;
}
.nav-container {
  display: flex;
  padding: 40rpx 0;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 52rpx;
      height: 52rpx;
    }
    view {
      font-size: 28rpx;
      margin-top: 20rpx;
      color: #333333;
    }
  }
}
.title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
  }
  .more {
    color: var(--theme-color);
    display: flex;
    align-items: center;
    font-size: 28rpx;
  }
}
.list-container {
  padding: 10rpx 30rpx 0;
  .item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid $u-border-color;
    .main {
      height: 140rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20rpx;
      .name {
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
      .price {
        font-size: 28rpx;
        color: var(--assist-color);
      }
    }
  }
}
</style>