repairForMiniProgram/pages/list/list.vue

<template>
	<view class="list_body">
		<view class="box" v-if="showPicker"> </view>
		<mx-date-picker :show="showPicker" :type="type" :value="timeValue" :show-tips="true" :begin-text="'开始'"
			:end-text="'截至'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
		<view class="head">
			<text>报修信息表<image src="../../static/pen.svg" mode=""></image></text>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="content">

				<!-- 故障类型 -->
				<view class="headline-1">
					<text class="uni-list-cell-left"><text>*</text>故障类型：</text>
					<picker @change="bindPickerChange($event,List)" :value="index" :range="List"
						:range-key="'faultName'">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<template v-if="List!=null" v-model="index">
									<view class="uni-input-1">
										{{pickerData.faultName == undefined?'':pickerData.faultName}}
										<image src="../../static/down.svg" mode=""></image>
									</view>
								</template>
							</view>
						</view>
					</picker>
				</view>

				<!-- 宿舍楼栋 -->
				<view class="headline-2">
					<text class="uni-list-cell-left-2"><text>*</text>宿舍楼栋：</text>
					<view class="uni-list-cell">
						<picker class="uni-input-1" mode="multiSelector" :value="roomIndex" :range="room_List"
							@change="bindPickerChange_room" @columnchange="handleNum">

							<view class="uni-input" v-if="dormNumber">
								{{dormNumber}}
							</view>
						</picker>
						<image src="../../static/down.svg" class="uni-list-cell_image"></image>
					</view>

				</view>

				<!-- 预期时间 -->
				<view class="headline-2">
					<text class="uni-list-cell-left-2"><text>*</text>预约时间：</text>
					<view style="line-height: 35px;" @click="onShowDatePicker('datetime')" class="uni-list-cell-db-2">
						<text style="margin-left: 10px;">{{timeValue}}</text>
					</view>
					<image src="../../static/down.svg" mode="" class="timeimg"></image>
				</view>

				<!-- 联系电话 -->
				<view class="headline-2">
					<text class="uni-list-cell-left-2"><text>*</text>联系电话：</text>
					<view class="uni-list-cell-db-2">
						<input type="number" maxlength=11 class="uni-input-2" v-model="formData.phone" />
					</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" type="number" maxlength=11 v-model="formData.inputphone" />
					</view>
				</view>

				<!-- 照片 -->
				<view class="photo">
					<view class="photo-title">拍摄故障照片：</view>
					<view class="upload-image-view">
						<uni-file-picker limit="3" title="最多上传3张图片" :value="imageValue" fileMediatype="image"
							:image-styles="imageStyles" mode="grid" @select="select" @delete="handleDelete">
						</uni-file-picker>
					</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" type="text" maxlength=50 v-model="formData.os" />
					</view>
				</view>
				<button type="default" class="up" @click="getList">
					立即提交
				</button>
			</view>
		</form>
	</view>

</template>

