epmet-apartment-work-mp/pagesA/release/detail/detail.vue

<template>
  <view class="checkout-detail-bg">
    <!-- 房间图片 -->
    <image
      class="room-img"
      :src="userInfo.houseTypeCoverImg"
      mode="aspectFill"
    ></image>
    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="info-header">
        <view class="room-title">{{ userInfo.roomNamePath }}</view>
        <view class="status-text">待释放</view>
      </view>
      <view class="checkout-date-row"
        >退房日期：{{ userInfo.checkoutTime }}</view
      >
    </view>
    <view class="clean-card">
      <text class="clean-label">房间卫生<text class="required">*</text></text>
      <u-radio-group v-model="cleaned" class="clean-radio-group">
        <u-radio
          v-for="item in cleanOptions"
          :key="item.value"
          :label="item.label"
          :name="item.value"
          activeColor="#0DC6C6"
          :custom-style="'margin-right: 40rpx;'"
        ></u-radio>
      </u-radio-group>
    </view>
    <!-- 设备检查 -->
    <view class="section-card">
      <view class="section-title">设备检查</view>
      <view
        v-for="(item, idx) in roomDetail.facilitiesCheckResults"
        :key="item.name"
        class="device-row"
      >
        <text class="device-label">{{ item.facilityName }}</text>
        <u-radio-group
          v-model="item.checkResult"
          placement="row"
          @change="onDeviceChange(idx, $event)"
        >
          <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>
      <u-textarea
        v-model="value"
        :formatter="formatter"
        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
        :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-btn-wrap">
      <u-button
        type="primary"
        :custom-style="btnStyle"
        shape="circle"
        @click="onSubmit"
        >提交</u-button
      >
    </view>
  </view>
</template>

