Skip to content

phsl / admin

Go to a project
Commit 70778fd9 by puhui999
Options

UserOrderList 重构完善

parent 5270c838
Showing with 105 additions and 230 deletions
src/views/member/user/detail/UserOrderList.vue
...@@ -74,7 +74,11 @@ ...@@ -74,7 +74,11 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="queryParams.deliveryType === 1" label="快递公司"> <el-form-item
v-if="queryParams.deliveryType === DeliveryTypeEnum.EXPRESS.type"
label="快递公司"
prop="logisticsId"
>
<el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部"> <el-select v-model="queryParams.logisticsId" class="!w-280px" clearable placeholder="全部">
<el-option <el-option
v-for="item in deliveryExpressList" v-for="item in deliveryExpressList"
...@@ -84,7 +88,11 @@ ...@@ -84,7 +88,11 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="queryParams.deliveryType === 2" label="自提门店"> <el-form-item
v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
label="自提门店"
prop="pickUpStoreId"
>
<el-select <el-select
v-model="queryParams.pickUpStoreId" v-model="queryParams.pickUpStoreId"
class="!w-280px" class="!w-280px"
...@@ -100,27 +108,45 @@ ...@@ -100,27 +108,45 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- TODO 聚合搜索等售后结束后实现--> <el-form-item
<!-- <el-form-item label="聚合搜索">--> v-if="queryParams.deliveryType === DeliveryTypeEnum.PICK_UP.type"
<!-- <el-input--> label="核销码"
<!-- v-show="true"--> prop="pickUpVerifyCode"
<!-- v-model="queryType.v"--> >
<!-- class="!w-280px"--> <el-input
<!-- clearable--> v-model="queryParams.pickUpVerifyCode"
<!-- placeholder="请输入"--> class="!w-280px"
<!-- >--> clearable
<!-- <template #prepend>--> placeholder="请输入自提核销码"
<!-- <el-select v-model="queryType.k" class="!w-110px" clearable placeholder="全部">--> @keyup.enter="handleQuery"
<!-- <el-option--> />
<!-- v-for="dict in searchList"--> </el-form-item>
<!-- :key="dict.value"--> <el-form-item label="聚合搜索">
<!-- :label="dict.label"--> <el-input
<!-- :value="dict.value"--> v-show="true"
<!-- />--> v-model="queryParams[queryType.queryParam]"
<!-- </el-select>--> class="!w-280px"
<!-- </template>--> clearable
<!-- </el-input>--> placeholder="请输入"
<!-- </el-form-item>--> >
<template #prepend>
<el-select
v-model="queryType.queryParam"
class="!w-110px"
clearable
placeholder="全部"
@change="inputChangeSelect"
>
<el-option
v-for="dict in dynamicSearchList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"> <el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" /> <Icon class="mr-5px" icon="ep:search" />
...@@ -137,143 +163,14 @@ ...@@ -137,143 +163,14 @@
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column class-name="order-table-col"> <OrderTableColumn :list="list" :pick-up-store-list="pickUpStoreList">
<template #header> <template #default="{ row }">
<!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 --> <el-button link type="primary" @click="openDetail(row.id)">
<div class="flex items-center" style="width: 100%"> <Icon icon="ep:notification" />
<div class="ml-100px mr-200px">商品信息</div> 详情
<div class="mr-60px">单价(元)/数量</div> </el-button>
<div class="mr-60px">售后状态</div>
<div class="mr-60px">实付金额(元)</div>
<div class="mr-60px">买家/收货人</div>
<div class="mr-60px">配送方式</div>
<div class="mr-60px">订单状态</div>
<div class="mr-60px">操作</div>
</div>
</template>
<template #default="scope">
<el-table
:border="true"
:data="scope.row.items"
:header-cell-style="headerStyle"
:span-method="spanMethod"
style="width: 100%"
>
<el-table-column min-width="300" prop="spuName">
<template #header>
<div
class="flex items-center"
style="width: 100%; height: 35px; background-color: #f7f7f7"
>
<span class="mr-20px">订单号：{{ scope.row.no }} </span>
<span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
<span>订单来源：</span>
<dict-tag
:type="DICT_TYPE.TERMINAL"
:value="scope.row.terminal"
class="mr-20px"
/>
<span>支付方式：</span>
<dict-tag
v-if="scope.row.payChannelCode"
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="scope.row.payChannelCode"
class="mr-20px"
/>
<v-else v-else class="mr-20px">未支付</v-else>
<span v-if="scope.row.payTime" class="mr-20px">
支付时间：{{ formatDate(scope.row.payTime) }}
</span>
<span>订单类型：</span>
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
</div>
</template>
<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 label="商品原价*数量" prop="price" width="150">
<template #default="{ row }">
{{ floatToFixed2(row.price) }} 元 / {{ row.count }}
</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-column align="center" label="实际支付" min-width="120" prop="payPrice">
<template #default>
{{ floatToFixed2(scope.row.payPrice) + '元' }}
</template>
</el-table-column>
<el-table-column label="买家/收货人" min-width="160">
<template #default>
<!-- 快递发货 -->
<div v-if="scope.row.deliveryType === 1" class="flex flex-col">
<span>买家：{{ scope.row.user.nickname }}</span>
<span>
收货人：{{ scope.row.receiverName }} {{ scope.row.receiverMobile }}
{{ scope.row.receiverAreaName }} {{ scope.row.receiverDetailAddress }}
</span>
</div>
<!-- 自提 -->
<div v-if="scope.row.deliveryType === 2" class="flex flex-col">
<span>
门店名称：
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.name }}
</span>
<span>
门店手机：
{{ pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.phone }}
</span>
<span>
自提门店:
{{
pickUpStoreList.find((p) => p.id === scope.row.pickUpStoreId)?.detailAddress
}}
</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="配送方式" width="120">
<template #default>
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="scope.row.deliveryType" />
</template>
</el-table-column>
<el-table-column align="center" label="订单状态" width="120">
<template #default>
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="160">
<template #default>
<el-button link type="primary" @click="openDetail(scope.row.id)">
<Icon icon="ep:notification" />
详情
</el-button>
</template>
</el-table-column>
</el-table>
</template> </template>
</el-table-column> </OrderTableColumn>
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<Pagination <Pagination
...@@ -284,66 +181,82 @@ ...@@ -284,66 +181,82 @@
/> />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import * as OrderApi from '@/api/mall/trade/order/index' import * as OrderApi from '@/api/mall/trade/order/index'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { floatToFixed2 } from '@/utils'
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore' import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express' import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
import { createImageViewer } from '@/components/ImageViewer' import { FormInstance } from 'element-plus'
import * as TradeOrderApi from '@/api/mall/trade/order' import { OrderTableColumn } from '@/views/mall/trade/order/components'
import { FormInstance, TableColumnCtx } from 'element-plus' import { DeliveryTypeEnum } from '@/utils/constants'
const { push } = useRouter() // 路由跳转 const { push } = useRouter() // 路由跳转
const { userId }: { userId: number } = defineProps({ const { userId } = defineProps<{
userId: { userId: number
type: Number, }>()
required: true
}
})
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据 const list = ref([]) // 列表的数据
const pickUpStoreList = ref([]) // 自提门店精简列表 const pickUpStoreList = ref<PickUpStoreApi.DeliveryPickUpStoreVO[]>([]) // 自提门店精简列表
const deliveryExpressList = ref([]) // 物流公司 const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 物流公司
const queryFormRef = ref<FormInstance>() // 搜索的表单 const queryFormRef = ref<FormInstance>() // 搜索的表单
const queryParams = reactive({ // 表单搜索
pageNo: 1, const queryParams = ref({
pageSize: 10, pageNo: 1, // 页数
createDate: [], pageSize: 10, // 每页显示数量
userId: NaN userId: userId,
status: undefined, // 订单状态
payChannelCode: undefined, // 支付方式
createTime: undefined, // 创建时间
terminal: undefined, // 订单来源
type: undefined, // 订单类型
deliveryType: undefined, // 配送方式
logisticsId: undefined, // 快递公司
pickUpStoreId: undefined, // 自提门店
pickUpVerifyCode: undefined // 自提核销码
}) })
const headerStyle = ({ row, columnIndex }: any) => { const queryType = reactive({ queryParam: '' }) // 订单搜索类型 queryParam
// 表头第一行第一列占 8
if (columnIndex === 0) { // 订单聚合搜索 select 类型配置（动态搜索）
row[columnIndex].colSpan = 8 const dynamicSearchList = ref([
} else { { value: 'no', label: '订单号' },
// 其余的不要 { value: 'userNickname', label: '用户昵称' },
row[columnIndex].colSpan = 0 { value: 'userMobile', label: '用户电话' }
return { ])
display: 'none' /**
} * 聚合搜索切换查询对象时触发
} * @param val
*/
const inputChangeSelect = (val: string) => {
dynamicSearchList.value
.filter((item) => item.value !== val)
?.forEach((item1) => {
// 清除集合搜索无用属性
if (queryParams.value.hasOwnProperty(item1.value)) {
delete queryParams.value[item1.value]
}
})
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = async () => { const handleQuery = async () => {
queryParams.pageNo = 1 queryParams.value.pageNo = 1
await getList() await getList()
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { const resetQuery = () => {
queryFormRef.value?.resetFields() queryFormRef.value?.resetFields()
queryParams.value.userId = userId
handleQuery() handleQuery()
} }
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
const data = await OrderApi.getOrderPage(queryParams) const data = await OrderApi.getOrderPage(queryParams.value)
console.log(data)
list.value = data.list list.value = data.list
total.value = data.total total.value = data.total
} finally { } finally {
...@@ -351,42 +264,6 @@ const getList = async () => { ...@@ -351,42 +264,6 @@ const getList = async () => {
} }
} }
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
createImageViewer({
urlList: [imgUrl]
})
}
interface SpanMethodProps {
row: TradeOrderApi.OrderItemRespVO
column: TableColumnCtx<TradeOrderApi.OrderItemRespVO>
rowIndex: number
columnIndex: number
}
const spanMethod = ({ row, rowIndex, columnIndex }: SpanMethodProps) => {
const len = list.value.find(
(order) => order.items?.findIndex((item) => item.id === row.id) !== -1
)?.items?.length
// 要合并的列，从零开始
const colIndex = [3, 4, 5, 6, 7]
if (colIndex.includes(columnIndex)) {
// 除了第一行其余的不要
if (rowIndex !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
// 动态合并行
return {
rowspan: len,
colspan: 1
}
}
}
/** 查看订单详情 */ /** 查看订单详情 */
const openDetail = (id: number) => { const openDetail = (id: number) => {
push({ name: 'TradeOrderDetail', params: { orderId: id } }) push({ name: 'TradeOrderDetail', params: { orderId: id } })
...@@ -394,10 +271,8 @@ const openDetail = (id: number) => { ...@@ -394,10 +271,8 @@ const openDetail = (id: number) => {
/** 初始化 **/ /** 初始化 **/
onMounted(async () => { onMounted(async () => {
queryParams.userId = userId
await getList() await getList()
pickUpStoreList.value = await PickUpStoreApi.getListAllSimple() pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList() deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
}) })
</script> </script>
<style scoped lang="scss"></style>
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