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"
          @openPop="openPop"
        />
      </view>
    </view>
    <AgreePop :title="title" :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,
      title: "",
    };
  },
  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;
    },
    //打开删除确认框
    openPop(value) {
      this.title = "是否确认删除售后记录";
      this.show = true;
      this.needDeleteGoods = value;
    },
    //确认退款 or 拒绝退款 or 删除记录
    refund(status, value) {
      if (this.title == "是否确认退款") {
        //处理退款
        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();
          });
      } else {
        //订单删除
        uni.$u.http
          .post(`api/order/refund_order_del`, {
            order_refund_id: this.needDeleteGoods.id,
          })
          .then((res) => {
            uni.showToast({
              title: "商品已删除",
              icon: "none",
            });
            this.show = false;
            this.getOrderList();
          });
      }
    },
    refuseRefund(item) {
      this.refuseShow = true;
      this.needRdfundOrder = item;
    },
    //打开同意退款确认框
    agreeRefund(item) {
      this.title = "是否确认退款";
      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>