You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
11 KiB
447 lines
11 KiB
<template>
|
|
<view class="checkout-detail-bg">
|
|
<!-- 房间图片 -->
|
|
<image
|
|
class="room-img"
|
|
:src="info.houseTypeCoverImg"
|
|
mode="aspectFill"
|
|
></image>
|
|
<!-- 基本信息卡片 -->
|
|
<view class="info-card">
|
|
<view class="room-title">{{ info.roomNamePath }}</view>
|
|
<view style="border-bottom: 2rpx dashed #e5e5e5; margin: 24rpx 0"></view>
|
|
<view class="info-row"
|
|
><text class="label">居住人</text>{{ info.graduateName }}</view
|
|
>
|
|
<view class="info-row"
|
|
><text class="label">性别</text
|
|
>{{ info.gender == 1 ? "男" : "女" }}</view
|
|
>
|
|
<view class="info-row"
|
|
><text class="label">联系电话</text>{{ maskPhoneNumber(info.telephone) }}</view
|
|
>
|
|
<view class="info-row"
|
|
><text class="label">居住日期</text>{{ info.checkInDate }}至{{
|
|
info.checkOutDate
|
|
}}</view
|
|
>
|
|
</view>
|
|
<!-- 设备检查 -->
|
|
<view class="section-card">
|
|
<view class="section-title">设备检查</view>
|
|
<view
|
|
v-for="(item, idx) in deviceList"
|
|
:key="item.name"
|
|
class="device-row"
|
|
>
|
|
<text class="device-label">{{ item.name }}</text>
|
|
<u-radio-group
|
|
placement="row"
|
|
@change="onDeviceChange(idx, $event)"
|
|
v-model="checkStatus[idx]"
|
|
>
|
|
<u-radio
|
|
:custom-style="'margin-right:36rpx;'"
|
|
activeColor="#0DC6C6"
|
|
v-for="opt in statusOptions"
|
|
:key="opt.value"
|
|
:label="opt.label"
|
|
:name="opt.value"
|
|
></u-radio>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
<!-- 水电表 -->
|
|
<view class="section-card">
|
|
<view class="section-title">水电表设备</view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">水表数</text>
|
|
<u-input
|
|
v-model="waterMeterValue"
|
|
type="digit"
|
|
placeholder="请输入水表数"
|
|
border="none"
|
|
/>
|
|
</view>
|
|
<view style="border-bottom: 2rpx solid #e5e5e5; margin: 24rpx 0"></view>
|
|
<view class="meter-row">
|
|
<text class="meter-label">电表数</text>
|
|
<u-input
|
|
v-model="energyMeterValue"
|
|
type="digit"
|
|
placeholder="请输入电表数"
|
|
border="none"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 其他说明 -->
|
|
<view class="section-card">
|
|
<view class="section-title">其他说明</view>
|
|
<u-textarea
|
|
v-model="facilitiesCheckDesc"
|
|
ref="textarea"
|
|
placeholder="请输入内容（不超过500字）"
|
|
maxlength="500"
|
|
height="150"
|
|
border="none"
|
|
custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"
|
|
></u-textarea>
|
|
</view>
|
|
<!-- 图片/视频上传区域 -->
|
|
<view class="section-card">
|
|
<view class="section-title">图片/视频</view>
|
|
<u-upload
|
|
accept="all"
|
|
:fileList="fileList"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
multiple
|
|
:maxCount="10"
|
|
uploadIconColor="#12c3c3"
|
|
:previewImage="true"
|
|
:maxSize="10 * 1024 * 1024"
|
|
@oversize="oversize"
|
|
>
|
|
<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">最多10个</view>
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-btn-wrap">
|
|
<u-button
|
|
type="primary"
|
|
shape="circle"
|
|
@click="onSubmit"
|
|
:custom-style="btnStyle"
|
|
>提交</u-button
|
|
>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getRoomFacilities,
|
|
submitCheckout,
|
|
uploadImage,
|
|
tempSaveCheckOut,
|
|
} 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;",
|
|
deviceList: [],
|
|
statusOptions: [
|
|
{
|
|
label: "完好",
|
|
value: "0",
|
|
},
|
|
{
|
|
label: "破损",
|
|
value: "1",
|
|
},
|
|
{
|
|
label: "丢失",
|
|
value: "2",
|
|
},
|
|
],
|
|
waterMeterValue: "",
|
|
energyMeterValue: "",
|
|
checkStatus: [],
|
|
remark: "",
|
|
fileList: [],
|
|
img1: [],
|
|
info: {},
|
|
facilitiesCheckDesc: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
console.log("options", options);
|
|
|
|
const detail = uni.getStorageSync("checkoutDetail");
|
|
this.info = detail;
|
|
this.getFacilities(options.houseId);
|
|
},
|
|
methods: {
|
|
maskPhoneNumber (phoneNumber) {
|
|
if (!phoneNumber || phoneNumber.length !== 11) {
|
|
return phoneNumber;
|
|
}
|
|
return phoneNumber.substr(0, 3) + '****' + phoneNumber.substr(7);
|
|
},
|
|
getFacilities(id) {
|
|
getRoomFacilities({ houseId: id }).then((res) => {
|
|
this.deviceList = res.data;
|
|
// 初始化每个设备的状态为“完好”
|
|
this.checkStatus = this.deviceList.map(() => "0");
|
|
});
|
|
},
|
|
onDeviceChange(idx, val) {
|
|
this.deviceList[idx].status = val;
|
|
},
|
|
beforeRead(event) {
|
|
console.log("event", event);
|
|
},
|
|
//图片超过大小时取消上传
|
|
oversize(e) {
|
|
this.$u.toast("请传10MB以内大小的图片/视频！");
|
|
return false;
|
|
},
|
|
|
|
// 选择文件后上传
|
|
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++) {
|
|
try {
|
|
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++;
|
|
} catch (err) {
|
|
// 处理接口异常
|
|
let msg = (err && err.msg) || (err && err.message) || "上传失败";
|
|
console.log('344',err);
|
|
|
|
uni.showToast({
|
|
title: msg,
|
|
icon: "none",
|
|
duration: 3000
|
|
});
|
|
// 失败时移除上传中的文件
|
|
this[`fileList${event.name}`].splice(fileListLen, 1);
|
|
return; // 终止后续上传
|
|
}
|
|
}
|
|
var arry = [];
|
|
this.fileList.filter((v, i) => {
|
|
arry.push(v.url);
|
|
});
|
|
this.img1 = arry;
|
|
},
|
|
// 删除文件
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1);
|
|
var arry = [];
|
|
this.fileList.filter((v, i) => {
|
|
arry.push(v.url);
|
|
});
|
|
this.img1 = arry;
|
|
},
|
|
// 暂存提交
|
|
handleTempSave(formData) {
|
|
tempSaveCheckOut(formData).then((res) => {
|
|
if (res.code === 200) {
|
|
uni.showToast({ title: res.msg, icon: "success" });
|
|
uni.navigateTo({
|
|
url: `/pagesA/checkout/list/list`,
|
|
});
|
|
} else {
|
|
uni.showToast({ title: res.msg, icon: "warning" });
|
|
}
|
|
});
|
|
},
|
|
onSubmit() {
|
|
// 校验设备检查是否全部完成
|
|
const uncheckedDevices = this.deviceList.filter((item, index) => {
|
|
return this.checkStatus[index] === undefined || this.checkStatus[index] === '';
|
|
});
|
|
|
|
if (uncheckedDevices.length > 0) {
|
|
uni.showToast({
|
|
title: '请完成所有设备检查',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 校验水电表是否填写
|
|
if (!this.waterMeterValue || this.waterMeterValue.trim() === '') {
|
|
uni.showToast({
|
|
title: '请输入水表数',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!this.energyMeterValue || this.energyMeterValue.trim() === '') {
|
|
uni.showToast({
|
|
title: '请输入电表数',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
const facilitiesCheckResults = this.deviceList.map((item, index) => ({
|
|
facilityId: item.id,
|
|
checkResult: this.checkStatus[index],
|
|
}));
|
|
console.log(facilitiesCheckResults, "facilitiesCheckResults");
|
|
const params = {
|
|
idCard: this.info.idCard,
|
|
checkOutType: 0, //正常退房
|
|
facilitiesCheckDesc: this.facilitiesCheckDesc,
|
|
facilitiesCheckImages: this.fileList,
|
|
facilitiesCheckResults: facilitiesCheckResults,
|
|
waterMeterValue: this.waterMeterValue || "",
|
|
energyMeterValue: this.energyMeterValue || "",
|
|
};
|
|
this.handleTempSave(params);
|
|
uni.navigateTo({
|
|
url: "/pages/tabBar/work",
|
|
});
|
|
uni.showToast({ title: "提交成功", icon: "success" });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.checkout-detail-bg {
|
|
background: #f7f7f7;
|
|
min-height: 100vh;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.room-img {
|
|
width: 100vw;
|
|
height: 400rpx;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.info-card {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
// margin: -40rpx 24rpx 16rpx 24rpx;
|
|
padding: 24rpx 24rpx 12rpx 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.room-title {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.label {
|
|
color: #888;
|
|
margin-right: 24rpx;
|
|
min-width: 120rpx; /* 固定宽度，保证对齐 */
|
|
text-align: right;
|
|
}
|
|
.section-card {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 0 24rpx 16rpx 24rpx;
|
|
padding: 24rpx;
|
|
}
|
|
.section-title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.device-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12rpx 0rpx;
|
|
min-height: 64rpx;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
.device-label {
|
|
width: 160rpx;
|
|
color: #68758b;
|
|
font-size: 28rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
.meter-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.meter-label {
|
|
width: 120rpx;
|
|
color: #888;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.meter-value {
|
|
color: #222;
|
|
font-size: 28rpx;
|
|
}
|
|
.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__wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.u-upload__preview {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
</style>
|
|
|