yunzerwebsiteallinone/uniapp/pages/erp/basic/product.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="refresh"
				/>
				<text v-if="keyword" class="search-clear" @tap="clearKeyword">清空</text>
			</view>
			<view class="chip-row">
				<view class="chip" :class="{ active: filterKey === 'category' }" @tap="openPicker('category')">
					<text>{{ categoryName || '全部分类' }}</text>
					<FaIcon name="chevron-right" color="#94a3b8" :size="12" />
				</view>
				<view class="chip" :class="{ active: onlyEnabled }" @tap="toggleEnabled">
					<text>仅在售</text>
				</view>
				<view class="chip count">
					<text>共 {{ total }} 个</text>
				</view>
			</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="search" text="没有匹配的商品" />
			<text class="state-tip">商品建档请在 Web 后台「进销存 - 商品档案」完成</text>
		</view>
		<template v-else>
			<view v-for="row in list" :key="row.id" class="p-card" @tap="openDetail(row)">
				<view class="p-top">
					<text class="p-name">{{ row.product_name }}</text>
					<u-tag
						v-if="row.safety_state !== 'normal'"
						:text="safetyStateLabel(row.safety_state)"
						:type="row.safety_state === 'low' ? 'warning' : 'primary'"
						size="mini"
					/>
					<u-tag v-else-if="!isOnSale(row)" text="停用" type="info" size="mini" />
				</view>
				<text class="p-sub">{{ [row.product_code, row.spec, row.category_name].filter(Boolean).join(' · ') || '—' }}</text>
				<view class="p-grid">
					<view class="p-cell">
						<text class="cell-label">库存</text>
						<text class="cell-value">{{ qtyText(row.total_stock) }} {{ row.base_unit || '' }}</text>
					</view>
					<view class="p-cell">
						<text class="cell-label">售价</text>
						<text class="cell-value">¥{{ moneyText(row.sale_price) }}</text>
					</view>
					<view class="p-cell">
						<text class="cell-label">采购价</text>
						<text class="cell-value">¥{{ moneyText(row.purchase_price) }}</text>
					</view>
				</view>
			</view>
			<view v-if="finished" class="load-done">
				<text>{{ list.length ? '没有更多了' : '' }}</text>
			</view>
		</template>

		<ErpPicker
			:show="picker.show"
			title="选择分类"
			placeholder="搜索分类"
			:options="categoryOptions"
			:model-value="categoryId"
			@update:show="picker.show = false"
			@select="onCategory"
		/>
	</view>
</template>

<script setup>
/**
 * 商品档案（移动端只读）。
 * 建档、改价、启停都在 Web 后台做，手机端只负责「查得到、看得清、点得进」，
 * 库存与价格取的正是 Web 端同一批接口字段，两端不会出现两套数。
 */
import { computed, ref } from 'vue'
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import FaIcon from '@/components/FaIcon.vue'
import ErpPicker from '@/components/erp/ErpPicker.vue'
import {
	fetchCategories,
	fetchProducts,
	moneyText,
	qtyText,
	safetyStateLabel
} from '@/api/erp.js'

const PAGE_SIZE = 20

const list = ref([])
const total = ref(0)
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const keyword = ref('')
const categoryId = ref('')
const onlyEnabled = ref(false)
const categories = ref([])

const picker = ref({ show: false })
const filterKey = ref('')

const categoryName = computed(() => {
	const hit = categories.value.find((c) => String(c.id) === String(categoryId.value))
	return hit ? hit.name : ''
})

const categoryOptions = computed(() =>
	categories.value.map((c) => ({
		value: c.id,
		label: c.name,
		sub: c.level_text || '',
		extra: `${c.product_count || 0} 个`
	}))
)

onShow(() => {
	refresh()
	loadCategories()
})

onReachBottom(() => {
	if (finished.value || loading.value) return
	loadMore()
})

async function loadCategories() {
	if (categories.value.length) return
	try {
		const { list: rows } = await fetchCategories()
		const nameOf = {}
		rows.forEach((c) => {
			nameOf[c.id] = c.category_name
		})
		categories.value = rows.map((c) => ({
			id: c.id,
			name: c.category_name,
			level_text: c.parent_id && nameOf[c.parent_id] ? `上级：${nameOf[c.parent_id]}` : '',
			product_count: c.product_count || 0
		}))
	} catch (e) {
		// 分类拉不到不影响商品列表，只是筛选栏少一项
	}
}

async function refresh() {
	page.value = 1
	finished.value = false
	list.value = []
	await loadPage()
}

async function loadMore() {
	page.value += 1
	await loadPage()
}

async function loadPage() {
	loading.value = true
	try {
		const data = await fetchProducts({
			page: page.value,
			pageSize: PAGE_SIZE,
			keyword: keyword.value.trim(),
			categoryId: categoryId.value,
			onlyEnabled: onlyEnabled.value
		})
		const rows = data.list || []
		list.value = page.value === 1 ? rows : [...list.value, ...rows]
		total.value = data.total || 0
		finished.value = list.value.length >= total.value
	} catch (e) {
		if (page.value > 1) page.value -= 1
	} finally {
		loading.value = false
	}
}

function clearKeyword() {
	keyword.value = ''
	refresh()
}

function toggleEnabled() {
	onlyEnabled.value = !onlyEnabled.value
	refresh()
}

function openPicker(key) {
	filterKey.value = key
	picker.value.show = true
}

function onCategory(opt) {
	categoryId.value = String(opt.value) === String(categoryId.value) ? '' : opt.value
	refresh()
}

function isOnSale(row) {
	return Number(row.status) === 1 && Number(row.is_draft) !== 1
}

function openDetail(row) {
	uni.navigateTo({ url: `/pages/erp/basic/product-detail?id=${row.id}` })
}
</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 8rpx;
}

.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;
	}

	.search-clear {
		font-size: 24rpx;
		color: $color-text-muted;
	}
}

.chip-row {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-top: 18rpx;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6rpx;
	padding: 10rpx 22rpx;
	border-radius: $radius-full;
	background: $color-card;
	font-size: 24rpx;
	color: $color-text-secondary;
	box-shadow: $shadow-card;

	&.active {
		background: #2563eb;
		color: #ffffff;
	}

	&.count {
		margin-left: auto;
		background: transparent;
		box-shadow: none;
		color: $color-text-muted;
	}
}

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

	&:active {
		opacity: 0.85;
	}
}

.p-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12rpx;
}

.p-name {
	flex: 1;
	font-size: 29rpx;
	font-weight: 500;
	color: $color-text;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

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

.p-cell {
	flex: 1;

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

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

.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;
}

.load-done {
	display: flex;
	justify-content: center;
	padding: 8rpx 0 24rpx;
	font-size: 24rpx;
	color: $color-text-muted;
}
</style>