androidCnToWechatGrt/pagesInspection/onlineRepair/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='报修'></cus-header>
		<div class="form">
			<div class="item">
				<div class="left">报修区域</div>
				<div class="right">
					<div class="right" @tap="areaShow = true">
						<text v-if="params.repairRegionName">{{params.repairRegionName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item" v-if="params.repairRegionName">
				<div class="left">报修位置</div>
				<div class="right">
					<div class="right" @tap="showPlace">
						<text v-if="params.repairPositionName">{{params.repairPositionName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="left">报修类型</div>
				<div class="right">
					<div class="right" @tap="typeShow = true">
						<text v-if="params.repairTypeName">{{params.repairTypeName}} ></text>
						<div class="tip" v-else>
							请选择<u-icon name="arrow-right" color="#B9C0C8" size="28"
								style="margin-left: 10rpx;"></u-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="left">联系人</div>
				<div class="right">
					<input type="text" v-model="params.contactPerson" placeholder-class="repair-inp-ph" placeholder="请输入">
				</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">
					<input type="phone" v-model="params.contactPhone" placeholder-class="repair-inp-ph" placeholder="请输入">
				</div>
			</div>
			<div class="pre">
				<div class="title">故障描述</div>
				<div class="desc">
					<u--textarea v-model="params.faultDes" placeholder="请输入" placeholder-class="repair-inp-ph" autoHeight></u--textarea>
				</div>
			</div>
		</div>
		<div class="upload">
			<div class="title">上传照片</div>
			<div class="box" style="width: auto;height: auto;">
				<view class="uploadPart">
					<view class="allimg" v-for="img in fileList1">
						<image :src="img" mode="aspectFill" class="newimg"></image>
						<u-icon @click="deletePic(img)" class="mytrash" name="close-circle" color="#999"
							size="30"></u-icon>
					</view>
				
					<span @click="uploadImg" class="uploadBtn" v-if="fileList1.length<3"><u-icon color="#5c8fff"
							size="30px" name="camera-fill"></u-icon></span>
				</view>
			</div>
		</div>
		<div class="bottom">
			<div class="save" @tap="save">保存</div>
		</div>
		<u-picker :itemHeight="88" :show="placeShow" :columns="placeColumns" keyName="orgName" title="报修位置" @cancel="placeCancel" @change="changeHandler" @confirm="placeConfirm"></u-picker>
		<u-picker :itemHeight="88" :show="placeShow2" :columns="placeColumns2" keyName="orgName" title="报修位置" @cancel="placeCancel" @change="changeHandler" @confirm="placeConfirm"></u-picker>
		<u-picker :itemHeight="88" :show="areaShow" :columns="areaColumns" keyName="label" title="报修区域" @cancel="areaShow=false" @confirm="e=>paramsConfirm(e,'repairRegion','repairRegionName')"></u-picker>
		<u-picker :itemHeight="88" :show="typeShow" :columns="typeColumns" keyName="label" title="报修类型" @cancel="typeShow=false" @confirm="e=>paramsConfirm(e,'repairType','repairTypeName')"></u-picker>
	</view>
</template>

<script>
	const baseApi = require('@/http/baseApi.js')
	export default {
		data() {
			return {
				placeShow: false,
				placeShow2: false,
				areaShow: false,
				typeShow: false,
				alldata:[],
				placeColumns:[],
				placeColumns2:[],
				placeColumnData:[],
				areaColumns:[
					[{
						label: '公共区域',
						id: 1
					
					}, {
						label: '室内',
						id: 2
					}]
				],
				typeColumns:[[]],
				params: {
					id: "",
					buildingId: "", //  楼栋ID
					storeyId: "", //  层数ID
					houseId: "", //  房间ID
					repairPositionName: "", //报修位置名称
					repairRegion: '', //报修修区域
					repairRegionName: "", //报修区域名称
					repairType: '', //报修类型
					repairTypeName: "", //报修类型
					contactPerson: "", //联系人
					contactPhone: "", //电话
					faultDes: "", // 故障描述
					faultPics: "", //图片
				},
				tip:{
					repairRegion: '请选择报修区域',
					buildingId: "请选择报修位置",
					repairType: '请选择报修类型',
					contactPerson: "请输入联系人", 
					contactPhone: "请输入正确的联系电话",
					faultDes: "请输入故障描述",
					faultPics: "请上传图片"
				},
				fileList1: [],
			}
		},
		onLoad() {
			this.getXjTypeData();
			this.getFloorInfo();
		},
		methods: {
			getXjTypeData(){
				this.$api.get('/sys/dict/data/getListByType/RepairType').then(res=>{
					if(res.data.code===0){
						res.data.data.forEach(d=>{
							this.typeColumns[0].push({id:d.dictValue,label:d.dictLabel})
						})
					}else this.$showToast(res.data.msg)
				})
			},
			getFloorInfo(){
				this.$api.get('/control/getOrgStructureTree/').then(res=>{
					if(res.data.code===0){
						this.alldata = res.data.data[0].childrenList;
						this.placeColumns = [
							this.alldata,
							this.alldata[0].childrenList,
							[]
						]
						this.placeColumns2 = [
							this.alldata,
							this.alldata[0].childrenList,
						]
					}else this.$showToast(res.data.msg)
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList1.splice(event.index, 1)
			},
			// 新增图片
			uploadImg() {
				uni.chooseImage({
					count: 3,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: baseApi.BaseApi + '/uploadFile',
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									this.fileList1.push(JSON.parse(res.data).data)
									this.params.faultPics = this.fileList1.join(',')
								}
							});
						}
					}
				});
			},
			showPlace(){
				if (this.params.repairRegionName == '公共区域') this.placeShow2 = true;
				else this.placeShow = true;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex == 0) {
					picker.setColumnValues(1, this.alldata[index].childrenList)
					if (this.params.repairRegionName == '室内') {
						if (this.alldata[indexs[0]].childrenList[0].childrenList == null) {
							picker.setColumnValues(2, [])
						} else {
							picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[0].childrenList)
						}
					}
				} else if (this.params.repairRegionName == '室内' && columnIndex == 1) {
					if (this.alldata[indexs[0]].childrenList[indexs[1]].childrenList == null) {
						picker.setColumnValues(2, [])
					} else {
						picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[indexs[1]].childrenList)
					}
				}
			},
			placeConfirm(e) {
				if(this.params.repairRegionName == '室内'){
					if (e.value[2] == undefined) {
						this.params.repairPositionName = e.value[0].orgName + '/' + e.value[1].orgName;
						this.params.buildingId = e.value[0].orgId;
						this.params.storeyId = e.value[1].orgId;
						this.params.houseId = '';
					} else {
						this.params.repairPositionName = e.value[0].orgName + '/' + e.value[1].orgName + '/' + e.value[2].orgName;
						this.params.buildingId = e.value[0].orgId;
						this.params.storeyId = e.value[1].orgId;
						this.params.houseId = e.value[2].orgId;
					}
					this.placeShow = false;
				}else{
					this.params.repairPositionName = e.value[0].orgName + '/' + e.value[1].orgName;
					this.params.buildingId = e.value[0].orgId;
					this.params.storeyId = e.value[1].orgId;
					this.params.houseId = '';
					this.placeShow2 = false;
				}
			},
			placeCancel() {
				if(this.params.repairRegionName == '室内') this.placeShow = false;
				else this.placeShow2 = false;
			},
			paramsConfirm(e,key1,key2){
				this.params[key1] = e.value[0].id;
				this.params[key2] = e.value[0].label;
				this.areaShow = this.typeShow = false;
			},
			save(){
				let flag = true;
				for(let t in this.tip){
					if((t=='contactPhone'&&!this.$reg.mobile(this.params[t]))||(t!='contactPhone'&&!this.params[t])){
						this.$showToast(this.tip[t])
						flag = false;
						break;
					}
				}
				
				if(!flag) return;
				this.$api.post('/repairorder', this.params).then(res=>{
					if(res.data.code===0){
						this.$showToast('提交成功');
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else this.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style>
	.repair-inp-ph{
		color: #B9C0C8 !important;
	}
</style>
<style scoped lang="less">
	.uploadPart {
		display: flex;
		justify-content: center;
		width: 100%;

		.uploadBtn {
			width: 160rpx;
			height: 160rpx;
			background-color: #ECF0FF;
			text-align: center;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.allimg {
			position: relative;
		}

		.newimg {
			width: 160rpx;
			height: 160rpx;
			margin-right: 10rpx;
		}

		.mytrash {
			position: absolute;
			top: 2px;
			right: 10px;
		}
	}
	
	::v-deep .desc .u-textarea{
		border: none;
		padding: 0 !important;
	}
	::v-deep .upload .u-upload .u-upload__button{
		width: 168rpx !important;
		height: 180rpx !important;
	}
	::v-deep .upload .u-upload .u-icon__icon{
		font-size: 24px !important;
	}
	
	.page {
		padding: 0 24rpx 168rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.form{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin-top: 20rpx;
			.item{
				height: 90rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					line-height: 40rpx;
					text-align: right;
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #B9C0C8;
						line-height: 40rpx;
						text-align: right;
						display: flex;
						align-items: center;
					}
					input{
						border: none;
						outline: none;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						line-height: 40rpx;
						text-align: right;
					}
				}
			}
			.pre{
				margin-top: 24rpx;
				overflow: hidden;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.desc{
					margin: 24rpx 0 40rpx;
				}
			}
		}
		
		.upload{
			padding: 38rpx 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 36rpx;
			}
			.box{
				margin-top: 34rpx;
				width: 168rpx;
				height: 180rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			.save{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>