crm-app-vue3/pages/wareHouse/index.vue

<template>
	<view class="page">
		<view class="page-container">
			<u-navbar class="nav-bar" title="库存管理" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
			<!-- 总资产成本区域 -->
			<view class="asset-header">
				<view class="asset-text-wrap">
					<view class="asset-title-con">
						<view class="asset-title">总资产成本（元）</view>
						<u-icon name="question-circle" size="14" color="#999999"></u-icon>
					</view>
					<text class="asset-value">3,869,014</text>
				</view>
				<u-button class="view-btn" type="text" size="mini">查看财务报表</u-button>
			</view>
			<view class="data-cards">
				<view class="card-item">
					<text class="card-label">今日上传</text>
					<text class="card-value">12</text>
				</view>
				<view class="card-item">
					<text class="card-label">今日下架</text>
					<text class="card-value green">8</text>
				</view>
				<view class="card-item">
					<text class="card-label">商品总数</text>
					<text class="card-value">2</text>
				</view>
			</view>

			<view class="search-wrapper">
				<u-search placeholder="搜索编号、名称、品牌..." bg-color="#f9fafb" border-radius="4rpx"
					:show-action="false" class="search-input-wrap"></u-search>
				<view class="search-filter-btn">
					<u-icon name="list" size="22" color="#666666"></u-icon>
				</view>
			</view>

			<view class="category-tabs-wrap">
				<u-tabs :list="tabList" :is-scroll="true" active-color="#007aff" inactive-color="#666666" font-size="28rpx"
					border-bottom="none" @change="switchTab" class="u-tabs-custom"></u-tabs>
			</view>

			<view class="filter-bar">
				<view class="sort-btn">
					<text class="sort-text">{{ currentSortText }}</text>
					<u-icon name="arrow-down" size="12" color="#666666" class="sort-icon"></u-icon>
				</view>

				<view class="price-layout-btn">
					<view class="price-btn" type="text">
						<u-icon name="eye" size="18" color="#1890ff" class="price-icon"></u-icon>
						<text class="price-text">价格可见</text>
					</view>

					<view class="layout-btn" type="text" size="mini">
						<u-icon name="grid" size="20" color="#666666"></u-icon>
					</view>
				</view>
			</view>

			<view class="goods-list">
				<view @click="handleToDetail" class="goods-item" v-for="(goods, goodsIndex) in goodsList" :key="`goods-${goodsIndex}`">
					<view class="goods-img-container">
						<image class="goods-img" :src="goods.imgUrl" mode="aspectFill" lazy-load></image>
						<view class="stock-indicator"
							v-if="goods.stock !== null && goods.stock !== undefined && goods.stock > 0"></view>
					</view>

					<view class="goods-info">
						<text class="goods-brand">{{ goods.brand || '' }}</text>
						<text class="goods-name">{{ goods.name || '' }}</text>

						<view class="price-group">
							<view class="price-items">
								<view class="price-item">
									<text class="price-type">成本价</text>
									<text class="price">¥{{ goods.costPrice }}</text>
								</view>
								<view class="price-item">
									<text class="price-type">销售价</text>
									<text class="price sales">¥{{ goods.salesPrice }}</text>
								</view>
							</view>
							<view class="price-items">
								<view class="price-item">
									<text class="price-type">同行价</text>
									<text class="price">¥{{ goods.peerPrice }}</text>
								</view>
								<view class="price-item">
									<text class="price-type">代理价</text>
									<text class="price">¥{{ goods.agentPrice }}</text>
								</view>
							</view>
						</view>

						<view class="others">
							<view class="other-item stock" >得</view>
							<view class="other-item">得</view>
							<view class="other-item">得</view>
						</view>
					</view>
					<view class="more">
						<u-icon name="more-dot-fill" size="16" color="#666666"></u-icon>
						<text class="goods-stock"
							v-if="goods.stock !== null && goods.stock !== undefined && goods.stock > 0">数量:{{ goods.stock
							}}</text>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 添加按钮 -->
		<view class="add-button" @click="handleAdd">
			<u-icon name="plus" size="36" color="#ffffff"></u-icon>
		</view>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			tabList: [
				{ name: "全部" },
				{ name: "腕表" },
				{ name: "箱包" },
				{ name: "珠宝" },
				{ name: "鞋靴" },
				{ name: "配饰" },
				{ name: "服饰" },
				{ name: "其它" }
			],
			currentSortText: '按最近更新排序',
			goodsList: [
				{
					imgUrl: require("./imgs/1.jpg"),
					brand: "ROLEX",
					name: "Submariner Date 126610LN",
					costPrice: "92,500",
					salesPrice: "89,000",
					peerPrice: "92,500",
					agentPrice: "89,000",
					stock: 1
				},
				{
					imgUrl: require("./imgs/1.jpg"),
					brand: "ROLEX",
					name: "Submariner Date 126610LN",
					costPrice: "92,500",
					salesPrice: "89,000",
					peerPrice: "92,500",
					agentPrice: "89,000",
					stock: 1
				},
				{
					imgUrl: require("./imgs/1.jpg"),
					brand: "ROLEX",
					name: "Submariner Date 126610LN",
					costPrice: "92,500",
					salesPrice: "89,000",
					peerPrice: "92,500",
					agentPrice: "89,000",
					stock: 1
				},
				{
					imgUrl: require("./imgs/1.jpg"),
					brand: "ROLEX",
					name: "Submariner Date 126610LN",
					costPrice: "92,500",
					salesPrice: "89,000",
					peerPrice: "92,500",
					agentPrice: "89,000",
					stock: 1
				},
				{
					imgUrl: require("./imgs/1.jpg"),
					brand: "ROLEX",
					name: "Submariner Date 126610LN",
					costPrice: "92,500",
					salesPrice: "89,000",
					peerPrice: "92,500",
					agentPrice: "89,000",
					stock: 1
				}
			]
		};
	},
	methods: {
		switchTab(index) {
			console.log("当前选中标签索引：", index);
		},
		handleToDetail() {
			uni.navigateTo({
				url: `/pages/wareHouse/detail`
			});
		},
		handleAdd() {
			console.log("点击添加按钮");
			uni.navigateTo({
				url: `/pages/wareHouse/add`
			});
		},
	}
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>