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.
128 lines
6.4 KiB
128 lines
6.4 KiB
<template>
|
|
<view class="page-staff-board">
|
|
<view class="top-bar">
|
|
<view class="top-left">
|
|
<text class="top-logo">🍸</text>
|
|
<text class="top-brand">就是纯瘾大</text>
|
|
</view>
|
|
<view class="top-right">
|
|
<text class="logout-btn" @tap="onLogout">退出</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="staff-info">🧑🍳 {{ staff.nickname }} — 别摸鱼了！<text v-if="staff.unread > 0" style="color:var(--red);margin-left:16rpx">💬 {{ staff.unread }}条新消息</text></view>
|
|
|
|
<view class="board-tabs">
|
|
<view v-for="t in tabs" :key="t.status" class="board-tab" :class="{ active: activeTab === t.status }" @tap="switchTab(t.status)">
|
|
{{ t.label }}
|
|
<text class="tab-count">{{ counts[t.status] || 0 }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="board-body" scroll-y v-if="orders.length > 0">
|
|
<OrderCard v-for="o in orders" :key="o.id" :order="o">
|
|
<template #actions>
|
|
<view class="board-actions">
|
|
<button class="ba-btn ba-gold" @tap="onDetail(o)">📖 详情</button>
|
|
<button v-if="o.status!==3 && o.status!==2" class="ba-btn ba-blue" @tap="onChat(o)">💬 聊天</button>
|
|
<button v-if="o.status===0" class="ba-btn ba-gold" @tap="onConfirm(o.id)">✅ 接单</button>
|
|
<button v-if="o.status===0" class="ba-btn ba-red" @tap="onCancel(o.id)">❌ 拒单</button>
|
|
<button v-if="o.status===1" class="ba-btn ba-gold" @tap="onDone(o.id)">✔ 结单</button>
|
|
</view>
|
|
</template>
|
|
</OrderCard>
|
|
</scroll-view>
|
|
|
|
<view v-else class="empty-state">
|
|
<text class="empty-icon">📋</text>
|
|
<text class="empty-text">暂无订单</text>
|
|
</view>
|
|
|
|
<RecipeModal v-if="recipeVisible" :visible="recipeVisible" :cardNo="recipeCardNo" :items="recipeItems" @close="recipeVisible=false" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { useStaffStore } from '@/stores/staff'
|
|
import { get, post } from '@/utils/request'
|
|
import { API } from '@/utils/constants'
|
|
import { startPoll, stopPoll } from '@/utils/poller'
|
|
import OrderCard from '@/components/OrderCard.vue'
|
|
import RecipeModal from '@/components/RecipeModal.vue'
|
|
|
|
export default {
|
|
components: { OrderCard, RecipeModal },
|
|
setup() {
|
|
const staff = useStaffStore()
|
|
const tabs = [{ status: 0, label: '🔔 新订单' },{ status: 1, label: '⚡ 进行中' },{ status: 2, label: '✅ 已完成' }]
|
|
const activeTab = ref(0)
|
|
const orders = ref([])
|
|
const counts = ref({ 0: 0, 1: 0, 2: 0 })
|
|
const recipeVisible = ref(false)
|
|
const recipeCardNo = ref('')
|
|
const recipeItems = ref([])
|
|
|
|
async function loadOrders() {
|
|
try {
|
|
const params = { status: activeTab.value }
|
|
if (activeTab.value === 2) params.include_cancel = 1
|
|
const res = await get(API.STAFF_ORDERS, params)
|
|
if (Array.isArray(res)) orders.value = res
|
|
} catch (e) {}
|
|
}
|
|
async function loadCounts() {
|
|
try {
|
|
const [r0, r1, r2] = await Promise.all([
|
|
get(API.STAFF_ORDERS, { status: 0 }),
|
|
get(API.STAFF_ORDERS, { status: 1 }),
|
|
get(API.STAFF_ORDERS, { status: 2, include_cancel: 1 })
|
|
])
|
|
counts.value = {
|
|
0: Array.isArray(r0) ? r0.length : 0,
|
|
1: Array.isArray(r1) ? r1.length : 0,
|
|
2: Array.isArray(r2) ? r2.length : 0
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
function switchTab(s) { activeTab.value = s; loadOrders() }
|
|
async function onConfirm(id) { try { await post(API.STAFF_CONFIRM, { id }); uni.showToast({ title: '已接单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
|
|
async function onCancel(id) { try { await post(API.STAFF_CANCEL, { id }); uni.showToast({ title: '已拒单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
|
|
async function onDone(id) { try { const res = await post(API.STAFF_DONE, { id }); uni.showToast({ title: res && res.released ? '已结单，号码释放' : '已结单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
|
|
function onDetail(order) { uni.navigateTo({ url: '/pages/staff/detail?id=' + order.id }) }
|
|
function onRecipe(order) { recipeCardNo.value = order.cardNo; recipeItems.value = order.items; recipeVisible.value = true }
|
|
function onChat(order) { uni.setStorageSync('chatCardNo', order.cardNo); uni.navigateTo({ url: '/pages/staff/chat' }) }
|
|
function onLogout() { staff.logout(); uni.redirectTo({ url: '/pages/staff/login' }) }
|
|
|
|
onMounted(() => {
|
|
loadOrders(); loadCounts(); startPoll('board', () => { loadOrders(); loadCounts() }, 10000)
|
|
})
|
|
onUnmounted(() => stopPoll('board'))
|
|
|
|
return { staff, tabs, activeTab, orders, counts, recipeVisible, recipeCardNo, recipeItems, switchTab, onConfirm, onCancel, onDone, onDetail, onRecipe, onChat, onLogout }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-staff-board{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
|
|
.top-bar{height:100rpx;display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);flex-shrink:0}
|
|
.top-left{display:flex;align-items:center;gap:16rpx}
|
|
.top-logo{font-size:44rpx}
|
|
.top-brand{font-size:32rpx;font-weight:900;color:var(--gold);letter-spacing:2rpx}
|
|
.logout-btn{font-size:26rpx;color:var(--red)}
|
|
.staff-info{background:var(--bg-card);padding:16rpx 32rpx;font-size:24rpx;color:var(--text-dim);border-bottom:1px solid var(--border)}
|
|
.board-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}
|
|
.board-tab{flex:1;padding:24rpx;text-align:center;font-size:26rpx;font-weight:600;color:var(--text-dim);border-bottom:4rpx solid transparent}
|
|
.board-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
|
|
.tab-count{margin-left:8rpx;color:var(--red);font-size:22rpx}
|
|
.board-body{flex:1;padding:20rpx}
|
|
.board-actions{display:flex;gap:16rpx;flex-wrap:wrap;padding-top:16rpx}
|
|
.ba-btn{padding:12rpx 24rpx;border-radius:24rpx;font-size:24rpx;font-weight:600;border:none}
|
|
.ba-gold{background:rgba(245,166,35,.15);color:var(--gold)}
|
|
.ba-blue{background:rgba(74,144,217,.15);color:var(--blue)}
|
|
.ba-red{background:rgba(255,59,59,.15);color:var(--red)}
|
|
.empty-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}
|
|
.empty-icon{font-size:112rpx;opacity:.3}
|
|
.empty-text{font-size:28rpx;color:var(--text-muted);margin-top:16rpx}
|
|
</style>
|