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

import { detail } from '@/api/mz/contract';
<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 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>{{ 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 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"
        uploadText="点击上传"
        :previewImage="true"
      >
      </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: [
        {
          label: "完好",
          value: "0",
        },
        {
          label: "破损",
          value: "1",
        },
        {
          label: "丢失",
          value: "2",
        },
      ],
      remark: "",
      fileList: [],
      img1: [],
      info: {},
      facilitiesCheckDesc: "",
    };
  },
  onLoad(options) {
    console.log("options", options);

    const detail = uni.getStorageSync("checkoutDetail");
    this.info = detail;
    this.getFacilities(options.houseId);
  },
  methods: {
    getFacilities(id) {
      getRoomFacilities({ houseId: id }).then((res) => {
        this.deviceList = res.data;
      });
    },
    onDeviceChange(idx, val) {
      this.deviceList[idx].status = val;
    },
    beforeRead(event) {
      console.log("event", event);
    },

    // 选择文件后上传
    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(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 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.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;
}
.room-title {
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 16rpx;
}
.info-row {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 8rpx;
}
.label {
  color: #888;
  margin-right: 24rpx;
}
.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;
}

.meter-value {
  color: #222;
  font-size: 28rpx;
}
.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx dashed #e5e5e5;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 16rpx 0 0;
}
.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>