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.
103 lines
5.3 KiB
103 lines
5.3 KiB
<template>
|
|
<view class="page-staff-detail">
|
|
<view class="nav-bar">
|
|
<text class="nav-back" @tap="goBack">←</text>
|
|
<text class="nav-title">订单详情</text>
|
|
<text></text>
|
|
</view>
|
|
|
|
<scroll-view class="detail-body" scroll-y v-if="order">
|
|
<view class="detail-card">
|
|
<view class="detail-row"><text>订单号</text><text>{{ order.orderNo }}</text></view>
|
|
<view class="detail-row"><text>号码牌</text><text style="color:var(--gold);font-weight:700">🎫 {{ order.cardNo }}</text></view>
|
|
<view class="detail-row"><text>状态</text><text :style="{color:statusColor}">{{ statusLabel }}</text></view>
|
|
<view class="detail-row"><text>提交时间</text><text>{{ order.submittedAt }}</text></view>
|
|
<view class="detail-row" v-if="order.note"><text>备注</text><text style="color:var(--orange)">💬 {{ order.note }}</text></view>
|
|
</view>
|
|
|
|
<view class="detail-card">
|
|
<text class="section-title">📋 商品清单</text>
|
|
<view v-for="item in order.items" :key="item.name" class="detail-item">
|
|
<text class="di-emoji">{{ item.emoji }}</text>
|
|
<view class="di-info">
|
|
<text class="di-name">{{ item.name }}</text>
|
|
<text class="di-alc" v-if="item.alc>0">{{ item.alc }}%</text>
|
|
</view>
|
|
<text class="di-qty">×{{ item.qty }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-card" v-for="item in order.items" :key="'r'+item.name">
|
|
<text class="section-title">📖 {{ item.name }} 配方</text>
|
|
<text class="recipe-text">{{ item.recipe || '暂无配方信息' }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view v-else class="empty-state">
|
|
<text class="empty-icon">📋</text>
|
|
<text class="empty-text">加载中...</text>
|
|
</view>
|
|
|
|
<view v-if="order" class="detail-actions">
|
|
<button v-if="order.status===0" class="da-btn da-confirm" @tap="onConfirm">✅ 接单</button>
|
|
<button v-if="order.status===1" class="da-btn da-done" @tap="onDone">✔ 结单</button>
|
|
<button class="da-btn da-chat" @tap="onChat">💬 聊天</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, computed } from 'vue'
|
|
import { get, post } from '@/utils/request'
|
|
import { API, ORDER_STATUS } from '@/utils/constants'
|
|
|
|
export default {
|
|
setup() {
|
|
const order = ref(null)
|
|
const orderId = ref(0)
|
|
const statusLabel = computed(() => order.value ? ORDER_STATUS[order.value.status]?.label : '')
|
|
const statusColor = computed(() => order.value ? ORDER_STATUS[order.value.status]?.color : '')
|
|
|
|
async function loadDetail() {
|
|
if (!orderId.value) return
|
|
try { const res = await get(API.STAFF_ORDER, { id: orderId.value }); if (res) order.value = res } catch (e) {}
|
|
}
|
|
async function onConfirm() { try { await post(API.STAFF_CONFIRM, { id: orderId.value }); uni.showToast({ title: '已接单 ✅', icon: 'none' }); loadDetail() } catch (e) {} }
|
|
async function onDone() { try { await post(API.STAFF_DONE, { id: orderId.value }); uni.showToast({ title: '已结单 ✔', icon: 'none' }); loadDetail() } catch (e) {} }
|
|
function onChat() { uni.setStorageSync('chatCardNo', order.value.cardNo); uni.navigateTo({ url: '/pages/staff/chat' }) }
|
|
function goBack() { uni.navigateBack() }
|
|
|
|
return { order, statusLabel, statusColor, orderId, loadDetail, onConfirm, onDone, onChat, goBack }
|
|
},
|
|
onLoad(options) {
|
|
this.orderId = parseInt(options.id) || 0
|
|
this.loadDetail()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-staff-detail{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-back{font-size:36rpx;color:var(--text-dim)}
|
|
.nav-title{font-size:32rpx;font-weight:800;color:var(--gold)}
|
|
.detail-body{flex:1;padding:28rpx}
|
|
.detail-card{background:var(--bg-card);border-radius:var(--radius);padding:32rpx;margin-bottom:24rpx;border:1px solid var(--border)}
|
|
.detail-row{display:flex;justify-content:space-between;padding:10rpx 0;font-size:28rpx;color:var(--text)}
|
|
.section-title{font-size:28rpx;font-weight:700;color:var(--gold);display:block;margin-bottom:20rpx}
|
|
.detail-item{display:flex;align-items:center;padding:16rpx 0;border-bottom:1px solid var(--border);gap:16rpx}
|
|
.di-emoji{font-size:40rpx}
|
|
.di-info{flex:1}
|
|
.di-name{font-size:28rpx;font-weight:600;color:var(--text);display:block}
|
|
.di-alc{font-size:22rpx;color:var(--gold-light)}
|
|
.di-qty{font-size:28rpx;font-weight:700;color:var(--text-dim)}
|
|
.recipe-text{font-size:24rpx;color:var(--text-dim);line-height:1.8;white-space:pre-line}
|
|
.detail-actions{display:flex;gap:20rpx;padding:20rpx 28rpx;padding-bottom:calc(20rpx + var(--safe-b));flex-shrink:0}
|
|
.da-btn{flex:1;height:80rpx;border-radius:var(--radius-sm);font-size:28rpx;font-weight:700;border:none;display:flex;align-items:center;justify-content:center}
|
|
.da-confirm{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A}
|
|
.da-done{background:rgba(46,213,115,.2);color:#2ED573}
|
|
.da-chat{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>
|