city-gather/src/subPack-common/afterSalesDetail/index.vue

<script setup lang="ts">
import { handleCommonRefundOrderCancel, refundStatus } from '../afterSalesList/index'
import router from '@/router'
import { StaticUrl } from '@/config'

definePage({
  name: 'common-afterSalesDetail',
  islogin: true,
  style: {
    navigationBarTitleText: '售后详情',

  },
})
const showTime = ref(false)
const TimeId = ref()
const dayId = ref(1)
const refundOrderInfo = ref<Api.OrderRefundDetails>()
const refundNumber = ref()
onLoad((options: any) => {
  refundNumber.value = options.refundNumber
  getDetail(options.refundNumber)
})
async function getDetail(refundNumber: string) {
  const res = await api.xsb.refundDetails({ data: { refundNumber } })
  refundOrderInfo.value = res.data
}
async function handleCancel() {
  await handleCommonRefundOrderCancel(refundNumber.value)
  getDetail(refundNumber.value)
}
function copyToClipboard(text: string) {
  uni.setClipboardData({
    data: text,
    showToast: true,
  })
}
</script>

<template>
  <page-meta :page-style="showTime ? 'overflow: hidden;' : '' " />
  <view v-if="refundOrderInfo" class="page-xsb px24rpx pt20rpx">
    <!-- <view class="mb24rpx rounded-16rpx bg-white p24rpx">
      <view class="text-32rpx text-#222 font-semibold">
        待填写配送信息
      </view>
      <view class="mt20rpx text-24rpx text-#AAAAAA">
        申请已通过，请在47时59分内，填写配送信息并支付配送费
      </view>
    </view> -->
    <!-- <view class="mb24rpx rounded-16rpx bg-white p24rpx">
      <view class="text-32rpx text-#222 font-semibold">
        配送信息
      </view>
      <view class="mt24rpx flex items-center justify-between" @click="showTime = true">
        <view class="text-28rpx">
          <text class="text-#FF4D3A">
            *
          </text>
          <text class="text-#222">
            取件时间
          </text>
        </view>
        <view class="flex items-center text-#AAAAAA">
          请选择时间 <wd-icon name="chevron-right" size="22px" />
        </view>
      </view>
      <view class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          <text class="text-#FF4D3A">
            *
          </text>
          <text class="text-#222">
            取件地址
          </text>
        </view>
        <view class="flex items-center text-#222">
          富力中心A座3401
        </view>
      </view>
      <view class="mt24rpx flex items-center justify-between">
        <view />
        <view class="flex items-center text-#222">
          杨先生 189****4678
        </view>
      </view>
      <view class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          <text class="text-#FF4D3A">
            *
          </text>
          <text class="text-#222">
            退货方式
          </text>
        </view>
        <view class="flex items-center text-#222">
          上门取件
        </view>
      </view>
      <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
      <view class="mt28rpx text-28rpx text-#222 font-semibold">
        请支付配送费 <text class="text-32rpx text-#FF4D3A">
          ￥12
        </text>
      </view>
      <view class="mt24rpx text-24rpx text-#AAAAAA">
        <view> 1.因个人原因退货，需客户承担商品返还商家的运费</view>
        <view class="mt20rpx">
          2.请确保商品不影响二次销售，否则商家会拒绝收货
        </view>
      </view>
      <view class="mt24rpx w-full">
        <wd-button block>
          立即支付
        </wd-button>
      </view>
    </view> -->
    <view v-if="refundOrderInfo.omsOrderRefundRecords" class="rounded-16rpx bg-white p24rpx">
      <view class="text-32rpx text-#222 font-semibold">
        {{ refundOrderInfo.omsOrderRefundRecords[0].auditStatusDescribe }}
      </view>
      <view class="mt20rpx text-24rpx text-#AAAAAA">
        {{ refundOrderInfo.omsOrderRefundRecords[0].instructions }}
      </view>
      <view class="mt24rpx flex items-center justify-between text-28rpx">
        <view class="text-#222 font-semibold">
          {{ refundStatus.ReturnCompleted == refundOrderInfo.returnMoneySts ? '实' : '应' }}退款金额
        </view>
        <view class="text-#FF4D3A font-semibold">
          ￥{{ refundOrderInfo.refundAmount }}
        </view>
      </view>
      <view v-if="refundStatus.ReturnCompleted == refundOrderInfo.returnMoneySts" class="mt20rpx flex flex-wrap items-center gap-20rpx text-28rpx">
        <view class="flex items-center">
          <view class="text-#222 font-semibold">
            退款金额
          </view>
          <view class="text-#FF4D3A font-semibold">
            ￥{{ refundOrderInfo.refundAmount }}
          </view>
        </view>
        <view class="ml20rpx flex items-center">
          <view class="text-#222 font-semibold">
            退还积分：
          </view>
          <view class="text-#FF4D3A font-semibold">
            ￥{{ refundOrderInfo.omsOrderVo.offsetPoints }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="text-#222 font-semibold">
            退还优惠券:
          </view>
          <view class="text-#FF4D3A font-semibold">
            ￥{{ refundOrderInfo.isAll ? refundOrderInfo.couponBaseInfoDTO.discountMoney : '0' }}
          </view>
        </view>
      </view>
      <!-- <view class="mt20rpx text-24rpx text-#AAAAAA">
        申请通过后，将退回至原账户
      </view> -->
      <!-- <view v-if="refundOrderInfo.returnMoneySts == refundStatus.ReturnCompleted" class="mt20rpx flex items-center text-24rpx text-#AAAAAA">
        <view>退还金额：{{ refundOrderInfo.userRefundMoney }}</view>
        <view class="ml20rpx">
          退还积分：{{ refundOrderInfo.refundScore }}（已过期{{ refundOrderInfo.refundExpiredScore }}）
        </view>
      </view> -->
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="text-28rpx font-semibold">
        优惠券处理
      </view>
      <view class="mt10rpx text-24rpx">
        使用的优惠券：{{ refundOrderInfo.couponBaseInfoDTO.activityName }}
      </view>
      <view class="mb24rpx mt10rpx text-24rpx">
        <view> 处理说明：</view>

        <template v-if="refundStatus.PendingAudit == refundOrderInfo.returnMoneySts">
          <view> 当前售后单为全额退款。审核通过后，优惠券退还，有效期不变；</view>

          <view>审核不通过，则优惠券保持原状。</view>
        </template>
        <template v-else-if="[refundStatus.Rejected, refundStatus.Cancel].includes(refundOrderInfo.returnMoneySts as number)">
          <view> 优惠券保持已使用状态，不退还。</view>
        </template>
        <template v-else-if="refundStatus.ReturnCompleted == refundOrderInfo.returnMoneySts">
          <view v-if="refundOrderInfo.isAll">
            <view> 有效期不变至: {{ refundOrderInfo.couponBaseInfoDTO.expirationTime }}</view>
          </view>
          <view v-else>
            <view> 优惠券已使用，不退回</view>
          </view>
        </template>
      </view>
      <wd-button v-if="refundStatus.ReturnCompleted == refundOrderInfo.returnMoneySts" @click="router.push({ name: 'xsb-coupon', params: { couponId: refundOrderInfo.couponBaseInfoDTO.allowanceId, activeTab: refundOrderInfo.isAll ? '2' : '1' } })">
        查看优惠卷
      </wd-button>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="grid grid-cols-5 py24rpx text-28rpx text-#222">
        <view
          v-if="[refundStatus.Cancel].includes(Number(refundOrderInfo.returnMoneySts))"
          class="flex flex-col items-center"
          @click="useSysStore().getRefunOrder(refundOrderInfo.orderNumber as string)"
        >
          <image :src="`${StaticUrl}/refund-apply.png`" class="h40rpx w40rpx" />
          <view class="mt40rpx">
            再次申请
          </view>
        </view>
        <view
          v-if="[refundStatus.PendingAudit].includes(Number(refundOrderInfo.returnMoneySts))"
          class="flex flex-col items-center"
          @click="handleCancel"
        >
          <image :src="`${StaticUrl}/orderDetaile-apply.png`" class="h40rpx w40rpx" />
          <view class="mt40rpx">
            取消申请
          </view>
        </view>
        <view class="contact relative flex flex-col items-center">
          <image :src="`${StaticUrl}/orderDetaile-wx.png`" class="h40rpx w40rpx" />
          <Zcontact>
            <view class="mt40rpx text-28rpx">
              联系商家
            </view>
          </Zcontact>
        </view>
      </view>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="mb20rpx text-32rpx font-semibold">
        退款流程
      </view>
      <wd-steps :active="0" vertical dot>
        <wd-step v-for="item in refundOrderInfo?.omsOrderRefundRecords" :key="item.id">
          <template #title>
            <view class="text-28rpx font-semibold">
              {{ item.auditStatusDescribe }}
            </view>
          </template>
          <template #description>
            <view class="mt20rpx text-24rpx text-#AAAAAA">
              <view>{{ item.instructions }} </view>
              <view class="mt12rpx">
                {{ item.createTime }}
              </view>
            </view>
          </template>
        </wd-step>
      </wd-steps>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="flex items-center justify-between text-28rpx font-semibold">
        <view class="">
          退款商品
        </view>
        <view class="text-#FF4A39">
          退款金额：￥{{ refundOrderInfo.refundAmount }}
        </view>
      </view>
      <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
      <CollapsePanel :line-height="150">
        <view v-for="item in refundOrderInfo.orderRefundSkuList" :key="item.skuId" class="mb20rpx">
          <view class="w-full flex items-center">
            <view class="mr20rpx w120rpx flex-shrink-0">
              <image
                :src="item.pic"
                class="h120rpx w120rpx"
              />
            </view>
            <view class="flex-1">
              <view class="w-full flex items-center justify-between font-semibold">
                <view class="text-28rpx">
                  {{ item.skuName }}
                </view>
                <view class="text-32rpx text-#FF4D3A">
                  ￥{{ item.skuTotalPrice }}
                </view>
              </view>
              <view class="text-24rpx text-#AAAAAA">
                规格：{{ item.spec }}
              </view>
              <view class="text-24rpx text-#AAAAAA">
                单价：￥{{ item.skuPrice }}
              </view>
              <view class="text-24rpx text-#AAAAAA">
                数量：{{ item.productCount }}
              </view>
            </view>
          </view>
          <view class="mt24rpx h2rpx w-full bg-#F0F0F0" />
        </view>
      </CollapsePanel>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          商品金额
        </view>
        <view class="text-#FF4A39 font-semibold">
          ￥{{ refundOrderInfo.omsOrderVo.total }}
        </view>
      </view>
      <view class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          配送费（{{ refundOrderInfo.omsOrderVo.dvyType == 1 ? '快递' : '即时配送' }}）
        </view>
        <view class="text-#FF4A39 font-semibold">
          ￥{{ refundOrderInfo.freightAmount }}
        </view>
      </view>
      <view v-if="refundOrderInfo.couponBaseInfoDTO.discountMoney" class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          优惠券
        </view>
        <view class="text-#FF4A39 font-semibold">
          -￥{{ refundOrderInfo.couponBaseInfoDTO.discountMoney }}
        </view>
      </view>
      <view class="mt24rpx flex items-center justify-between">
        <view class="text-28rpx">
          积分（{{ refundOrderInfo.omsOrderVo.offsetPoints }}）
        </view>
        <view class="text-#FF4A39 font-semibold">
          -￥{{ refundOrderInfo.omsOrderVo.offsetPointsMoney }}
        </view>
      </view>
      <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
      <view class="flex items-center">
        <view class="flex items-center justify-end">
          <view class="text-28rpx font-semibold">
            总计：
          </view>
          <view class="ml8rpx text-28rpx text-#FF4D3A font-semibold">
            ￥{{ refundOrderInfo.omsOrderVo.orderMoney }}
          </view>
        </view>
        <view class="ml10rpx flex items-center">
          <view clas="text-28rpx">
            共减
          </view>
          <view class="ml5rpx text-28rpx text-#FF4D3A font-semibold">
            {{ refundOrderInfo.omsOrderVo.offsetPointsMoney + refundOrderInfo.couponBaseInfoDTO.discountMoney }}
          </view>
        </view>
        <view class="ml10rpx flex items-center">
          <view clas="text-28rpx">
            实付款
          </view>
          <view class="ml5rpx text-28rpx text-#FF4D3A font-semibold">
            {{ refundOrderInfo.userRefundMoney }}
          </view>
        </view>
      </view>
    </view>
    <view class="mt20rpx rounded-16rpx bg-white p24rpx">
      <view class="pb20rpx">
        <view class="mb28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAAAAA">
            订单编号
          </view>
          <view class="flex items-center">
            <text class="text-#222">
              {{ refundOrderInfo.orderNumber }}
            </text>
            <view class="ml10rpx" @click="copyToClipboard(refundOrderInfo.orderNumber as string)">
              <wd-icon name="file-copy" size="22px" />
            </view>
          </view>
        </view>
        <view class="mb28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAAAAA">
            售后编号
          </view>
          <view class="flex items-center">
            <text class="text-#222">
              {{ refundNumber }}
            </text>
            <view class="ml10rpx" @click="copyToClipboard(refundNumber)">
              <wd-icon name="file-copy" size="22px" />
            </view>
          </view>
        </view>
        <view class="mb28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAAAAA">
            申请时间
          </view>
          <view class="text-#222">
            {{ refundOrderInfo.applyTime }}
          </view>
        </view>
        <view class="mb28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAAAAA">
            服务类型
          </view>
          <view class="text-#222">
            仅退款
          </view>
        </view>
        <view class="mb28rpx flex items-center justify-between">
          <view class="text-28rpx text-#AAAAAA">
            申请原因
          </view>
          <view class="text-#222">
            {{ refundOrderInfo.buyerReason }}
          </view>
        </view>
      </view>
    </view>
    <view class="h30rpx" />
    <Zpopup v-model="showTime" bg="#fff">
      <view class="px24rpx py28rpx">
        <view class="text-center text-32rpx font-semibold">
          选择收件时间
        </view>
        <view class="mt24rpx flex items-center rounded-16rpx bg-#ffead1 px24rpx py12rpx text-28rpx">
          <wd-icon name="info-circle-filled" size="22px" color="#FF941A" />
          <view class="ml16rpx text-28rpx">
            请您确保选择的时间，配送员能收到货。
          </view>
        </view>
        <view class="flex">
          <view class="w250rpx">
            <scroll-view scroll-y class="mt24rpx h400rpx">
              <view v-for="item in 10" :key="item" :class="[dayId == item ? 'text-[var(--them-color)]' : 'text-#222']" class="mb28rpx h60rpx flex items-center justify-center" @click="dayId = item">
                11月29日(今天)
              </view>
              <view class="h20rpx" />
            </scroll-view>
          </view>

          <view class="flex-1">
            <scroll-view scroll-y class="mt24rpx box-border h400rpx">
              <view v-for="item in 10" :key="item" class="mb28rpx box-border h60rpx w-full flex items-center justify-end" :class="[TimeId == item ? 'text-[var(--them-color)]' : 'text-#222']" @click="TimeId = item">
                <view>12:00-14:00(8.7元配送费)</view>
                <view class="ml20rpx h32rpx w32rpx">
                  <image
                    v-if="TimeId == item"
                    :src="`${StaticUrl}/checked.png`"
                    class="h32rpx w32rpx"
                  />
                </view>
              </view>
              <view class="h20rpx" />
            </scroll-view>
          </view>
        </view>
      </view>
      <template #footer>
        <view class="pb20rpx">
          <wd-button block>
            确定
          </wd-button>
        </view>
      </template>
    </Zpopup>
  </view>
</template>

<style scoped>

</style>