yicangzongtai_app_240321/pages/workbench/order/coalitionList.vue

<template>
  <view class="container-order">
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="top" :style="{'top': sticky + 'px'}">
      <view class="tabs">
        <view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabs" :key="item.i"
          @click="changeTab(index)">
          <view class="">{{item.label}}</view>
        </view>
      </view>
    </view>
    <view style="height: 90rpx;"></view>
    <view class="list" v-if="list.length">
      <z-order-list :list="list" :isMine="true"></z-order-list>
      <u-loadmore :status="status" />
    </view>
    <noData v-if="list.length<=0"></noData>
  </view>
</template>

<script>
  import zOrderList from '@/pages/workbench/z-order-list.vue';
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      zOrderList,
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '订单列表',
          color: '#1A1A1A',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
          leftSlot: true,
          backPage: '/pages/order/index'
        },
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
        sticky: uni.getSystemInfoSync().statusBarHeight + 44,
        tabs: [{
            id: '-1',
            i: 0,
            label: '全部'
          },
          {
            id: '0',
            i: 1,
            label: '待评价'
          },
          {
            id: '1',
            i: 2,
            label: '已评价'
          }
        ],
        currentTab: 0,
        list: [],
        comment: '-1',
        params: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        currPage: 1,
        refresh: false,
        status: 'more',
      }
    },
    onShow() {
      this.getOrderlist(true)
    },
    onPullDownRefresh() {
      this.getOrderlist(true)
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onReachBottom() {
      if (this.currPage == this.totalPage) {
        return this.status = 'nomore';
      } else {
        this.getOrderlist(false)
      }
    },
    methods: {
      changeTab(i) {
        if (this.currentTab == i) {
          return false
        }
        this.currentTab = i
        this.comment = this.tabs[i].id
        this.getOrderlist(true)
      },
      getOrderlist(refresh) {
        this.params.page = refresh ? 1 : this.params.page
        if (this.currPage == this.totalPage) {
          this.status = 'nomore';
        }
        this.$http.get('/offlineorder/my_page', {
          comment: this.comment,
          ...this.params
        }).then(res => {
          if (res.code == 200) {
            if (this.params.page == 1) this.list = []
            this.list = [...this.list, ...res.page.list]
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage
            this.params.page++
            if (this.currPage == this.totalPage) return this.status = 'nomore';
          }
        })
      },
      orderDetail() {
        uni.navigateTo({
          url: `/pages/workbench/order/detail`
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container-order {
    .top {
      position: fixed;
      width: 100%;
      height: 90rpx;
      font-size: 32rpx;
      border-bottom: 1rpx solid #f2f2f2;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #1a1a1a;
      z-index: 9;
      background-color: #fff;

      .tabs {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .tab {
          line-height: 90rpx;
          height: 100%;
          position: relative;
        }

        .activeTab {
          color: #FA6138;

          &::after {
            display: block;
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 4rpx;
            background: #FA6138;
            border-radius: 2rpx;
          }
        }
      }
    }

    .list {
      padding: 0 30rpx 100rpx;

      .order-item {
        height: 130rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #f2f2f2;

        .item-info {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #808080;

          .order-num {
            margin-bottom: 10rpx;

            .num {
              color: #1A1A1A;
            }
          }

          .order-time-price {
            font-size: 24rpx;

            .time {
              margin-right: 89rpx;
            }
          }
        }

        .item-icon {
          width: 32rpx;
          height: 32rpx;
          transform: rotate(-90deg);
          flex-shrink: 0;
        }
      }
    }
  }
</style>