wx-qhb/pageC/orderForm/orderForm.vue

<template>
  <view>
    <u-navbar @leftClick="rightClick" bgColor="#f4f4f4" :autoBack="true">
      <view class="tab" slot="center">
        <view style="width: 600rpx">
          <input type="text" placeholder="搜索我的订单" class="inp" />
        </view>
      </view>
    </u-navbar>
    <view class="content">
      <view class="top-tab">
        <view
          :class="{ commodity: follow == 1 }"
          class="tab"
          @click="tabSwitch(1)"
        >
          全部
        </view>
        <view
          :class="{ commodity: follow == 2 }"
          class="tab"
          @click="tabSwitch(2)"
        >
          待付款
        </view>
        <view
          :class="{ commodity: follow == 3 }"
          class="tab"
          @click="tabSwitch(3)"
        >
          拼团中
        </view>
        <view
          :class="{ commodity: follow == 4 }"
          class="tab"
          @click="tabSwitch(4)"
        >
          待发货
        </view>
        <view
          :class="{ commodity: follow == 5 }"
          class="tab"
          @click="tabSwitch(5)"
        >
          待收货
        </view>
        <view
          :class="{ commodity: follow == 6 }"
          class="tab"
          @click="tabSwitch(6)"
        >
          已完成
        </view>
        <view
          :class="{ commodity: follow == 7 }"
          class="tab"
          @click="tabSwitch(7)"
        >
          退款/售后
        </view>
      </view>
      <view v-for="item in orderList">
        <view v-if="follow != 7">
          <OrderInofrmation
            :itemInfo="item"
            @toDetail="toDetail"
            @cancellationOrder="cancellationOrder"
          />
        </view>
        <view v-else>
          <RefundCard
            :itemInfo="item"
            :refundDetail="refundDetail"
            @toRefundDetail="toRefundDetail"
          />
        </view>
      </view>
      <!-- <view v-for="item in orderList1" :key="item.id">
        <view v-if="follow != 7">
          <OrderInofrmation
            :itemInfo="item"
            @toDetail="toDetail"
            @cancellationOrder="cancellationOrder"
          />
        </view>
        <view v-else>
          <RefundCard
            :itemInfo="item"
            :refundDetail="refundDetail"
            @toRefundDetail="toRefundDetail"
          />
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import OrderInofrmation from "./component/orderInofrmation.vue";
import RefundCard from "./component/refundCard.vue";
export default {
  components: {
    OrderInofrmation,
    RefundCard,
  },
  data() {
    return {
      orderList: [
        {
          status: 3,
        },
        {
          status: 4,
        },
        {
          status: 5,
        },
        {
          status: 7,
        },
        {
          status: 8,
        },
      ],
      orderList1: [],
      follow: 1,
      refundDetail: {
        status: 1,
      },
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(option) {
    this.follow = option.followId;
  },
  methods: {
    rightClick() {
      console.log(111);
    },
    //切换搜索订单状态
    tabSwitch(num) {
      this.follow = num;
    },
    //跳转订单详情
    toDetail(value) {
      uni.navigateTo({
        url: `/pageC/orderFormDetail/orderFormDetail?orderId=${value.status}`,
      });
    },
    //取消订单
    cancellationOrder(item) {
      uni.$u.http.post(`/api/order/cancel/${item.id}`).then((res) => {
        console.log(res);
      });
    },

    //售后订单详情
    toRefundDetail() {
      uni.navigateTo({
        url: "/pageC/refundDetail/refundDetail",
      });
    },
    getOrderList() {
      uni.$u.http
        .get(`/api/order/order_list?status=&page=1&limit=10`)
        .then((res) => {
          this.orderList = res.data;
        });
    },
  },
  mounted() {
    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
.inp {
  background-color: #fff;
  border-radius: 40rpx;
  width: 402rpx;
  padding: 0 20rpx;
  height: 68rpx;
}

.content {
  padding: 0 24rpx 50rpx;
}

.top-tab {
  margin-top: 180rpx;
  display: flex;
  justify-content: space-between;
  overflow-y: auto;
  // flex-shrink: 1;
  width: 100vw;

  .tab {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: rgba(34, 34, 34, 0.8);
    flex-shrink: 0;
    height: 44rpx;
    display: flex;
    align-items: flex-end;
  }

  .commodity {
    position: relative;
    font-weight: 600;
    font-size: 32rpx;
  }

  .commodity::before {
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background: linear-gradient(to right, #f83224, #fff);
    position: absolute;
    bottom: 5rpx;
    opacity: 0.8;
  }
}
</style>