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

<template>
  <view class="checkout-detail-bg">
    <!-- 房间图片 -->
    <image class="room-img" src="/static/img/login-top.png" mode="aspectFill"></image>
    <!-- 基本信息卡片 -->
    <view class="info-card">
      <view class="room-title">5号楼1单元101 房间1</view>
      <view class="info-row"><text class="label">居住人</text>王静</view>
      <view class="info-row"><text class="label">性别</text>女</view>
      <view class="info-row"><text class="label">联系电话</text>187****0001</view>
      <view class="info-row"><text class="label">居住日期</text>2025-04-04 至 2025-05-06</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 v-model="item.status" placement="row" @change="onDeviceChange(idx, $event)">
          <u-radio  activeColor="#0DC6C6" v-for="opt in statusOptions" :key="opt" :label="opt" :name="opt"></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="waterMeter" type="digit" placeholder="请输入水表数" border="none"  />
      </view>
      <view class="meter-row">
        <text class="meter-label">电表数</text>
        <u-input v-model="electricMeter" type="digit" placeholder="请输入电表数" border="none" />
      </view>
    </view>
    <!-- 其他说明 -->
    <view class="section-card">
      <view class="section-title">其他说明</view>
      <u-input
        v-model="remark"
        type="textarea"
        placeholder="请输入内容（不超过500字）"
        maxlength="500"
        height="100"
        border="none"
        custom-style="background:#f7f7f7;border-radius:12rpx;padding:16rpx;"
      />
    </view>
  <!-- 图片/视频上传区域 -->
  <view class="section-card">
    <view class="section-title">图片/视频</view>
    <u-upload
      v-model="fileList"
      :max-count="10"
      :multiple="true"
      :preview-full-image="true"
      :deletable="true"
      :show-upload-list="true"
      :file-list="fileList"
      accept="image,video"
      @after-read="afterRead"
      @delete="onDelete"
    >
      <view class="custom-upload-btn">
        <u-icon name="plus" size="40"></u-icon>
        <view class="upload-tips">最多10个</view>
      </view>
    </u-upload>
  </view>
  <!-- 提交按钮 -->
  <view class="submit-btn-wrap">
    <u-button type="primary" shape="circle" @click="onSubmit">提交</u-button>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceList: [
        { name: '空调', status: '完好' },
        { name: '冰箱', status: '完好' },
        { name: '洗衣机', status: '完好' },
        { name: '电磁灶', status: '完好' },
        { name: '沙发', status: '完好' },
        { name: '茶几', status: '完好' },
        { name: '桌椅', status: '完好' }
      ],
      statusOptions: ['完好', '破损', '丢失'],
      waterMeter: 3245.1,
      electricMeter: 2672.6,
      remark: '',
      fileList: []
    }
  },
  methods: {
    onDeviceChange(idx, val) {
      this.deviceList[idx].status = val
    },
    afterRead(event) {
      let files = Array.isArray(event) ? event : [event]
      this.fileList = this.fileList.concat(files)
    },
    onDelete(event) {
      this.fileList.splice(event.index, 1)
    },
    onSubmit() {
      uni.showToast({ title: '提交成功', icon: 'success' })
    }
  }
}
</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: -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;
}
.u-radio {
  margin-right: 36rpx;
}
.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;
}
.submit-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40rpx 0 0 0;
}
.u-button--primary {
  background: linear-gradient(90deg, #0DC6C6  0%, #13C2C2 100%) !important;
  font-size: 36rpx;
  border-radius: 48rpx !important;
  width: 80vw;
  height: 88rpx;
}
</style>