repairForMiniProgram/miniRepairPro/pages/list/list.vue

<template>
	<view>
		<view class="head">
			<text>报修信息表<image src="../../static/笔.svg" mode=""></image></text>
		</view>
		<view class="content">
			
			<!-- 故障类型 -->
		<view class="headline-1">
			<text class="uni-list-cell-left">故障类型：</text>
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<template v-if="List!=null">
						<picker  @change="bindPickerChange($event,List)" :value="index" :range="List" :range-key="'faultName'">
							<view class="uni-input-1">{{List[index].faultName}}<image src="../../static/下箭头.svg" mode=""></image></view>
						</picker>
					</template>
				</view>
			</view>
		</view>
			
			<!-- 宿舍楼栋 -->
			<view class="headline-2">
			    <text class="uni-list-cell-left-2" >宿舍楼栋：</text>
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<template v-if="roomList!=null">
						    <picker @click="getroom" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
						        <view class="uni-input-2">{{multiArray[0][multiIndex[0]]}}{{multiArray[2][multiIndex[2]]}}<image src="../../static/下箭头.svg" mode=""></image></view>
						    </picker>
						</template>
					</view>
				</view>
			</view>
			
			<!-- 预期时间 -->
			<view class="headline-2">
				<text class="uni-list-cell-left-2" >预期时间：</text>
				<view style="line-height: 35px;"  @click="onShowDatePicker('datetime')"class="uni-list-cell-db-2">
					<text style="margin-left: 10px;">{{timeValue}}</text>
			      </view>
				  <mx-date-picker :show="showPicker" :type="type" :value="timeValue" :show-tips="true" :begin-text="'开始'" :end-text="'截至'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
			      <image src="../../static/下箭头.svg" mode="" class="timeimg"></image>
			</view>
			
			<!-- 联系电话 -->
			<view class="headline-2">
			    <text class="uni-list-cell-left-2" >联系电话：</text>
				 <view class="uni-list-cell-db-2"><input class="uni-input-2" v-model="formData.phone" placeholder="" /></view>
			</view>
			
			<!-- 备选电话 -->
		    <view class="headline-2">
			    <text class="uni-list-cell-left-2" >备选电话：</text>
				<view class="uni-list-cell-db-2">
					<input class="uni-input-2" @input="onInputphone" v-model="formData.inputphone" placeholder="" />
				</view>
			</view>
			
			<!-- 照片 -->
			<view class="photo">
				<view class="photo-title">拍摄故障照片：</view>
			    <view class="image" >
			      <view class="imageText" @click="seleckImage()" v-if="imgSrc" style="vertical-align: top;">
					  <view class="imgSrc"><image  v-for="(item,index) in imgArr" :src="item" @click="preview(item)"></image></view>
			      </view>
			    </view>
			</view>
			 
			 <!-- 备注 -->
			<view class="os-headline-2">
				<text class="os-list-cell-left-2" >备注：</text>
			 	<view class="os-list-cell-db-2">
			 		<input class="os-input-2"placeholder="" v-model="formData.os" />
				</view>
			 </view>
			 <button type="default" class="up" @click="getList" style="width: 323px; height: 36px; background-color:rgba(42, 130, 228, 1); color: white;font-size: 12px; border-radius: 14px;">立即提交</button>
			</view>
		    </view>
</view>
</template>

