yunzerwebsiteallinone/uniapp/pages/erp/basic/warehouse.vue

<template>
	<view class="page">
		<view class="filter-bar">
			<view class="search-box">
				<FaIcon name="magnifying-glass" color="#94a3b8" :size="16" />
				<input
					v-model="keyword"
					class="search-input"
					placeholder="搜索仓库名称"
					confirm-type="search"
					@confirm="load"
				/>
			</view>
			<view class="sum-row">
				<text class="sum-item">仓库 {{ list.length }} 个</text>
				<text class="sum-item">在库货值 ¥{{ moneyText(totalValue) }}</text>
			</view>
		</view>

		<view v-if="loading && !list.length" class="state-box">
			<text class="state-text">加载中...</text>
		</view>
		<view v-else-if="!list.length" class="state-box">
			<u-empty mode="list" text="没有仓库" />
			<text class="state-tip">先在 Web 后台「进销存 - 仓库档案」建仓库</text>
		</view>
		<template v-else>
			<view v-for="row in list" :key="row.id" class="w-card" @tap="openStock(row)">
				<view class="w-top">
					<view class="w-icon">
						<FaIcon name="warehouse" color="#2563eb" :size="18" />
					</view>
					<view class="w-main">
						<view class="w-name-row">
							<text class="w-name">{{ row.warehouse_name }}</text>
							<u-tag v-if="Number(row.is_default) === 1" text="默认" type="primary" size="mini" />
							<u-tag v-if="Number(row.status) !== 1" text="停用" type="info" size="mini" />
						</view>
						<text class="w-sub">{{ [row.warehouse_code, row.manager, row.phone].filter(Boolean).join(' · ') || '—' }}</text>
					</view>
					<FaIcon name="chevron-right" color="#cbd5e1" :size="15" />
				</view>
				<view class="w-grid">
					<view class="w-cell">
						<text class="cell-label">在库品种</text>
						<text class="cell-value">{{ row.stock_kinds || 0 }}</text>
					</view>
					<view class="w-cell">
						<text class="cell-label">货值</text>
						<text class="cell-value">¥{{ moneyText(row.stock_value) }}</text>
					</view>
					<view class="w-cell">
						<text class="cell-label">地址</text>
						<text class="cell-value ellipsis">{{ row.address || '—' }}</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
/**
 * 仓库档案（移动端只读）：一屏看清每个仓压了多少货，点进去直接查该仓库存。
 */
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import FaIcon from '@/components/FaIcon.vue'
import { fetchWarehouses, moneyText } from '@/api/erp.js'

const list = ref([])
const keyword = ref('')
const loading = ref(false)

const totalValue = computed(() => list.value.reduce((sum, w) => sum + Number(w.stock_value || 0), 0))

onShow(() => {
	load()
})

async function load() {
	loading.value = true
	try {
		list.value = await fetchWarehouses({ keyword: keyword.value.trim() })
	} catch (e) {
		uni.showToast({ title: '仓库加载失败', icon: 'none' })
	} finally {
		loading.value = false
	}
}

function openStock(row) {
	uni.navigateTo({ url: `/pages/erp/stock/index?warehouse_id=${row.id}&warehouse_name=${encodeURIComponent(row.warehouse_name || '')}` })
}
</script>

<style lang="scss" scoped>
@import '@/src/styles/page-common.scss';

.page {
	min-height: 100vh;
	background: $color-bg-page;
	padding-bottom: 40rpx;
}

.filter-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: $color-bg-page;
	padding: 20rpx $page-padding-x 12rpx;
}

.search-box {
	display: flex;
	align-items: center;
	gap: 12rpx;
	height: 72rpx;
	padding: 0 24rpx;
	background: $color-card;
	border-radius: $radius-full;
	box-shadow: $shadow-card;

	.search-input {
		flex: 1;
		font-size: 26rpx;
		color: $color-text;
	}
}

.sum-row {
	display: flex;
	gap: 28rpx;
	padding: 16rpx 8rpx 4rpx;
}

.sum-item {
	font-size: 24rpx;
	color: $color-text-muted;
}

.w-card {
	@include card;
	margin: 0 $page-padding-x 20rpx;
	padding: 24rpx 28rpx;

	&:active {
		opacity: 0.85;
	}
}

.w-top {
	display: flex;
	align-items: center;
	gap: 18rpx;
}

.w-icon {
	@include icon-box(64rpx);
}

.w-main {
	flex: 1;
	min-width: 0;
}

.w-name-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.w-name {
	font-size: 29rpx;
	font-weight: 500;
	color: $color-text;
}

.w-sub {
	display: block;
	margin-top: 6rpx;
	font-size: 23rpx;
	color: $color-text-muted;
}

.w-grid {
	display: flex;
	margin-top: 20rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid $color-divider;
}

.w-cell {
	flex: 1;
	min-width: 0;

	&:nth-child(3) {
		flex: 1.4;
		padding-left: 20rpx;
	}

	.cell-label {
		display: block;
		font-size: 22rpx;
		color: $color-text-muted;
	}

	.cell-value {
		display: block;
		margin-top: 6rpx;
		font-size: 26rpx;
		color: $color-text;
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 40rpx;
}

.state-text,
.state-tip {
	font-size: 26rpx;
	color: $color-text-muted;
	margin-top: 16rpx;
}
</style>