repairForMiniProgram/miniRepairPro/pages/personal-information/personal-information.vue

<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
			<view class="uni-list-cell-left">
					姓名<text>*</text>
			</view>
			<view class="uni-list-cell-db">
				<input type="text" value="haha" style="direction: rtl;" />
			</view>
			</view>
		</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
							性别<text>*</text>
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view><image src="../../static/右箭头.svg" mode="">
						</picker>
					</view>
				</view>
			</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							手机号<text>*</text>
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{phone[index]}}</view><image src="../../static/右箭头.svg" mode="">
							</picker>
						</view>
					</view>
				</view>
				
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							备选手机号<text>*</text>
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{phones[index]}}</view><image src="../../static/右箭头.svg" mode="">
							</picker>
						</view>
					</view>
				</view>
				
				<view class="uni-list">
				       <view class="cuni-list-cell">
				             <view class="uni-list-cell-left">
								 学生宿舍<text>*</text>
							 </view> 
			                  <view class="uni-list-cell-db">
				                   <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
				                   	<view class="uni-input">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
				                   <image src="../../static/右箭头.svg" mode="">
				                   	</view>
				                   </picker>
				                 </view>
				         </view>
			      </view>
				
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							学生校区<text>*</text>
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{school[index]}}</view><image src="../../static/右箭头.svg" mode="">
							</picker>
						</view>
					</view>
				</view>
				
				<button @click="getRoom()" type="default">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:['男','女'],
				phone:['182798******','********'],
				phones:['000000','00000'],
				school:['黄家湖','墨轩湖'],
				index:0,
				multiArray: [
					['1栋', '2栋'],
					['1', '2'],
					['01', '02', '03']
				],
				multiIndex: [0, 0, 0],
			}
		},
		methods: {
		getRoom(){
			console.log('获取宿舍')
			// 发起请求,获取楼栋
				this.multiArray[0] = ['1栋', '2栋','3栋','4栋','5栋','6栋','7栋','8栋']
				// this.multiArray[0] = res.data.data
				// 发起请求,获取楼层
				this.multiArray[1] = ['1', '2','3','4']
				this.multiArray[2] = ['01', '02', '03','04','05']
		},
		  bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
			        },
		  bindMultiPickerColumnChange: function(e) {
						    console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
						    this.multiIndex[e.detail.column] = e.detail.value
						    switch (e.detail.column) {
						  	case 0: //拖动第1列
						  	switch (this.multiIndex[0]) {
						  	case 0:
						  	this.multiArray[1] = ['1', '2']
						  	this.multiArray[2] = ['01', '02', '03']
						  	break
						  	case 1:
						  	this.multiArray[1] = ['1', '2']
						  	this.multiArray[2] = ['01', '02']
						  	break
						}
						  	this.multiIndex.splice(1, 1, 0)
						  	this.multiIndex.splice(2, 1, 0)
						  	break
						  	case 1: //拖动第2列
						  	switch (this.multiIndex[0]) { //判断第一列是什么
						  	case 0:
						  	switch (this.multiIndex[1]) {
						  	case 0:
						  	this.multiArray[2] = ['101', '102', '103']
						  	break
						  	case 1:
						  	this.multiArray[2] = ['201','202']
						  	break
						}
						  	break
						  	case 1:
						  	switch (this.multiIndex[1]) {
						  	case 0:
						    this.multiArray[2] = ['101', '102']
						  	break
						  	case 1:
						  	this.multiArray[2] = ['201', '202']
						  	break
						}
						  	break
						}
						  	this.multiIndex.splice(2, 1, 0)
						  	break
						}
						  	this.$forceUpdate()
						},
		}
	}
</script>

<style>
.uni-list-cell-left{
	float: left;
	width: 22%;
	height: 47px;
	text-align: center;
	font-size: 14px;
	border-bottom: 1px solid rgba(200, 200, 205, 1);
	line-height: 47px;
}
.uni-list-cell-left text{
	color: red;
}
.uni-list-cell-db{
	float: right;
	width: 78%;
	height: 47px;
	border-bottom: 1px solid rgba(200, 200, 205, 1);
}
.uni-list-cell-db .name{
	float: right;
}
.uni-list{
	position: relative;
	font-size: 14px;
}
.uni-list-cell-db input{
	height: 47px;
    width: 78%;
	text-align: center;
	line-height: 47px;
	font-size: 14px;
}
.uni-list-cell-db .uni-input{
	float: right;
	margin-right: 36px;
	text-align: center;
	line-height: 47px;
}

.uni-list-cell-db uni-image{
	position: absolute;
	width: 26px;
	height: 26px;
	right: 3px;
	top:11px;
}
button{
	position: absolute;
	top:345px;
	left: 24px;
	width: 328px;
	height: 47px;
	color: white;
	background-color: rgba(42, 130, 228, 1);
}
</style>