270 lines
12 KiB
Vue
270 lines
12 KiB
Vue
<template>
|
|
<el-card shadow="never" class="!border-none">
|
|
<el-form :model="formData" inline>
|
|
<el-form-item label="订单编号">
|
|
<el-input class="ls-input" v-model="formData.sn" placeholder="请输入订单编号" />
|
|
</el-form-item>
|
|
<el-form-item label="用户信息">
|
|
<el-input class="ls-input" v-model="formData.userInfo" placeholder="请输入用户信息" />
|
|
</el-form-item>
|
|
<el-form-item label="服务名称">
|
|
<el-input class="ls-input" v-model="formData.goodsName" placeholder="请输入服务名称" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="师傅信息">
|
|
<el-input class="ls-input" v-model="formData.staffInfo" placeholder="请输入师傅信息" clearable />
|
|
</el-form-item> -->
|
|
<el-form-item label="支付状态">
|
|
<el-select v-model="formData.payStatus" placeholder="请选择" class="ls-input">
|
|
<el-option v-for="option in optionMap.payStatusOptions" :key="option.value" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="派单状态">
|
|
<el-select v-model="formData.isDispatch" placeholder="请选择" class="ls-input">
|
|
<el-option v-for="option in optionMap.dispatchOptions" :key="option.value" :label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item label="下单时间">
|
|
<data-picker
|
|
class="ls-input"
|
|
style="width: 280px"
|
|
v-model:startTime="formData.orderTimeStart"
|
|
v-model:endTime="formData.orderTimeEnd"
|
|
></data-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
|
<el-button @click="resetParams">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt-4 !border-none">
|
|
<el-tabs class="-mt-2" v-model="formData.orderStatus" @tab-change="resetPage">
|
|
<el-tab-pane :label="`全部(${countData?.totalCount || '0'})`" name="" />
|
|
<el-tab-pane :label="`待支付(${countData?.waitPayCount || '0'})`" :name="0" />
|
|
<!-- <el-tab-pane :label="`预约中(${countData?.reserveCount || '0'})`" :name="1" />
|
|
<el-tab-pane :label="`服务中(${countData?.servicingCount || '0'})`" :name="2" /> -->
|
|
<el-tab-pane :label="`已预约(${countData?.servicingCount || '0'})`" :name="2" />
|
|
<el-tab-pane :label="`已完成(${countData?.finishedCount || '0'})`" :name="3" />
|
|
<el-tab-pane :label="`退款单(${countData?.closeCount || '0'})`" :name="4" />
|
|
</el-tabs>
|
|
<div class="mt-4">
|
|
<el-table ref="tableData" size="large" :data="pager.lists" v-loading="pager.loading">
|
|
<el-table-column property="sn" label="订单编号" min-width="200" />
|
|
<el-table-column label="用户信息" min-width="120">
|
|
<template #default="scope">
|
|
<el-popover placement="top-start" width="200px" trigger="hover">
|
|
<div class="flex">
|
|
<span class="flex-none mr-2">头像：</span>
|
|
<el-image :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%" />
|
|
</div>
|
|
<div class="flex mt-2">
|
|
<span class="flex-none mr-2">昵称：</span>
|
|
<span>{{ scope.row.nickname }}</span>
|
|
</div>
|
|
<div class="flex mt-2">
|
|
<span class="flex-none mr-2">编号：</span>
|
|
<span>{{ scope.row.userSn }}</span>
|
|
</div>
|
|
<template #reference>
|
|
<router-link :to="`/user/userList/detail?id=${scope.row.userId}`">
|
|
<div class="pointer normal text-primary">
|
|
{{ scope.row.nickname }}
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="服务名称" min-width="260">
|
|
<template #default="{ row }">
|
|
<div class="flex items-center goods-box">
|
|
<div class="w-[60px] h-[60px]">
|
|
<el-image
|
|
style="width: 60px; height: 60px"
|
|
:src="row.goodsImage"
|
|
:preview-src-list="[row.goodsImage]"
|
|
:hide-on-click-modal="true"
|
|
:preview-teleported="true"
|
|
:fit="'contain'"
|
|
/>
|
|
</div>
|
|
<router-link :to="`/service/lists/edit?id=${row.goodsId}`" class="ml-2 xs">
|
|
<div class="goods-name truncate w-44">{{ row.goodsName }}</div>
|
|
<div class="form-tips">{{ row.goodsPrice }} {{ row.unitName }}</div>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="实付金额" min-width="100">
|
|
<template #default="scope">¥{{ scope.row.orderAmount }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="预约日期" min-width="160">
|
|
<template #default="scope">
|
|
{{ scope.row.appointTime }} {{ scope.row.weekDay }} {{ scope.row.appointTimeStartStr }}-{{ scope.row.appointTimeEndStr }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column property="contact" label="联系人" min-width="100" />
|
|
<!-- <el-table-column property="staffName" label="服务师傅" min-width="100">
|
|
<template #default="{ row }">{{ parseEmpty(row, 'staffName') }}</template>
|
|
</el-table-column> -->
|
|
<el-table-column label="订单状态" min-width="100">
|
|
<template v-slot="{ row }">
|
|
<span
|
|
:class="{
|
|
error: setStatusColor(row.orderStatusName)
|
|
}"
|
|
>
|
|
{{ row.orderStatusName }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="派单状态" width="100" prop="isDispatchName">
|
|
<template v-slot="{ row }">
|
|
<el-tag type="success" v-if="row.isDispatch === 1">已派单</el-tag>
|
|
<el-tag type="danger" v-if="row.isDispatch === 0">未派单</el-tag>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column label="操作" min-width="140" fixed="right">
|
|
<template #default="scope">
|
|
<router-link
|
|
class="mr-2"
|
|
:to="{
|
|
path: 'lists/detail',
|
|
query: {
|
|
id: scope.row.id
|
|
}
|
|
}"
|
|
>
|
|
<el-link type="primary" :underline="false">详情</el-link>
|
|
</router-link>
|
|
<operation
|
|
btnStyle="text"
|
|
:id="scope.row.id"
|
|
:verificationCode="scope.row.verificationCode"
|
|
:cancelBtn="scope.row.cancelBtn"
|
|
:deleteBtn="scope.row.deleteBtn"
|
|
:verificationBtn="scope.row.verificationBtn"
|
|
:orderRemarks="scope.row.orderRemarks ?? ''"
|
|
@refresh="resetPage"
|
|
@cancelOrder="handleCancelOrder(scope.row, resetPage)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<pagination v-model="pager" @change="getLists" />
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="orderList">
|
|
import { apiOrderLists, apiOrderStatis } from '@/api/order/lists'
|
|
import { reactive, onMounted, computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { OrderMode } from '@/enums/modeEnum'
|
|
import Operation from './components/operation.vue'
|
|
import Pagination from '@/components/pagination/index.vue'
|
|
import DataPicker from '@/components/daterange-picker/index.vue'
|
|
import cancelOrderDialog from './components/cancelOrderDialog.vue'
|
|
import { usePaging } from '@/hooks/usePaging'
|
|
import { parseEmpty } from '@/utils/util'
|
|
import { optionMap } from '@/config/status'
|
|
import { useCancelOrderAction } from './hook'
|
|
|
|
interface formDataObj {
|
|
sn: string //否 string 订单编号
|
|
userInfo: string //否 string 用户信息
|
|
goodsName: string //否 string 服务名称
|
|
payStatus: string | number //否 int 支付状态;0-待支付;1-已支付;
|
|
orderTimeStart: string //否 string 开始时间
|
|
orderTimeEnd: string //否 string 结束时间
|
|
orderStatus: string | number //否 int 订单状态;0-待支付;1-预约中;2-服务中;3-已完成;4-已取消
|
|
staffInfo: string // 否 师傅信息
|
|
isDispatch: string | number // 否 int 派单状态;0-委派单;1-已派单
|
|
}
|
|
|
|
const route = useRoute()
|
|
const orderMode: any = reactive<any>(OrderMode)
|
|
const formData = reactive<formDataObj>({
|
|
sn: '',
|
|
userInfo: '',
|
|
goodsName: '',
|
|
payStatus: '',
|
|
orderTimeStart: '',
|
|
orderTimeEnd: '',
|
|
orderStatus: '',
|
|
staffInfo: route.query.staffInfo ?? '',
|
|
isDispatch: ''
|
|
})
|
|
const getOrderAmount = async () => {
|
|
countData.value = await apiOrderStatis(formData)
|
|
}
|
|
const setStatusColor = computed(() => {
|
|
return function (val: string) {
|
|
return val === '待支付' || val === '已退款' || val === '退款中'
|
|
}
|
|
})
|
|
|
|
const { pager, getLists, resetPage, resetParams } = usePaging({
|
|
fetchFun: apiOrderLists,
|
|
params: formData,
|
|
nextFetchFun: getOrderAmount
|
|
})
|
|
|
|
const countData = ref<any>({})
|
|
|
|
getLists()
|
|
getOrderAmount()
|
|
|
|
onMounted(initParams)
|
|
|
|
const { handleCancelOrder } = useCancelOrderAction(cancelOrderDialog)
|
|
|
|
/**设置路由传递过来的参数 */
|
|
function initParams() {
|
|
if (Object.keys(route.query).length === 0) return
|
|
formData.staffInfo = JSON.parse(route.query.staffInfo)
|
|
}
|
|
/**页面缓存 */
|
|
onActivated(() => {
|
|
getLists()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() .el-tabs__content {
|
|
padding: 0;
|
|
}
|
|
|
|
.ls-input {
|
|
width: 280px;
|
|
}
|
|
|
|
.error {
|
|
color: #db2828;
|
|
}
|
|
|
|
.goods-box {
|
|
.goods-name {
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.goods-box:hover {
|
|
.goods-name {
|
|
color: #4a5dff;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none !important; //去掉原有链接文字下划线
|
|
}
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
height: 1px !important;
|
|
}
|
|
</style>
|