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">
					<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 margin-top-20" style="position: relative;">
					<input placeholder="报修地点" v-model="data.reportPosition" />
					<view @click.stop="roomShow=true" class="cu-btn df bg-blue radius"
						style="position: absolute;right: 10rpx;top: 0;bottom: 0;margin:auto;z-index: 99;">
						选择我的房屋
					</view>
				</view>
			</view>
			<view class="form ">
				<view class="flex">
					<view class="need">*</view>
					<view>联系方式</view>
				</view>
				<view class="bg-gray padding-20 " style="position: relative;">
					<input maxlength="11" type="number" placeholder="请输入您的联系方式" v-model="data.reportorPhone" />
					<button class="cu-btn df bg-blue radius" @getphonenumber="getPhoneNumber"  open-type="getPhoneNumber"
						style="position: absolute;right: 10rpx;top: 0;bottom: 0;margin:auto;z-index: 99;">
						获取微信电话
					</button>
				</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;" />
					<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 v-model="roomShow" :list="roomList" @confirm="roomChange" label-name="fullRoomName"
			value-name="fullRoomName"></u-select>
	</view>
</template>

<script>
	import timeSelector from '@/comps/mp-time/index.vue';
	var app = getApp()
	export default {
		components: {
			timeSelector
		},
		data() {
			return {
				sessionKey:'',
				platform: '',
				maskShow: false,
				//图片回显
				imgList: [],
				data: {
					//上报人
					reportor: '',
					//保修电话
					reportorPhone: '',
					repairName: '',
					//故障详情描述
					reportDetail: '',
					//报事来源，1：小程序，2：后台
					reportSource: 1,
					//故障位置
					reportPosition: '',
					//处理状态：待处理
					handleStatus: 0,
					//小区id
					residentialId: '',
					//图片描述
					pic: '',
					//预约时间区间
					beginTime: '',
					endTime: '',
				},
				base64_image: [],

				roomList: [],
				roomShow: false,

				residentialShow: false,
				defaultValue: [],
				residentialList: [],

				timeShow: false,
				dateTimeStr: ''
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			this.data.reportorPhone = getApp().globalData.member.phone
		},
		methods: {
			getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let params = {
						sessionKey: this.sessionKey,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}
					this.$http.getOpenData(params).then(res => {
						this.data.reportorPhone = res.data.purePhoneNumber
					})
					return
				}
				this.$u.toast('获取手机号失败')
			},
			async getSessionKey(){
				let jsCode = await new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							resolve(res.code);
						},
						fail: err => {
							reject(err);
						}
					})
				})
				let params = {
					js_code: jsCode,
					name: 'community',
					app_type: 1
				};
				let res = await this.$http.getOpenid(params);
				this.sessionKey = res.data.session_key
			},
			initData() {
				this.getSessionKey()
				//判断是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 : '未知'
				//从缓存中获取默认的小区名字和小区id
				this.data.residentialName = uni.getStorageSync("plotName")
				this.data.residentialId = uni.getStorageSync("residentialId")
				//获取我的房间
				this.getRoomByMemberId()
			},
			roomChange(e) {
				this.data.reportPosition = e[0].value
			},
			getRoomByMemberId() {
				let memberId = this.vuex_member.id
				let params = {
					residentialId: uni.getStorageSync('residentialId'),
					id: memberId
				}
				this.$http.getRoomByMemberId(params).then(res => {
					if (res.data.success) {
						this.roomList = res.data.data
						this.roomList.forEach(item => {
							item.fullRoomName = item.residentialName + "-" + item.buildingName + "-" + item
								.unitName + "-" + item.name
						})
					}

				})
			},
			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.reportDetail)) {
					this.$u.toast("请对您的问题进行描述")
					return
				}
				this.data.pic = this.base64_image.join(",")
				this.$http.addEstateRepair(this.data).then(res => {
					if (res.data.success) {
						this.$dialog.showModalAndBack('提交成功')
					} else {
						app.globalData.oneFailHint("提交失败");
					}

				});
			},
			showMask() {
				if (this.platform != 'ios') {
					this.maskShow = true
				}
			},
			confirm() {
				this.maskShow = false
			},
			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>