recycle-mobile/src/pages/mine/myIssue/list.vue

<template>
  <!-- #ifdef H5 -->
  <view>
    <zj-page-layout
      :hasFooter="false"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="scrolltolower">
      <template slot="header">
        <view class="header-container">
          <u-tabs
            :scrollable="false"
            :list="tabList"
            :current="tabCurrent"
            @click="clickTab"
            lineColor="#01C30B"
            :activeStyle="{
              color: '#01C30B'
            }"
            :inactiveStyle="{
              color: '#666666'
            }"
            itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;">
          </u-tabs>
        </view>
      </template>

      <view class="common-order-list">
        <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toDetail(item.id)">
          <view class="top">
            <image :src="item.userPic ? (imageUrl + item.userPic) : require('@/static/common/logo.png')"></image>
            <view class="user">
              <view class="name">{{item.userName}}</view>
              <view class="time">{{item.createTime | timeFilter}}发布</view>
            </view>
            <view class="status">{{item.status | statusFilter}}</view>
          </view>
          <view class="goods">
            <image :src="imageUrl + item.goodsPicUrl" mode="aspectFill"></image>
            <view class="main">
              <view class="name">{{item.title}}<text>×{{item.num}}</text></view>
              <view class="des">{{item.content}}</view>
              <view class="price">{{item.amount | priceFilter2}}</view>
            </view>
          </view>
          <view class="bottom">
            <view class="left-location"><text class="iconfont icon-dingwei"></text>{{item.city}} {{item.area}}</view>
            <view class="right-btn" @tap.stop>
              <block v-if="item.status === 4 && item.sendStatus === 'NO'">
                <u-button text="确认发货" shape="circle" @click="openDeliver(item.id)"></u-button>
              </block>
            </view>
          </view>
        </view>
      </view>

      <Loading :loadStatus="loadStatus" :dataList="dataList" />

    </zj-page-layout>

    <zj-dialog-deliver
      ref="deliverDialog"
      :isShow="isShowDeliverDialog"
      @close="isShowDeliverDialog = false">
    </zj-dialog-deliver>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/pages/mine/myIssue/list`, pam)"  @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	import zjDialogDeliver from '@/components/zj-dialog/zj-dialog-deliver.vue';

  export default {
    components: {
      zjDialogDeliver
    },

    filters: {
      statusFilter(val) {
        const MAP = {
          1: '上架中',
          2: '已转让',
          0: '已下架',
          3: '已冻结',
          4: '已卖出',
        }
        return MAP[val];
      }
    },

    data() {
      return {
        imageUrl: this.$imageUrl,
        tabList: [
          {name: '我发布的', value: 0},
          {name: '已卖出', value: 1},
          {name: '已下架', value: 2},
        ],
        tabCurrent: 0,
        dataList: [],
        pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,

        isShowDeliverDialog: false,
      }
    },

    async onLoad({tab}) {
      this.tabCurrent = tab ? Number(tab) : 0;
      await this.getList();

      uni.$on('refreshMyIssueList', () => {
        this.refreshLish();
      })
    },

    onUnload() {
      uni.$off('refreshMyIssueList');
    },

    methods: {
      //获取列表数据
      async getList() {
        const statusMap = {
          0: '',
          1: 4,
          2: 0
        }
        this.$api.get('/goods/list', {
          pageNum: this.pageNum,
          pageSize: 10,
          status: statusMap[this.tabCurrent],
          userId: this.$store.state.user.userId
        }).then(res => {
          this.loadStatus = 0;
          let list = res.data.records;
          if(list.length < 10){
          	this.loadStatus = 2;
          }
          this.dataList = this.dataList.concat(list);
        }).catch(() => {
					this.loadStatus = 2;
				}).finally(res => {
					this.refresherTriggered = false;
				})
      },

      // 滚动到底部
      scrolltolower(e) {
      	if (this.loadStatus === 0) {
      		this.pageNum++;
      		this.getList();
      	}
      },

      // 触发下拉刷新
      refresherrefresh(e) {
      	this.refresherTriggered = true;
      	this.refreshLish();
      },

      refreshLish() {
        this.dataList = [];
        this.pageNum = 1;
        this.getList();
      },

      clickTab(item) {
        this.tabCurrent = item.value;
        this.refreshLish();
      },

      toDetail(id) {
        this.$navToPage({
          url: `/pages/goods/detail?id=${id}`
        })
      },

      openDeliver(id) {
        this.$refs.deliverDialog.setValue(id);
        this.isShowDeliverDialog = true;
      }

    }
  }
  // #endif
  // #ifndef H5
  import zjDialogDeliver from '@/components/zj-dialog/zj-dialog-deliver.vue';

  export default {
    components: {
      zjDialogDeliver
    },
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style lang="scss" scoped>
.header-container {
  background: #ffffff;
}


</style>