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

<template>
  <!-- #ifdef H5 -->
  <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.orderId)">
        <view class="top">
          <image src="@/static/common/logo.png"></image>
          <view class="user">
            <view class="name">{{item.userName}}</view>
            <view class="time">{{item.goodsCreateTime | timeFilter}}发布</view>
          </view>
          <view class="status">{{item.status | statusFilter}}</view>
        </view>
        <view class="goods">
          <image :src="imageUrl + item.goodsPicUrl"></image>
          <view class="main">
            <view class="name">{{item.goodsTitle}}</view>
            <view class="des">{{item.content}}</view>
            <view class="price"><text>{{item.goodsAmount | priceFilter2}}</text>数量：{{item.num}}</view>
          </view>
        </view>
        <view class="total">订单总金额<text>{{item.price | priceFilter2}}</text></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 == 'WAIT'">
              <u-button text="取消订单" shape="circle"></u-button>
              <u-button text="去支付" shape="circle" type="primary" plain @tap="toPay(item.goodsId, item.orderId)"></u-button>
            </block>

            <block v-if="~['SEND', 'COMPLETE'].indexOf(item.status)">
              <u-button text="查看物流" shape="circle" @tap="toLogistics(item.logisticsNum)"></u-button>
            </block>

            <u-button text="申请售后" shape="circle" @tap="toReturn(item.orderId)"></u-button>

          </view>
        </view>
      </view>
    </view>

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

  </zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/pages/mine/myBuy/list`, pam)"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    filters: {
      statusFilter(val) {
        const MAP = {
          WAIT: '待支付',
          CANCEL: '取消支付',
          TIMEOUT: '超时取消',
          PAID: '已支付',
          WAIT_SEND: '待发货',
          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},
          {name: '待收货', value: 3},
          {name: '已收货', value: 4},
          {name: '售后中', value: 5},
        ],
        tabCurrent: 0,
        dataList: [],
        pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,
      }
    },

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

    methods: {
      //获取列表数据
      async getList() {
        const statusMap = {
          0: '',
          1: 'WAIT',
          2: 'WAIT_SEND',
          3: 'SEND',
          4: 'COMPLETE',
          5: 'AFTER_WAIT',
        }
        this.$api.post('/orderPay/list', {
          pageNum: this.pageNum,
          pageSize: 10,
          params: [{
            param: 'a.status',
            compare: '=',
            value: statusMap[this.tabCurrent]
          }, {
            param: 'a.buyer_user_id',
            compare: '=',
            value: 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(orderId) {
        this.$navToPage({
          url: `/pages/mine/myBuy/detail?orderId=${orderId}`
        })
      },

      toLogistics(logisticsNum) {
        this.$navToPage({
          url: `/pages/mine/myBuy/logistics?logisticsNum=${logisticsNum}`
        })
      },

      toPay(goodsId, orderId) {
        this.$navToPage({
          url: `/pages/goods/order?goodsId=${goodsId}&orderId=${orderId}`
        })
      },

      toReturn(orderId) {
        this.$navToPage({
          url: `/pages/mine/myBuy/return?orderId=${orderId}`
        })
      }

    }
  }
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

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

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


</style>