androidCnToWechatGrt/pagesStorage/inStorage/goods.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='添加商品'></cus-header>
		<div class="goods" v-if="list.length">
			<div class="good" v-for="(good,index) in list" :key="good.skuId">
				<div class="check" @click="changeCheck(index)">
					<image :src="imgBase+'storage/icon_notchecked_grey.png'" v-if="!good.checked"></image>
					<image :src="imgBase+'storage/icon_checked_blue.png'" v-else></image>
				</div>
				<div class="info">
					<div class="name">{{good.item.itemName}}</div>
					<div class="ggxx">
						规格信息：<span>{{good.itemSku.skuName||''}} / {{good.itemSku.grossWeight||0}}kg / {{good.itemSku.width||0}}X{{good.itemSku.height||0}}cm</span>
					</div>
					<div class="price">
						<div class="left">成本价：<span>￥{{good.itemSku.costPrice||0}}</span></div>
						<div class="right">
							<u-number-box v-model="good.checknum" button-size="48" :integer="true" inputWidth="102rpx" 
							@change="e=>changeNum(e,index)" bgColor="#F5F8FA"></u-number-box>
						</div>
					</div>
				</div>
			</div>
		</div>
		<template v-else>
			<page-empty :height="'calc(100vh - 100px)'"></page-empty>
		</template>
		<div class="btn">
			<div class="left">
				<image :src="imgBase+'storage/icon_checked_blue.png'"></image>
				<text>已选：{{selectNum||0}}</text>
			</div>
			<div class="confirm" @tap="confirmSelect">确定</div>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list:[],
				isOver:false,
				params:{
					page:1,
					limit:10
				},
				selectNum:0,
				ids:[]
			}
		},
		onReachBottom() {
			if(this.isOver) return
			this.getList();
		},
		onPullDownRefresh() {
			this.params.page = 1;
			this.isOver = false;
			this.list = [];
			this.getList();
		},
		watch:{
			list:{
				handler(newValue){
					this.selectNum =  this.list.filter(l=>l.checked).length;
				},
				deep:true,
				immediate:true
			}
		},
		async onLoad(option) {
			let ids = option.ids;
			if(ids.indexOf(',')>-1) ids = ids.split(',');
			else ids = [ids];
			this.ids = ids;
			this.getList();
		},
		methods:{
			async getList(){
				let res = await this.$api.get('/wms/itemSku/page',this.params);
				if(res.data.code===0){
					if(this.list.length<res.data.data.total){
						this.params.page++;
						this.list = [...this.list,...res.data.data.list];
						this.list.forEach((d,i)=>{
							this.$set(this.list[i],'checked',this.ids.includes(d.skuId)?true:false);
							this.$set(this.list[i],'checknum',1);
						})
					}else this.isOver = true
				}else this.$showModal(res.msg)
			},
			changeCheck(index){
				this.$set(this.list[index],'checked',!this.list[index].checked);
			},
			changeNum(e,index){
				this.$set(this.list[index],'checknum',e.value);
			},
			confirmSelect(){
				let sn = this.list.filter(l=>l.checked).length;
				if(sn<1) return this.$showToast('请至少选择一件商品');
				let list = this.list.filter(l=>l.checked);
				this.getOpenerEventChannel().emit('addGoods', list);
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		padding-bottom: 160rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.goods{
			width: calc(100% - 48rpx);
			margin: 0 auto;
			.good{
				width: 100%;
				padding: 34rpx 24rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				display: flex;
				.check{
					width: 56rpx;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
				.info{
					width: calc(100% - 56rpx);
					.name{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 30rpx;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.ggxx{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
						line-height: 24rpx;
						text-align: left;
						margin-top: 23rpx;
						span{
							color: #4E5969;
						}
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 23rpx;
						.left{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							text-align: left;
							span{
								font-weight: bold;
								font-size: 26rpx;
								color: #FF4141;
								margin-left: 24rpx;
							}
						}
					}
				}
			}
		}
	
		.btn{
			width: 100%;
			height: 140rpx;
			padding: 16rpx 20rpx 0 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
					margin-left: 12rpx;
				}
			}
			.confirm{
				width: 200rpx;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>