jsh_erp_app/pages/inventory-inquiry/index.vue

<template>
	<view class="inventory-page">
		<u-navbar height="40px" title="存货查询" bgColor="#fff" autoBack placeholder>
		</u-navbar>
		<view class="container_main">
			<view class="head-box">
				<view class="search-box">
					<u-search placeholder="请输入单据编号" shape="square" v-model="searchKey" :showAction="false"></u-search>
					<view class="scan-icon flex_box flex_row_center">
						<image src="@/static/image/scan-icon-2.png" mode=""></image>
					</view>
				</view>
				<view class="type-box">
					<u-tabs 
						:list="tabList" 
						:inactiveStyle="{color:'#000',fontSize:'24rpx'}"
						:activeStyle="{color:'#000',fontSize:'24rpx'}" 
						lineColor="#0256FF" 
						lineWidth="66rpx" 
						:scrollable="false"
						@click="tabClick"
						>
					</u-tabs>
				</view>
			</view>
			<view class="goods-box">
				<view class="goods-type" @click="typeClick">
					<view class="goods-type-text">{{typeName}}</view>
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
				<view class="goods-cont">
					<view class="goods-cont-left">
						<scroll-view 
						scroll-y
						:style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}"
						>
							<view 
								class="type-item" 
								:class="item.id == typeId ? 'active-item':''" 
								v-for="(item,i) in typeList" 
								:key="i"
								@click="chooseType(item)"
							>
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="goods-cont-right">
						<scroll-view scroll-y :style="{height:`calc(100vh - ${scrollH}px - 40px - 24rpx - 102rpx)`}">
							<block v-for="(item,i) in goodsList" :key="i">
								<good-item :item="item"></good-item>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="typeShow" :defaultIndex="defaultIndex" :columns="columnsList" @confirm="pickerConfirm" @cancel="typeShow= false"></u-picker>
	</view>
</template>

<script>
	import goodItem from '@/components/good-item/good-item.vue'
	export default {
		components:{
			goodItem
		},
		data() {
			return {
				offsetTop: 0,
				searchKey: '',
				current: 0,
				typeShow:false,
				defaultIndex:[],
				typeName:'按分类展示',
				scrollH:0,
				columnsList:[
					['按分类展示','按库位展示']
				],
				typeId:0,
				typeList:[
					{
						name:'全部',
						id:0
					},
					{
						name:'饮料',
						id:1
					},
					{
						name:'食品',
						id:2
					}
				],
				tabList: [{
						index: 0,
						name: '有库存'
					},
					{
						index: 1,
						name: '无库存'
					},
					{
						index: 2,
						name: '全部'
					}
				],
				goodsList:[
					{
						src:'',
						name:'大童专用氨基酸洗发水',
					},
					{
						src:'',
						name:'大童专用氨基酸洗发水',
					},
					{
						src:'',
						name:'大童专用氨基酸洗发水',
					},
					{
						src:'',
						name:'大童专用氨基酸洗发水',
					},
					{
						src:'',
						name:'大童专用氨基酸洗发水',
					}
				]
			}
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight;
			let headH = 0;
			const query = uni.createSelectorQuery().in(this);
			query.select('.head-box').boundingClientRect(rect => {
					headH = rect.height
					this.scrollH = statusBarHeight + headH
			}).exec()
		},
		onLoad() {
			// let systemInfo = uni.getSystemInfoSync();
			// let statusBarHeight = systemInfo.statusBarHeight;
			// this.offsetTop = statusBarHeight + 40
			
			
		},
		methods: {
			tabClick() {

			},
			typeClick() {
				let index = this.columnsList[0].findIndex(item=>item == this.typeName)
				this.defaultIndex = [index]
				this.typeShow = true
			},
			pickerConfirm(val) {
				this.typeName = val.value[0]
				this.typeShow = false
			},
			chooseType(item) {
				this.typeId = item.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inventory-page {
		min-height: 100vh;
		background: #F0F6FB;

		.container_main {
			.head-box {
				background-color: #fff;
			}
			.search-box {
				background-color: rgba(191, 200, 219, 0.2);
				margin: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 8rpx;

				::v-deep .u-search__content {
					background-color: transparent !important;

					.u-search__content__input {
						background-color: transparent !important;
					}
				}

				.scan-icon {
					width: 100rpx;
					height: 100%;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		
			.goods-box {
				margin-top: 24rpx;
				.goods-type {
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					height: 102rpx;
					background-color: #fff;
					&-text {
						color: #0256FF;
						font-size: 28rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}
			
				.goods-cont {
					display: flex;
					.goods-cont-left {
						width: 160rpx;
						background-color: #F0F6FB;
						.type-item {
							width: 100%;
							height: 84rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #666;
							font-family: "PingFang SC";
							font-size: 28rpx;
							font-weight: 400;
						}
						.active-item {
							background-color: #fff;
							color: #333;
							font-weight: bold;
						}
					}
					.goods-cont-right {
						flex: 1;
						background-color: #fff;
					}
				}
			}
		}
	}
</style>