You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
12 KiB
298 lines
12 KiB
6 months ago
|
<script setup lang="ts">
|
||
|
|
import { refundDetailApi } from '~/server/orderApi'
|
||
|
|
import useOrder from '~/composables/useOrder'
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
const { handleIntoPage } = useOrder()
|
||
|
|
import { orderRefundTipsStatusFilter, orderRefundFilter } from '~/utils/filter'
|
||
|
|
import useOrderRefund from '~/composables/useOrderRefund'
|
||
|
|
import ReturningGoods from '~/pages/order/components/returningGoods.vue'
|
||
|
|
import { merchantAddressApi, merCustomerApi } from '~/server/merchantApi'
|
||
|
|
import { ItemObject } from '~/types/global'
|
||
|
|
import { QuestionFilled } from '@element-plus/icons-vue'
|
||
|
|
const route = useRoute()
|
||
|
|
const refundOrderNo = ref<string>(<string>route.query.refundOrderNo)
|
||
|
|
const loading = ref<boolean>(false)
|
||
|
|
const type = ref<number>(0) //订单类型 0-普通订单，1-视频号订单,2-秒杀订单
|
||
|
|
const { onRevokeRefund } = useOrderRefund()
|
||
|
|
|
||
|
|
//复制
|
||
|
|
const { handleCopy } = useCopy()
|
||
|
|
const copyText = () => {
|
||
|
|
handleCopy(orderInfo.trackingNumber)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 退款订单详情
|
||
|
|
*/
|
||
|
|
onMounted(() => {
|
||
|
|
getOrderRefundDetail()
|
||
|
|
})
|
||
|
|
const orderInfo = reactive({})
|
||
|
|
const cartInfo = ref([]) //再次购买加入购物车的商品
|
||
|
|
const userAddress = ref([])
|
||
|
|
const isUserAddress = ref<boolean>(false) //是否只显示一次收货地址
|
||
|
|
const getOrderRefundDetail = async () => {
|
||
|
|
loading.value = true
|
||
|
|
await refundDetailApi(refundOrderNo.value)
|
||
|
|
.then((res) => {
|
||
|
|
Object.assign(orderInfo, res)
|
||
|
|
//商户地址
|
||
|
|
if (orderInfo.returnGoodsType === 2) getMerchantAddress()
|
||
|
|
//客服配置
|
||
|
|
getChatConfig()
|
||
|
|
userAddress.value = res.merchantOrderList.filter((item: any) => {
|
||
|
|
return item.shippingType === 1
|
||
|
|
})
|
||
|
|
cartInfo.value = res.merchantOrderList[0].orderInfoList
|
||
|
|
isUserAddress.value = userAddress.value.length > 0 ? true : false
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//商户地址
|
||
|
|
const merchantAddress = ref<string>('')
|
||
|
|
const getMerchantAddress = async () => {
|
||
|
|
merchantAddress.value = await merchantAddressApi(orderInfo.merId)
|
||
|
|
}
|
||
|
|
|
||
|
|
//获取客服配置
|
||
|
|
const { chatConfig } = useOrder()
|
||
|
|
const chatConfigData = reactive<ItemObject>({})
|
||
|
|
const getChatConfig = async () => {
|
||
|
|
let data = await merCustomerApi(orderInfo.merId)
|
||
|
|
Object.assign(chatConfigData, data)
|
||
|
|
}
|
||
|
|
|
||
|
|
//联系客服
|
||
|
|
const handleChat = async () => {
|
||
|
|
await chatConfig(chatConfigData)
|
||
|
|
}
|
||
|
|
|
||
|
|
//撤销售后
|
||
|
|
const handleRevokeRefund = async (refundOrderNo: string) => {
|
||
|
|
await onRevokeRefund(refundOrderNo).then(async () => {
|
||
|
|
await getOrderRefundDetail()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//退回弹窗
|
||
|
|
const { bool: dialogVisible, DialogOpen, DialogClose } = useDialog()
|
||
|
|
//退回商品
|
||
|
|
const returnGoodsType = ref<number>(0) //退回状态
|
||
|
|
const handleReturningRefund = async (item: any) => {
|
||
|
|
returnGoodsType.value = item.returnGoodsType
|
||
|
|
DialogOpen()
|
||
|
|
}
|
||
|
|
//退回提交成功回调
|
||
|
|
const handleSubmitSuccess = async () => {
|
||
|
|
await getOrderRefundDetail()
|
||
|
|
await DialogClose()
|
||
|
|
}
|
||
|
|
//关闭弹窗
|
||
|
|
const handleSubmitClose = () => {
|
||
|
|
DialogClose()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="wrapper_1200" v-loading="loading">
|
||
|
|
<page-header title="售后详情" menuTitle="售后/退款"></page-header>
|
||
|
|
<!--订单状态 refundStatus售后状态：0:待审核 1:商家拒绝 2：退款中 3:已退款 4:用户退货 5:商家待收货 6:已撤销-->
|
||
|
|
<div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20">
|
||
|
|
<div class="fontColor333 text-20px font-500 oppoSans-M mb-15px acea-row items-center">
|
||
|
|
<div class="mr-10px">{{ orderRefundFilter(orderInfo.refundStatus) }}</div>
|
||
|
|
<div v-show="orderInfo.refundStatus === 3" class="text-18px font-color dinProSemiBold">
|
||
|
|
<span class="text-12px">￥</span>{{ orderInfo.refundPrice }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="orderInfo.refundStatus === 1" class="text-#666 text-14px font-400 oppoSans-R">
|
||
|
|
{{ orderInfo.refundReason }}
|
||
|
|
</div>
|
||
|
|
<div v-else class="text-#666 text-14px font-400 oppoSans-R">
|
||
|
|
{{ orderRefundTipsStatusFilter(orderInfo.refundStatus) }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 物流信息-->
|
||
|
|
<div
|
||
|
|
v-if="
|
||
|
|
orderInfo.refundStatus > 0 &&
|
||
|
|
orderInfo.afterSalesType === 2 &&
|
||
|
|
orderInfo.returnGoodsType === 1 &&
|
||
|
|
orderInfo.expressName &&
|
||
|
|
orderInfo.trackingNumber
|
||
|
|
"
|
||
|
|
class="w-100% borRadius bg-#fff h-90px px-30px py-22px mbtom20 flex-y-center"
|
||
|
|
>
|
||
|
|
<div class="text-14px lh-14px w-50px h-50px b-rd-50% bg-#F7F7F7 text-center lh-50px mr-15px">
|
||
|
|
<span class="iconfont icon-kuaidi" style="font-size: 24px"></span>
|
||
|
|
</div>
|
||
|
|
<div class="font-400 text-14px oppoSans-R">
|
||
|
|
<div class="oppoSans-R mb-14px text-#333333">
|
||
|
|
<span>快递公司：{{ orderInfo.expressName }}</span>
|
||
|
|
<span class="ml-50px">联系电话：{{ orderInfo.telephone }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="oppoSans-R text-#333333">
|
||
|
|
快递单号： {{ orderInfo.trackingNumber
|
||
|
|
}}<span
|
||
|
|
class="text-#333333 ml-10px oppoSans-R borderSol b-rd-10px w-40px h-20px lh-20px text-12px inline-block text-center cursors"
|
||
|
|
@click="copyText"
|
||
|
|
>复制</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 用户到店退回联系电话-->
|
||
|
|
<div
|
||
|
|
v-if="
|
||
|
|
orderInfo.refundStatus > 0 &&
|
||
|
|
orderInfo.afterSalesType === 2 &&
|
||
|
|
orderInfo.returnGoodsType === 2 && orderInfo.telephone
|
||
|
|
"
|
||
|
|
class="w-100% borRadius bg-#fff h-90px px-30px py-22px mbtom20 flex-y-center"
|
||
|
|
>
|
||
|
|
<div class="text-14px lh-14px w-50px h-50px b-rd-50% bg-#F7F7F7 text-center lh-50px mr-15px">
|
||
|
|
<span class="iconfont icon-kuaidi" style="font-size: 24px"></span>
|
||
|
|
</div>
|
||
|
|
<div class="font-400 text-14px oppoSans-R">
|
||
|
|
<div class="oppoSans-R text-#333333">
|
||
|
|
<span>联系电话：{{ orderInfo.telephone }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--退回地址,订单待审核之后，有地址展示，无地址不展示-->
|
||
|
|
<div
|
||
|
|
v-if="orderInfo.refundStatus>0 && ((orderInfo.returnGoodsType ===1 && orderInfo.receiver && orderInfo.receiverPhone) || (orderInfo.returnGoodsType === 2 &&merchantAddress))"
|
||
|
|
class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20"
|
||
|
|
>
|
||
|
|
<div class="fontColor333 text-16px mb-30px">{{ orderInfo.returnGoodsType === 1 ? '退回地址' : '商家地址' }}</div>
|
||
|
|
<div v-if="orderInfo.returnGoodsType === 1 && orderInfo.receiver && orderInfo.receiverPhone" class="acea-row">
|
||
|
|
<div class="text-14px text-#666">
|
||
|
|
<div class="mb-20px oppoSans-R">收货人：{{ orderInfo.receiver }}</div>
|
||
|
|
<div class="mb-20px oppoSans-R">联系电话：{{ orderInfo.receiverPhone }}</div>
|
||
|
|
<div class="oppoSans-R">收货地址：{{ orderInfo.receiverAddressDetail }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="orderInfo.returnGoodsType === 2" class="acea-row">
|
||
|
|
<div class="text-14px text-#666">
|
||
|
|
<div class="mb-20px oppoSans-R">商户名称：{{ merchantAddress.name }}</div>
|
||
|
|
<div class="mb-20px oppoSans-R">联系电话：{{ merchantAddress.phone }}</div>
|
||
|
|
<div class="oppoSans-R">收货地址：{{ merchantAddress.addressDetail }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--售后信息-->
|
||
|
|
<div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
|
|
<div class="fontColor333 text-16px mb-30px">售后信息</div>
|
||
|
|
<div class="acea-row">
|
||
|
|
<div class="text-14px text-#666 w-540px oppoSans-R">
|
||
|
|
<div class="mb-20px oppoSans-R">售后单号：{{ orderInfo.refundOrderNo }}</div>
|
||
|
|
<div class="mb-20px oppoSans-R">申请时间：{{ orderInfo.createTime }}</div>
|
||
|
|
<div class="mb-20px oppoSans-R">售后类型：{{ orderInfo.afterSalesType === 1 ? '仅退款' : '退货退款' }}</div>
|
||
|
|
<div v-if="orderInfo.returnGoodsType !== 0" class="mb-20px oppoSans-R">
|
||
|
|
退货方式：{{
|
||
|
|
orderInfo.returnGoodsType === 0 ? '不退货' : orderInfo.returnGoodsType === 1 ? '快递退回' : '到店退货'
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
<div class="oppoSans-R mb-20px">退款件数：{{ orderInfo.applyRefundNum }}</div>
|
||
|
|
<div class="oppoSans-R">退款方式：原路返回</div>
|
||
|
|
</div>
|
||
|
|
<div class="w-1px h-124px bg-#EEEEEE"></div>
|
||
|
|
<div class="text-14px text-#666 ml-30px w-565px">
|
||
|
|
<div class="mb-20px oppoSans-R flex-y-center">
|
||
|
|
退款金额：￥{{ orderInfo.refundPrice }}
|
||
|
|
<div class="cursors acea-row">
|
||
|
|
<el-tooltip class="box-item" effect="light" placement="bottom-start">
|
||
|
|
<template #content>
|
||
|
|
1. 在线支付，退款金额原路返还；<br />2. 符合退款规则的优惠券，直接退回您已领取优惠券； <br />3.
|
||
|
|
抵扣积分退回与赠送积分扣除，系统自动进行。</template
|
||
|
|
>
|
||
|
|
<el-icon color="#CCCCCC" class="ml-6px"><QuestionFilled /></el-icon>
|
||
|
|
</el-tooltip>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mb-20px oppoSans-R">退款原因：{{ orderInfo.refundReasonWap }}</div>
|
||
|
|
<div class="mb-20px oppoSans-R">
|
||
|
|
备注说明：{{ orderInfo.refundReasonWapExplain ? orderInfo.refundReasonWapExplain : '-' }}
|
||
|
|
</div>
|
||
|
|
<div class="acea-row oppoSans-R">
|
||
|
|
售后凭证：
|
||
|
|
<div v-if="orderInfo.refundReasonWapImg">
|
||
|
|
<el-image
|
||
|
|
v-for="item in orderInfo.refundReasonWapImg.split(',')"
|
||
|
|
:src="item"
|
||
|
|
:preview-src-list="orderInfo.refundReasonWapImg.split(',')"
|
||
|
|
class="cursors w-66px h-66px b-rd-6px mr-10px"
|
||
|
|
></el-image>
|
||
|
|
</div>
|
||
|
|
<div> - </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--商品信息-->
|
||
|
|
<div class="w-100% borRadius bg-#FFF py-30px px-30px mbtom20">
|
||
|
|
<div class="flex-between-center mb-30px">
|
||
|
|
<div class="fontColor333 text-16px">商品信息</div>
|
||
|
|
<div class="text-#999999 font-400 oppoSans-R text-14px">
|
||
|
|
订单号：<span class="text-#333333 font-400 oppoSans-R text-14px">{{ orderInfo.orderNo }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<confirm-product :list="orderInfo" :productType="orderInfo.productType"></confirm-product>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--操作按钮-->
|
||
|
|
<!-- 售后状态：0:待审核 1:商家拒绝 2：退款中 3:已退款 4:用户退货 5:商家待收货 6:已撤销 -->
|
||
|
|
<!-- v-show="orderInfo.refundStatus !== 3 && orderInfo.refundStatus !== 6"-->
|
||
|
|
<div class="w-100% borRadius bg-#FFF py-18px px-30px mbtom20 flex-between-center">
|
||
|
|
<div></div>
|
||
|
|
<div>
|
||
|
|
<el-button round class="w-120px btn" @click="handleChat">联系客服</el-button>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.refundStatus === 0 || orderInfo.refundStatus === 4 || orderInfo.refundStatus === 5"
|
||
|
|
round
|
||
|
|
class="w-120px btn"
|
||
|
|
@click="handleRevokeRefund(orderInfo.refundOrderNo)"
|
||
|
|
>撤销售后</el-button
|
||
|
|
>
|
||
|
|
<el-button
|
||
|
|
v-if="orderInfo.refundStatus === 4 && orderInfo.afterSalesType === 2"
|
||
|
|
round
|
||
|
|
type="primary"
|
||
|
|
class="w-120px btn"
|
||
|
|
@click="handleReturningRefund(orderInfo)"
|
||
|
|
>退回商品</el-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--退回商品-->
|
||
|
|
<returning-goods
|
||
|
|
:returnGoodsType="returnGoodsType"
|
||
|
|
:refundOrderNo="refundOrderNo"
|
||
|
|
:isShowDialog="dialogVisible"
|
||
|
|
@handleSubmitSuccess="handleSubmitSuccess"
|
||
|
|
v-if="dialogVisible"
|
||
|
|
:merchantAddressDetail="merchantAddress"
|
||
|
|
@handleSubmitClose="handleSubmitClose"
|
||
|
|
></returning-goods>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
:deep(.el-step__head.is-success) {
|
||
|
|
--el-color-success: #e93323;
|
||
|
|
}
|
||
|
|
:deep(.el-step__title.is-success) {
|
||
|
|
--el-color-success: #333333;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
height: 44px;
|
||
|
|
line-height: 44px;
|
||
|
|
border-radius: 33px 33px 33px 33px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
</style>
|