<script>
	import MxDatePicker  from "../../util/mx-datepicker/mx-datepicker"
	export default {
		components: {
					MxDatePicker
				},
		data() {
			return {
			imgArr:[],//存放图片数组
		    imgSrc:true,
			title: 'picker',
			List: null,
			index: 0,
			pickerData:'',
			roomList:null,
			buildHighList:null,
			buildRoomList:null,
			buildId:null,
			floorId:null,
			multiIndex: [0, 0, 0],
			formData:{
			phone:'',
			inputphone:'',
			os:''
			},
			array0:[],
			multiArray: [
				[],
				[],
				[]
			],
			showPicker: false,
			datetime: '2022-03-27 15:00:12',
			range: ['2022-03-27','2022-03-27'],
			rangetime:'',
			type: 'rangetime',
			timeValue: ''
			}
		},
		onLoad(){
			this.getfault()
			this.getbuild()
		},
		watch: {
			buildId:{
				handler(newValue,oldVaue){
					this.getbuildHigh()
				},
				immediate:true
			},
			floorId:{
				handler(newValue,oldVaue){
					this.getrooms()
				},
				immediate:true,
				deep:true
			}
		        },
		methods: {
			onShowDatePicker(type){//显示
							this.type = type;
							this.showPicker = true;
							this.timeValue = this[type];
						},
			onSelected(e){//选择
							this.showPicker = false;
							if(e) {
								this[this.type] = e.value; 
								this.timeValue = e.value;
								//选择的值
								console.log('value => '+ e.value);
								//原始的Date对象
								console.log('date => ' + e.date);
							}
						},
			getroom(){
				this.buildId=1
				this.floorId=1
			},
			seleckImage() {
			    let that = this;
			    uni.chooseImage({
			    success: function(res) {
			    console.log('选择图片')
			    console.log(res.tempFilePaths)
			      // 将图片存放在数组中
			    that.imgArr = res.tempFilePaths
			     }
			    });
			   },
		    preview(img) {
			    console.log('预览')
			   // 新建一个存放预览图片的空数组
			    var imgArr = []
			    imgArr.push(img)
			    uni.previewImage({
			    urls: imgArr,
			    current: imgArr[0]
			       });
			    },
			bindPickerChange: function(e,storage) {
				console.log(e)
				console.log(storage)
				this.index = e.target.value
				this.pickerData = storage[this.index]	// 这里就是选中的对象
				console.log(this.pickerData.faultName)
				},
			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:{
							 this.buildId = e.detail.value+1
							 break;
							}
							 case 1:{
							 this.floorId = e.detail.value+1
							 break;
							}
							}
							 this.$forceUpdate()
							},
				// 故障信息
			async getfault(){
			    const res = await uni.request({
				    method:'POST',
				    url:'/api/fault/queryAllFaultByStatus',
				    success: (res) => {
						this.List = res.data.data;
						console.log(this.List)
				        }
			         })
					 },  
				// 宿舍楼栋
			async getbuild(){
				const res = await uni.request({
					method:'POST',
					url:'/api/build/queryAllBuild',
					success: (res) => {
						this.roomList = res.data.data
						console.log(res.data)
						console.log(this.roomList)
						this.roomList.forEach(item=>{
						this.multiArray[0].push(item.buildName)
						})
						console.log('multiArray:'+this.multiArray[0])
					}
				})
			},
			// 宿舍楼层
			async getbuildHigh(){
				const res = await uni.request({
					method:'POST',
					url:'/api/build/queryAllFloorByBuildID?buildId='+this.buildId,
					success: (res) => {
						this.buildHighList = res.data.data
						console.log(this.buildHighList)
						var tempList = new Array
						this.buildHighList.forEach(item=>{
						tempList.push(item.floorName)
						})
						this.$set(this.multiArray,1,tempList)
						console.log(this.buildId)
					}
				})
			},
			// 宿舍房间
			async getrooms(){
				const res = await uni.request({
					method:'POST',
					url:'/api/build/queryAllRoomByFloorID?floorId='+this.floorId,
					success: (res) => {
						this.buildRoomList = res.data.data
						var tempList = new Array
						this.buildRoomList.forEach(item=>{
						tempList.push(item.roomName)
						})
						this.$set(this.multiArray,2,tempList)
						console.log(this.floorId)
					}
				})
			},
			// 提交订单
			async getList(){
				const res = await uni.request({
					method:'POST',
					url:'/api/order/insertOrder',
					data:{
						// otherPhone: this.inputphone,
						// dormNumber:"10栋",
						// faultId:2,
						// studentDormitory:"6楼",
						// orderExpectedTime: "明天"
					},
				success: (res) => {
					let alldata = this.formData;
					let faultname = this.pickerData.faultName;
					console.log(JSON.stringify(alldata))
					console.log(JSON.stringify(faultname))
				}
				})
			},
			onInputphone(e){
				this.inputphone = e.target.value
				console.log(this.inputphone)
			},
			bindDateChange: function(e) {
				    this.date = e.target.value
				},
			bindTimeChange: function(e) {
				    this.time = e.target.value
				}
		}
	}
