jsh_erp_app/components/goods-pop/goods-pop.vue

<template>
	<view>
		<u-popup :show="goodsShow"  @close="closeClick" :round="10">
			<view class="goods-box">
				<view class="goods-head">
					<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="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>
				<view class="goods-cont">
					<view class="goods-cont-left">
						<scroll-view class="goods-scroll" scroll-y>
							<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 class="goods-scroll" scroll-y>
							<block v-for="(item,i) in goodsList" :key="i">
								<good-item :item="item">
									<view class="num-box">
										<view class="num-box-text" v-if="type == 'caigou'">入库数量</view>
										<view class="num-box-text" v-else>出库数量</view>
										<u-number-box v-model="item.numberVal">
											<view slot="minus" class="minus">
												<u-icon name="minus" color="#0256FF" size="12"></u-icon>
											</view>
											<text slot="input" class="input">{{item.numberVal}}</text>
											<view slot="plus" class="plus">
												<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
											</view>
										</u-number-box>
									</view>
								</good-item>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker class="picler-class" :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
		},
		props:{
			value:{
				type:Boolean,
				default:false
			},
			type:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				searchKey:'',
				goodsShow:false,
				defaultIndex:[],
				typeName:'按分类展示',
				columnsList:[
					['按分类展示','按库位展示']
				],
				typeId:0,
				typeList:[
					{
						name:'全部',
						id:0
					},
					{
						name:'饮料',
						id:1
					},
					{
						name:'食品',
						id:2
					}
				],
				goodsList: [
					{
						src: '',
						name: '大童专用氨基酸洗发水',
						numberVal:1,
					}, {
						src: '',
						name: '大童专用氨基酸洗发水',
						numberVal:4,
					},{
						src: '',
						name: '大童专用氨基酸洗发水',
						numberVal:0,
					}
				],
				typeShow:false,
			}
		},
		watch:{
			value: {
				handler(val) {
					this.goodsShow = val
				},
				immediate:true
			}
		},
		methods:{
			closeClick() {
				this.$emit('close')
			},
			confirmClick() {
				this.$emit('confirm')
			},
			typeClick() {
				let index = this.columnsList[0].findIndex(item=>item == this.typeName)
				this.defaultIndex = [index]
				this.typeShow = true
			},
			tabClick() {
			
			},
			pickerConfirm(val) {
				this.typeName = val.value[0]
				this.typeShow = false
			},
			chooseType(item) {
				this.typeId = item.id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-box {
		margin-top: 24rpx;
		.goods-head {
			display: flex;
			align-items: center;
			.goods-type {
				display: flex;
				align-items: center;
				padding-left: 24rpx;
				height: 102rpx;
				background-color: #fff;
				flex-shrink: 0;
				&-text {
					color: #0256FF;
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
		
			.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-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;
			}
			.goods-scroll {
				height: 75vh;
			}
		}
		.num-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 48rpx 0 26rpx;
			.num-box-text {
				color: #666;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-weight: 400;
			}
			.input {
				width: 112rpx;
				text-align: center;
				border-bottom: 1px solid #0256FF;
				margin: 0 8rpx;
			}
			.minus {
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				border: 1px solid #0256FF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.plus {
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				background-color: #0256FF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.picler-class {
		::v-deep .u-fade-enter-active {
			z-index: 10098!important;
		}
		::v-deep  .u-slide-up-enter-active {
			z-index: 10099!important;
		}
	}
</style>