<script>
	import * as TranslateImage from '../../util/imageZip.js'
	import "../../static/upload-imgs.css"
	import MxDatePicker from "../../util/mx-datepicker/mx-datepicker"
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				imageStyles: {
					width: 75,
					height: 75,
					border: {
						color: "#ccc",
						width: 1,
						style: 'dashed',
						radius: '5px'
					}
				},
				imageList: [], //保存图片路径集合
				List: [],
				index: '',
				faultName: null,
				pickerData: '',
				buildId: 1,
				floorId: 1,
				roomId: 1,
				formData: {
					phone: '',
					inputphone: '',
					os: ''
				},
				showPicker: false,
				datetime: '',
				rangetime: '',
				type: 'rangetime',
				timeValue: '',
				imgs: null,
				imageValue: [],
				ceshiData1: [],
				Timer: null,
				room_List: [
					[],
					[],
					[]
				],
				roomIndex: null,
				IdList: [],
				IdList2: [],
				count: 0,
				count2: 0,
				dormNumber: null
			}
		},
		onLoad() {
			this.getStudentInformation()
			this.getTime()
			this.getfault()
			this.getbuild()
			this.getbuildHigh()
			this.getrooms()
		},

		methods: {
			// 获取学生数据
			getStudentInformation() {
				let res = uni.getStorageSync('student')
				// console.log(res)
				if (res) {
					this.formData.phone = res.studentPhone
					this.formData.inputphone = res.studentOtherPhone
					this.dormNumber = res.dormNumber
				}
			},

			// 初始化时间
			getTime() {
				let date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				this.datetime = timer
			},

			// 获取故障类型信息
			async getfault() {
				let res = await this.$myRequest({
					method: "post",
					url: `/fault/queryAllFaultByStatus`,
				})
				// console.log(res)
				this.$nextTick(() => {
					this.List = res.data;
				})
			},

			// 获取宿舍楼栋数据
			async getbuild() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllBuild`,
				})
				// console.log(res)
				let tempList = []
				res.data.forEach(item => {
					tempList.push(item.buildName)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 0, tempList)
				})
			},

			// 获取宿舍楼层数据
			async getbuildHigh() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllFloorByBuildID?buildId=${this.buildId}`,
				})
				// console.log(res)
				this.room_List[1] = []
				this.room_List[2] = []
				this.IdList = []
				let tempList = []
				res.data.forEach(item => {
					tempList.push(item.floorName)
					this.IdList.push(item.floorId)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 1, tempList)
					this.floorId = this.IdList[this.count]
				})
			},

			// 获取宿舍房间数据
			async getrooms() {
				let res = await this.$myRequest({
					method: "post",
					url: `/build/queryAllRoomByFloorID?floorId=${this.floorId}`,
				})
				// console.log(res)
				this.room_List[2] = []
				this.IdList2 = []
				let tempList = []
				res.data.forEach(item => {
					tempList.push(item.roomName)
					this.IdList2.push(item.roomId)
				})
				this.$nextTick(() => {
					this.$set(this.room_List, 2, tempList)
					this.roomId = this.IdList2[this.count2]
				})
			},

			// 时间选择框
			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;
				}
			},

			//故障选择
			bindPickerChange(e, storage) {
				this.index = e.target.value
				this.pickerData = storage[this.index] // 这里就是选中的对象
			},

			// 提交订单
			getList() {
				// 处理图片参数数据
				this.imgs = this.ceshiData1.join(';')
				// 电话验证规则
				let phoneVer = /^[1][3,4,5,7,8,9][0-9]{9}$/
				// 简单校验
				if (this.pickerData.faultId == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择故障类型',
						duration: 2000
					})
					return
				}
				if (this.dormNumber == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择楼栋和宿舍号',
						duration: 2000
					})
					return
				}

				if (!this.timeValue) {
					uni.showToast({
						icon: 'none',
						title: '请选择预期时间',
						duration: 2000
					})
					return
				}

				if (!this.formData.phone) {
					uni.showToast({
						title: "请输入联系电话",
						icon: 'none'
					})
					return
				} else if (!phoneVer.test(this.formData.phone)) {
					uni.showToast({
						title: "请输入正确的联系电话",
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '提交中'
				});

				if (this.Timer != null) {
					clearTimeout(this.Timer);
				}
				this.Timer = setTimeout(async () => {
					let res = await this.$myRequest({
						method: "post",
						url: `/order/insertOrder`,
						data: {
							faultId: String(this.pickerData.faultId),
							dormNumber: this.dormNumber,
							orderExpectedTime: this.timeValue,
							studentDormitory: this.buildId + '-' + this.floorId + '-' + this.roomId,
							orderImages: this.imgs,
							orderNote: this.formData.os,
							studentPhone: this.formData.phone,
							otherPhone: this.formData.inputphone
						},
					})
					// console.log(res)
					if (res.status == 200) {
						uni.showToast({
							title: '提交成功',
						});
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'error',
						});
					}
				}, 1500)
			},

			// 选择图片压缩并上传
			select(e) {
				// console.log('选择文件：', e)
				e.tempFiles.forEach((item) => {
					TranslateImage.translate(item.path, ((res) => {
						if (Number(res.size) > 1000000) {
							uni.showModal({
								content: `图片过大,请重新上传`,
								showCancel: false,
								success() {}
							})
							return
						}
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `/baoxiu/repairApi/order/uploadImage`,
							filePath: res.url,
							name: 'orderImages',
							success: (uploadFileRes) => {
								this.ceshiData1.push((JSON.parse(uploadFileRes.data).data))
								const path = item.path;
								this.imageValue.push({
									url: path,
									name: ""
								})
								uni.hideLoading();
							},
							fail: () => {
								uni.hideLoading();
							}
						});
					}))
				})
			},

			// 删除图片回调
			handleDelete(e) {
				const num = this.imageValue.findIndex(v => v.path === e.tempFilePath);
				this.imageValue.splice(num, 1);
				this.ceshiData1.splice(num, 1);
			},

			// 三级联动下拉框回调
			bindPickerChange_room(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.roomIndex = e.detail.value
				this.dormNumber = this.room_List[0][this.roomIndex[0]] + this.room_List[1][this.roomIndex[1]] + this
					.room_List[2][this.roomIndex[2]]
				// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
			},

			// 三级联动下拉框拖动回调
			handleNum(e) {
				// console.log("第"+(e.detail.column+1)+"列"+"第"+(e.detail.value+1)+"行" )
				if (e.detail.column == 0) {
					// console.log("楼栋发生变化，当前为"+(e.detail.value+1)+"栋")
					if (e.detail.value < 4) {
						this.buildId = e.detail.value + 1
					} else {
						this.buildId = e.detail.value + 5
					}
					// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
				} else if (e.detail.column == 1) {
					// console.log("层数发生变化，当前为"+(e.detail.value+1)+"层")
					this.floorId = this.IdList[e.detail.value]
					this.count = e.detail.value
					// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
				} else {
					// console.log("房间数发生变化，当前为"+(e.detail.value+1)+"号")
					this.roomId = this.IdList2[e.detail.value]
					this.count2 = e.detail.value
					// console.log(this.buildId + '-' + this.floorId + '-' + this.roomId)
				}
			}

		},

		// 监听属性
		watch: {
			buildId: {
				handler() {
					this.getbuildHigh()
				},
			},
			floorId: {
				handler() {
					this.getrooms()
				},
			},
		},
	}
