|
|
|
@ -1,4 +1,4 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<view class="order-card" :class="{ pulse: order.status === 0 }"> |
|
|
|
<view class="card-header"> |
|
|
|
<view> |
|
|
|
@ -8,7 +8,12 @@ |
|
|
|
<text class="status-badge" :class="statusClass">{{ statusLabel }}</text> |
|
|
|
</view> |
|
|
|
<view class="card-body"> |
|
|
|
<text class="card-items">{{ order.items.map(i=>i.name+'×'+i.qty).join('、') }}</text> |
|
|
|
<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> |
|
|
|
@ -43,7 +48,10 @@ export default { |
|
|
|
.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{font-size:26rpx;color:var(--text);display:block} |
|
|
|
.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)}} |
|
|
|
|