<template>
|
<view class="detail-page">
|
<PageHeader title="库存详情" @back="goBack" />
|
<view v-if="loading" class="loading-wrap">
|
<text class="loading-text">加载中...</text>
|
</view>
|
<view v-else-if="detail" class="detail-wrap">
|
<view class="section-card">
|
<view class="section-head">
|
<view class="section-dot"></view>
|
<text class="section-title">基础信息</text>
|
</view>
|
<view class="section-body">
|
<view class="detail-row">
|
<text class="label">序号</text>
|
<text class="value">{{ detail.index ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">产品大类</text>
|
<text class="value value-strong">{{ detail.productName || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">规格型号</text>
|
<text class="value">{{ detail.model || '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">单位</text>
|
<text class="value">{{ detail.unit || '-' }}</text>
|
</view>
|
<view class="detail-row detail-row-highlight">
|
<text class="label">总库存</text>
|
<text class="value value-num">{{ detail.qualitity ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">冻结数量</text>
|
<text class="value">{{ detail.lockedQuantity ?? 0 }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">可用库存</text>
|
<text class="value">{{ detail.unLockedQuantity ?? '-' }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">库存类型</text>
|
<text class="value">{{ detail.typeLabel }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">最近更新时间</text>
|
<text class="value">{{ detail.updateTime || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-else class="empty">
|
<text class="empty-text">暂无详情数据</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
|
const detail = ref(null);
|
const loading = ref(true);
|
|
function normalizeDetail(raw, type) {
|
if (!raw) return null;
|
const d = typeof raw === "object" ? raw : {};
|
return {
|
index: d.index ?? 1,
|
productName: d.productName,
|
model: d.model,
|
unit: d.unit,
|
qualitity: d.qualitity,
|
lockedQuantity: d.lockedQuantity,
|
unLockedQuantity: d.unLockedQuantity ?? (d.qualitity - (d.lockedQuantity || 0)),
|
updateTime: d.updateTime,
|
typeLabel: type === "1" ? "不合格库存" : "合格库存",
|
};
|
}
|
|
onLoad(() => {
|
const cached = uni.getStorageSync("stockDetailItem");
|
if (cached) {
|
try {
|
const payload = typeof cached === "string" ? JSON.parse(cached) : cached;
|
const item = payload && payload.item != null ? payload.item : payload;
|
const type = payload && payload.type != null ? payload.type : "0";
|
detail.value = normalizeDetail({ ...item, index: 1 }, type);
|
uni.removeStorageSync("stockDetailItem");
|
} catch (e) {
|
uni.removeStorageSync("stockDetailItem");
|
}
|
}
|
loading.value = false;
|
});
|
|
const goBack = () => uni.navigateBack();
|
</script>
|
|
<style lang="scss" scoped>
|
.detail-page { min-height: 100vh; background: linear-gradient(180deg, #e8eef7 0%, #f2f5fa 100%); padding-bottom: 48rpx; }
|
.loading-wrap { padding: 120rpx 48rpx; text-align: center; }
|
.loading-text { color: #8c9aa8; font-size: 28rpx; }
|
.empty { padding: 120rpx 48rpx; text-align: center; }
|
.empty-text { color: #8c9aa8; font-size: 28rpx; }
|
.detail-wrap { padding: 24rpx 24rpx 32rpx; }
|
.section-card { background: #fff; border-radius: 24rpx; overflow: hidden; margin-bottom: 28rpx; box-shadow: 0 8rpx 32rpx rgba(41, 121, 255, 0.06); border: 1rpx solid rgba(41, 121, 255, 0.06); }
|
.section-head { display: flex; align-items: center; padding: 28rpx 32rpx; background: linear-gradient(135deg, #f8fbff 0%, #f0f6ff 100%); border-bottom: 1rpx solid #eef3fa; }
|
.section-dot { width: 8rpx; height: 8rpx; border-radius: 50%; background: #2979ff; margin-right: 16rpx; }
|
.section-title { font-size: 30rpx; font-weight: 600; color: #1e3a5f; letter-spacing: 0.5rpx; }
|
.section-body { padding: 8rpx 32rpx 24rpx; }
|
.detail-row { display: flex; align-items: center; min-height: 96rpx; padding: 0 16rpx; border-radius: 12rpx; font-size: 28rpx; margin-bottom: 4rpx; }
|
.detail-row .label { width: 200rpx; flex-shrink: 0; color: #6b7c93; font-size: 26rpx; }
|
.detail-row .value { flex: 1; color: #2c3e50; text-align: right; word-break: break-all; font-size: 28rpx; }
|
.detail-row .value-strong { color: #1e3a5f; font-weight: 500; }
|
.detail-row .value-num { color: #2979ff; font-weight: 600; font-size: 32rpx; }
|
.detail-row-highlight { background: linear-gradient(90deg, rgba(41, 121, 255, 0.06) 0%, transparent 100%); margin: 12rpx -16rpx 4rpx; padding: 20rpx 16rpx; }
|
</style>
|
