wx-qhb/pageD/afterSalesDetail/afterSalesDetail.vue

<template>
  <view class="page">
    <view
      class="top"
      v-if="
        orderInformation.goods[0].refund.status == '0' ||
        orderInformation.goods[0].refund.status == '3'
      "
    >
      <view class="top-title"> 请处理退款申请 </view>
      <view class="top-detail"> 如果您同意，请点击“同意退款” </view>
    </view>
    <view
      class="top"
      v-else-if="orderInformation.goods[0].refund.status == '2'"
    >
      <view class="top-title"> 您拒绝了退款申请 </view>
      <view class="top-detail">
        商家：{{ orderInformation.goods[0].refund.reason }}
      </view>
    </view>
    <view class="top" v-else>
      <view class="top-title"> 您同意了退款申请 </view>
    </view>
    <!-- 地址信息 -->
    <view class="address">
      <view class="name-phone">
        <view style="margin-right: 20rpx; font-size: 32rpx">{{
          orderInformation.address_name
        }}</view>
        <text class="phone">{{ orderInformation.address_mobile }}</text>
      </view>
      <view class="address-detail">
        {{ orderInformation.full_address }}
      </view>
    </view>

    <CommodityDetail
      :orderInformation="orderInformation"
      v-if="orderInformation.goods"
    />
    <ApplicationInformation
      :orderInformation="orderInformation"
      v-if="orderInformation.goods"
    />
    <RefusePopup :show="show" @refund="close" />
    <AgreePopup :agreeShow="agreeShow" @close="close" title="请确认是否退款" />

    <view
      class="footer"
      v-if="
        orderInformation.goods[0].refund.status == '0' ||
        orderInformation.goods[0].refund.status == '3'
      "
    >
      <button class="btn-1" @click="refuseApplication">拒绝申请</button
      ><button @click="agreeShow = true" class="btn-2">同意退款</button>
    </view>
  </view>
</template>

<script>
import CommodityDetail from "./component/commodityDetail.vue";
import ApplicationInformation from "./component/applicationInformation.vue";
import RefusePopup from "./component/refusePopup.vue";
import AgreePopup from "../components/agreePopup.vue";
export default {
  components: {
    CommodityDetail,
    ApplicationInformation,
    RefusePopup,
    AgreePopup,
  },
  data() {
    return {
      show: false,
      agreeShow: false,
      orderInformation: {},
      orderId: "",
    };
  },
  onLoad(options) {
    this.orderId = options.id;
    this.getOrderDetail(options.id);
  },
  methods: {
    refuseApplication() {
      this.show = true;
    },
    //关闭弹窗，确认是否退款，status有值则退款
    close(status, value) {
      console.log(value);
      this.show = false;
      this.agreeShow = false;
      if (status) {
        uni.$u.http
          .post(`/api/order_refund/examine`, {
            status,
            order_refund_id: this.orderInformation.goods[0].refund.id,
            reason: value,
          })
          .then((res) => {
            console.log(res);
            uni.showToast({
              title: "已同意退款",
              icon: "none",
            });
            this.getOrderDetail(this.orderId);
          });
      }
    },
    getOrderDetail(id) {
      uni.$u.http
        .post(`/api/order/refund_read?order_refund_id=${id}`)
        .then((res) => {
          this.orderInformation = res;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;
  position: relative;

  .top {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 28rpx 20rpx;

    .top-title {
      font-size: 36rpx;
      color: #333;
      font-weight: 600;
    }

    .top-detail {
      font-size: 26rpx;
      color: #a3a3a3;
      margin-top: 10rpx;
    }
  }

  .address {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 34rpx 24rpx 28rpx;
    margin-top: 24rpx;

    .name-phone {
      display: flex;
      align-items: center;
      align-items: flex-end;

      .phone {
        font-size: 26rpx;
        color: #666;
      }
    }

    .address-detail {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #444;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    height: 146rpx;
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 20rpx 0 0;

    .btn-1 {
      height: 76rpx;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #f83224;
      min-width: 188rpx;
      background-color: #fff;
      border-radius: 38rpx;
      border: 2rpx solid #f83224;
      margin-right: 20rpx;
    }

    .btn-2 {
      height: 76rpx;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #fff;
      min-width: 188rpx;
      background-color: #f83224;
      border-radius: 38rpx;
      margin-right: 20rpx;
    }
  }
}
</style>