@ -3,35 +3,21 @@
<!-- 订单信息 -- >
< el-descriptions title = "订单信息" >
< el-descriptions-item label = "订单号: " > { { formData . no } } < / el-descriptions-item >
< el-descriptions-item label = "配送方式 : " >
< dict-tag :type = "DICT_TYPE.TRADE_DELIVERY_TYPE" :value = "formData.deliveryType!" / >
< / el-descriptions-item >
<!-- TODO 营销活动待实现 -- >
< el-descriptions-item label = "营销活动: " > 秒杀活动 < / el-descriptions-item >
< el-descriptions-item label = "买家 : " > { { formData ? . user ? . nickname } } < / el-descriptions-item >
< el-descriptions-item label = "订单类型: " >
< dict-tag :type = "DICT_TYPE.TRADE_ORDER_TYPE" :value = "formData.type!" / >
< / el-descriptions-item >
< el-descriptions-item label = "收货人: " > { { formData . receiverName } } < / el-descriptions-item >
< el-descriptions-item label = "买家留言: " > { { formData . userRemark } } < / el-descriptions-item >
< el-descriptions-item label = "订单来源: " >
< dict-tag :type = "DICT_TYPE.TERMINAL" :value = "formData.terminal!" / >
< / el-descriptions-item >
< el-descriptions-item label = "联系电话 : " > { { formData . receiverMobile } } < / el-descriptions-item >
< el-descriptions-item label = "买家留言 : " > { { formData . userRemark } } < / el-descriptions-item >
< el-descriptions-item label = "商家备注: " > { { formData . remark } } < / el-descriptions-item >
< el-descriptions-item label = "支付单号: " > { { formData . payOrderId } } < / el-descriptions-item >
< el-descriptions-item label = "付款方式: " >
< dict-tag :type = "DICT_TYPE.PAY_CHANNEL_CODE" :value = "formData.payChannelCode!" / >
< / el-descriptions-item >
<!-- < el-descriptions-item label = "买家: " > { { formData . user . nickname } } < / el-descriptions-item > -- >
<!-- TODO @ puhui999 : 待实现 : 跳转会员 -- >
< el-descriptions-item label = "收货地址: " >
{ { formData . receiverAreaName } } { { formData . receiverDetailAddress } }
< el-link
v -clipboard : copy = "formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
v -clipboard :success = "clipboardSuccess"
icon = "ep:document-copy"
type = "primary"
/ >
< el-descriptions-item label = "推广用户: " v-if = "formData.brokerageUser" >
{{ formData.brokerageUser ? .nickname }}
< / el -descriptions -item >
< / el-descriptions >
@ -45,10 +31,18 @@
调整价格
< / el -button >
< el-button type = "primary" @click ="remark" > 备注 < / el -button >
< el-button v-if = "formData.status! === 10" type="primary" @click="delivery" >
< el-button
v-if = "formData.status! === 10 && formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
type = "primary"
@click ="delivery"
>
发货
< / el-button >
< el-button v-if = "formData.status! === 10" type="primary" @click="updateAddress" >
< el-button
v-if = "formData.status! === 10 && formData.deliveryType === DeliveryTypeEnum.EXPRESS.type"
type = "primary"
@click ="updateAddress"
>
修改地址
< / el-button >
< / el-descriptions-item >
@ -95,64 +89,91 @@
< / el-row >
< / el-descriptions-item >
< / el-descriptions >
< el-descriptions :column = "6 " >
< el-descriptions :column = "4 " >
<!-- 第一层 -- >
< el-descriptions-item label = "商品总额: " >
{ { fenToYuan ( formData . totalPrice ! ) } } 元
{ { fenToYuan ( formData . totalPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item label = "运费金额: " >
{ { fenToYuan ( formData . deliveryPrice ! ) } } 元
{ { fenToYuan ( formData . deliveryPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item label = "订单调价: " >
{ { fenToYuan ( formData . adjustPrice ! ) } } 元
{ { fenToYuan ( formData . adjustPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item v-for = "item in 1" :key="item" label-class-name="no-colon" / >
<!-- 第二层 -- >
< el-descriptions-item >
< template # label > < span style = "color: red" > 商品 优惠: < / span > < / template >
{ { fenToYuan ( formData . couponPrice ! ) } } 元
< template # label > < span style = "color: red" > 优惠劵 优惠: < / span > < / template >
{ { fenToYuan ( formData . couponPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item >
< template # label > < span style = "color: red" > 订单 优惠: < / span > < / template >
{ { fenToYuan ( formData . discount Price! ) } } 元
< template # label > < span style = "color: red" > VIP 优惠: < / span > < / template >
{ { fenToYuan ( formData . vip Price! ) } } 元
< / el-descriptions-item >
< el-descriptions-item >
< template # label > < span style = "color: red" > 活动优惠 : < / span > < / template >
{ { fenToYuan ( formData . discountPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item >
< template # label > < span style = "color: red" > 积分抵扣 : < / span > < / template >
{ { fenToYuan ( formData . pointPrice ! ) } } 元
{ { fenToYuan ( formData . pointPrice ! ) } } 元
< / el-descriptions-item >
< el-descriptions-item v-for = "item in 5 " :key="item" label-class-name="no-colon" / >
<!-- 占位 -- >
<!-- 第三层 -- >
< el-descriptions-item v-for = "item in 3 " :key="item" label-class-name="no-colon" / >
< el-descriptions-item label = "应付金额: " >
{ { fenToYuan ( formData . payPrice ! ) } } 元
{ { fenToYuan ( formData . payPrice ! ) } } 元
< / el-descriptions-item >
< / el-descriptions >
<!-- TODO 芋艿 : 需要改改 -- >
< el-descriptions :column = "4" title = "物流 信息" >
< el-descriptions-item label = "物流公司 : " >
{ { deliveryExpressList . find ( ( item ) => item . id === formData . logisticsId ) ? . name } }
< / el-descriptions-item >
< el-descriptions-item label = "运单号: " > { { formData . logisticsNo } } < / el-descriptions-item >
< el-descriptions-item label = "发货时间: " >
{ { formatDate ( formData . deliveryTime ! ) } }
< / el-descriptions-item >
< el-descriptions-item label = "物流状态: " >
<!-- TODO 物流状态怎么获取 ? -- >
< dict-tag :type = "DICT_TYPE.TRADE_ORDER_STATUS" :value = "formData.deliveryStatus!" / >
< / el-descriptions-item >
<!-- 占位 4 -- >
< el-descriptions-item v-for = "item in 4" :key="item" label-class-name="no-colon" / >
< el-descriptions-item label = "物流详情: " >
< el-timeline >
< el-timeline-item
v-for = "(express, index) in expressTrackList"
:key = "index"
:timestamp = "formatDate(express.time)"
>
{ { express . content } }
< / el-timeline-item >
< / el-timeline >
<!-- 物流信息 -- >
< el-descriptions :column = "4" title = "收货 信息" >
< el-descriptions-item label = "配送方式 : " >
< dict-tag :type = "DICT_TYPE.TRADE_DELIVERY_TYPE" :value = "formData.deliveryType!" / >
< / el-descriptions-item >
< el-descriptions-item label = "收货人: " > { { formData . receiverName } } < / el-descriptions-item >
< el-descriptions-item label = "联系电话: " > { { formData . receiverMobile } } < / el-descriptions-item >
<!-- 快递配送 -- >
< div v-if = "formData.deliveryType === DeliveryTypeEnum.EXPRESS.type" >
< el -descriptions -item label = "收货地址: " v-if = "formData.receiverDetailAddress" >
{{ formData.receiverAreaName }} {{ formData.receiverDetailAddress }}
< el -link
v -clipboard : copy = "formData.receiverAreaName + ' ' + formData.receiverDetailAddress"
v -clipboard :success = "clipboardSuccess"
icon = "ep:document-copy"
type = "primary"
/ >
< / el-descriptions-item >
< el-descriptions-item label = "物流公司: " v-if = "formData.logisticsId" >
{{ deliveryExpressList.find ( ( item ) = > item . id === formData . logisticsId ) ? . name } }
< / el-descriptions-item >
< el-descriptions-item label = "运单号: " v-if = "formData.logisticsId" >
{{ formData.logisticsNo }}
< / el -descriptions -item >
< el-descriptions-item label = "发货时间: " v-if = "formatDate.deliveryTime" >
{{ formatDate ( formData.deliveryTime ) }}
< / el -descriptions -item >
< el-descriptions-item v-for = "item in 2" :key="item" label-class-name="no-colon" / >
< el-descriptions-item label = "物流详情: " v-if = "expressTrackList.length > 0" >
< el -timeline >
< el-timeline-item
v-for = "(express, index) in expressTrackList"
:key = "index"
:timestamp = "formatDate(express.time)"
>
{ { express . content } }
< / el-timeline-item >
< / el-timeline >
< / el-descriptions-item >
< / div >
<!-- 自提门店 -- >
< div v-if = "formData.deliveryType === DeliveryTypeEnum.PICK_UP.type" >
< el -descriptions -item label = "自提门店: " v-if = "formData.pickUpStoreId" >
{{ pickUpStore.name }}
< / el -descriptions -item >
< / div >
< / el-descriptions >
<!-- 订单日志 -- >
< el-descriptions title = "订单操作日志" >
< el-descriptions-item labelClassName = "no-colon" >
< el-timeline >
@ -196,6 +217,8 @@ import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAdd
import OrderUpdatePriceForm from '@/views/mall/trade/order/form/OrderUpdatePriceForm.vue'
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DeliveryTypeEnum } from '@/utils/constants'
import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
defineOptions ( { name : 'TradeOrderDetail' } )
@ -271,10 +294,20 @@ const clipboardSuccess = () => {
/** 初始化 **/
const deliveryExpressList = ref ( [ ] ) // 物流公司
const expressTrackList = ref ( [ ] ) // 物流详情
const pickUpStore = ref ( { } ) // 自提门店
onMounted ( async ( ) => {
await getDetail ( )
deliveryExpressList . value = await DeliveryExpressApi . getSimpleDeliveryExpressList ( )
expressTrackList . value = await TradeOrderApi . getExpressTrackList ( formData . value . id ! )
// 如果配送方式为快递,则查询物流公司
if ( formData . value . deliveryType === DeliveryTypeEnum . EXPRESS . type ) {
deliveryExpressList . value = await DeliveryExpressApi . getSimpleDeliveryExpressList ( )
if ( form . value . logisticsId ) {
expressTrackList . value = await TradeOrderApi . getExpressTrackList ( formData . value . id ! )
}
} else if ( formData . value . deliveryType === DeliveryTypeEnum . PICK _UP . type ) {
pickUpStore . value = await DeliveryPickUpStoreApi . getDeliveryPickUpStore (
formData . value . pickUpStoreId
)
}
} )
< / script >
< style lang = "scss" scoped >
@ -312,7 +345,7 @@ onMounted(async () => {
// 时间线样式调整
: deep ( . el - timeline ) {
margin : 10 px 0 px 0 px 160 px ;
margin : 10 px 0 0 160 px ;
. el - timeline - item _ _wrapper {
position : relative ;