aiot-app/pages/production/execute/components/locationPopu.vue

<template>
   <view>
	   <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 @click="comfirm">确定</button>
	   			</div>
	   		</div>
	   		<div class="popup-list">
				<radio-group @change="radioChange">
				  <template v-for="(item,index) in warehouseList">
				    <label class="list-item">
				        <view class="item-radio">
				          <radio :value="index + ''" :checked="index == current" />
				        </view>
				        <view class="lable-title">
				          <label>{{ item.warehouse }}</label>
				        </view>
				    </label>
				  </template>
				</radio-group>
	   		</div>
	   	</div>
	   </uni-popup>
   </view>
</template>


<script>
import { get, getJ, post, postJ } from '@/utils/api.js'
import { getByCode } from '@/api/production/extrusion.js'
export default {
  components: {
    
  },
  data () {
    return {
		warehouseList:[],
		current: -1,
		currentData:{}
    }
  },
  onShow () {
  },

  methods: {
	  open() {
	  	 this.$refs.popup.open('bottom') 
		 this.getList()
	  },
	  close() {
	  	this.$refs.popup.close()
	  },
	  
	  async getList(){
		  const data = await getByCode('warehouse')
		  const list = []
		  if(data.length){
			 data.map((item,index)=>{
				 for(var key in data[index]){
					 list.push({
						 warehouse:data[index][key],
						 warehouseId:key
					 })
				 }
			 })
		  }
		 this.warehouseList = list
	  },
	  
	  radioChange (e) {
		let value = Number(e.detail.value)
		let employeeList = this.warehouseList
		let warehouse = employeeList[value].warehouse
		let warehouseId = employeeList[value].warehouseId
		let data = {
		  warehouse,
		  warehouseId
		}
		this.currentData = data
	  },
	  
	  comfirm(){
		  this.close()
		  this.$emit('checkLocation', this.currentData)
	  }
  }
}
</script>

<style lang="scss" scoped>
	.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{
				  padding: 0 30rpx;
				  height: 80rpx;
				  text-align: center;
				  line-height: 80rpx;
				  border-bottom: 1rpx solid #fff;
				  display: flex;
				  align-items: center;
				  justify-content:flex-start;
				  .item-radio{
					  margin: 0 16rpx;
				  }
			  }
			  .list-item:last-child{
				  border: none;
			  }
			  .list-item:hover{
				  background: rgba(254,64,102,.25)
			  }
		  }
	}
</style>