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.reportorPhone" />
				</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 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.repairName" />
				</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;" />
					<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: 160rpx;"></view>
		<view style="z-index: 999;" class="footer-fixed" :style="{'margin-bottom': safeAreaBottom+'rpx'}" @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: {
					//上报人
					reportor:'',
					//保修电话
					reportorPhone:'',
					repairName:'',
					//故障详情描述
					reportDetail: '',
					//报事来源，1：小程序，2：后台
					reportSource:1,
					//故障位置
					reportPosition: '',	
					//处理状态：待处理
					handleStatus: 0,
					//小区id
					residentialId: '',
					//图片描述
					pic: '',
					//预约时间区间
					beginTime: '',
					endTime: '',
				},
				base64_image: [],
				residentialShow: false,
				residentialList: [],
				timeShow: false,
				dateTimeStr: ''
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			this.data.reportorPhone = getApp().globalData.member.phone
		},
		methods: {
			initData() {
				that = this
				//判断是ios还是安卓，ios键盘上移会挤压遮挡层
				this.platform = this.$u.os() || "android"
				this.data.memberId=app.globalData.member.id
				if (this.$isEmpty(this.data.memberId)) {
					this.$dialog.showModalAndBack('系统异常')
					return
				}
				//获取用户的userid
				this.data.reportor = app.globalData.member?app.globalData.member.name:'未知' 
				//从缓存中获取房屋列表
				this.residentialList = uni.getStorageSync("residentialList")//从缓存中获取默认的小区名字和小区id
				//从缓存中获取默认的小区名字和小区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.residentialId)) {
					this.$u.toast("请选择小区")
					return
				}
				if (this.$isEmpty(this.data.reportPosition)) {
					this.$u.toast("请填写具体位置")
					return
				}
				if (this.$isEmpty(this.data.reportorPhone)) {
					this.$u.toast("请输入联系方式")
					return
				}
				if (!this.$u.test.mobile(this.data.reportorPhone)) {
					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.repairName)) {
					this.$u.toast("请输入故障简述")
					return
				}
				this.data.pic = this.base64_image.join(",")
				that.$http.addEstateRepair(this.data).then(res => {
					if (res.data.success) {
						app.globalData.oneFailHint("提交成功");
					} else {
						app.globalData.oneFailHint("提交失败");
					}

				});
			},
			showMask() {
				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) {
				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
			},
			/**
			 * 上传问题截图
			 */
			async chooseImage() {
				let res = await this.$wxApi.chooseImage(4)
				if (this.$isEmpty(res)) {
					return
				}
				for (let path of res) {
					let url = (await this.$http.uploadFile(path)).data.data.link
					this.base64_image.push(url)
					this.imgList.push(url)
				}
			},
			/*预览图片*/
			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>