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.
107 lines
5.6 KiB
107 lines
5.6 KiB
<template>
|
|
<view class="page-staff-board">
|
|
<view class="nav-bar">
|
|
<view class="nav-left">
|
|
<text class="nav-logo">🍸</text>
|
|
<text class="nav-brand">纯瘾大</text>
|
|
</view>
|
|
<view class="nav-right">
|
|
<text class="logout-btn" @tap="onLogout">退出</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="staff-info">🧑🍳 {{ staff.nickname }} — 别摸鱼了！</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 v-if="t.status !== 2" class="tab-count">{{ counts[t.status] }}</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 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===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 :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 })
|
|
const recipeVisible = ref(false)
|
|
const recipeCardNo = ref('')
|
|
const recipeItems = ref([])
|
|
|
|
async function loadOrders() {
|
|
try { const res = await get(API.STAFF_ORDERS, { status: activeTab.value }); if (Array.isArray(res)) orders.value = res } catch (e) {}
|
|
}
|
|
async function loadCounts() {
|
|
try { const r0 = await get(API.STAFF_ORDERS, { status: 0 }); const r1 = await get(API.STAFF_ORDERS, { status: 1 }); counts.value = { 0: Array.isArray(r0) ? r0.length : 0, 1: Array.isArray(r1) ? r1.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 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, onDone, onDetail, onRecipe, onChat, onLogout }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-staff-board{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
|
|
.nav-bar{height:100rpx;display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);flex-shrink:0}
|
|
.nav-left{display:flex;align-items:center;gap:16rpx}
|
|
.nav-logo{font-size:44rpx}
|
|
.nav-brand{font-size:32rpx;font-weight:900;color:var(--gold)}
|
|
.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);position:sticky;top:0;z-index:50;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)}
|
|
.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>
|