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.
297 lines
12 KiB
297 lines
12 KiB
<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>
|
|
|