</script>

<style lang="scss">
	.list_body {
		width: 100%;
		overflow: hidden;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.test {
		text-align: center;
		padding: 20rpx 0;
	}

	button {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.head {
		height: 262rpx;
		font-size: 30rpx;
		color: white;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		background-color: rgba(42, 130, 228, 1);
	}

	.head text {
		float: left;
		margin-left: 290rpx;
		margin-top: 24rpx;
	}

	.head image {
		height: 34rpx;
		width: 34rpx;
		font-size: 34rpx;
		vertical-align: bottom;
	}

	.headline-1 {
		font-size: 24rpx;
	}

	.headline-2 {
		font-size: 24rpx;
	}

	.content {
		position: relative;
		width: 720rpx;
		height: 1260rpx;
		margin-top: -162rpx;
		margin-left: 14rpx;
		border: 2rpx solid rgba(128, 128, 128, 0.45);
		background-color: rgba(255, 255, 255, 1);
	}

	.uni-list-cell {
		float: right;
		width: 484rpx;
		height: 70rpx;
		margin-top: 36rpx;
		margin-right: 64rpx;
		border-radius: 32rpx;
		line-height: 44rpx;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.uni-list-cell_image {
		float: right;
		margin-right: 10rpx;
		margin-top: -40rpx;
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
	}

	.uni-input-1 {
		margin-left: 20rpx;
		margin-top: 10rpx;
		height: 50rpx;
	}

	.uni-input-1 image {
		float: right;
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
	}

	.uni-list-cell-left {
		float: left;
		margin-top: 48rpx;
		margin-left: 26rpx;

		text {
			color: red;
		}
	}

	.uni-list-cell-left-2 {
		float: left;
		margin-left: 30rpx;
		margin-top: 76rpx;

		text {
			color: red;
		}
	}

	.uni-list-cell-db-2 {
		float: right;
		margin-right: 64rpx;
		margin-top: 36rpx;
		width: 484rpx;
		height: 70rpx;
		border-radius: 32rpx;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.uni-input-2 {
		margin-left: 20rpx;
		margin-top: 16rpx;
		font-size: 24rpx;
	}

	.uni-input-2 image {
		float: right;
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
	}

	.timeimg {
		position: absolute;
		right: 72rpx;
		top: 262rpx;
		width: 40rpx;
		height: 40rpx;
		font-size: 40rpx;
	}

	.photo {
		height: 340rpx;
		font-size: 24rpx;
	}

	.photo-title {
		float: left;
		margin-left: 26rpx;
		margin-top: 30rpx;
	}

	.upload-image-view {
		/* height: 300px; */
	}

	.image {
		float: left;
		margin-left: 26rpx;
		margin-top: 30rpx;
		height: 396rpx;
		width: 644rpx;
		box-sizing: border-box;
		border-radius: 28rpx;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.imageText {
		text-align: center;
		border-radius: 28rpx;
		width: 100%;
		height: 100%;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.imgSrc image {
		width: 646rPX;
		height: 386rpx;
	}

	.os-headline-2 {
		float: left;
	}

	.os-list-cell-left-2 {
		float: left;
		margin-left: 26rpx;
		margin-top: 236rpx;
		font-size: 24rpx;
	}

	.os-input-2 {
		margin-left: 10rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		line-height: 100%;
	}

	.os-list-cell-db-2 {
		float: right;
		width: 568rpx;
		height: 60rpx;
		margin-right: 30rpx;
		margin-top: 224rpx;
		border-radius: 28rpx;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.up {
		position: absolute;
		bottom: 212rpx;
		left: 20rpx;
		line-height: 72rpx;
		width: 323px;
		height: 36px;
		background-color: rgba(42, 130, 228, 1);
		color: white;
		font-size: 12px;
		border-radius: 14px;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>