<script>
import { getRoomCheckRecDetail, releaseRoom } from "../../../common/api";
import { uploadImage } from "../../../pages/api";
export default {
  data() {
    return {
      roomId: "", // 房间ID
      userInfo: {}, // 用户信息
      roomDetail: {}, // 房间详情
      btnStyle:
        "background:linear-gradient(90deg,#0DC6C6 0%,#13C2C2 100%);font-size:36rpx;border-radius:48rpx;width:60vw;height:80rpx;",
      deviceList: [
        { name: "空调", status: "完好" },
        { name: "冰箱", status: "完好" },
        { name: "洗衣机", status: "完好" },
        { name: "电磁灶", status: "完好" },
        { name: "沙发", status: "完好" },
        { name: "茶几", status: "完好" },
        { name: "桌椅", status: "完好" },
      ],
      statusOptions: [
        { label: "完好", value: 0 },
        { label: "破损", value: 1 },
        { label: "丢失", value: 2 },
      ],
      waterMeter: 3245.1,
      electricMeter: 2672.6,
      remark: "",
      value: "", // 其他说明的文本内容
      fileList: [],
      cleanOptions: [
        { label: "已打扫", value: "1" },
        { label: "未打扫", value: "0" },
      ],
      cleaned: "1",
    };
  },
  onLoad(options) {
    // 获取路由参数
    console.log(options);
    if (options.roomId) {
      this.roomId = Number(options.roomId);
    }
    if (options.userInfo) {
      try {
        this.userInfo = JSON.parse(options.userInfo);
      } catch (e) {
        console.error("解析userInfo失败:", e);
      }
    }

    // 如果有roomId，则获取房间详情
    if (this.roomId) {
      this.getRoomDetail();
    }
  },
  methods: {
    chooseMedia() {
      uni.chooseMedia({
        count: 10 - this.fileList.length,
        mediaType: ["image", "video"],
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: "back",
        success: async (res) => {
          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;
    },
    // 获取房间详情
    async getRoomDetail() {
      try {
        uni.showLoading({
          title: "加载中...",
        });
        console.log(this.roomId);
        const res = await getRoomCheckRecDetail({
          roomId: this.roomId,
        });

        if (res && res.code === 200) {
          this.roomDetail = res.data || {};
          // 根据返回的数据更新页面显示
          this.updatePageData();
        } else {
          uni.showToast({
            title: res?.msg || "获取房间详情失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("获取房间详情失败:", error);
        uni.showToast({
          title: "获取房间详情失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 更新页面数据
    updatePageData() {
      // 根据roomDetail更新页面显示的数据
      if (this.roomDetail.roomName) {
        // 更新房间名称等基本信息
      }
      if (this.roomDetail.deviceList && this.roomDetail.deviceList.length > 0) {
        // 更新设备列表
        this.deviceList = this.roomDetail.deviceList;
      }
      if (this.roomDetail.cleaned) {
        this.cleaned = this.roomDetail.cleaned;
      }
      if (this.roomDetail.remark) {
        this.value = this.roomDetail.remark;
      }
    },

    onDeviceChange(idx, val) {
      this.roomDetail.facilitiesCheckResults[idx].checkResult = val;
    },
    deletePic(event) {
      this.fileList.splice(event.index, 1);
    },
    async onSubmit() {
      // 必填项验证
      if (!this.cleaned) {
        uni.showToast({ title: "请选择房间卫生状态", icon: "none" });
        return;
      }

      // 检查设备检查是否都已完成
      if (
        !this.roomDetail.facilitiesCheckResults ||
        this.roomDetail.facilitiesCheckResults.length === 0
      ) {
        uni.showToast({ title: "请完成设备检查", icon: "none" });
        return;
      }

      // 检查所有设备是否都是完好状态
      const unfinishedDevices = this.roomDetail.facilitiesCheckResults.filter(
        (item) => item.checkResult === undefined || item.checkResult === null
      );
      if (unfinishedDevices.length > 0) {
        uni.showToast({ title: "请完成所有设备检查", icon: "none" });
        return;
      }

      // 检查是否所有设备都是完好状态（值为0）
      const nonIntactDevices = this.roomDetail.facilitiesCheckResults.filter(
        (item) => item.checkResult !== 0
      );
      if (nonIntactDevices.length > 0) {
        uni.showToast({
          title: "所有设备必须都是完好状态才能提交",
          icon: "none",
        });
        return;
      }

      let parm = {
        roomId: this.roomId,
        facilitiesCheckResults: this.roomDetail.facilitiesCheckResults,
        cleaned: this.cleaned,
        facilitiesCheckDesc: this.value,
        facilitiesCheckImages: this.fileList,
        imageList: this.fileList,
      };

      const res = await releaseRoom(parm);
      if (res.code === 200) {
        uni.showToast({ title: "提交成功", icon: "success" });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
      }
    },
    // 文本格式化器
    formatter(value) {
      return value;
    },
  },
};
</script>

<style scoped>
.checkout-detail-bg {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.room-img {
  width: 100vw;
  height: 220rpx;
  object-fit: cover;
  display: block;
}

.info-card {
  background: #fff;
  border-radius: 20rpx;
  margin: 24rpx 24rpx 0 24rpx;
  padding: 24rpx 24rpx 12rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-title {
  font-weight: bold;
  font-size: 32rpx;
  color: #222;
}

.status-text {
  color: #ffb200;
  font-size: 28rpx;
  font-weight: bold;
}

.checkout-date-row {
  font-size: 28rpx;
  color: #222;
  margin-top: 18rpx;
}

.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: 0 24rpx;
  min-height: 64rpx;
  border-bottom: 1px solid #f2f2f2;
}

.device-label {
  width: 160rpx;
  color: #222;
  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;
}

.u-radio {
  margin-right: 36rpx;
}

.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;
}

.submit-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40rpx 0 0 0;
}

.clean-card {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #f2f4f8;
  display: flex;
  align-items: center;
  margin: 24rpx 24rpx 24rpx 24rpx;
  padding: 24rpx 24rpx 24rpx 24rpx;
}

.clean-label {
  color: #6a7fa3;
  font-size: 30rpx;
  font-weight: 500;
  margin-right: 32rpx;
  min-width: 180rpx;
}
.required {
  color: #ff4757;
  font-size: 28rpx;
  margin-left: 4rpx;
}

.clean-radio-group {
  display: flex;
  align-items: center;
}
</style>