CommunityApp/pages/services/property/property.vue

<template>
	<view>
		<view class="card" >
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>请选择小区</view>
				</view>
				<view class="bg-gray padding-20 "  @click="residentialShow=true">
					<input disabled type="text" placeholder="请选择您所在的小区" v-model="data.residentialName" />
				</view>
			</view>
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>报修位置</view>
				</view>
				<view class="bg-gray padding-20 "  >
					<input  type="text" placeholder="请输入报修的具体位置" v-model="data.reportPosition" />
				</view>
			</view>
			<view class="form ">
				<view class="flex">
					<view class="need" >*</view>
					<view>联系方式</view>
				</view>
				<view class="bg-gray padding-20 " >
					<input maxlength="11" type="number" placeholder="请输入您的联系方式" v-model="data.phone" />
				</view>
			</view>
			<view class="form">
				<view class="flex">
					<view class="need" >*</view>
					<view>预约时间</view>
				</view>
				<view class="bg-gray padding-20" @click="timeShow=true">
					<input disabled  type="number" placeholder="请选择预约时间" v-model="dateTimeStr" />
				</view>
			</view>
		</view>
		
		<view class="card ">
			<view class="form" style="height: 320rpx;">
				<view  class="bg-gray padding-10">
					<u-input v-model="data.reportDetail" type="textarea"  maxlength="100" height="240" placeholder="请填写故障描述" style="width: 100%;line-height: 50rpx;"/>
					<!-- <textarea @click="showMask"   v-model="data.reportDetail" maxlength="100" style="width: 100%;height: 270rpx;line-height: 50rpx;"  placeholder="请填写故障描述"></textarea> -->
					<view  class="text-right text-df text-gray padding-top-10">
						{{data.reportDetail.length}} / 100
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="text-center padding-20">
				<text>上传图片（选填，最多四张）</text>
			</view>
			<view >
				<view class="cu-form-group" style="padding: 20rpx 30rpx">
					<view class="grid col-4 grid-square flex-sub padding-left-10">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @click="viewImage(index)" >
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg(index)" >
								<text class='cuIcon-close' style="font-size: 20rpx;"></text>
							</view>
						</view>
						<view class="solids" @click="chooseImage" v-if="imgList.length<4">
							<text class='cuIcon-add ' style="font-size: 60rpx;color: #c9c9c9;"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view  style="height: 110rpx;"></view>
		<view style="z-index: 999;" class=" footer-fixed" @click="submit">
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				确定提交
			</view>
		</view>
		<u-mask z-index="99999" :show="maskShow" @click="maskShow = false">
			<view style="margin: 20rpx;" @click.stop="">
				<textarea  @confirm="confirm" @keyboardheightchange="keyboardheightchange" v-model="data.reportDetail"  value="" style="background-color: #FFFFFF;width: 100%;padding: 20rpx;box-sizing: border-box;" placeholder="请填写故障描述" />
				<view  class="bg-white text-right text-df text-gray padding-10">
					{{data.reportDetail.length}} / 100
				</view>
			</view>
		</u-mask>
		<u-popup v-model="timeShow" mode="bottom" border-radius="20" :closeable="true" height="55%">
			<time-selector  @getDateTime="timeConfirm"></time-selector>
		</u-popup>
		
		<u-select :default-value="defaultValue" value-name="residentialId" label-name="residentialName" @confirm="residentialConfirm" z-index="9999999" v-model="residentialShow" :list="residentialList"></u-select>
	</view>
</template>

