497 lines
13 KiB
Vue
497 lines
13 KiB
Vue
<template>
|
||
<layout class="orderInfo">
|
||
<uv-navbar
|
||
:fixed="false"
|
||
title="售后订单详情"
|
||
left-arrow
|
||
@leftClick="goBack"
|
||
/>
|
||
<view v-if="orderInfoData">
|
||
<view class="orderInfo-header background-warp" :class="orderInfoData.state === 0 && 'mb-100'">
|
||
<view class="background">
|
||
<image
|
||
class="image"
|
||
src="https://b2c-pro-static-dev.zkthink.com/static/images/refund-order-bg.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="background-content page-space">
|
||
<view class="order-status-info">
|
||
<view class="order-status" :class="'order-status-'+ orderInfoData.state">
|
||
<view>
|
||
<!-- {{ orderInfoStatusMsg }}-->
|
||
{{refundOrderStatus[orderInfoData.state]}}
|
||
</view>
|
||
</view>
|
||
<view class="order-date" v-if="parseInt(orderInfoData.remainTime) > 0 && ![3,4].includes(orderInfoData.state)">
|
||
还剩{{remainTimeStr}}自动确认
|
||
</view>
|
||
</view>
|
||
<!-- <view class="address noBorder">-->
|
||
<!-- <view class="address-icon">-->
|
||
<!-- <image-->
|
||
<!-- class="image"-->
|
||
<!-- src="https://b2c-pro-static-dev.zkthink.com/static/images/icon-location.png"-->
|
||
<!-- />-->
|
||
<!-- </view>-->
|
||
<!-- <view class="address-main">-->
|
||
<!-- <view class="address-header">-->
|
||
<!-- <view class="address-name">{{ orderInfoData.realName }}</view>-->
|
||
<!-- <view class="address-phone">{{ orderInfoData.userPhone }}</view>-->
|
||
<!-- </view>-->
|
||
<!-- <view class="address-content">-->
|
||
<!-- <view class="address-desc">{{ orderInfoData.userAddress }}</view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
</view>
|
||
<view class="page-space">
|
||
<view class="mb-20 card" v-if="orderInfoData.realName">
|
||
<view class="card-head">
|
||
<view class="card-title">
|
||
商家收货信息
|
||
</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<view class="infos">
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
收货人
|
||
</view>
|
||
<view class="info-cell-value">
|
||
<view class="address-name">{{ orderInfoData.realName }}</view>
|
||
<view class="address-phone">{{ orderInfoData.userPhone }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
地<text class="wem1"></text>址
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.userAddress }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mb-20 card" v-if="orderInfoData.deliverySn">
|
||
<view class="card-head">
|
||
<view class="card-title">
|
||
物流信息
|
||
</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<view class="infos">
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
物流单号
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.deliverySn }}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
物流公司
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.deliveryName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-goods page-card mb-20">
|
||
<goods
|
||
list
|
||
interval
|
||
desc="3"
|
||
showAction
|
||
model
|
||
:purchase="item.cartNum"
|
||
:data="item.productInfo"
|
||
:price="item.truePrice"
|
||
v-for="(item, index) in orderInfoData.cartInfo"
|
||
>
|
||
</goods>
|
||
<view class="order-infos infos mb-20 infos-right border-top">
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">商品总价：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.totalPrice }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">优惠：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.couponPrice }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">运费：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.totalPostage }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">总计：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.payPrice.toFixed(2) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mb-20 card">
|
||
<view class="card-head">
|
||
<view class="card-title">
|
||
售后信息
|
||
</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<view class="infos">
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
退款金额
|
||
</view>
|
||
<view class="info-cell-value">
|
||
¥{{ orderInfoData.refundAmount.toFixed(2) }}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
服务类型
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.serviceType===0?'仅退款':'退货退款' }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="info-cell"
|
||
>
|
||
<view class="info-cell-label">
|
||
订单编号
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.orderId }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="info-cell"
|
||
>
|
||
<view class="info-cell-label">
|
||
退款原因
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ orderInfoData.reasons }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="info-cell"
|
||
>
|
||
<view class="info-cell-label">
|
||
详细说明
|
||
</view>
|
||
<view class="info-cell-value">
|
||
<view>{{ orderInfoData.explains }}</view>
|
||
<view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="mb-20 card"
|
||
v-if="orderInfoData.status > 1"
|
||
>
|
||
<view class="card-head">
|
||
<view class="card-title">
|
||
物流信息
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="card-content "
|
||
v-if="expressData"
|
||
>
|
||
<view class="paddingH-10">
|
||
<uv-steps
|
||
current="0"
|
||
direction="column"
|
||
activeColor="#EE6D46"
|
||
inactiveColor="#E5E5E5"
|
||
>
|
||
<uv-steps-item
|
||
v-for="(item, index) in expressData"
|
||
:key="index"
|
||
:title="item.acceptStation"
|
||
:desc="item.acceptTime"
|
||
></uv-steps-item>
|
||
</uv-steps>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-bar-bg"></view>
|
||
|
||
<view
|
||
class="order-actions bottom-bar"
|
||
>
|
||
<!-- 已发货 待收货 -->
|
||
<view class="order-actions-left">
|
||
</view>
|
||
<view class="order-actions-btns">
|
||
<view
|
||
class="order-actions-default"
|
||
@tap="showModal(0)"
|
||
v-if="[3,4].includes(orderInfoData.state)"
|
||
>
|
||
删除记录
|
||
</view>
|
||
<view
|
||
class="order-actions-default"
|
||
@tap="showModal(1)"
|
||
v-if="[0,1].includes(orderInfoData.state)"
|
||
>
|
||
撤销申请
|
||
</view>
|
||
<view
|
||
class="order-actions-default"
|
||
@tap="toRefund"
|
||
v-if="orderInfoData.state === 5"
|
||
>
|
||
再次申请
|
||
</view>
|
||
<view
|
||
class="order-actions-default"
|
||
@tap="toAddLogistics"
|
||
v-if="orderInfoData.state === 1"
|
||
>
|
||
填写物流
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</layout>
|
||
<Modal ref="modalRef" :content="modalTitle" @confirm="confirmModal" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, unref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useMainStore } from '@/store/store'
|
||
import { formatDate } from '@/utils/utils'
|
||
import {
|
||
orderCancel,
|
||
checkForAfterSalesInfo,
|
||
orderTake,
|
||
orderDelete,
|
||
orderExpress,
|
||
afterSalesOrderDelete, afterSalesOrderRevoke
|
||
} from '@/api/order'
|
||
import { orderReStatus } from '@/config'
|
||
import { useRouter } from "@/hooks/useRouter";
|
||
import {useGlobalProperties} from "@/hooks";
|
||
import { formatRemainTime } from '@/utils/utils'
|
||
import Modal from "@/components/Modal/index.vue";
|
||
const {$timeFormat} = useGlobalProperties()
|
||
|
||
const {getParams,push,goBack} = useRouter()
|
||
|
||
const orderInfoData = ref(null)
|
||
const orderInfoStatusMsg = ref('')
|
||
const expressData = ref(null)
|
||
const id = ref(0)
|
||
const orderId = ref(0)
|
||
const remainTimeStr = ref('')
|
||
const refundOrderStatus = ref({
|
||
0: '请耐心等待平台审核',
|
||
1: '平台已同意退货申请，请尽早退货',
|
||
2: '请耐心等待平台确认收货',
|
||
3: '退款成功',
|
||
4: '用户已取消',
|
||
5: '商家已拒绝',
|
||
})
|
||
|
||
|
||
const handleOrderInfo = async (option) => {
|
||
const res = await checkForAfterSalesInfo(option)
|
||
orderInfoData.value = res
|
||
remainTimeStr.value = formatRemainTime(orderInfoData.value.remainTime)
|
||
}
|
||
|
||
const modalRef = ref()
|
||
const modalType = ref(0) // 0删除记录 1撤销申请
|
||
const modalTitle = computed(()=>{
|
||
const tipsArr = ['确认删除记录吗？','确认撤销申请吗？']
|
||
return tipsArr[modalType.value]
|
||
})
|
||
|
||
/**
|
||
* 打开弹窗
|
||
* @param {number} type 0删除记录 1撤销申请
|
||
*/
|
||
function showModal(type){
|
||
modalType.value = type
|
||
unref(modalRef).show()
|
||
}
|
||
|
||
/**
|
||
* 确认弹窗
|
||
*/
|
||
function confirmModal(){
|
||
const funcArr = [doDeleteRequest,doRevoke]
|
||
funcArr[modalType.value]()
|
||
}
|
||
|
||
/**
|
||
* 确认删除
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function doDeleteRequest(){
|
||
await afterSalesOrderDelete({
|
||
id: id.value,
|
||
orderCode: orderInfoData.value.orderId
|
||
})
|
||
uni.showToast({
|
||
title: '已删除',
|
||
duration: 2000
|
||
});
|
||
setTimeout(()=>{
|
||
toRefundList()
|
||
},2000)
|
||
}
|
||
|
||
/**
|
||
* 确认撤销
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async function doRevoke(){
|
||
await afterSalesOrderRevoke({
|
||
id: id.value,
|
||
key: orderInfoData.value.orderId
|
||
})
|
||
uni.showToast({
|
||
title: '已撤销',
|
||
duration: 2000
|
||
});
|
||
setTimeout(()=>{
|
||
toRefundList()
|
||
},2000)
|
||
}
|
||
|
||
// 跳转列表
|
||
const toRefundList = () => {
|
||
push({url: '/pages/refundList/refundList'})
|
||
}
|
||
|
||
// 填写物流
|
||
const toAddLogistics = () => {
|
||
push({url: '/pages/addLogistics/addLogistics'}, {
|
||
data: {
|
||
id: orderInfoData.value.id,
|
||
orderCode: orderInfoData.value.orderCode
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
// 再次申请
|
||
const toRefund = () => {
|
||
push({url: '/pages/refund/refund'}, {
|
||
data: {
|
||
refundType: orderInfoData.value.serviceType,
|
||
goods: orderInfoData.value.cartInfo.map(v=>{
|
||
return v.productAttrUnique
|
||
}).toString(),
|
||
id: orderId.value
|
||
}
|
||
})
|
||
}
|
||
|
||
onLoad((options) => {
|
||
const params = getParams(options)
|
||
id.value = params.id
|
||
orderId.value = params.orderId
|
||
handleOrderInfo({
|
||
key: params.id
|
||
})
|
||
})
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.orderList {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.page-space{
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.order-header {}
|
||
|
||
.order-status-info {
|
||
padding: 50rpx 0;
|
||
|
||
|
||
.order-status {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 42rpx;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 50rpx;
|
||
background-size: 40rpx 40rpx;
|
||
background-position: left center;
|
||
background-repeat: no-repeat;
|
||
&.order-status-0,&.order-status-1,&.order-status-2,&.order-status-5{
|
||
background-image: url("https://b2c-pro-static-dev.zkthink.com/static/images/icon-order-info-5.png");
|
||
}
|
||
&.order-status-3,&.order-status-4{
|
||
background-image: url("https://b2c-pro-static-dev.zkthink.com/static/images/icon-order-info-4.png");
|
||
}
|
||
.image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.order-date {
|
||
height: 33rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.order-infos {
|
||
margin: 0 40rpx;
|
||
padding: 40rpx 0 20rpx;
|
||
|
||
&:after {
|
||
content: '';
|
||
}
|
||
}
|
||
|
||
.infos{
|
||
.info-cell-label{
|
||
.wem1{
|
||
width: 1em;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.info-cell-value{
|
||
display: flex;
|
||
}
|
||
}
|
||
</style>
|