749 lines
18 KiB
Vue
749 lines
18 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 页面标题 -->
|
||
<view class="page-title">订单列表</view>
|
||
|
||
<!-- 搜索区域 - 仅保留时间查询 -->
|
||
<view class="search-box">
|
||
<view class="search-item">
|
||
<text class="label">订单日期</text>
|
||
<view class="date-picker" @click="showDatePicker = true">
|
||
<text>{{ dateRangeText || '选择日期范围' }}</text>
|
||
<text class="arrow">▼</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="search-buttons">
|
||
<button class="search-btn" @click="handleQuery">查询</button>
|
||
<button class="reset-btn" @click="resetQuery">重置</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<view class="order-list">
|
||
<!-- 加载中 -->
|
||
<view class="loading" v-if="loading">
|
||
<view class="spinner"></view>
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<!-- 错误提示 -->
|
||
<view class="error" v-if="errorMsg">
|
||
<text>{{ errorMsg }}</text>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty" v-if="!loading && !errorMsg && orderList.length === 0">
|
||
<text>该时间段内暂无订单数据</text>
|
||
</view>
|
||
|
||
<!-- 列表标题 -->
|
||
<view class="list-header" v-if="!loading && !errorMsg && orderList.length > 0">
|
||
<view class="header-item" style="width: 35%;">订单号</view>
|
||
<!-- <view class="header-item" style="width: 12%;">顾客姓名</view> -->
|
||
<!-- <view class="header-item" style="width: 8%;">桌号</view> -->
|
||
<view class="header-item" style="width: 15%;">订单类型</view>
|
||
<view class="header-item" style="width: 15%;">订单状态</view>
|
||
<view class="header-item" style="width: 15%;">应收金额</view>
|
||
<view class="header-item" style="width: 15%;">实收金额</view>
|
||
<!-- <view class="header-item" style="width: 15%;">支付方式</view> -->
|
||
</view>
|
||
|
||
<!-- 列表内容 -->
|
||
<view class="list-body" v-if="!loading && !errorMsg && orderList.length > 0">
|
||
<view class="order-item" v-for="(order, index) in orderList" :key="order.id || index">
|
||
<view class="order-cell" style="width: 35%;">{{ order.id || '-' }}</view>
|
||
<!-- <view class="order-cell" style="width: 12%;">{{ order.customerName || '-' }}</view> -->
|
||
<!-- <view class="order-cell" style="width: 8%;">{{ order.tableId || '-' }}</view> -->
|
||
<view class="order-cell" style="width: 15%;">
|
||
<view class="tag" :class="getTypeClass(order.orderType)">{{ getOrderType(order.orderType) }}</view>
|
||
</view>
|
||
<view class="order-cell" style="width: 15%;">
|
||
<view class="tag" :class="getStatusClass(order.orderStatus)">{{ getOrderStatus(order.orderStatus) }}</view>
|
||
</view>
|
||
<view class="order-cell" style="width: 15%;">¥{{ formatMoney(order.totalAmount) }}</view>
|
||
<view class="order-cell" style="width: 15%;">¥{{ formatMoney(order.actualReceivedAmount) }}</view>
|
||
<!-- <view class="order-cell" style="width: 15%;">{{ getPaymentMethod(order.paymentMethod) || '-' }}</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 分页 -->
|
||
<view class="pagination" v-if="!loading && !errorMsg && total > 0">
|
||
<view class="pagination-info">
|
||
<text>共 {{ total }} 条，第 {{ queryParams.pageNum }}/{{ totalPages }} 页</text>
|
||
</view>
|
||
<view class="pagination-buttons">
|
||
<button
|
||
class="page-btn"
|
||
@click="prevPage"
|
||
:disabled="queryParams.pageNum <= 1"
|
||
>上一页</button>
|
||
<button
|
||
class="page-btn"
|
||
@click="nextPage"
|
||
:disabled="queryParams.pageNum >= totalPages"
|
||
>下一页</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期选择器弹窗 -->
|
||
<view class="picker-mask" v-if="showDatePicker" @click="showDatePicker = false"></view>
|
||
<view class="picker-popup" v-if="showDatePicker">
|
||
<view class="picker-title">
|
||
<text @click="showDatePicker = false">取消</text>
|
||
<text>选择日期范围</text>
|
||
<text @click="confirmDate">确定</text>
|
||
</view>
|
||
<picker-view
|
||
class="date-picker-view"
|
||
:value="datePickerValue"
|
||
@change="onDateChange"
|
||
>
|
||
<picker-view-column>
|
||
<view v-for="(year, index) in years" :key="index">{{ year }}年</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(month, index) in months" :key="index">{{ month }}月</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(day, index) in days" :key="index">{{ day }}日</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view>至</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(year, index) in years" :key="index">{{ year }}年</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(month, index) in months" :key="index">{{ month }}月</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view v-for="(day, index) in days" :key="index">{{ day }}日</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import orderApi from '@/common/http/eatery/order.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 订单列表数据
|
||
orderList: [],
|
||
// 加载状态
|
||
loading: false,
|
||
// 错误信息
|
||
errorMsg: '',
|
||
// 总条数
|
||
total: 0,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
startDate: '',
|
||
endDate: ''
|
||
},
|
||
// 支付方式列表
|
||
paymentMethods: [],
|
||
// 日期范围文本
|
||
dateRangeText: '',
|
||
// 日期选择器显示状态
|
||
showDatePicker: false,
|
||
// 日期选择器数据
|
||
years: [],
|
||
months: [],
|
||
days: [],
|
||
// 日期选择器值
|
||
datePickerValue: [],
|
||
// 开始日期和结束日期
|
||
startDateObj: null,
|
||
endDateObj: null,
|
||
// 订单类型映射
|
||
orderTypeMap: {
|
||
'1': '堂食',
|
||
'2': '外卖'
|
||
},
|
||
// 订单状态映射
|
||
orderStatusMap: {
|
||
'1': '待结算',
|
||
'2': '已结算',
|
||
'3': '已取消'
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
// 总页数
|
||
totalPages() {
|
||
return Math.ceil(this.total / this.queryParams.pageSize)
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
// 初始化日期数据
|
||
this.initDateData()
|
||
// 获取支付方式
|
||
this.getPaymentMethods()
|
||
// 默认加载最近7天数据
|
||
this.handleQuery()
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* 初始化日期选择器数据
|
||
*/
|
||
initDateData() {
|
||
const now = new Date()
|
||
const year = now.getFullYear()
|
||
|
||
// 生成年份数据（近3年）
|
||
this.years = []
|
||
for (let i = year - 2; i <= year; i++) {
|
||
this.years.push(i)
|
||
}
|
||
|
||
// 生成月份数据
|
||
this.months = []
|
||
for (let i = 1; i <= 12; i++) {
|
||
this.months.push(i)
|
||
}
|
||
|
||
// 生成日期数据
|
||
this.days = []
|
||
for (let i = 1; i <= 31; i++) {
|
||
this.days.push(i)
|
||
}
|
||
|
||
// 设置默认日期（最近7天）
|
||
const start = new Date()
|
||
start.setDate(start.getDate() - 7)
|
||
this.startDateObj = start
|
||
this.endDateObj = now
|
||
|
||
// 设置日期选择器初始值
|
||
this.datePickerValue = [
|
||
this.years.indexOf(start.getFullYear()),
|
||
start.getMonth(),
|
||
start.getDate() - 1,
|
||
0, // 分隔符
|
||
this.years.indexOf(now.getFullYear()),
|
||
now.getMonth(),
|
||
now.getDate() - 1
|
||
]
|
||
|
||
// 更新日期文本
|
||
this.updateDateRangeText()
|
||
},
|
||
|
||
/**
|
||
* 更新日期范围文本
|
||
*/
|
||
updateDateRangeText() {
|
||
if (this.startDateObj && this.endDateObj) {
|
||
const formatDate = (date) => {
|
||
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
|
||
}
|
||
this.dateRangeText = `${formatDate(this.startDateObj)} 至 ${formatDate(this.endDateObj)}`
|
||
this.queryParams.startDate = formatDate(this.startDateObj)
|
||
this.queryParams.endDate = formatDate(this.endDateObj)
|
||
} else {
|
||
this.dateRangeText = ''
|
||
this.queryParams.startDate = ''
|
||
this.queryParams.endDate = ''
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 日期选择变化
|
||
*/
|
||
onDateChange(e) {
|
||
const val = e.detail.value
|
||
|
||
// 解析开始日期
|
||
const startYear = this.years[val[0]]
|
||
const startMonth = this.months[val[1]]
|
||
const startDay = this.days[val[2]]
|
||
|
||
// 解析结束日期
|
||
const endYear = this.years[val[4]]
|
||
const endMonth = this.months[val[5]]
|
||
const endDay = this.days[val[6]]
|
||
|
||
// 更新日期对象
|
||
this.startDateObj = new Date(startYear, startMonth - 1, startDay)
|
||
this.endDateObj = new Date(endYear, endMonth - 1, endDay)
|
||
},
|
||
|
||
/**
|
||
* 确认日期选择
|
||
*/
|
||
confirmDate() {
|
||
// 确保开始日期不晚于结束日期
|
||
if (this.startDateObj > this.endDateObj) {
|
||
uni.showToast({ title: '开始日期不能晚于结束日期', icon: 'none' })
|
||
return
|
||
}
|
||
this.updateDateRangeText()
|
||
this.showDatePicker = false
|
||
},
|
||
|
||
/**
|
||
* 获取支付方式列表
|
||
*/
|
||
getPaymentMethods() {
|
||
orderApi.getPaymentMethods().then(res => {
|
||
if (res.data && Array.isArray(res.data)) {
|
||
this.paymentMethods = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
text: item.dictLabel
|
||
}))
|
||
}
|
||
}).catch(err => {
|
||
console.error('获取支付方式失败:', err)
|
||
// 不阻断主流程，仅在控制台输出错误
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 分页查询订单 - 修复数据不显示问题
|
||
*/
|
||
getOrderPage() {
|
||
// 重置错误信息
|
||
this.errorMsg = ''
|
||
// 显示加载状态
|
||
this.loading = true
|
||
|
||
// 检查日期参数是否完整
|
||
if (!this.queryParams.startDate || !this.queryParams.endDate) {
|
||
this.loading = false
|
||
this.errorMsg = '请选择完整的日期范围'
|
||
return
|
||
}
|
||
|
||
// 调用API查询数据
|
||
orderApi.getOrderPage(this.queryParams)
|
||
.then(res => {
|
||
// 确保返回数据格式正确
|
||
if (res && typeof res === 'object') {
|
||
// 适配不同的API返回格式
|
||
const data = res.data || res
|
||
this.orderList = Array.isArray(data.rows) ? data.rows : []
|
||
this.total = typeof data.total === 'number' ? data.total : 0
|
||
} else {
|
||
this.orderList = []
|
||
this.total = 0
|
||
this.errorMsg = '数据格式错误'
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.error('获取订单失败:', err)
|
||
this.orderList = []
|
||
this.total = 0
|
||
this.errorMsg = '获取订单失败，请重试'
|
||
})
|
||
.finally(() => {
|
||
// 无论成功失败都关闭加载状态
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 查询按钮触发
|
||
*/
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getOrderPage()
|
||
},
|
||
|
||
/**
|
||
* 重置查询条件
|
||
*/
|
||
resetQuery() {
|
||
// 重置为最近7天
|
||
const now = new Date()
|
||
const start = new Date()
|
||
start.setDate(start.getDate() - 7)
|
||
this.startDateObj = start
|
||
this.endDateObj = now
|
||
|
||
// 更新日期选择器值
|
||
this.datePickerValue = [
|
||
this.years.indexOf(start.getFullYear()),
|
||
start.getMonth(),
|
||
start.getDate() - 1,
|
||
0, // 分隔符
|
||
this.years.indexOf(now.getFullYear()),
|
||
now.getMonth(),
|
||
now.getDate() - 1
|
||
]
|
||
|
||
this.updateDateRangeText()
|
||
this.queryParams.pageNum = 1
|
||
this.getOrderPage()
|
||
},
|
||
|
||
/**
|
||
* 上一页
|
||
*/
|
||
prevPage() {
|
||
if (this.queryParams.pageNum > 1) {
|
||
this.queryParams.pageNum--
|
||
this.getOrderPage()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 下一页
|
||
*/
|
||
nextPage() {
|
||
if (this.queryParams.pageNum < this.totalPages) {
|
||
this.queryParams.pageNum++
|
||
this.getOrderPage()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取订单类型文本
|
||
*/
|
||
getOrderType(type) {
|
||
return this.orderTypeMap[type] || '未知'
|
||
},
|
||
|
||
/**
|
||
* 获取订单类型样式类
|
||
*/
|
||
getTypeClass(type) {
|
||
const classMap = {
|
||
'1': 'type-dining',
|
||
'2': 'type-takeout'
|
||
}
|
||
return classMap[type] || 'type-default'
|
||
},
|
||
|
||
/**
|
||
* 获取订单状态文本
|
||
*/
|
||
getOrderStatus(status) {
|
||
return this.orderStatusMap[status] || '未知'
|
||
},
|
||
|
||
/**
|
||
* 获取订单状态样式类
|
||
*/
|
||
getStatusClass(status) {
|
||
const classMap = {
|
||
'1': 'status-pending',
|
||
'2': 'status-settled',
|
||
'3': 'status-canceled'
|
||
}
|
||
return classMap[status] || 'status-default'
|
||
},
|
||
|
||
/**
|
||
* 获取支付方式文本
|
||
*/
|
||
getPaymentMethod(method) {
|
||
const methodItem = this.paymentMethods.find(item => item.value === method)
|
||
return methodItem ? methodItem.text : '未知'
|
||
},
|
||
|
||
/**
|
||
* 格式化金额
|
||
*/
|
||
formatMoney(amount) {
|
||
// 处理可能的null/undefined值
|
||
if (amount === null || amount === undefined) return '0.00'
|
||
// 转换为数字并保留两位小数
|
||
return parseFloat(amount).toFixed(2)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
padding: 20rpx;
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 30rpx 0;
|
||
color: #333;
|
||
}
|
||
|
||
.search-box {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.search-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.label {
|
||
width: 140rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.date-picker {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
border: 1px solid #eee;
|
||
border-radius: 8rpx;
|
||
padding: 0 15rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.arrow {
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.search-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
background-color: #03AE80;
|
||
color: #fff;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
border: none;
|
||
}
|
||
|
||
.reset-btn {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.order-list {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 100rpx 0;
|
||
}
|
||
|
||
.spinner {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border: 5rpx solid #eee;
|
||
border-top-color: #03AE80;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.error {
|
||
text-align: center;
|
||
padding: 100rpx 0;
|
||
color: #ff3b30;
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
padding: 100rpx 0;
|
||
color: #999;
|
||
}
|
||
|
||
.list-header {
|
||
display: flex;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx 8rpx 0 0;
|
||
overflow: hidden;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.header-item {
|
||
padding: 15rpx 10rpx;
|
||
text-align: center;
|
||
border-right: 1px solid #eee;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.header-item:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.list-body {
|
||
border: 1px solid #eee;
|
||
border-top: none;
|
||
border-radius: 0 0 8rpx 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.order-item {
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.order-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.order-cell {
|
||
padding: 15rpx 10rpx;
|
||
text-align: center;
|
||
border-right: 1px solid #eee;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.order-cell:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.type-dining {
|
||
background-color: #007aff;
|
||
}
|
||
|
||
.type-takeout {
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
.type-default {
|
||
background-color: #999;
|
||
}
|
||
|
||
.status-pending {
|
||
background-color: #ff9500;
|
||
}
|
||
|
||
.status-settled {
|
||
background-color: #4cd964;
|
||
}
|
||
|
||
.status-canceled {
|
||
background-color: #ff3b30;
|
||
}
|
||
|
||
.status-default {
|
||
background-color: #999;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.pagination-info {
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.pagination-buttons {
|
||
display: flex;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.page-btn {
|
||
padding: 0 25rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.page-btn:disabled {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.picker-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 998;
|
||
}
|
||
|
||
.picker-popup {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.picker-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.picker-title text {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.picker-title text:first-child,
|
||
.picker-title text:last-child {
|
||
color: #03AE80;
|
||
}
|
||
|
||
.date-picker-view {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
</style>
|