chelvc-custom/src/pageMerchant/tabbar/order.vue

<template>
  <view>
    <view class="order">
      <view style="background-color: #fff; padding: 15rpx">
        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" :activeStyle="{
            color: '#000',
            fontWeight: 'bold',
            fontSize: '32rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="handlerChangeItem"></u-tabs>
      </view>

      <orderItem :list="orderList" :typeStyle.sync="typeStyle"></orderItem>
    </view>
    <tabbar currentTab="merchantOrder" />
  </view>
</template>

<script>
  import orderItem from './orderItem.vue';
  import {
    getOrderListApi
  } from '@/api/merchant/order';
  export default {
    components: {
      orderItem
    },
    data() {
      return {
        list1: [{
            id: '0',
            name: '全部'
          },
          {
            id: '1',
            name: '待核销'
          },
          {
            id: '2',
            name: '已核销'
          },
          {
            id: '3',
            name: '退款'
          },
        ],
        orderList: [],
        params: {
          pageNum: 1,
          pageSize: 10,
        },
        typeStyle: 0,
        status: '0',
      };
    },

    methods: {
      // 点击切换顶部导航栏
      handlerChangeItem(item) {
        this.typeStyle = item.index;
        this.getOrderList(item.id);
      },

      async getOrderList(status) {
        let result = Object.assign({}, {
          paging: `${this.params.pageNum},${this.params.pageSize}`,
          status: status || 0,
        }, );
        let res = await getOrderListApi({
          ...result
        });
        if (res.code === 'OK') {
          this.orderList = res.data.records;
        }
      },
    },

    created() {
      this.getOrderList();
    },
  };
</script>

<style lang="scss" scoped>
  .order {
    min-height: calc(100vh - 80rpx);
    background-color: $uni-bg-color-page;
    padding-top: 80rpx;
  }
</style>