epmet-apartment-work-mp/pagesA/force/index/index.vue

<template>
	<view>
		<view class="top-bg"></view>
		<view class="container">
			<u-form :model="form" ref="uForm" label-width="90">
				<view class="info-card">
					<u-form-item prop="idCard">
						<u-input v-model="form.idCard" placeholder="请输入身份证号" border="none" input-align="left"
							suffixIcon="search" suffixIconStyle="color: #909399" @confirm="handleQuery" />
					</u-form-item>
				</view>
				<view class="cont" v-if="showInfo">
					<view class="info-card">
						<u-form-item label="姓名" prop="name" required>
							<text style="text-align: right">{{ baseInfo.graduateName }}</text>

							<!-- <u-input
			      v-model="baseInfo.graduateName"
			      placeholder="请输入姓名"
			      border="none"
			      input-align="right"
			      :disabled="true"
			    /> -->
						</u-form-item>
						<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
						<u-form-item label="房间" prop="room" required>
							<text style="text-align: right">{{ roomAllPath }}</text>

							<!-- <u-input
			      v-model="roomAllPath"
			      placeholder="请输入房间"
			      border="none"
			      input-align="right"
			      :disabled="true"
			    /> -->
						</u-form-item>
						<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
						<u-form-item label="手机号" prop="phone" required>
							<text style="text-align: right">{{ baseInfo.telephone }}</text>

							<!-- <u-input
			      v-model="baseInfo.telephone"
			      placeholder="请输入手机号"
			      border="none"
			      input-align="right"
			      :disabled="true"
			    /> -->
						</u-form-item>
						<view style="border-bottom: 2rpx solid #e5e5e5; margin: 0"></view>
						<u-form-item label="退房日期" prop="leaveDate" required @click="showDate = false">
							<text style="text-align: right">{{ baseInfo.checkOutTime }}</text>
							<!-- <u--input
			      v-model="baseInfo.checkOutTime"
			      placeholder="请选择退房日期"
			      border="none"
			      readonly
			      input-align="right"
			    ></u--input> -->
						</u-form-item>
						<!-- <u-form-item
			    label="问题类型"
			    prop="problemType"
			    required
			    @click="showProblemTypePicker = true"
			  >
			    <u-input
			      v-model="form.problemType"
			      placeholder="请选择问题类型"
			      border="none"
			      input-align="right"
			      readonly
			    />
			  </u-form-item> -->
					</view>
					<view class="desc-card">
						<view class="label-des">说明</view>
						<u-textarea v-model="forceCheckoutDesc" ref="textarea" placeholder="请输入内容（不超过500字）"
							maxlength="500" height="150" border="none"
							custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"></u-textarea>
						<view class="label-des">上传图片/视频</view>
						<u-upload accept="all" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple
							:maxCount="10" uploadIconColor="#12c3c3" :previewImage="true">
							<view class="custom-upload-btn">
								<view class="icon-box">
									<image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill">
									</image>
								</view>

								<view class="upload-tips">点击上传</view>
							</view>
						</u-upload>
					</view>
					<view class="submit-box">
						<u-button type="primary" shape="circle" @click="submit" :custom-style="btnStyle">提交</u-button>
					</view>

				</view>

			</u-form>
			<u-datetime-picker :show="showDate" v-model="form.pickerValue" mode="date" @confirm="onDateConfirm"
				@cancel="showDate = false" />
			<u-picker :show="showProblemTypePicker" :columns="[problemTypeOptions]" @confirm="onProblemTypeConfirm"
				@cancel="showProblemTypePicker = false" keyName="label" />
		</view>
	</view>
</template>

