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.
58 lines
2.6 KiB
58 lines
2.6 KiB
<template>
|
|
<view class="order-card" :class="{ pulse: order.status === 0 }">
|
|
<view class="card-header">
|
|
<view>
|
|
<text class="card-no">🎫 {{ order.cardNo }}</text>
|
|
<text v-if="order.remindCount > 0" class="remind-badge">🔔催单×{{ order.remindCount }}</text>
|
|
</view>
|
|
<text class="status-badge" :class="statusClass">{{ statusLabel }}</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<view class="card-items">
|
|
<view v-for="(item, idx) in order.items" :key="idx" class="card-item-row">
|
|
<text class="card-item-name">{{ item.name }}</text>
|
|
<text class="card-item-qty">×{{ item.qty }}</text>
|
|
</view>
|
|
</view>
|
|
<text v-if="order.note" class="card-note">💬 {{ order.note }}</text>
|
|
<text class="card-time">{{ order.submittedAt }}</text>
|
|
<slot name="actions"></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from 'vue'
|
|
import { ORDER_STATUS } from '@/utils/constants'
|
|
|
|
export default {
|
|
name: 'OrderCard',
|
|
props: { order: { type: Object, required: true } },
|
|
setup(props) {
|
|
const statusLabel = computed(() => ORDER_STATUS[props.order.status]?.label || '')
|
|
const statusClass = computed(() => ORDER_STATUS[props.order.status]?.class || '')
|
|
return { statusLabel, statusClass }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.order-card{background:var(--bg-card);border-radius:var(--radius);padding:24rpx;margin-bottom:20rpx;border:1px solid var(--border)}
|
|
.order-card.pulse{animation:pulse-glow 2s ease-in-out infinite}
|
|
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12rpx}
|
|
.card-no{font-weight:700;color:var(--gold);font-size:28rpx}
|
|
.remind-badge{font-size:20rpx;color:var(--red);font-weight:700;margin-left:8rpx}
|
|
.status-badge{font-size:22rpx;font-weight:700;padding:4rpx 16rpx;border-radius:20rpx}
|
|
.status-new{background:rgba(255,59,59,.15);color:#FF3B3B}
|
|
.status-confirmed{background:rgba(74,144,217,.15);color:#4A90D9}
|
|
.status-done{background:rgba(46,213,115,.15);color:#2ED573}
|
|
.status-cancelled{background:rgba(116,125,140,.15);color:#747D8C}
|
|
.card-body{padding-top:8rpx}
|
|
.card-items{padding:4rpx 0}
|
|
.card-item-row{display:flex;align-items:center;justify-content:space-between;padding:6rpx 0}
|
|
.card-item-name{font-size:52rpx;font-weight:700;color:var(--text)}
|
|
.card-item-qty{font-size:28rpx;font-weight:600;color:var(--gold);margin-left:16rpx}
|
|
.card-note{font-size:24rpx;color:var(--orange);display:block;padding:8rpx 0}
|
|
.card-time{font-size:22rpx;color:var(--text-muted);display:block;padding:4rpx 0}
|
|
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20rpx rgba(245,166,35,.1)}50%{box-shadow:0 0 40rpx rgba(245,166,35,.2)}}
|
|
</style>
|