wx-qhb/pageD/afterSalesManage/afterSalesManage.vue

<template>
  <view>
    <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>
    <view class="center">
      <view v-for="item in orderList" :key="item.status">
        <DetailCard :itemInfo="item" @toDetail="toDetail" />
      </view>
    </view>
  </view>
</template>

<script>
import DetailCard from "./component/detailCard.vue";
export default {
  components: {
    DetailCard,
  },
  data() {
    return {
      follow: 1,
      orderList: [],
    };
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
    },
    toDetail() {
      uni.navigateTo({
        url: "/pageD/afterSalesDetail/afterSalesDetail",
      });
    },
    getOrderList() {
      uni.$u.http.get(`/api/order/refund_order`).then((res) => {
        console.log(res);
        this.orderList = res.data;
      });
    },
  },
  mounted() {
    this.getOrderList();
    uni.setNavigationBarTitle({
      title: "售后订单",
    });
  },
};
</script>

<style lang="scss" scoped>
.top-tab {
  display: flex;
  justify-content: space-around;
  overflow-y: auto;
  padding-bottom: 10rpx;
  // flex-shrink: 1;
  // width: 100vw;
  background-color: #fff;

  .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;
  }
}

.center {
  padding: 20rpx 24rpx;
}
</style>