Skip to content

phsl / admin

Go to a project
Commit 8a51c9c7 by puhui999
Options

订单售后列表：初始化售后详情

parent 4f814686
Showing with 245 additions and 21 deletions
src/api/mall/trade/afterSale/index.ts
...@@ -40,15 +40,12 @@ export interface ProductPropertiesVO { ...@@ -40,15 +40,12 @@ export interface ProductPropertiesVO {
valueName?: string // 属性值的名称 valueName?: string // 属性值的名称
} }
// 获得交易售后
export function getAfterSale(id) {
return request({
url: '/trade/after-sale/get?id=' + id,
method: 'get'
})
}
// 获得交易售后分页 // 获得交易售后分页
export const getAfterSalePage = async (params) => { export const getAfterSalePage = async (params) => {
return await request.get({ url: `/trade/after-sale/page`, params }) return await request.get({ url: `/trade/after-sale/page`, params })
} }
// 获得交易售后详情
export const getAfterSale = async (id) => {
return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
}
src/router/modules/remaining.ts
...@@ -401,10 +401,16 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -401,10 +401,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
}, },
children: [ children: [
{ {
path: 'detail/:orderId(\\d+)', path: 'orderDetail/:orderId(\\d+)',
component: () => import('@/views/mall/trade/order/detail/index.vue'), component: () => import('@/views/mall/trade/order/detail/index.vue'),
name: 'TradeOrderDetail', name: 'TradeOrderDetail',
meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' } meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
},
{
path: 'afterSaleDetail/:orderId(\\d+)',
component: () => import('@/views/mall/trade/afterSale/detail/index.vue'),
name: 'TradeAfterSaleDetail',
meta: { title: '退款详情', icon: '', activeMenu: '/trade/trade/after-sale' }
} }
] ]
}, },
......
src/views/mall/trade/afterSale/detail/index.vue 0 → 100644
<template>
<ContentWrap>
<!-- 订单信息 -->
<el-descriptions title="退款订单信息">
<el-descriptions-item label="订单号: ">{{ orderInfo.orderNo }}</el-descriptions-item>
<el-descriptions-item label="配送方式: ">
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.order.deliveryType" />
</el-descriptions-item>
<el-descriptions-item label="订单类型: ">
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderInfo.order.type" />
</el-descriptions-item>
<el-descriptions-item label="收货人: ">
{{ orderInfo.order.receiverName }}
</el-descriptions-item>
<el-descriptions-item label="买家留言: ">
{{ orderInfo.order.userRemark }}
</el-descriptions-item>
<el-descriptions-item label="订单来源: ">
<dict-tag :type="DICT_TYPE.TERMINAL" :value="orderInfo.order.terminal" />
</el-descriptions-item>
<el-descriptions-item label="联系电话: ">
{{ orderInfo.order.receiverMobile }}
</el-descriptions-item>
<el-descriptions-item label="商家备注: ">{{ orderInfo.order.remark }}</el-descriptions-item>
<el-descriptions-item label="支付单号: ">
{{ orderInfo.order.payOrderId }}
</el-descriptions-item>
<el-descriptions-item label="付款方式: ">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.order.payChannelCode" />
</el-descriptions-item>
<!-- TODO 芋艿：待实现：跳转会员 -->
<!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
</el-descriptions>
<!-- 售后信息 -->
<el-descriptions title="售后信息">
<el-descriptions-item label="退款编号: ">{{ orderInfo.no }}</el-descriptions-item>
<el-descriptions-item label="申请时间: ">
{{ formatDate(orderInfo.auditTime) }}
</el-descriptions-item>
<!-- TODO 营销活动待实现 -->
<el-descriptions-item label="售后类型: ">
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderInfo.type" />
</el-descriptions-item>
<el-descriptions-item label="售后方式: ">
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderInfo.way" />
</el-descriptions-item>
<el-descriptions-item label="退款金额: ">{{ orderInfo.refundPrice }}</el-descriptions-item>
<el-descriptions-item label="退款原因: ">{{ orderInfo.applyReason }}</el-descriptions-item>
<el-descriptions-item label="补充描述: ">
{{ orderInfo.applyDescription }}
</el-descriptions-item>
<el-descriptions-item label="凭证图片: "> {{ orderInfo.applyPicUrls }}</el-descriptions-item>
</el-descriptions>
<!-- 退款状态 -->
<el-descriptions :column="1" title="退款状态">
<el-descriptions-item label="退款状态: ">
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderInfo.status" />
</el-descriptions-item>
<el-descriptions-item label-class-name="no-colon">
<el-button type="primary" @click="openForm('agree')">同意售后</el-button>
<el-button type="primary" @click="openForm('disagree')">拒绝售后</el-button>
<el-button type="primary" @click="openForm('receive')">确认收货</el-button>
<el-button type="primary" @click="openForm('refuse')">拒绝收货</el-button>
<el-button type="primary" @click="openForm('refund')">确认退款</el-button>
<el-button type="primary" @click="openForm('update-refunded')">
更新售后订单为已退款
</el-button>
</el-descriptions-item>
<el-descriptions-item>
<template #label><span style="color: red">提醒: </span></template>
如果未发货，请点击同意退款给买家。<br />
如果实际已发货，请主动与买家联系。<br />
如果订单整体退款后，优惠券和余额会退还给买家.
</el-descriptions-item>
</el-descriptions>
<!-- 商品信息 -->
<el-descriptions title="商品信息">
<el-descriptions-item labelClassName="no-colon">
<el-row :gutter="20">
<el-col :span="15">
<el-table :data="orderInfo.items" border>
<el-table-column label="商品" prop="spuName" width="auto">
<template #default="{ row }">
{{ row.spuName }}
<el-tag v-for="property in row.properties" :key="property.propertyId">
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="商品原价" prop="price" width="150">
<template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
</el-table-column>
<el-table-column label="数量" prop="count" width="100" />
<el-table-column label="合计" prop="payPrice" width="150">
<template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
</el-table-column>
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
<template #default="{ row }">
<dict-tag
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
:value="row.afterSaleStatus"
/>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="10" />
</el-row>
</el-descriptions-item>
</el-descriptions>
<!-- 售后信息 -->
<el-descriptions title="售后日志" />
</ContentWrap>
</template>
<script lang="ts" setup>
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
import { floatToFixed2 } from '@/utils'
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'TradeOrderDetailForm' })
const { params } = useRoute() // 查询参数
const orderInfo = ref({
order: {}
})
/** 获得详情 */
const getDetail = async () => {
const id = params.orderId as unknown as number
if (id) {
const res = (await AfterSaleApi.getAfterSale(id)) as AfterSaleApi.TradeAfterSaleVO
orderInfo.value = res
}
}
const openForm = (type: string) => {
switch (type) {
case 'agree':
break
case 'disagree':
break
case 'receive':
break
case 'refuse':
break
case 'refund':
break
case 'update-refunded':
break
}
}
onMounted(async () => {
await getDetail()
})
</script>
<style lang="scss" scoped>
:deep(.el-descriptions) {
&:not(:nth-child(1)) {
margin-top: 20px;
}
.el-descriptions__title {
display: flex;
align-items: center;
&::before {
display: inline-block;
width: 3px;
height: 20px;
margin-right: 10px;
background-color: #409eff;
content: '';
}
}
.el-descriptions-item__container {
margin: 0 10px;
.no-colon {
margin: 0;
&::after {
content: '';
}
}
}
}
</style>
src/views/mall/trade/afterSale/index.vue
...@@ -91,19 +91,32 @@ ...@@ -91,19 +91,32 @@
</el-tabs> </el-tabs>
<!-- 列表 --> <!-- 列表 -->
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column align="center" label="退款编号" prop="no" /> <el-table-column align="center" label="退款编号" min-width="200" prop="no" />
<el-table-column align="center" label="订单编号" prop="orderNo" /> <el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
<!-- TODO 芋艿：未来要加个订单链接 --> <template #default="{ row }">
<el-table-column align="center" label="商品信息" min-width="300" prop="spuName" width="auto"> <el-button link type="primary" @click="openOrderDetail(row.orderId)">
<!-- TODO @小红：样式不太对，辛苦改改 --> {{ row.orderNo }}
<!-- <div v-slot="{ row }" class="goods-info">--> </el-button>
<!-- <img :src="row.picUrl"/>--> </template>
<!-- <span class="ellipsis-2" :title="row.name">{{row.name}}</span>--> </el-table-column>
<!-- </div>--> <el-table-column label="商品信息" min-width="600" prop="spuName">
<template #default="{ row }">
<div class="flex items-center">
<el-image
:src="row.picUrl"
class="w-30px h-30px mr-10px"
@click="imagePreview(row.picUrl)"
/>
<span class="mr-10px">{{ row.spuName }}</span>
<el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
{{ property.propertyName }}: {{ property.valueName }}
</el-tag>
</div>
</template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="订单金额" prop="refundPrice"> <el-table-column align="center" label="订单金额" prop="refundPrice">
<template #default="scope"> <template #default="scope">
<span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span> <span>{{ floatToFixed2(scope.row.refundPrice) }}元</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="买家" prop="user.nickname" /> <el-table-column align="center" label="买家" prop="user.nickname" />
...@@ -124,8 +137,8 @@ ...@@ -124,8 +137,8 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="160"> <el-table-column align="center" fixed="right" label="操作" width="160">
<template #default> <template #default="{ row }">
<el-button icon="el-icon-thumb" link type="primary">处理退款</el-button> <el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -142,11 +155,20 @@ ...@@ -142,11 +155,20 @@
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index' import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
import { TabsPaneContext } from 'element-plus' import { TabsPaneContext } from 'element-plus'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import { floatToFixed2 } from '@/utils'
defineOptions({ name: 'TradeAfterSale' }) defineOptions({ name: 'TradeAfterSale' })
const { push } = useRouter() // 路由跳转
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据 const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
...@@ -202,6 +224,15 @@ const tabClick = async (tab: TabsPaneContext) => { ...@@ -202,6 +224,15 @@ const tabClick = async (tab: TabsPaneContext) => {
await getList() await getList()
} }
/** 处理退款 */
const openAfterSaleDetail = (id: number) => {
push({ name: 'TradeAfterSaleDetail', params: { orderId: id } })
}
/** 查看订单详情 */
const openOrderDetail = (id: number) => {
push({ name: 'TradeOrderDetail', params: { orderId: id } })
}
onMounted(async () => { onMounted(async () => {
await getList() await getList()
// 设置 statuses 过滤 // 设置 statuses 过滤
......
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