Skip to content

phsl / admin

Go to a project
Commit 4fddbcce by YunaiV
Options

trade：完善订单详情

parent 588ce1c9
Showing with 126 additions and 72 deletions
src/api/mall/trade/order/index.ts
......@@ -41,15 +41,22 @@ export interface OrderVO {
refundPrice?: number | null // 退款金额
couponId?: number | null // 优惠劵编号
couponPrice?: number | null // 优惠劵减免金额
vipPrice?: number | null // VIP 减免金额
pointPrice?: number | null // 积分抵扣的金额
receiverAreaName?: string //收件人地区名字
items?: OrderItemRespVO[] // 订单项列表
// 用户信息
// 下单用户信息
user?: {
id?: number | null
nickname?: string
avatar?: string
}
// 推广用户信息
brokerageUser?: {
id?: number | null
nickname?: string
avatar?: string
}
// 订单操作日志
logs?: OrderLogRespVO[]
}
......@@ -114,21 +121,21 @@ export interface DeliveryVO {
}
// 订单发货
export const delivery = async (data: DeliveryVO) => {
export const deliveryOrder = async (data: DeliveryVO) => {
return await request.put({ url: `/trade/order/delivery`, data })
}
// 订单备注
export const updateRemark = async (data: any) => {
export const updateOrderRemark = async (data: any) => {
return await request.put({ url: `/trade/order/update-remark`, data })
}
// 订单调价
export const updatePrice = async (data: any) => {
export const updateOrderPrice = async (data: any) => {
return await request.put({ url: `/trade/order/update-price`, data })
}
// 修改订单地址
export const updateAddress = async (data: any) => {
export const updateOrderAddress = async (data: any) => {
return await request.put({ url: `/trade/order/update-address`, data })
}
src/utils/constants.ts
......@@ -375,3 +375,17 @@ export const BrokerageWithdrawTypeEnum = {
name: '支付宝'
}
}
/**
* 配送方式枚举
*/
export const DeliveryTypeEnum = {
EXPRESS: {
type: 1,
name: '快递发货'
},
PICK_UP: {
type: 2,
name: '到店自提'
}
}
src/views/mall/trade/order/detail/index.vue
......@@ -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.discountPrice!) }}元
<template #label><span style="color: red">VIP 优惠: </span></template>
{{ fenToYuan(formData.vipPrice!) }} 元
</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: 10px 0px 0px 160px;
margin: 10px 0 0 160px;
.el-timeline-item__wrapper {
position: relative;
......
src/views/mall/trade/order/form/OrderDeliveryForm.vue
......@@ -54,7 +54,7 @@ const open = async (row: TradeOrderApi.OrderVO) => {
resetForm()
// 设置数据
copyValueToTarget(formData.value, row)
if (row.logisticsId === null || row.logisticsId === 0) {
if (row.logisticsId === 0) {
expressType.value = 'none'
}
dialogVisible.value = true
......@@ -73,7 +73,7 @@ const submitForm = async () => {
data.logisticsId = 0
data.logisticsNo = ''
}
await TradeOrderApi.delivery(data)
await TradeOrderApi.deliveryOrder(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
......
src/views/mall/trade/order/form/OrderUpdateAddressForm.vue
......@@ -69,7 +69,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = unref(formData)
await TradeOrderApi.updateAddress(data)
await TradeOrderApi.updateOrderAddress(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
......
src/views/mall/trade/order/form/OrderUpdatePriceForm.vue
......@@ -69,7 +69,7 @@ const submitForm = async () => {
data.adjustPrice = convertToInteger(data.adjustPrice)
delete data.payPrice
delete data.newPayPrice
await TradeOrderApi.updatePrice(data)
await TradeOrderApi.updateOrderPrice(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
......
src/views/mall/trade/order/form/OrderUpdateRemarkForm.vue
......@@ -49,7 +49,7 @@ const submitForm = async () => {
formLoading.value = true
try {
const data = unref(formData)
await TradeOrderApi.updateRemark(data)
await TradeOrderApi.updateOrderRemark(data)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment