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">{{ wareHouseCard.totalCost }}</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">{{ wareHouseCard.uploadCostToday }}</text>
				</view>
				<view class="card-item">
					<text class="card-label">今日下架</text>
					<text class="card-value green">{{ wareHouseCard.outStockToday }}</text>
				</view>
				<view class="card-item">
					<text class="card-label">商品总数</text>
					<text class="card-value">{{ wareHouseCard.totalNum }}</text>
				</view>
			</view>

			<view class="search-wrapper">
				<u-search placeholder="搜索编号、名称、品牌..." v-model="searchString" bg-color="#f9fafb" border-radius="4rpx"
					:show-action="false" class="search-input-wrap" showAction @clear="handleSearch" @custom="handleSearch"></u-search>
			</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" @click="sortPickerShow = true">
					<text class="sort-text">{{ curSortType.label }}</text>
					<u-icon name="arrow-down" size="12" color="#666666" class="sort-icon"></u-icon>
					<u-picker :show="sortPickerShow" :columns="sortColumns" keyName="label" @confirm="handleSortChange" @cancel="sortPickerShow = false"></u-picker>
				</view>

				<view class="price-layout-btn">
					<view class="price-btn" type="text" @click="priceVisibleChange">
						<u-icon :name="priceVisible ? 'eye' : 'eye-off'" size="18" color="#1890ff" class="price-icon"></u-icon>
						<text class="price-text">价格可见</text>
					</view>
					<view class="layout-btn" type="text" size="mini" @click="openSearchFilter">
						<u-icon name="grid" size="20" color="#666666"></u-icon>
						<!-- 筛选列 品牌、价格范围、位置、回收时间、回收人员、鉴定人员、商品属性 -->
					</view>
					<searchFilter ref="searchFilter" @confirm="handleSearch"></searchFilter>
				</view>
			</view>

			<scroll-view class="goods-list" scroll-y @scrolltolower="handleLoadMore" enable-back-to-top>
				<view @click="handleToDetail(goods)" 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 > 0"></view>
					</view>

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

						<view class="price-group">
							<view class="price-items">
								<view class="price-item">
									<text class="price-type">成本价</text>
									<text class="price">¥{{ priceVisible ? goods.costPrice : '****' }}</text>
								</view>
								<view class="price-item">
									<text class="price-type">销售价</text>
									<text class="price sales">¥{{ priceVisible ? goods.salesPrice : '****' }}</text>
								</view>
							</view>
							<view class="price-items">
								<view class="price-item">
									<text class="price-type">同行价</text>
									<text class="price">¥{{ priceVisible ? goods.peerPrice : '****' }}</text>
								</view>
								<view class="price-item">
									<text class="price-type">代理价</text>
									<text class="price">¥{{ priceVisible ? 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">
						<view></view>
						<!-- <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>
				<show-emtry v-if="goodsList.length === 0"></show-emtry>
			</scroll-view>
			
		</view>
		<!-- 添加按钮 -->
		<view class="add-button" @click="handleAdd">
			<u-icon name="plus" size="36" color="#ffffff"></u-icon>
		</view>
	</view>
	
</template>

<script>
	import searchFilter from './components/searchFilter.vue'
export default {
	components: {
		searchFilter,
	},
	data() {
		return {
			searchString:'',//搜索编号、名称、品牌...
			searchInfo:{},
			pageNum:1,
			pageSize:10,
			curSortType:{
				id:4,
				label: '按入库最新',
			},
			wareHouseCard:{
				totalCost: '-',
				uploadCostToday: '-',
				outStockToday: '-',
				totalNum: '-'
			},
			tabList: [
				{ name: "全部", id: 1 },
				{ name: "腕表", id: 2 },
				{ name: "箱包", id: 3 },
				{ name: "珠宝", id: 4 },
				{ name: "鞋靴", id: 5 },
				{ name: "配饰", id: 6 },
				{ name: "服饰", id: 7 },
				{ name: "其它", id: 8 }
			],
			goodsList: [
				// {
				// 	id:'123456754',//商品库存id
				// 	name:'Rolex',//商品名称
				// 	model:'Submariner Date 126610LN',//型号
				// 	costPrice:'12345',//成本价格
				// 	salesPrice:'12345',//销售价格
				// 	peerPrice:'12345',//同行价格
				// 	agentPrice:'12345',//代理价格
				// 	stock:'12345',//库存数量
				// 	imgUrl:'https://xiaohulu-crm.oss-cn-shanghai.aliyuncs.com/crm/2026/01/06/1767677335839-1767677330379.jpg',//商品图片
				// 	platform:[]//同步平台，此功能暂时不做，先定义一个字段
				// }
			],
			sortPickerShow: false,
			sortColumns: [[
				{
					label:'按最久未下载',
					id:1
				},
				{
					label:'按最近更新',
					id:2
				},
				{
					label:'按最久更新',
					id:3
				},
				{
					label:'按入库最新',
					id:4
				},
				{
					label:'按入库最久',
					id:5
				},
				{
					label:'按价格最高',
					id:6
				},
				{
					label:'按价格最低',
					id:7
				},
			]],
			priceVisible:true,
			searchPopShow:false,
			total:0
		};
	},
	methods: {
		getList(){
			uni.$u.api.wareHouseList({
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			},
			{
				searchString:this.searchString,
				sortType:this.curSortType.id,
				...this.searchInfo,
			}).then(res => {
				if(this.pageNum == 1){
					this.goodsList = res.rows;
				}else{
					this.goodsList = this.goodsList.concat(res.rows);
				}
				this.total = res.total;
			});
		},
		// 加载更多
		handleLoadMore() {
			console.log("加载更多");
			if(this.goodsList.length >= this.total){
				uni.$u.toast("没有更多了");
				return;
			}
			this.pageNum++;
			this.getList();
		},
		handleSearch(info){
			this.pageNum = 1;
			this.searchInfo = info;
			this.goodsList = [];
			this.getList();
		},
		switchTab(item) {
			this.searchInfo.category = item.id;
			this.handleSearch();
		},
		handleToDetail(item) {
			uni.navigateTo({
				url: `/pages/wareHouse/components/detail?id=${item.id}`,
			});
		},
		handleAdd() {
			console.log("点击添加按钮");
			uni.navigateTo({
				url: `/pages/wareHouse/components/add`
			});
		},
		// 获取仓库卡片数据
		getCard() {
			uni.$u.api.getWareHouseCard({ userId: this.$store.state.user.userInfo.userId }).then(res => {
				if (res.code === 200) {
					this.wareHouseCard = res.data;
				}
			});
		},
		handleSortChange(e){
			this.curSortType = e.value[0];
			this.sortPickerShow = false;
			this.handleSearch();
		},
		priceVisibleChange(){
			this.priceVisible = !this.priceVisible;
		},
		openSearchFilter(){
			this.$refs.searchFilter.open();
		},
	},
	mounted() {
		this.getCard();
		this.getList();
	}
};
</script>

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