aiot-app/pages/production/order/prepare/addpick.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="添加领料"
      @clickLeft="back"
    >
    </uni-nav-bar>
	<div class="search">
		<div class="search-top">
			<uni-search-bar
			  @input="search"
			  v-model="searchKey"
			  cancelButton="none"
			  placeholder="编码/名称"
			>
			</uni-search-bar>
			<view class="fixed screen" @click="filter">
				<span>筛选</span>
				<uni-icons custom-prefix="iconfont" type="icon-shaixuan" size="16" color="#000"></uni-icons>
			</view>
		</div>
		<div class="search-btm">
			<div>已选 0/245</div>
			<div>全选</div>
		</div>
	</div>
	<uni-forms class="list" ref="form">
		<div class="list-item" v-for="(item,index) in list" :key="index">
			<div class="item-title">
				<div>小型舟皿(39202323)</div>
				<div class="del" @click="choose(item,index)">仓库1号</div>
			</div>
			<div class="item-content">
				<div class="content-line">
					<div class="line-left">
						<span>分类</span> 
						<p>舟皿-挤压舟皿</p>
					</div>
				</div>
				<div class="content-line">
					<div class="line-left">
						<span>规格</span> 
						<p>3.0*9.0</p>
					</div>
					<div class="line-left">
						<span>型号</span>
						<p>WΦ100</p>
					</div>
				</div>
				<div class="content-line">
					<div class="line-left">
						<span>单位</span> 
						<p>个</p>
					</div>
					<div class="line-left">
						<span>库存</span>
						<p>100</p>
					</div>
				</div>
			</div>
			<checkbox :checked="item.checked" class="item-check" size="5"/>
		</div>
	</uni-forms>
	<div class="footer">
		<div class="footer-left" @click="cancel">取消</div>
		<div class="footer-right" @click="submit">确认添加</div>
	</div>
	
	<uni-popup ref="popup"  type="bottom">
		<div class="popup">
			<div class="popup-top">
				<div class="top-left">选择仓库</div>
				<div class="top-right">
					<button @click="close">关闭</button>
					<button>确定</button>
				</div>
			</div>
			<div class="popup-list">
				<div class="list-item" v-for="(item,index) in warehouseList" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
	</uni-popup>
	
	<uni-popup ref="filter"  type="bottom">
		<div class="popup">
			<div class="popup-top">
				<div class="top-left">类型筛选</div>
				<div class="top-right">
					<button @click="closeFilter">关闭</button>
					<button>确定</button>
				</div>
			</div>
			<div class="popup-list">
				<div class="list-item" v-for="(item,index) in warehouseList" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>
	</uni-popup>


  </view>
</template>

<script>
import { post, postJ, get, getJ } from '@/utils/api.js'
export default {
  data () {
    return {
		list:[
			{id:0, show:false},
			{id:1, show:false},
			{id:2, show:false},
			{id:3, show:false},
			{id:4, show:false}
		],
		warehouseList:[
			{name:'仓库1号'},
			{name:'仓库2号'},
			{name:'仓库3号'},
			{name:'仓库4号'},
			{name:'仓库5号'},
			{name:'仓库2号'},
			{name:'仓库3号'},
			{name:'仓库4号'},
			{name:'仓库5号'}
		],
       searchKey:''
    }
  },
  onLoad ({ id }) {
    if (id) {
      // this._getDetail(id)
    }
  },
  methods: {
	  filter(){
		 this.$refs.filter.open('bottom') 
	  },
	  closeFilter(){
		  this.$refs.filter.close()
	  },
	  search (e) {
	    this.searchKey = e
	  },
	  choose(item,index){
		  this.$refs.popup.open('bottom')
	  },
		close() {
			this.$refs.popup.close()
		},
	  submit() {
		  uni.navigateBack({
		  	delta: 1
		  })
	  },
	  cancel(){
		  uni.navigateBack({
		  	delta: 1
		  })
	  }
	  
	  
	  
  }
}
</script>

