InstantRetailAdmin/src/views/delivery/after-sales-order/order-modal.vue

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { fetchGetAfterSalesOrderDetail } from '@/service/api/delivery/after-sales-order';
import { useAppStore } from '@/store/modules/app';
import { copyTextToClipboard } from '@/utils/zt';
import { useModal } from '@/components/zt/Modal/hooks/useModal';
import { TypeText, orderColumns, refundEnum, refundStatus, refundTime, refundTimeEnum } from './after-sales-order';
const [registerModal, { openModal, setModalLoading }] = useModal({
  title: '处理退款',
  width: 1200,
  height: 800,
  isShowHeaderText: false,
  showFooter: false
});
const appStore = useAppStore();

const orderInfo = ref<Api.delivery.OrderRefund>();
const isRefundIng = ref(false);
const goodsMoney = computed(() => {
  // 后端不算，让前端算
  return orderInfo.value?.orderRefundSkuList?.reduce((acc, item) => {
    return acc + Number(item.orderItem.productTotalAmount) * Number(item.orderItem.prodCount);
  }, 0);
});

defineExpose({
  handleOpenOrder
});

async function handleOpenOrder(refundId: number) {
  openModal();
  setModalLoading(true);
  const { data, error } = await fetchGetAfterSalesOrderDetail(refundId);
  if (!error) {
    orderInfo.value = data;
  }
  setModalLoading(false);
}
function getImgFils() {
  return orderInfo.value?.photoFiles?.split(',').map(item => {
    return `${import.meta.env.VITE_OSS_BASE_URL}${item}`;
  });
}
</script>

<template>
  <BasicModal @register="registerModal" @after-leave="isRefundIng = false">
    <div v-if="orderInfo">
      <NFlex justify="space-between">
        <NFlex vertical>
          <NTag>
            <div class="flex items-center">
              退款编号: {{ orderInfo?.refundSn }}
              <div @click="copyTextToClipboard(orderInfo.refundSn)">
                <SvgIcon icon="bxs:copy" class="mx-3 cursor-pointer text-[#f97316]"></SvgIcon>
              </div>
            </div>
          </NTag>
          <NTag>申请人: {{ orderInfo.receiver || '---' }} | 申请时间：{{ orderInfo.applyTime }}</NTag>
        </NFlex>
        <NFlex vertical>
          <div class="text-16px font-semibold">
            {{ refundStatus[orderInfo.returnMoneySts as keyof typeof refundStatus] }}
          </div>
          <div class="text-gray">
            <template v-if="orderInfo.returnMoneySts == refundEnum.BUYER_APPLY">
              <div class="text-12px">逾期未处理，将自动退款给买家。</div>
              <div class="mt3 text-15px">
                <div>温馨提示</div>
                <div>如果你同意，将直接退款给买家。</div>
                <div>如果你拒绝，最好和买家先协商一致。</div>
                <div>如果你逾期未处理，视作同意买家申请，系统将自动退款给买家。</div>
              </div>
            </template>
            <template v-if="orderInfo.returnMoneySts == refundEnum.REVOKE_APPLY">
              <div>用户主动撤回申请，退款关闭。</div>
            </template>
            <template v-if="orderInfo.returnMoneySts == refundEnum.SELLER_REFUSE">
              <div>卖家拒绝了用户的申请</div>
            </template>
            <template v-if="orderInfo.returnMoneySts == refundEnum.REFUND_SUCCESS">
              <div>已完成退款，具体到账时间请用户查询支付账户</div>
            </template>
          </div>
        </NFlex>
      </NFlex>
      <NDivider />
      <NDescriptions bordered :column="appStore.isMobile ? 1 : 4">
        <NDescriptionsItem label="售后信息">
          <div>售后方式：{{ TypeText[orderInfo.applyType - 1] || '未知状况' }}</div>
          <div>退款原因：{{ orderInfo.buyerReason || '---' }}</div>
          <div>退款件数: {{ orderInfo.goodsNum || '---' }}件</div>
        </NDescriptionsItem>
        <NDescriptionsItem label="购买信息">
          <div>商品总额: {{ goodsMoney || '---' }}</div>
          <div>配送费(快递): {{ orderInfo.freightAmount || '---' }}元</div>
          <div>积分抵扣: {{ (orderInfo.orderOffsetPoints / 100).toFixed(2) || '---' }}元</div>
          <div>实际付款: {{ orderInfo.orderActualTotal || '---' }}元</div>
        </NDescriptionsItem>
      </NDescriptions>
      <NDivider />
      <NCard title="退款商品" :bordered="false">
        <NDataTable :columns="orderColumns" :data="orderInfo.orderRefundSkuList" :bordered="false" />
      </NCard>
      <div class="flex items-center justify-end">
        <div class="flex flex-wrap items-center">
          <div class="text-16px font-semibold">退款总金额: {{ orderInfo.refundTotalMoney || '--' }}元</div>
          <div v-if="orderInfo.returnMoneySts == refundEnum.REFUND_SUCCESS" class="ml2 flex items-center text-gray">
            <div>退还金额:{{ orderInfo.refundAmount }}</div>
            <div class="ml2">退还积分:{{ orderInfo.offsetPoints }} (已过期{{ orderInfo.refundExpiredScore }})</div>
          </div>
        </div>
      </div>
      <div v-if="orderInfo.orderRefundRecordList" class="mt3">
        <!-- 1-申请原因，2-商家待审核，5-用户待发货，7-待商家收货，10-审核通过，20-驳回，30-退款成功 -->
        <NTimeline>
          <NTimelineItem
            v-for="item in orderInfo.orderRefundRecordList"
            :key="item.id"
            :type="item.auditStatus == refundTimeEnum.RefundSuccess ? 'success' : 'default'"
            :title="refundTime[item.auditStatus as keyof typeof refundTime]"
            :time="item.createTime"
          >
            <div>{{ item.instructions }}</div>
            <div
              v-if="item.auditStatus == refundTimeEnum.Reason && orderInfo.photoFiles"
              class="mt2 flex flex-wrap items-center"
            >
              <template v-for="items in getImgFils()" :key="items">
                <NImage :width="100" :height="100" :src="items" lazy class="mb2 mr3 h100px w100px" object-fit="cover" />
              </template>
            </div>
          </NTimelineItem>
        </NTimeline>
      </div>
    </div>
  </BasicModal>
</template>

<style scoped></style>