aiot-app/pages/production/execute/components/moldPopu.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>
				<view class="search-box">
					  <uni-easyinput prefixIcon="search" v-model="searchKey" placeholder="请输入搜索内容" @iconClick="iconClick">
					  </uni-easyinput>
					  <view class="search-botton" @click="toSearch">搜索</view>
				</view>
				<view class="table">
					<radio-group @change="radioChange">
						<label class="table-item" v-for="(item, index) in tableData" :key="index">
							<view class="item-left">
								<radio :value="index + ''" :checked="index == current" />
							</view>
							<view class="item-right">
								<view class="title">编码：{{ item.code }}</view>
								<view class="other">
									名称：{{ item.name }}
								</view>
								<view class="other">
									牌号：{{ item.brandNum }}
								</view>
							</view>
						</label>
					</radio-group>
				</view>
			</div>
		 </uni-popup>
   </view>
</template>


<script>
import { get, getJ, post, postJ } from '@/utils/api.js'
import { getList } from '@/api/classifyManage/itemInformation.js'
let [page, size, isEnd] = [1, 10, false]
export default {
  components: {
    
  },
  data () {
    return {
		searchKey:'',
		tableData:[],
		current: -1,
		currentData:{}
    }
  },
  onShow () {
 
  },
  //触底加载
  onReachBottom: function () {
    if (isEnd) {
      uni.showToast({
        title: '已经没有更多数据了！',
        icon: 'none',
        duration: 1000 //提示持续时间
      })
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
	  open() {
	  	 this.$refs.popup.open() 
		 this.getFirstList()
	  },
	  close() {
	  	this.$refs.popup.close()
	  },
	  
	 getMoldList(){
		uni.showLoading({
		  title: '加载中'
		})
		let data = {
			  pageNum:page,
			  size,
			  searchKey:this.searchKey,
			  categoryLevelId:5,
			  isProduct:true
		 }	
		 getList(data).then(res=>{
			if (page === 1) {
			  this.tableData = res.list
			} else {
			  this.tableData.push(...res.list)
			}
			isEnd = this.tableData.length >= res.count
		 }).then(()=>{
		 	 uni.hideLoading()
		 })
	  },
	  getFirstList () {
	    page = 1
	    this.searchVisible = false
	    isEnd = true
	    uni.showLoading({
	      title: '数据加载中'
	    })
	    this.getMoldList()
	  },
	  getMoreLists () {
	    //获取更多数据
	    page++
	    this.getMoldList()
	  },
	  toSearch(){
		  this.getFirstList()
	  },
	  radioChange (e) {
	  		let value = Number(e.detail.value)
	  		let data = this.tableData[value]
	  		this.currentData = data
	  },
	  comfirm(){
		  this.$refs.popup.close()
		  this.$emit('chooseMold',this.currentData)
	  }
  }
}
</script>

<style lang="scss" scoped>
	.popup{
		  width: 100%;
		  height: 900rpx;
		  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;
				  }
			  }
		  }
		  .search-box{
			  display: flex;
			  align-items: center;
			  justify-content: space-around;
			  width: 94%;
			  margin: 20rpx auto;
			  .search-botton{
				  background: rgba(112, 182, 3, 1);
				  color: #fff;
				  padding: 10rpx 20rpx;
				  border-radius: 8rpx;
				  margin-left: 20rpx;
			  }
		  }
		 .table{
		 			 width: 100%;
		 			 border-top: 1rpx solid #ccc;
		 			 .table-item{
		 				 padding: 10rpx 20rpx;
		 				 display: flex;
		 				 align-items: center;
		 				 justify-content: flex-start;
		 				 border-bottom: 1rpx solid #ccc;
		 				 .item-left{
		 					 margin-right: 30rpx;
		 				 }
		 				 .item-right{
		 					 flex: 1;
		 					.title{
		 						font-weight: bold;
		 						color: #000;
		 						margin: 10rpx 0;
		 					}
		 					.other{
		 						display: flex;
		 						align-items: center;
		 						margin-bottom: 10rpx;
		 					}
		 				 }
		 			 }
		 }
	}
</style>