odf_new/odf-uniapp/pages/checkin/index.vue

<template>
  <view class="checkin-page">
    <image class="bg-image" src="/static/images/home_bg.png" mode="aspectFill" />

    <view class="content">
      <!-- 顶部导航栏 -->
      <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="nav-bar-inner">
          <image
            class="nav-icon"
            src="/static/images/ic_back.png"
            mode="aspectFit"
            @click="goBack"
          />
          <text class="nav-title">签到</text>
          <view class="nav-icon-placeholder" />
        </view>
      </view>

      <!-- 表单区域 -->
      <view class="form-area">
        <view class="form-group">
          <text class="form-label">人员</text>
          <input
            class="form-input"
            v-model="form.personnel"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>

        <view class="form-group">
          <text class="form-label">时间</text>
          <picker mode="date" :value="form.checkinTime" @change="onDateChange">
            <view class="form-picker">
              <text :class="['picker-text', form.checkinTime ? 'picker-text-active' : '']">
                {{ form.checkinTime || '请选择年月日' }}
              </text>
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>

        <view class="form-group">
          <text class="form-label">工作内容</text>
          <textarea
            class="form-textarea"
            v-model="form.workContent"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>
      </view>
    </view>

    <!-- 底部固定提交按钮 -->
    <view class="bottom-bar">
      <view class="submit-btn" @click="handleSubmit">
        <text class="submit-btn-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { submitCheckin } from '@/services/checkin'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
const roomId = ref('')
const submitting = ref(false)

const form = reactive({
  personnel: '',
  checkinTime: '',
  workContent: ''
})

function goBack() {
  uni.navigateBack()
}

function onDateChange(e) {
  form.checkinTime = e.detail.value
}

async function handleSubmit() {
  if (!form.personnel.trim()) {
    uni.showToast({ title: '请输入人员', icon: 'none' })
    return
  }
  if (!form.checkinTime) {
    uni.showToast({ title: '请选择时间', icon: 'none' })
    return
  }
  if (!form.workContent.trim()) {
    uni.showToast({ title: '请输入工作内容', icon: 'none' })
    return
  }

  if (submitting.value) return
  submitting.value = true

  try {
    const res = await submitCheckin({
      roomId: roomId.value,
      personnel: form.personnel.trim(),
      checkinTime: form.checkinTime,
      workContent: form.workContent.trim()
    })
    if (res.code === 200) {
      uni.showToast({ title: '提交成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
    }
  } catch (err) {
    uni.showToast({ title: '网络异常，请重试', icon: 'none' })
  } finally {
    submitting.value = false
  }
}

onLoad((options) => {
  if (options.roomId) {
    roomId.value = options.roomId
  }
})
</script>

<style scoped>
.checkin-page {
  position: relative;
  min-height: 100vh;
  background-color: #F5F5F5;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500rpx;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
}

.nav-bar {
  width: 100%;
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
}

.nav-icon-placeholder {
  width: 44rpx;
  height: 44rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.form-area {
  padding: 24rpx;
}

.form-group {
  margin-bottom: 32rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  font-weight: 500;
  display: block;
}

.form-input {
  height: 80rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
  font-size: 28rpx;
  color: #333;
}

.form-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
}

.picker-text {
  font-size: 28rpx;
  color: #999;
}

.picker-text-active {
  color: #333;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

.form-textarea {
  min-height: 200rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #E8E8E8;
  font-size: 28rpx;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

.input-placeholder {
  color: #999;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24rpx;
  background: #fff;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #1A73EC;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn-text {
  color: #fff;
  font-size: 32rpx;
}
</style>