wx-qhb/pageD/afterSalesManage/afterSalesManage.vue

<template>
  <view>
    <view class="top-tab">
      <view
        :class="{ commodity: follow == '' }"
        class="tab"
        @click="tabSwitch('')"
      >
        全部
      </view>
      <view
        :class="{ commodity: follow == '0' }"
        class="tab"
        @click="tabSwitch('0')"
      >
        待退款
      </view>
      <view
        :class="{ commodity: follow == 3 }"
        class="tab"
        @click="tabSwitch(3)"
      >
        平台介入
      </view>
      <view
        :class="{ commodity: follow == 1 }"
        class="tab"
        @click="tabSwitch(1)"
      >
        已退款
      </view>
    </view>
    <view class="center">
      <view v-for="item in orderList" :key="item.id">
        <DetailCard
          :itemInfo="item"
          @toDetail="toDetail"
          @agreeRefund="agreeRefund"
          @refuseRefund="refuseRefund"
          @platformIntervene="platformIntervene"
        />
      </view>
    </view>
    <AgreePop :show="show" @close="close" @refund="refund" />
    <RefusePopup :show="refuseShow" @close="close" @refund="refund" />
  </view>
</template>

<script>
import DetailCard from "./component/detailCard.vue";
import AgreePop from "./component/agreePop.vue";
import RefusePopup from "../afterSalesDetail/component/refusePopup";
export default {
  components: {
    DetailCard,
    AgreePop,
    RefusePopup,
  },
  data() {
    return {
      follow: "",
      orderList: [],
      show: false,
      needRdfundOrder: {},
      refuseShow: false,
      page: 1,
      total: 0,
    };
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
      this.getOrderList();
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pageD/afterSalesDetail/afterSalesDetail?id=" + item.id,
      });
    },
    //获取售后订单
    getOrderList() {
      uni.$u.http
        .get(
          `/api/order/refund_order?status=${this.follow}&page=${this.page}&limit=10`
        )
        .then((res) => {
          this.orderList = res.data;
          this.total = res.total;
        });
    },
    //平台介入
    platformIntervene(item) {
      uni.$u.http
        .post(`/api/order_refund/platform_intervention`, {
          order_refund_id: item.id,
        })
        .then((res) => {
          uni.showToast({
            title: "已申请平台介入",
            icon: "none",
          });
          this.getOrderList();
        });
    },
    //关闭退款确认框
    close() {
      this.show = false;
      this.refuseShow = false;
    },
    //确认退款 or 拒绝退款
    refund(status, value) {
      uni.$u.http
        .post(`/api/order_refund/examine`, {
          status,
          order_refund_id: this.needRdfundOrder.id,
          reason: value,
        })
        .then((res) => {
          this.show = false;
          this.refuseShow = false;
          uni.showToast({
            title: status == 1 ? "已同意退款" : "已拒绝退款",
            icon: "none",
          });
          this.getOrderList();
        });
    },
    refuseRefund(item) {
      this.refuseShow = true;
      this.needRdfundOrder = item;
    },
    //打开同意退款确认框
    agreeRefund(item) {
      this.show = true;
      this.needRdfundOrder = item;
    },
  },
  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>