app-AgricultureSmart/uniapp/subpkg/order/order.vue

<!--<template>-->
<!--  <view class="order-page">-->
<!--    1111111111111111111-->
<!--    <van-tabs v-model="activeTab" title-active-color="#ee0a24" color="#333" swipe-threshold="5" animated sticky offset-top="46" @change="handleTabChange">-->
<!--      <van-tab title="全部">-->
<!--&lt;!&ndash;        <order-list :orders="allOrders" />&ndash;&gt;-->
<!--      </van-tab>-->
<!--      <van-tab title="待付款">-->
<!--&lt;!&ndash;        <order-list :orders="unpaidOrders" />&ndash;&gt;-->
<!--      </van-tab>-->
<!--      <van-tab title="待送达">-->
<!--&lt;!&ndash;        <order-list :orders="unreceivedOrders" />&ndash;&gt;-->
<!--      </van-tab>-->
<!--      <van-tab title="已送达">-->
<!--&lt;!&ndash;        <order-list :orders="refundOrders" />&ndash;&gt;-->
<!--      </van-tab>-->
<!--      <van-tab title="已完成">-->
<!--&lt;!&ndash;        <order-list :orders="completedOrders" />&ndash;&gt;-->
<!--      </van-tab>-->
<!--    </van-tabs>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'-->
<!--export default {-->
<!--  components: {-->
<!--    OrderList-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      activeTab: 0,-->
<!--      orders: [-->
<!--        {-->
<!--          address: {-->
<!--            address: "江西财经大学枫林园",-->
<!--            doorNo: "2#524",-->
<!--            id: 9,-->
<!--            phone: "12345678910",-->
<!--            recipientName: "瑶妹",-->
<!--            userId: 1-->
<!--          },-->
<!--          addressId: 9,-->
<!--          bidPay: 10,-->
<!--          id: 42,-->
<!--          orderProductsLists: [],-->
<!--          orderRemark: "我要大的橘子",-->
<!--          orderState: "已送达",-->
<!--          orderTypeId: null,-->
<!--          originPay: 14.5,-->
<!--          storeId: 1,-->
<!--          timeOrder: "2024-05-05 01:48:28",-->
<!--          timePre: "2024-05-05 01:48:39",-->
<!--          transCode: "1786815170015203328",-->
<!--          user: {-->
<!--            account: null,-->
<!--            addressIds: null,-->
<!--            avatar: null,-->
<!--            id: 1,-->
<!--            name: "爱喝茶的小淮",-->
<!--            newPassword: null,-->
<!--            openid: "1243214213",-->
<!--            password: null,-->
<!--            phone: "12345678910",-->
<!--            role: "USER",-->
<!--            sex: "男",-->
<!--            token: null,-->
<!--            username: "user"-->
<!--          },-->
<!--          userId: 1-->
<!--        }-->
<!--      ]-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    allOrders() {-->
<!--      return this.orders;-->
<!--    },-->
<!--    unpaidOrders() {-->
<!--      return this.orders.filter(order => order.orderState === "待付款");-->
<!--    },-->
<!--    unreceivedOrders() {-->
<!--      return this.orders.filter(order => order.orderState === "待送达");-->
<!--    },-->
<!--    refundOrders() {-->
<!--      return this.orders.filter(order => order.orderState === "已送达");-->
<!--    },-->
<!--    completedOrders() {-->
<!--      return this.orders.filter(order => order.orderState === "已完成");-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    ...mapActions('m_order',['fetchOrder']),-->
<!--    ...mapGetters('m_order',['getOrder']),-->
<!--    handleTabChange(index) {-->
<!--      this.activeTab = index;-->
<!--      this.fetchOrder();-->
<!--      //三秒后-->
<!--      setTimeout(() => {-->
<!--        this.orders = this.getOrder();-->
<!--      }, 3000);-->
<!--      console.log(this.allOrders, 'eeeee')-->
<!--    }-->

<!--  }-->
<!--};-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.order-page {-->
<!--  padding: 10px;-->
<!--  background-color: #f5f5f5;-->

<!--  .van-tabs {-->
<!--    &#45;&#45;van-tabs-bottom-bar-color: #ee0a24;-->
<!--  }-->

<!--  .van-tab {-->
<!--    font-size: 14px;-->
<!--  }-->
<!--}-->
<!--</style>-->

<template>
  <view>
    <van-tabs :active="active" @change="onChange"  swipeable sticky :ellipsis="false">

      <van-tab title="全部">
        <order-list :orders="allOrders"></order-list>
      </van-tab>
      <van-tab title="待付款">
        <order-list :orders="unpaidOrders"></order-list>
      </van-tab>
      <van-tab title="待送达">
        <order-list :orders="unreceivedOrders"></order-list>
      </van-tab>
      <van-tab title="已送达">
        <order-list :orders="refundOrders"></order-list>
      </van-tab>
      <van-tab title="已完成">
        <order-list :orders="completedOrders"></order-list>
      </van-tab>
    </van-tabs>
  </view>
</template>

<script>
import OrderAll from "@/components/orders/order-all/order-all.vue";
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

export default {
  components: {OrderAll},
  onLoad() {
    this.orders = this.getOrders();

    this.fetchOrder();
    console.log(this.orders,"thid")
  },
  data() {
    return {
      active: this.query.pagetype ? parseInt(this.query.pagetype): 0,
    orders:
        [
          {
            address: {
              address: "江西财经大学枫林园",
              doorNo: "2#524",
              id: 9,
              phone: "12345678910",
              recipientName: "瑶妹",
              userId: 1
            },
            addressId: 9,
            bidPay: 10,
            id: 42,
            orderProductsLists: [

            ],
            orderRemark: "我要大的橘子",
            orderState: "已送达",
            orderTypeId: null,
            originPay: 14.5,
            storeId: 1,
            timeOrder: "2024-05-05 01:48:28",
            timePre: "2024-05-05 01:48:39",
            transCode: "1786815170015203328",
            user:{
              account: null,
              addressIds: null,
              avatar: null,
              id: 1,
              name: "爱喝茶的小淮",
              newPassword: null,
              openid: "1243214213",
              password: null,
              phone: "12345678910",
              role: "USER",
              sex: "男",
              token: null,
              username: "user"
            },
            userId:1
          }
        ]
    };
  },
  props: {

  },
  computed: {
    allOrders() {
      return this.orders;
    },
    unpaidOrders() {
      return this.orders.filter(order => order.orderState === "待付款");
    },
    unreceivedOrders() {
      return this.orders.filter(order => order.orderState === "待送达");
    },
    refundOrders() {
      return this.orders.filter(order => order.orderState === "已送达");
    },
    completedOrders() {
      return this.orders.filter(order => order.orderState === "已完成");
    }
  },
  methods: {
    ...mapActions('m_order',['fetchOrder']),
    ...mapGetters('m_order',['getOrders']),
    onLoad(options) {
        // console.log(options.pagetype,"pagetype")
      this.orders=this.getOrders()
      this.fetchOrder()

      if(options.pagetype){
          this.active = parseInt(options.pagetype)
        }
      },
    onChange(event) {
      console.log(event)
      this.active = event.detail.index
      this.fetchOrder()
      console.log(this.getOrders(),'eeeee')
      this.orders=this.getOrders()
      // console.log(this.query().pagetype,'eeeee')
    },
    query() {
      return this.$route.query
    }

  }
}
</script>

<style lang="scss">
page { background-color: #8f8f94; }
</style>