Files
crm_uiapp/src/pages-erp/purchase-in/scan/components/order-context-bar.vue

86 lines
1.7 KiB
Vue
Raw Normal View History

<template>
<view class="order-context-bar">
<view class="order-context-bar__main">
<view class="order-context-bar__order">
<text class="order-context-bar__label">单号</text>
<text class="order-context-bar__value">{{ orderNo || '-' }}</text>
</view>
<view class="order-context-bar__progress">
已扫 {{ scannedCount }} / {{ targetCount }}
</view>
</view>
<view class="order-context-bar__meta">
<text>供应商{{ supplierName || '-' }}</text>
<text>仓库{{ warehouseName || '-' }}</text>
<text class="order-context-bar__exception">异常{{ exceptionCount }}</text>
</view>
</view>
</template>
<script setup lang="ts">
defineProps<{
orderNo: string
supplierName?: string
warehouseName?: string
scannedCount: number
targetCount: number
exceptionCount: number
}>()
</script>
<style lang="scss" scoped>
.order-context-bar {
padding: 20rpx 24rpx;
border-bottom: 2rpx solid #e5e6eb;
background: rgba(255, 255, 255, 0.96);
&__main,
&__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
}
&__order {
display: flex;
align-items: center;
gap: 12rpx;
min-width: 0;
flex: 1;
}
&__label {
flex-shrink: 0;
color: #86909c;
font-size: 24rpx;
}
&__value {
min-width: 0;
color: #1f2329;
font-size: 30rpx;
font-weight: 600;
}
&__progress {
flex-shrink: 0;
color: #1677ff;
font-size: 24rpx;
font-weight: 600;
}
&__meta {
margin-top: 12rpx;
color: #4e5969;
font-size: 22rpx;
flex-wrap: wrap;
}
&__exception {
color: #d4380d;
}
}
</style>