92 lines
4.4 KiB
Vue
92 lines
4.4 KiB
Vue
<template>
|
|
<div class="step-item">
|
|
<div class="step-content">
|
|
<div class="coil-card-wrapper inbound-coil-wrapper">
|
|
<div class="coil-card-header inbound-header">
|
|
<span class="card-label">🚚 发货</span>
|
|
</div>
|
|
<div class="coil-card-futuristic">
|
|
<div class="coil-futuristic-body">
|
|
<div class="coil-icon-container">
|
|
<svg class="coil-svg" viewBox="0 0 200 200">
|
|
<defs>
|
|
<linearGradient id="coilGradShip1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.5" />
|
|
<stop offset="50%" style="stop-color:#ef4444;stop-opacity:0.4" />
|
|
<stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.5" />
|
|
</linearGradient>
|
|
<linearGradient id="coilGradShip2" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#fcd34d;stop-opacity:0.4" />
|
|
<stop offset="100%" style="stop-color:#fca5a5;stop-opacity:0.3" />
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradShip1)" stroke-width="2.5">
|
|
<animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradShip2)" stroke-width="1.8" opacity="0.6">
|
|
<animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle cx="100" cy="100" r="45" fill="url(#coilGradShip1)" opacity="0.15">
|
|
<animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
|
|
</circle>
|
|
<circle cx="100" cy="100" r="35" fill="url(#coilGradShip2)" opacity="0.2" />
|
|
<circle cx="100" cy="100" r="25" fill="url(#coilGradShip1)" opacity="0.25" />
|
|
<circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
|
|
<line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
|
|
<line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
|
|
<line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
|
|
<line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
|
|
<circle cx="100" cy="100" r="4" fill="#f59e0b">
|
|
<animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
|
|
</circle>
|
|
</svg>
|
|
</div>
|
|
<div class="coil-attr-tags">
|
|
<div class="attr-tag attr-top">
|
|
<div class="attr-content">
|
|
<span class="attr-label">发货状态</span>
|
|
<span class="attr-value" :class="coilInfo.status === 1 ? 'futuristic-status-success' : 'futuristic-status-warning'">
|
|
{{ coilInfo.status === 1 ? '已发货' : '未发货' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="coil-futuristic-footer" v-if="coilInfo.status === 1">
|
|
<div class="footer-item">
|
|
<span class="footer-label">发货人</span>
|
|
<span class="footer-value">{{ coilInfo.exportByName || '-' }}</span>
|
|
</div>
|
|
<div class="footer-item">
|
|
<span class="footer-label">发货时间</span>
|
|
<span class="footer-value">{{ formatTime(coilInfo.exportTime) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="coil-futuristic-footer" v-else>
|
|
<div class="footer-item" style="flex: 1;">
|
|
<span class="footer-label">状态</span>
|
|
<span class="footer-value">等待发货</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { formatTime } from '../statusUtils'
|
|
|
|
export default {
|
|
name: 'ShipmentCard',
|
|
props: {
|
|
coilInfo: { type: Object, default: () => ({}) }
|
|
},
|
|
methods: {
|
|
formatTime(time) {
|
|
return formatTime(time)
|
|
}
|
|
}
|
|
}
|
|
</script>
|