<script>
	import timeSelector from '@/comps/mp-time/index.vue';
	var app=getApp()
	var that;
	export default {
		components:{
			timeSelector
		},
		data() {
			return {
				defaultValue:[],
				platform:'',
				maskShow:false,
				//图片回显
				imgList:[],
				data:{
					//处理状态：待处理
					handleStatus:0,
					//报修用户的memberId
					memberId:'',
					//userId
					userId:'',
					//小区id
					residentialId:'',
					//小区名字
					residentialName:'',
					//故障位置
					reportPosition:'',
					//预约时间区间
					beginTime:'',
					endTime:'',
					//联系方式
					phone:'',
					//故障详情描述
					reportDetail:'',
					//图片描述
					pic:''
				},
				base64_image:[],
				residentialShow:false,
				residentialList:[],
				timeShow:false,
				dateTimeStr:''
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			this.data.phone=getApp().globalData.member.tel
		},
		methods: {
			initData(){
				that=this
				//判断是ios还是安卓，ios键盘上移会挤压遮挡层
				this.platform=this.$u.os() || "android"
				//获取用户的userid
				this.data.userId=app.globalData.userId
				//获取用户的memberId
				try{
					that.data.memberId=app.globalData.member.id
				}catch(e){
					console.log(e);
				}
				if (this.$isEmpty(this.data.memberId)) {
					console.log("系统异常");
					app.globalData.oneFailHint("系统异常",function(){
						uni.navigateBack({
							delta:1
						})
					})
					return
				}
				//从缓存中获取房屋列表
				this.residentialList=uni.getStorageSync("residentialList")
				//从缓存中获取默认的小区名字和小区id
				this.data.residentialName=uni.getStorageSync("plotName")
				this.data.residentialId=uni.getStorageSync("residentialId")
				//社区选择器的默认值
				this.residentialList.forEach((item,index)=>{
					if (item.residentialId===this.data.residentialId) {
						this.defaultValue.push(index)
						return
					}
				})
			},
			submit(){
				if (this.$isEmpty(this.data.residentialName)) {
					this.$u.toast("请选择小区")
					return
				}
				if (this.$isEmpty(this.data.reportPosition)) {
					this.$u.toast("请填写具体位置")
					return
				}
				if (this.$isEmpty(this.data.phone)) {
					this.$u.toast("请输入联系方式")
					return
				}
				if (!this.$u.test.mobile(this.data.phone)) {
					this.$u.toast("请输入正确的联系方式")
					return
				}
				if (this.$isEmpty(this.data.beginTime)||this.$isEmpty(this.data.endTime)) {
					this.$u.toast("请选择预约时间")
					return
				}
				if (this.$util.createDate(this.data.beginTime).getTime()>
					this.$util.createDate(this.data.endTime).getTime()) {
					this.$u.toast("开始时间不能小于结束时间")
					return
				}
				if (this.$isEmpty(this.data.reportDetail)) {
					this.$u.toast("请输入故障描述")
					return
				}
				this.data.pic=JSON.stringify(this.base64_image)
				let operation='estateRepair/addEstateRepair'
				console.log(this.data);
				app.globalData.postRequest(this.data, operation, function (res) {
					if (res.data.add_result) {
						app.globalData.oneFailHint("提交成功");
					}else{
						app.globalData.oneFailHint("提交失败");
					}
				});
			},
			showMask(){
				console.log(this.platform);
				if (this.platform!='ios') {
					this.maskShow=true
				}
			},
			confirm(){
				this.maskShow=false
			},
			residentialConfirm(e){
				this.data.residentialId=e[0].value
				this.data.residentialName=e[0].label
			},
			keyboardheightchange(e){
				console.log(e.detail.height);
				console.log(this.maskShow);
				if (e.detail.height==0) {
					this.maskShow=false
				}
			},
			timeConfirm(e){
				this.timeShow=false
				this.data.beginTime=e.beginTime
				this.data.endTime=e.endTime
				this.dateTimeStr=this.data.beginTime+"   至   "+this.data.endTime
			},
			/**
			 * 上传问题截图
			 */
			chooseImage() {
				let that=this
				uni.chooseImage({
					count: 4-this.imgList.length, 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						for (let index in tempFilePaths) {
							//图片回显
							that.imgList.push(tempFilePaths[index])
							//图片转为base64的图片
							uni.getFileSystemManager().readFile({
							  filePath: tempFilePaths[index],
							  //选择图片返回的相对路径
							  encoding: 'base64',
							  //编码格式
							  success: res => {
							    //成功的回调
							    that.base64_image.push('data:image/jpeg;base64,' + res.data)
							  }
							});
						}
					
					}
				});
			},
			/*预览图片*/
			viewImage(index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				});
			},
			/*删除图片*/
			DelImg(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(index, 1)
							this.base64_image.splice(index,1)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg-gray{
		background-color: #f7f7f7;
	}
	.card{
		margin: 18rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	.card .form{
		padding: 23rpx;
	}
	.need{
		font-size: 38rpx;
		font-weight: 800;
		color: #ff0000;
		padding-right: 10rpx;
	}
</style>