You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
13 KiB
379 lines
13 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="订单管理" bgColor="#019245" color="#fff" />
|
|
|
|
<!-- 搜索框 -->
|
|
<view style="background-color: #fff; padding: 12rpx 20rpx 0rpx; ">
|
|
<uv-search placeholder="搜索商品名" v-model="keyword" :showAction="false" actionText="" height="80rpx" animation
|
|
bgColor="#F5F5F5" inputAlign="center" color="#000" placeholderColor="#979797" searchIconSize="50rpx"
|
|
@search="handleSearch" @clickIcon="handleSearch" />
|
|
</view>
|
|
|
|
<!-- 订单筛选 -->
|
|
<view class="tabs">
|
|
<uv-tabs :list="tabs" :activeStyle="{ color: '#019245'}" lineColor="#019245" :scrollable="false"
|
|
:inactiveStyle="{color: 'black'}" lineHeight="6rpx" lineWidth="55rpx" :current="status"
|
|
@click="clickTabs" />
|
|
</view>
|
|
|
|
<!-- 批量操作区域 -->
|
|
<view class="batch-actions" v-if="leaderOrderList.length > 0">
|
|
<checkbox-group @change="handleCheckAllChange">
|
|
<label class="checkbox-all">
|
|
<checkbox :checked="isAllChecked" color="#019245" />
|
|
<text>全选</text>
|
|
</label>
|
|
</checkbox-group>
|
|
<view class="batch-btns">
|
|
<button class="batch-btn" @tap="handleBatchAction('出餐')" v-if="status === 0">批量出餐</button>
|
|
<button class="batch-btn" @tap="handleBatchAction('取餐')" v-if="status === 1">批量待取餐</button>
|
|
<button class="batch-btn" @tap="handleBatchAction('完成')" v-if="status === 2">批量完成</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 团餐列表 -->
|
|
<view class="group-meal-list">
|
|
<view class="meal-item" v-for="(meal, index) in leaderOrderList" :key="meal.id">
|
|
<view class="meal-checkbox">
|
|
<checkbox :checked="checkedOrders.includes(meal.id)" :value="meal.id" color="#019245" @tap.stop="toggleCheckOrder(meal.id)" />
|
|
</view>
|
|
<view class="meal-content" @tap="viewOrder(meal)">
|
|
<view class="meal-name">{{ meal.title }}</view>
|
|
<view class="meal-price">本单佣金合计: <text class="price-value">¥{{ (meal.commission || 0).toFixed(2) || 0.00 }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="meal-action">
|
|
<button class="action-btn" @tap.stop="handleSingleAction(meal, '出餐')" v-if="status === 0">出餐</button>
|
|
<button class="action-btn" @tap.stop="handleSingleAction(meal, '取餐')" v-if="status === 2">取餐</button>
|
|
<button class="action-btn" @tap.stop="handleSingleAction(meal, '完成')" v-if="status === 2">完成</button>
|
|
<button class="order-btn" @tap.stop="viewOrder(meal)">查看</button>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 200rpx; min-width: 700rpx;">
|
|
<uv-empty mode="order" v-if="leaderOrderList.length == 0" />
|
|
</view>
|
|
</view>
|
|
|
|
<tabber select="order" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
tabber
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
title: '',
|
|
tabs: [
|
|
{ name: '待出餐' },
|
|
{ name: '已出餐' },
|
|
{ name: '待取餐' },
|
|
{ name: '已完成' }
|
|
],
|
|
status: 0,
|
|
leaderOrderList: [],
|
|
mixinsListApi: 'managerOrderList',
|
|
mixinsListKey: 'leaderOrderList',
|
|
checkedOrders: [], // 已选择的订单ID
|
|
isAllChecked: false
|
|
}
|
|
},
|
|
onLoad(args) {
|
|
// 检查是否有tabIndex参数，如果有则自动切换到对应tab
|
|
if (args.tabIndex !== undefined) {
|
|
const index = parseInt(args.tabIndex)
|
|
if (!isNaN(index) && index >= 0 && index < this.tabs.length) {
|
|
this.status = index
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleSearch() {
|
|
this.title = this.keyword
|
|
this.getData()
|
|
this.keyword = ''
|
|
this.title = ''
|
|
},
|
|
beforeGetData() {
|
|
const params = {
|
|
status: this.status,
|
|
title: this.title || ''
|
|
}
|
|
return params
|
|
},
|
|
//点击tab栏
|
|
clickTabs({ index }) {
|
|
this.status = index
|
|
this.getData()
|
|
this.checkedOrders = [] // 切换标签时清空选择
|
|
this.isAllChecked = false
|
|
},
|
|
// 查看团餐订单
|
|
viewOrder(meal) {
|
|
this.$utils.navigateTo({
|
|
url: '/pages_order/order/groupMealDetail?id=' + meal.id
|
|
})
|
|
},
|
|
// 切换选择订单
|
|
toggleCheckOrder(id) {
|
|
const index = this.checkedOrders.indexOf(id)
|
|
if (index === -1) {
|
|
this.checkedOrders.push(id)
|
|
} else {
|
|
this.checkedOrders.splice(index, 1)
|
|
}
|
|
// 更新全选状态
|
|
this.isAllChecked = this.checkedOrders.length === this.leaderOrderList.length
|
|
},
|
|
// 处理全选/取消全选
|
|
handleCheckAllChange(e) {
|
|
this.isAllChecked = !this.isAllChecked
|
|
if (this.isAllChecked) {
|
|
this.checkedOrders = this.leaderOrderList.map(item => item.id)
|
|
} else {
|
|
this.checkedOrders = []
|
|
}
|
|
},
|
|
// 处理单个订单操作
|
|
handleSingleAction(meal, action) {
|
|
const actionMap = {
|
|
'出餐': {
|
|
status: 1,
|
|
confirmText: '确定将该订单标记为已出餐吗？',
|
|
successText: '已出餐'
|
|
},
|
|
'取餐': {
|
|
status: 2,
|
|
confirmText: '确定将该订单标记为待取餐吗？',
|
|
successText: '待取餐'
|
|
},
|
|
|
|
'完成': {
|
|
status: 3,
|
|
confirmText: '确定将该订单标记为已完成吗？',
|
|
successText: '已完成'
|
|
}
|
|
}
|
|
|
|
const currentAction = actionMap[action]
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: currentAction.confirmText,
|
|
confirmColor: '#019245',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 使用统一的updateOrders接口处理单个订单
|
|
uni.showLoading({
|
|
title: '处理中...'
|
|
})
|
|
|
|
this.$api('updateOrders', {
|
|
orderIds: meal.id, // 单个订单直接传ID
|
|
status: currentAction.status
|
|
}, res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: currentAction.successText,
|
|
icon: 'success'
|
|
})
|
|
this.getData()
|
|
} else {
|
|
uni.showToast({
|
|
title: '操作失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 处理批量操作
|
|
handleBatchAction(action) {
|
|
if (this.checkedOrders.length === 0) {
|
|
uni.showToast({
|
|
title: '请先选择订单',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
const actionMap = {
|
|
'出餐': {
|
|
status: 1,
|
|
confirmText: `确定将选中的${this.checkedOrders.length}个订单标记为已出餐吗？`,
|
|
successText: '批量操作成功'
|
|
},
|
|
'取餐': {
|
|
status: 2,
|
|
confirmText: `确定将选中的${this.checkedOrders.length}个订单标记为待取餐餐吗？`,
|
|
successText: '批量操作成功'
|
|
},
|
|
'完成': {
|
|
status: 3,
|
|
confirmText: `确定将选中的${this.checkedOrders.length}个订单标记为已完成吗？`,
|
|
successText: '批量操作成功'
|
|
}
|
|
}
|
|
|
|
const currentAction = actionMap[action]
|
|
|
|
uni.showModal({
|
|
title: '批量操作',
|
|
content: currentAction.confirmText,
|
|
confirmColor: '#019245',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 显示加载中
|
|
uni.showLoading({
|
|
title: '处理中...'
|
|
})
|
|
|
|
// 使用分号分隔多个订单ID
|
|
const orderIds = this.checkedOrders.join(';')
|
|
this.$api('updateOrders', {
|
|
orderIds: orderIds,
|
|
status: currentAction.status
|
|
}, res => {
|
|
uni.hideLoading()
|
|
if (res.code === 200) {
|
|
uni.showToast({
|
|
title: currentAction.successText,
|
|
icon: 'success'
|
|
})
|
|
this.checkedOrders = []
|
|
this.isAllChecked = false
|
|
this.getData()
|
|
} else {
|
|
uni.showToast({
|
|
title: '操作失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {}
|
|
|
|
.tabs {
|
|
background: #fff;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
/* 批量操作区域 */
|
|
.batch-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.checkbox-all {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.batch-btns {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.batch-btn {
|
|
background-color: $uni-color;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 30rpx;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 团餐列表样式 */
|
|
.group-meal-list {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.meal-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 20rpx;
|
|
background-color: #fff;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.meal-checkbox {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.meal-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.meal-name {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.meal-price {
|
|
font-size: 28rpx;
|
|
color: $uni-color;
|
|
background-color: #ECFEF4;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.price-value {
|
|
margin-left: 10rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.meal-action {
|
|
display: flex;
|
|
gap: 15rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 25rpx;
|
|
border-radius: 30rpx;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.order-btn {
|
|
background-color: $uni-color;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 25rpx;
|
|
border-radius: 30rpx;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
</style>
|