</script>

<style>
.test{
	text-align: center;
	padding: 10px 0;
	}
button{
	margin: 20upx;
	font-size: 28upx;
	}
.head{
	height: 131px;
	font-size: 15px;
	color: white;
	border-radius: 0px 0px 15px 15px;
	background-color:rgba(42, 130, 228, 1);
}
.head text{
	float: left;
	margin-left: 140px;
	margin-top: 12px;
}
.head image{
	height: 17px;
	width: 17px;
	font-size: 17px;
	vertical-align: bottom;
}
.headline-1{
	font-size: 12px;
}
.headline-2{
	font-size: 12px;
}
.content{
	position: relative;
	width:359px;
	height: 627px;
	margin-top: -81px;
	margin-left: 7px;
	border: 1px solid rgba(128, 128, 128, 0.45);
	background-color: rgba(255, 255, 255, 1);
}
.uni-list-cell{
	float: right;
	width: 242px;
	height: 35px;
	margin-top: 18px;
	margin-right: 32px;
	border-radius: 16px;
	line-height: 22px;
	background-color: rgba(166, 166, 166, 0.18);
}
.uni-input-1{
	margin-left: 10px;
	margin-top: 5px;
}
.uni-input-1 image{	
	float: right;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	font-size: 20px;
}
.uni-list-cell-left{
	float: left;
	margin-top: 24px;
	margin-left: 13px;
}
.uni-list-cell-left-2{
	float: left;
	margin-left: 15px;
	margin-top: 38px;
}

.uni-list-cell-db-2{
	float: right;
	margin-right: 32px;
	margin-top: 18px;
	width: 242px;
	height: 35px;
	border-radius: 16px;
	background-color: rgba(166, 166, 166, 0.18);
}
.uni-input-2{
	margin-left: 10px;
	margin-top: 8px;
	font-size: 12px;
}
.uni-input-2 image{
	float: right;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	font-size: 20px;
}
.timeimg{
	position: absolute;
	right:36px;
	top: 131px;
	width: 20px;
	height: 20px;
	font-size: 20px;
}
.photo {
  height: 169px;
  font-size: 12px;
  }
.photo-title{
	float: left;
	margin-left: 13px;
	margin-top: 15px;
}
.image { 
   float: left;
   margin-left: 13px;
   margin-top: 15px;
   height: 198px;
   width: 322px;
   box-sizing: border-box;
   border-radius: 14px;
   background-color: rgba(166, 166, 166, 0.18); 
   }

.imageText {
    text-align: center;
	border-radius: 14px;
	width: 100%;
	height: 100%;
	background-color:rgba(166, 166, 166, 0.18);
   }
.imgSrc image{
	width: 323PX;
	height: 193px;
}
.os-headline-2{
	float: left;
}
.os-list-cell-left-2{
	float: left;
	margin-left: 13px;
	margin-top: 16px;
	font-size: 12px;
}
.os-input-2{
	margin-left: 5px;
	margin-top: 4px;
	font-size: 12px;
	/* cursor: not-allowed; */
}
.os-list-cell-db-2{
	float: right;
	width: 284px;
	height: 30px;
	margin-right: 15px;
	margin-top: 10px;
	border-radius: 14px;
	background-color: rgba(166, 166, 166, 0.18);
}
.up{
	position: absolute;
	bottom: 13px;
	left: 15px;
}
</style>