commodity-manage-app/pages/commodity/commodity.vue

<template>
	<view class="page-css">
		<view class="list_box">
			<view class="list_item" v-for="(item,index) in listData" :key="item.id">
				<view class="name">
					<text class="name_text">{{item.name}}</text>
					<text class="code_text">{{item.code}}</text>
				</view>
				<view class="">规格：{{item.specifications}}</view>
				<view class="model_box">
					<span>型号：{{item.modelNum}}</span>
					<view class="add_box">
						<u-number-box v-model="item.addNum" @change="valChange(item)"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed_box">
			<view class="" style="position: relative;margin-left: 20rpx;" @click="showPopup">
				<u-badge type="error" :count="selectedNum" :offset="[0,2]"></u-badge>
				<!-- <image src="../" alt="" style="width: 80rpx;height: 80rpx;" /> -->
				<image src="../../static/images/shop.png" mode="" style="width: 80rpx;height: 80rpx;"></image>
			</view>
			<view class="button_box">
				<u-button type="primary" :plain="true" style="width: 100%;height: 100%;"  @click="addCommodity()">确定</u-button>
			</view>
		</view>
		<u-popup
		  v-model="showSelected"
		  mode="bottom"
		  border-radius="30"
		  :mask-close-able="false"
		  :closeable="true"
		  @close="closePop"
		>
		  <view class="popup-content">
			  <view class="title_box">商品清单</view>
			  <scroll-view scroll-y="true" :style="{height:selectedNum > 3 ? '530rpx' : ''}">
			  <view class="selected_box">
				  <view class="selected_box_item" v-for="(item,index) in selectedArr" :key="item.id">
				  	<view class="name">
						<view class="name_left">
							<text class="name_text">{{item.name}}</text>
							<text class="code_text" style="margin-left: 20rpx;">{{item.code}}</text>
						</view>
				  		<view class="delete_box" @click="deleteNum(item)">
				  			<image style="width: 32rpx;height: 32rpx;" src="../../static/images/delete.png" mode=""></image>
				  		</view>
				  	</view>
				  	<view class="">规格：{{item.specifications}}</view>
				  	<view class="model_box">
				  		<span>型号：{{item.modelNum}}</span>
				  		<view class="add_box">
				  			<u-number-box v-model="item.addNum" @change="valChange(item)"></u-number-box>
				  		</view>
				  	</view>
				  </view>
			  </view>
			  </scroll-view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				listData:[],
				selectedNum:0,
				showSelected:false,
				selectedArr:[],
				optionArr:[],
				formData:{},
			}
		},
		
		onLoad(option) {
			this.optionArr = option.selectArr ? JSON.parse(option.selectArr) : [],
			this.selectedArr = JSON.parse(JSON.stringify(this.optionArr))
			this.selectedNum = this.optionArr.length
			this.formData = {
				date:option.date ? option.date : '',
				address:option.address ? option.address : ''
			}
		},
		mounted(){
			this.getList()
		},
		methods:{
			getList(){
				console.log('111111111111111111111')
				this.$u.api.getAllGoods().then(res =>{
					if(this.optionArr.length == 0){
						res.data.forEach(item =>{
							item.addNum = 0
						})
						this.listData = res.data
					}else{
						res.data.map(item =>{
							item.addNum = 0
							this.optionArr.map(item1=>{
								if(item.id == item1.id){
									item.addNum = item1.addNum
								}
							})
						})
						this.listData = res.data
						console.log('listData====================',this.listData)
					}
					
				})
			},
			deleteNum(item){
				item.addNum = 0
				this.selectedNum = this.listData.filter(item => item.addNum != 0).length
				this.selectedArr = this.listData.filter(item => item.addNum != 0)
			},
			addNum(item){
				item.addNum = item.addNum + 1
			},
			valChange(value){
				this.listData.map(item =>{
					if(item.id == value.id){
						item.addNum = value.addNum
					}
				})
				this.selectedNum = this.listData.filter(item => item.addNum != 0).length
				this.selectedArr = this.listData.filter(item => item.addNum != 0)
			},
			addCommodity(){
				if(this.selectedArr.length == 0){
					uni.showToast({ title: "至少选择一个商品", icon: "none" });
				}else{
					uni.redirectTo({
						url:'/pages/commodity/addOrder?selectArr=' + JSON.stringify(this.selectedArr) + '&date=' + this.formData.date + '&address=' + this.formData.address 
					})
				}
			},
			showPopup(){
				if(this.selectedNum && this.selectedNum != 0){
					this.showSelected = true
				}
			},
			closePop(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-css {
  width: 100%;
  padding: 0;
  padding-top: 20rpx;
  padding-bottom: 140rpx;
  background: rgba(239, 239, 239, 1);
  
  .list_box{
	  width: 95%;
	  margin: 0 auto;
	  
	  .list_item{
		  padding: 20rpx;
		  width: 100%;
		  background: #fff;
		  border-radius: 10rpx;
		  margin-bottom: 20rpx;
		  
		  .name{
			  margin-bottom: 10rpx;
			  display: flex;
			  
			  .name_text{
				  font-size: 14px;
				  font-weight: bold;
			  }
			  .code_text{
				  margin-left: 30rpx;
			  }
		  }
		  
		  .model_box{
			  display: flex;
			  justify-content: space-between;
			  
			  .add_box{
				  display: flex;
				  align-items: center;
				  
				  .add_item{
					  width: 30rpx;
					  height: 40rpx;
					  display: flex;
					  align-items: center;
					  justify-content: center;
					  border: 1px solid #000;
					  margin: 0 20rpx;
				  }
			  }
		  }
	  }
	  
	  
  }
  .fixed_box{
	  	position: fixed;
	  	bottom: 0;
		width: 100%;
	  	height: 120rpx;
	  	background: #fff;
		display: flex;
		z-index: 300000;
		align-items: center;
		justify-content: space-between;
		
		.button_box{
			width: 200rpx;
			height: 60rpx;
			margin-right: 40rpx;
		}
	  }
	  
	.popup-content {
	  position: relative;
	  background: #fff;
	  box-shadow: 0px, -2px rgba(0, 0, 0, 0.25);
	  padding: 32rpx;
	  position: relative;
	  padding-bottom: 140rpx;
	  
	  
		
		.title_box{
			font-size: 18px;
			width: 100%;
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		.selected_box{
			width: 100%;
			margin: 0 auto;
			max-height: 530rpx;
			
			
			.selected_box_item{
				padding: 20rpx;
				margin-bottom: 10rpx;
				border-radius: 20rpx;
				background: #e6e6e6;
				.name{
					display: flex;
					justify-content: space-between;
				}
				
				.model_box{
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
  
}
</style>