rentease-app/pages/meter-reading-add/meter-reading-add.vue

<template>
  <view class="meter-reading-add-page">
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-back" @click="goBack">
          <uni-icons type="left" size="20" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">添加抄表</text>
        <view class="nav-actions">
          <view class="nav-btn" @click="save">
            <text class="save-text">保存</text>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content">
      <view class="form-section">
        <view class="form-card">
          <view class="form-item" @click="selectRoom">
            <text class="item-label required">选择房间</text>
            <view class="item-value">
              <text :class="{ placeholder: !selectedRoom }">{{selectedRoom ? selectedRoom.roomNumber : '请选择房间'}}</text>
              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
            </view>
          </view>
          <view class="form-item">
            <text class="item-label required">表类型</text>
            <view class="type-options">
              <view class="type-option" :class="{ active: form.type === 'water' }" @click="form.type = 'water'">
                <text>水表</text>
              </view>
              <view class="type-option" :class="{ active: form.type === 'electricity' }" @click="form.type = 'electricity'">
                <text>电表</text>
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="item-label required">本次读数</text>
            <input type="digit" v-model="form.currentReading" placeholder="请输入读数" class="item-input"/>
          </view>
          <view class="form-item" @click="selectDate">
            <text class="item-label required">抄表日期</text>
            <view class="item-value">
              <text>{{form.readingDate}}</text>
              <uni-icons type="right" size="16" color="#94A3B8"></uni-icons>
            </view>
          </view>
          <view class="form-item">
            <text class="item-label">备注</text>
            <input type="text" v-model="form.remark" placeholder="请输入备注" class="item-input"/>
          </view>
        </view>
      </view>

      <view class="safe-area-bottom" style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
  import { meterReadingApi, roomApi } from '../../api/index.js'

  export default {
    data() {
      return {
        form: {
          roomId: '',
          type: 'water',
          currentReading: '',
          readingDate: this.formatDate(new Date()),
          remark: ''
        },
        selectedRoom: null
      }
    },
    methods: {
      async selectRoom() {
        try {
          const res = await roomApi.list()
          const rooms = res.data || []
          if (rooms.length === 0) {
            uni.showToast({ title: '暂无房间数据', icon: 'none' })
            return
          }
          const roomList = rooms.map(r => r.roomNumber)
          uni.showActionSheet({
            itemList: roomList,
            success: (res) => {
              this.selectedRoom = rooms[res.tapIndex]
              this.form.roomId = this.selectedRoom.id
            }
          })
        } catch (error) {
          uni.showToast({ title: '加载房间失败', icon: 'none' })
        }
      },
      selectDate() {
        uni.showActionSheet({
          itemList: ['今天', '昨天'],
          success: (res) => {
            const today = new Date()
            if (res.tapIndex === 0) {
              this.form.readingDate = this.formatDate(today)
            } else {
              const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)
              this.form.readingDate = this.formatDate(yesterday)
            }
          }
        })
      },
      async save() {
        if (!this.form.roomId) {
          uni.showToast({ title: '请选择房间', icon: 'none' })
          return
        }
        if (!this.form.currentReading || parseFloat(this.form.currentReading) < 0) {
          uni.showToast({ title: '请输入有效读数', icon: 'none' })
          return
        }
        try {
          uni.showLoading({ title: '保存中...' })
          await meterReadingApi.create(this.form)
          uni.showToast({ title: '保存成功', icon: 'success' })
          setTimeout(() => { uni.navigateBack() }, 1500)
        } catch (error) {
          uni.showToast({ title: '保存失败', icon: 'none' })
        } finally {
          uni.hideLoading()
        }
      },
      goBack() { uni.navigateBack() },
      formatDate(date) {
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      }
    }
  }
</script>

<style scoped>
  .meter-reading-add-page { min-height: 100vh; background: #F8FAFC; display: flex; flex-direction: column; }
  .custom-nav { background: #FFFFFF; border-bottom: 2rpx solid #F1F5F9; }
  .nav-content { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 32rpx; }
  .nav-back { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
  .nav-title { font-size: 36rpx; font-weight: 700; color: #1E293B; }
  .nav-actions { width: 80rpx; display: flex; align-items: center; justify-content: flex-end; }
  .save-text { font-size: 30rpx; color: #2563EB; font-weight: 600; }
  .page-content { flex: 1; padding: 24rpx 32rpx; }
  .form-section { margin-bottom: 32rpx; }
  .form-card { background: #FFFFFF; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
  .form-item { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid #F8FAFC; }
  .form-item:last-child { border-bottom: none; }
  .item-label { font-size: 30rpx; color: #1E293B; font-weight: 500; }
  .item-label.required::after { content: '*'; color: #EF4444; margin-left: 8rpx; }
  .item-value { display: flex; align-items: center; gap: 16rpx; font-size: 30rpx; color: #1E293B; }
  .item-value .placeholder { color: #94A3B8; }
  .item-input { width: 200rpx; font-size: 30rpx; color: #1E293B; text-align: right; }
  .type-options { display: flex; gap: 16rpx; }
  .type-option { padding: 12rpx 32rpx; border-radius: 8rpx; background: #F1F5F9; font-size: 28rpx; color: #64748B; }
  .type-option.active { background: #2563EB; color: #FFFFFF; }
</style>