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" v-if="item.status === 4 && item.orderInfo">{{item.orderInfo.status | orderStatusFilter}}</view>
            <view class="status" v-else>{{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 v-if="item.num > 1">×{{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-buyer" v-if="item.status === 4 && item.orderInfo">
              <image
                :src="item.orderInfo.buyerUserPic ? (imageUrl + item.orderInfo.buyerUserPic) : require('@/static/common/logo.png')">
              </image>
              <view class="name">{{item.orderInfo.buyerUserName}}</view>
              <view class="text">买到了</view>
            </view>
            <view class="left-location" v-else><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' && (item.orderInfo && item.orderInfo.status === 'PAID')">
                <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,crossPagePam)" @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 = {
          0: '已下架',
          1: '上架中',
          2: '已转让',
          3: '已冻结',
          4: '已卖出',
        }
        return MAP[val];
      },

      orderStatusFilter(val) {
        const MAP = {
          WAIT: '待支付',
          CANCEL: '取消支付',
          TIMEOUT: '超时取消',
          PAID: '待发货',
          SEND: '已发货',
          COMPLETE: '已完成',
          AFTER_WAIT: '售后中',
          REFUND: '退款成功',
          NO_REFUND: '不退款',
        }
        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.crossPage.$on('reloadMyIssueListPage', () => {
        this.refreshList();
      })

      this.tabCurrent = tab ? Number(tab) : 0;
      await this.getList();
    },

    onUnload() {
      this.crossPage.$off('reloadMyIssueListPage');
    },

    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.refreshList();
      },

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

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

      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>