<style lang="scss" scoped>
  .search{
	  width: 100%;
	  position: fixed;
	  top: 90rpx;
	  left: 0;
	  height: 160rpx;
	  background-color: rgba(242, 242, 242, 1);
	  z-index: 1;
	  .search-top{
		  width: 96%;
		  margin: 16rpx auto;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  .uni-searchbar{
			  width: 75%;
			  background-color: #fff;
			  padding: 0;
			  border-radius: 20rpx;
			  /deep/.uni-searchbar__box{
				  background-color: #fff!important;
				  justify-content: flex-start;
			  }
		  }
	  }
	  .search-btm{
		  width: 96%;
		  margin: 0 auto;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  div:last-child{
			  color: #70B603;
		  }
	  }
  }
  .list{
	  width: 100%;
	  margin: 160rpx auto 0;
	  padding: 10rpx 0 100rpx;
	  .list-item:last-child{
		  border: none;
	  }
	  .list-item{
		  width: 100%;
		  margin: 20rpx auto;
		  border-bottom: 1rpx solid #ccc;
		  position: relative;
		  .item-check{
			  position: absolute;
			  bottom: 40rpx;
			  right: 30rpx;
			  transform:scale(2)
		  }
		  .item-title{
			  padding: 0 30rpx;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  font-size: 30rpx;
			  color: #000;
			  height: 80rpx;
			  line-height: 80rpx;
			  span{
				  margin-left: 15rpx;
			  }
			  .del{
				  color: #EC808D;
			  }
		  }
		  .item-content{
			  padding: 0 20rpx 10rpx;
			  .content-line{
				  padding: 0 12rpx;
				  display: flex;
				  align-items: center;
				  justify-content: flex-start;
				  height: 80rpx;
				  line-height: 80rpx;
				  .line-left{
					  display: flex;
					  align-items: center;
					  justify-content: flex-start;
					  flex: 1;
					  span{
						 width: 90rpx;
						 text-align: right;
						 color: rgb(127, 127, 127);
						  margin-right: 20rpx;
					  }
					  p{
						 color: #333333; 
						 display: flex;
						 align-items: center;
						 justify-content: flex-start;
						 .uni-easyinput{
							 width: 220rpx;
							 margin-right: 10rpx;
						 }
					  }
				  }
				  .line-right{
					  display: flex;
					  align-items: center;
					  justify-content: flex-end;
					  .right-minus{
						  width: 80rpx;
						  height: 51rpx;
						  text-align: center;
						  line-height: 51rpx;
						  color: #fff;
						  background: #F59A23;
					  }
					  .right-add{
						  width: 80rpx;
						  height: 51rpx;
						  text-align: center;
						  line-height: 51rpx;
						  color: #fff;
						  background: #70B603;
						  margin-left: 10rpx;
					  }
					  .right-choose.u-button--info{
						  border-color:#70B603;
						  color: #70B603;
					  }
				  }
			  }
			  .content-line:last-child{
				  border-bottom: none;
			  }
		  }
	  }
  }
  .footer{
	  width: 100%;
	  height: 90rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  .footer-left{
		  width: 50%;
		  height: 90rpx;
		  line-height: 90rpx;
		  text-align: center;
		  font-size: 34rpx;
		  color: #fff;
		  background: #4B7902;
	  }
	  .footer-right{
		  width: 50%;
		  height: 90rpx;
		  line-height: 90rpx;
		  text-align: center;
		  font-size: 34rpx;
		  color: #fff;
		  background: #70B603;
	  }
  }
  .popup{
	  width: 100%;
	  height: 600rpx;
	  background: #fff;
	  .popup-top{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  height: 80rpx;
		  background: rgba(21, 122, 44, 1);
		  color: #fff;
		  .top-left{
			 font-size: 32rpx; 
			 margin-left: 10rpx;
		  }
		  .top-right{
			  display: flex;
			  align-items: center;
			  justify-content: flex-end;
			  margin-right: 10rpx;
			  uni-button{
				 background: rgba(21, 122, 44, 1);
				 color: #fff;
				  width: 100rpx;
				  height: 60rpx;
				  line-height: 60rpx;
				  font-size: 28rpx;
				  padding: 0;
				  border: 1rpx solid #fff;
				  margin-left: 20rpx;
			  }
		  }
	  }
	  .popup-list{
		  width: 100%;
		  height: 520rpx;
		  overflow-y: auto;
		  background-color: rgba(242, 242, 242, 1);
		  .list-item{
			  width: 100%;
			  height: 80rpx;
			  text-align: center;
			  line-height: 80rpx;
			  border-bottom: 1rpx solid #fff;
		  }
		  .list-item:last-child{
			  border: none;
		  }
		  .list-item:hover{
			  background: rgba(254,64,102,.25)
		  }
	  }
  }
</style>