<script>
	import {
		uploadImage,
		getResidentInfo,
		forceRelease
	} from "../../../pages/api";
	export default {
		data() {
			return {
				btnStyle: "background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx; margin-bottom:60rpx;",
				form: {
					room: "",
					name: "",
					idCard: "",
					phone: "",
					leaveDate: "",
					desc: "",
					imageUrl: "",
					pickerValue: "",
					problemType: "",
				},
				forceCheckoutDesc: "",
				baseInfo: {
					roomId: "",
				},
				descRemark: "",
				fileList: [],
				img1: [],
				showDate: false,
				minDate: "2000-01-01",
				maxDate: "2100-12-31",
				descStyle: "background:#f7f8fa;border-radius:12rpx;padding:24rpx;font-size:28rpx;color:#222;min-height:250rpx;box-sizing:border-box;",
				problemTypeOptions: [{
					label: "违法居住条款，故意破坏房间设施",
					value: 1
				}, ],
				showProblemTypePicker: false, // 控制选择器显示
				showInfo: true
			};
		},
		computed: {
			roomAllPath() {
				const {
					apartmentName,
					buildingName,
					unitName,
					roomTypeName
				} =
				this.baseInfo;
				return `${apartmentName || ""}${buildingName || ""}${unitName || ""}${
        roomTypeName || ""
      }`;
			},
		},
		methods: {
			handleQuery() {
				getResidentInfo({
					idCard: this.form.idCard
				}).then((res) => {
					if (res.code === 200) {
						console.log("查询结果:", res);
						this.baseInfo = res.data;
						if (this.baseInfo) {
							this.showInfo = true
						}
						this.baseInfo.roomId = res.data.roomId;
					}
				});
			},
			// 上传前校验
			beforeRead(event) {
				// 可以在这里做文件大小、类型校验
				const {
					file
				} = event;
				if (file.size > 10 * 1024 * 1024) {
					// 10MB
					uni.showToast({
						title: "文件过大",
						icon: "none"
					});
					return false;
				}
				return true;
			},

			// 选择文件后上传
			async afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadImage(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];

					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.url,
						})
					);
					fileListLen++;
				}
				var arry = [];
				this.fileList.filter((v, i) => {
					arry.push({
						name: v.name || '',
						format: v.type,
						url: v.url
					});
				});
				// this.img1 = arry;
			},
			// 删除文件
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				var arry = [];
				this.fileList.filter((v, i) => {
					arry.push({
						name: v.name || '',
						format: v.type,
						url: v.url
					});
				});
				// this.img1 = arry;
			},
			onProblemTypeConfirm(e) {
				const selectedItem = e.value[0];
				this.form.problemType = selectedItem.label; // 显示标签
				this.form.problemTypeValue = selectedItem.value; // 保存值
				this.showProblemTypePicker = false;
			},
			submit() {
				const params = {
					// idCard: this.baseInfo.idCard,
					chooseRoomRecId: this.baseInfo.chooseRecId,
					checkOutType: 1, //0正常退房1强制退房
					// questionType: this.form.problemTypeValue,
					content: this.forceCheckoutDesc,
					imageList: this.fileList, //退房检查图片
				};
				console.log(params, "params");

				this.handleTempSave(params);
			},
			handleTempSave(params) {
				forceRelease(params).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: "success"
					});
					uni.switchTab({
						url: "/pages/tabBar/work/index"
					});
				});
			},
		},
	};
</script>

<style scoped>
	.top-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 260rpx;
		background: linear-gradient(120deg, #c6e6f7 0%, #e3e5fc 100%);
		z-index: 0;
	}

	.container {
		position: relative;
		z-index: 1;
		padding: 32rpx 24rpx 0 24rpx;
		background: transparent;
		min-height: 80vh;
	}

	.info-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 0rpx 24rpx 0 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 #e6f6fd;
	}

	::v-deep .u-form-item__body__left {
		color: #6a7fa3 !important;
		font-size: 28rpx !important;
		font-weight: 500;
	}

	.u-form-item__body__left .u-form-item__body__left__required {
		color: #ff5a5a !important;
		margin-right: 4rpx;
		font-size: 28rpx;
	}

	.u-form-item__body__right {
		text-align: right;
		color: #222;
		font-size: 28rpx;
	}

	.u-form-item {
		border-bottom: 1rpx solid #f2f4f8 !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	.u-form-item:last-child {
		border-bottom: none !important;
	}

	.desc-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 24rpx 20rpx 24rpx 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx #f2f4f8;
	}

	.label-des {
		color: #68758b;
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	.custom-desc-textarea {
		background: #f7f8fa !important;
		border-radius: 12rpx !important;
		padding: 24rpx !important;
		font-size: 28rpx !important;
		color: #222 !important;
		min-height: 500rpx !important;
		box-sizing: border-box;
	}

	.custom-upload-btn {
		width: 160rpx;
		height: 160rpx;
		background: #fafafa;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 20rpx 16rpx 0 0;
	}

	.icon-box {
		width: 60rpx;
		height: 60rpx;
		background: #ceeced;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.camera-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.upload-tips {
		color: #bbb;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	/* u-upload自定义按钮样式（如需更改） */
	.u-upload__wrap__button {
		background: #f7f8fa !important;
		border-radius: 16rpx !important;
		width: 120rpx !important;
		height: 120rpx !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.u-upload__wrap__button .u-icon {
		color: #2fd7e6 !important;
		font-size: 48rpx !important;
	}

	.u-upload__wrap__button .u-upload__wrap__button__text {
		color: #b0b0b0 !important;
		font-size: 24rpx !important;
		margin-top: 8rpx;
	}

	::v-deep .u-form-item__body__left__content__label span {
		color: #68758b;
		font-size: 30rpx;
	}
</style>