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-search
              placeholder="请输入身份证号"
              v-model="form.idCard"
              shape="round"
              :showAction="false"
              bgColor="#fff"
              height="42rpx"
              @search="handleQuery"
              @clear="handleClear"
              @clickIcon="handleQuery"
            ></u-search>
          </u-form-item>
        </view> -->

				<view class="cont" v-if="showInfo">
					<view class="info-card info-item">
						<u-form-item label="房间" prop="room" borderBottom>
							<text style="text-align: right">{{ baseInfo.buildingName || "" }}{{ baseInfo.unitName || ""
                }}{{ baseInfo.houseName || ""
                }}{{ baseInfo.roomTypeName || "" }}</text>

							<!-- <u-input
			      v-model="roomAllPath"
			      placeholder="请输入房间"
			      border="none"
			      input-align="right"
			      :disabled="true"
			    /> -->
						</u-form-item>
						<u-form-item label="姓名" prop="name" borderBottom labelStyle="{color:red;}">
							<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>
						<!-- 性别 -->
						<u-form-item label="性别" prop="gender" borderBottom labelStyle="{color:red;}">
							<text style="text-align: right">{{
                baseInfo.gender == 1 ? "男" : baseInfo.gender == 2 ? "女" : ""
              }}</text></u-form-item>

						<u-form-item label="手机号" prop="phone" borderBottom>
							<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>
						<!-- <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="请输入内容" maxlength="500"
							height="150" border="none"
							custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"></u-textarea>
						<view class="label-des">上传图片/视频</view>
						<u-upload :max-count="10" :multiple="true" :preview-full-image="true" :deletable="true"
							:show-upload-list="true" :fileList="fileList" :auto-upload="false" accept="all"
							:maxSize="10 * 1024 * 1024" @oversize="oversize" @delete="onDelete" :disabled="true">
							<view class="custom-upload-btn" @click.stop="chooseMedia">
								<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,
		getRecCheckOutInfo,
		updateForceEvictionRecord,
	} 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;border:none",
				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 || ""
      }`;
			},
		},
		onLoad(options) {
			this.form.idCard = options.idCard;
			this.form.checkOutRecId = options.checkOutRecId;
			this.getRecCheckOutInfo(options.checkOutRecId);
		},
		methods: {
			getRecCheckOutInfo(checkOutRecId) {
				getRecCheckOutInfo(checkOutRecId).then((res) => {
					this.baseInfo = res.data;
					if (this.baseInfo) {
						this.showInfo = true;
					}
					this.baseInfo.roomId = res.data.mzCheckOutRec.roomId;
					this.baseInfo.checkOutRecId = checkOutRecId;
					this.forceCheckoutDesc = res.data.forcedEvictionRecord.content;
					this.fileList = res.data.forcedEvictionRecord.attrList;
				});
			},
			handleQuery() {
				getResidentInfo({
					idCard: this.form.idCard,
				}).then((res) => {
					if (res.code === 200) {
						this.baseInfo = res.data;
						if (this.baseInfo) {
							this.showInfo = true;
						}
						this.baseInfo.roomId = res.data.roomId;
					} else {
						uni.showToast({
							title: res.msg || "查询失败",
							icon: "none",
						});
					}
				});
			},
			handleClear() {
				(this.baseInfo.graduateName = ""),
				(this.baseInfo.telephone = ""),
				(this.baseInfo.idCard = ""),
				(this.baseInfo.checkOutTime = ""),
				(this.baseInfo.apartmentName = ""),
				(this.baseInfo.buildingName = ""),
				(this.baseInfo.unitName = ""),
				(this.baseInfo.roomTypeName = "");
			},
			chooseMedia() {
				uni.chooseMedia({
					count: 10 - this.fileList.length,
					mediaType: ["image", "video"],
					sourceType: ["album", "camera"],
					maxDuration: 60,
					camera: "back",
					success: async (res) => {
						// 添加文件大小检查
						const files = res.tempFiles;
						// 检查每个文件的大小
						const oversizeFiles = files.filter(
							(file) => file.size > 10 * 1024 * 1024
						);
						if (oversizeFiles.length > 0) {
							this.$u.toast("请选择10MB以内大小的图片/视频！");
							return;
						}
						uni.showLoading({
							title: "上传中...",
							mask: true
						});
						try {
							const files = res.tempFiles;
							for (let i = 0; i < files.length; i++) {
								const file = files[i];
								const filePath = file.tempFilePath;
								const type =
									file.fileType ||
									(filePath.match(/\.(mp4|mov|avi|wmv|flv|mkv)$/i) ?
										"video" :
										"image");
								const uploadRes = await uploadImage(filePath);
								this.fileList.push({
									url: uploadRes.data?.url || uploadRes.url || uploadRes.path,
									name: uploadRes.data?.name || uploadRes.name || "",
									type: type,
									status: "success",
								});
							}
							this.img1 = this.fileList.map((v) => v.url);
						} catch (e) {
							uni.showToast({
								title: "上传失败",
								icon: "none"
							});
						} finally {
							uni.hideLoading();
						}
					},
					fail: () => {
						uni.hideLoading();
					},
				});
			},
			//图片超过大小时取消上传
			oversize(e) {
				this.$u.toast("请传10MB以内大小的图片/视频！");
				return false;
			},
			// 删除文件
			onDelete(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.form.imageList = arry;
			},
			onProblemTypeConfirm(e) {
				const selectedItem = e.value[0];
				this.form.problemType = selectedItem.label; // 显示标签
				this.form.problemTypeValue = selectedItem.value; // 保存值
				this.showProblemTypePicker = false;
			},
			submit() {
				if (
					this.baseInfo.forcedEvictionRecord &&
					this.baseInfo.forcedEvictionRecord.id
				) {
					// 避免直接修改响应式对象，创建新对象传参
					let params = {
						...this.baseInfo.forcedEvictionRecord,
						content: this.forceCheckoutDesc,
						attrList: this.fileList,
						id: this.baseInfo.forcedEvictionRecord.id,
						checkOutRecId: this.baseInfo.checkOutRecId,
					};
					this.updateForceEvictionRecord(params);
				} else {
					const params = {
						// idCard: this.baseInfo.idCard,
						checkOutRecId: Number(this.baseInfo.checkOutRecId),
						checkOutType: 1, //0正常退房1强制退房
						// questionType: this.form.problemTypeValue,
						content: this.forceCheckoutDesc,
						attrList: this.fileList, //退房检查图片
					};

					this.handleTempSave(params);
				}
			},
			handleTempSave(params) {
				forceRelease(params).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
							icon: "success",
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error",
						});
					}
				});
			},
			updateForceEvictionRecord(params) {
				updateForceEvictionRecord(params).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
							icon: "success",
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error",
						});
					}
				});
			},
		},
	};
</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 0rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 #e6f6fd;
	}

	.info-item {
		padding: 0 34rpx;
	}

	::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: 0rpx 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 .u-form-item__body__left .u-form-item__body__left__content__label {
		color: #68758b !important;
		font-size: 28rpx;
	}
</style>