yichael_zhongchuan_manager/components/popForm.vue

<template>
	<view class="root" catchtouchmove='return' v-if="bShow">
		<!-- 背景黑幕 -->
		<view class="blackBg" @click="close()"></view>
		<!-- 背景 -->
		<view class="formBg">
			<!-- 标题 -->
			<view class="titleBg">
				<view class="title">{{title}}</view>
			</view>
			<!-- 表单 -->
			<view class="middle">
				<!-- 上一页 -->
				<view style="width: 10%;height: 100%;margin: 3%;">
					<view class="lastPage" @click="lastPage()" v-show="bLastPageShow"></view>
				</view>
				<view class="form">
					<view class="item" v-for="(obj,index) in curr_content_arr" :key="index">
						<view class="inputName">{{obj.name}}:</view>
						<view class="inputBg">
							<input type="text" v-model="obj.input" placeholder=""> 
						</view>
					</view>				
				</view>
				<!-- 下一页 -->
				<view style="width: 10%;height: 100%;margin: 3%;">
					<view class="nextPage" @click="nextPage()" v-show="bNextPageShow"></view>
				</view>
			</view>
			<!-- 按钮区 -->
			<view class="btnArea">
				<button type="default" size="mini" class="confirm" @click="confirm()">确定</button>
				<button type="default" size="mini" class="cancel" @click="cancel()">取消</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bShow:false,
				title:'标题',
				content_arr:[
					{
						'name':'11111',
						'input':'aaa',
						'type' :'text'
					}
				],
				curr_content_arr:[],
				curr_page:1,
				total_page:0,
				itemNumPerPage:5,
				bLastPageShow:true,
				bNextPageShow:true,
				callback:null
			}
		},
		methods: {
			isShow(bShow){
				this.bShow = bShow;
				
				this.content_arr.length = 0;
				this.curr_content_arr.length = 0;
				this.curr_page = 1;
				this.total_page = 0;
				this.itemNumPerPage = 5;
				this.bLastPageShow = true;
				this.bNextPageShow = true;
				this.callback = null;
			},
			setTitle(title){
				this.title = title;
			},
			setContent(content_arr,callback){
				this.content_arr = content_arr;
	
				this.total_page = Math.ceil(this.content_arr.length/this.itemNumPerPage);		
				
				let length = this.content_arr.length;
				if(length>this.itemNumPerPage)
				{
					length = this.itemNumPerPage;
					
				}
				// console.log('length=',length)
				for(let i = 0;i<length;i++){
					this.curr_content_arr.push(this.content_arr[i]);
				}
				
				this.showNextOrLastPageBtn();
				
				this.callback = callback;
			},
			
			close(){
				// this.bShow = !this.bShow;
			},
			confirm(){
				for(let i=0;i<this.content_arr.length;i++){
					if(this.content_arr[i].input=='')
					{
						alert(this.content_arr[i].name+'不能为空');
						return;
					}
				}
				
				this.bShow = !this.bShow;
				this.callback(this.content_arr);
			},
			cancel(){
				this.bShow = !this.bShow;
			},
			lastPage(){
				this.curr_page--;
				this.curr_content_arr.length=0;
				
				let fromIndex = (this.curr_page-1)*this.itemNumPerPage;
				let toIndex = fromIndex+this.itemNumPerPage;
				
				for(let i = fromIndex;i<toIndex;i++){
					this.curr_content_arr.push(this.content_arr[i]);
				}
				
				this.showNextOrLastPageBtn();
			},
			nextPage(){		
				this.curr_page++;
				this.curr_content_arr.length=0;
				let totalItemNum = this.content_arr.length;
				
				let nextPageItemNum = (totalItemNum-(this.curr_page-1)*this.itemNumPerPage)
				if(nextPageItemNum>this.itemNumPerPage)
				{
					nextPageItemNum = this.itemNumPerPage;
				}
				
				let fromIndex = (this.curr_page-1)*this.itemNumPerPage;
				let toIndex = fromIndex+this.itemNumPerPage;
				if(toIndex>totalItemNum)
				{
					toIndex = totalItemNum;
				}
				
				// console.log('from='+fromIndex+';To='+toIndex)
				
				for(let i = fromIndex;i<toIndex;i++){
					this.curr_content_arr.push(this.content_arr[i]);
				}
				// console.log('totalItemNum=',totalItemNum)
				// console.log('this.curr_content_arr=',this.curr_content_arr)
				this.showNextOrLastPageBtn();
			},
			showNextOrLastPageBtn()
			{
				if((this.total_page-this.itemNumPerPage)>0)
				{
					this.bLastPageShow = false;
					this.bNextPageShow = false;
					// console.log('0000')
				}
				else if(this.total_page==this.curr_page)
				{
					this.bLastPageShow = true;
					this.bNextPageShow = false;
					// console.log('11111')
				}
				else if(1==this.curr_page)
				{
					this.bLastPageShow = false;
					this.bNextPageShow = true;
					// console.log('2222')
				}
				else
				{
					this.bLastPageShow = true;
					this.bNextPageShow = true;
					// console.log('333333')
				}
			},
		},
	}
</script>

<style lang="scss">
	.root{	
		width: 100%;
		height: 100%;
		
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.blackBg{
		width: 100%;
		height: 100%;
		
		opacity: 0.5;
		background-color: #000000;
	}
	.formBg{
		position: absolute;
		width: 45%;

		background-color: #ffffff;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}
	.titleBg{
		width: 100%;
		height: 10%;
		
		background-color: #ff0000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title{
		color: #ffffff;
		font-size: 40rpx;
		margin: 5%;
		
		// border:1px solid  #000000;
	}
	.middle{
		width: 100%;
		height: 100%;	
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		
		// border:1px solid  #000000;
	}
	.nextPage{
		border: 20rpx solid;
		border-color:transparent transparent transparent #ff0000;
		width:0px;
		height:0px;
	}
	.lastPage{		
		border: 20rpx solid;
		border-color:transparent transparent transparent #ff0000;
		width:0px;
		height:0px;
		
		-moz-transform:scaleX(-1);
		-webkit-transform:scaleX(-1);
		-o-transform:scaleX(-1);
		transform:scaleX(-1);
		/*兼容IE*/
		filter:FlipH;
		
		// border:1px solid  #000000;
	}
	.form{
		width: 80%;

		margin-top: 5%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		
		// border:1px solid  #000000;
	}
	.item{
		width: 100%;
		
		margin: 5%;
		
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		
		// border:1px solid #ff0000;	
	}
	
	.inputName{	
		width: 20%;
		
		font-size: 20rpx;
		font-weight:bold;
		// 换行
		word-break:break-all;
		// word-break:keep-all;
		
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
		// border:1px solid  #000000;
	}
	.inputBg{
		// border:1px solid  #000000;
		box-shadow: 1px 1px 5px #888888;
		display: flex;
		justify-content: center;
		align-items: center;
		
		width: 80%;

		margin-left: 5%;
	}
	.item input{
		width: 80%;
		height: 80%;
	}
	
	.btnArea{
		width: 100%;
		// height: 10%;
		// border:1px solid  #000000;
		
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		
		margin: 5%;
	}
	.confirm{
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
	.cancel{
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}
</style>