cfc/cfc-frontend/pages/health/water-index.vue

<template>
  <scroll-view class="content" scroll-y>
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">每日饮水建议</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">3-6 岁</text>
              <text class="info-desc">每天 600-800ml，少量多次，以白开水为主，避免含糖饮料。</text>
            </view>
            <view class="info-item">
              <text class="info-age">7-12 岁</text>
              <text class="info-desc">每天 800-1200ml，运动后适当增加，养成定时饮水习惯。</text>
            </view>
            <view class="info-item">
              <text class="info-age">13-18 岁</text>
              <text class="info-desc">每天 1200-1500ml，根据活动量和季节调整，保持尿液呈淡黄色。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">科学饮水提示</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">晨起一杯水</text>
              <text class="info-desc">起床后喝一杯温水（约200ml），补充夜间水分流失，促进肠胃蠕动。</text>
            </view>
            <view class="info-item">
              <text class="info-age">餐前半小时</text>
              <text class="info-desc">餐前喝少量水增加饱腹感，餐后1小时再喝水，避免稀释胃液影响消化。</text>
            </view>
            <view class="info-item">
              <text class="info-age">运动前后</text>
              <text class="info-desc">运动前喝200ml，运动中每15-20分钟补充100-150ml，运动后逐步补充。</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 记录饮水表单 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">记录饮水</text>
          <view class="form-group">
            <text class="form-label">饮水量（毫升）*</text>
            <view class="amount-row">
              <view class="amount-btn" v-for="a in quickAmounts" :key="a.ml"
                :class="form.amountMl === a.ml ? 'amount-active' : ''"
                @tap="form.amountMl = a.ml">
                <text class="amount-num">{{ a.ml }}</text>
                <text class="amount-unit">ml</text>
              </view>
            </view>
            <input class="form-input" type="number" v-model="form.amountMl" placeholder="或手动输入毫升数" />
          </view>
          <view class="form-group">
            <text class="form-label">饮水类型</text>
            <view class="tag-row">
              <view class="tag-btn" v-for="t in waterTypes" :key="t.value"
                :class="form.waterType === t.value ? 'tag-active' : ''"
                @tap="form.waterType = t.value">
                <text>{{ t.label }}</text>
              </view>
            </view>
          </view>
          <view class="submit-btn" @tap="doCheckin">
            <text>{{ submitting ? '提交中...' : '提交打卡' }}</text>
          </view>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">饮水记录</text>
          <view class="history-list" v-if="history.length > 0">
            <view class="history-item" v-for="item in history" :key="item.id">
              <view class="history-left">
                <text class="history-type">{{ item.amountMl || 0 }}ml</text>
                <text class="history-duration">{{ item.waterType || '白水' }}</text>
              </view>
              <view class="history-right">
                <text class="history-date">{{ formatDate(item.createdAt) }}</text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-else>
            <text>还没有饮水记录</text>
          </view>
        </view>
      </view>
    </scroll-view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      memberId: null,
      taskId: null,
      submitting: false,
      history: [],
      quickAmounts: [
        { ml: 100 }, { ml: 200 }, { ml: 300 }, { ml: 500 }
      ],
      waterTypes: [
        { label: '白开水', value: 'plain' },
        { label: '矿泉水', value: 'sparkling' },
        { label: '茶水', value: 'tea' },
        { label: '其他', value: 'other' }
      ],
      form: {
        amountMl: 200,
        waterType: 'plain'
      }
    }
  },
  onLoad: function(options) {
    var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    // child 角色：memberId 由后端从 JWT 获取 currentMemberId，前端无需传
    if (role !== 'child') {
      this.memberId = uni.getStorageSync('currentChildId') || null
    }
    this.taskId = options && options.taskId ? parseInt(options.taskId) : null
    this.loadHistory()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      var m = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return m + '-' + day
    },
    loadHistory: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token || !self.memberId) return
      uni.request({
        url: config.API_BASE_URL + '/api/health/water/list',
        method: 'POST',
        data: { memberId: self.memberId },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.history = res.data.data.slice(0, 10)
          }
        }
      })
    },
    doCheckin: function() {
      var self = this
      var amount = parseInt(self.form.amountMl)
      if (!amount || amount <= 0) {
        uni.showToast({ title: '请输入有效饮水量', icon: 'none' })
        return
      }
      if (!self.memberId) {
        uni.showToast({ title: '成员ID无效', icon: 'none' })
        return
      }
      self.submitting = true
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/health/water/create',
        method: 'POST',
        data: {
          memberId: self.memberId,
          taskId: self.taskId || undefined,
          amountMl: amount,
          waterType: self.form.waterType || 'plain'
        },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          self.submitting = false
          if (res.data && res.data.code === 200) {
            var msg = self.taskId ? '打卡成功，任务已完成' : '打卡成功'
            uni.showToast({ title: msg, icon: 'success' })
            self.form.amountMl = 200
            self.form.waterType = 'plain'
            self.loadHistory()
            // 有任务关联：打卡即完成任务
            if (self.taskId && self.memberId) {
              uni.request({
                url: config.API_BASE_URL + '/api/tasks/' + self.taskId + '/complete',
                url: config.API_BASE_URL + '/api/tasks/' + self.taskId + '/complete',
                method: 'POST',
                data: { memberId: self.memberId, photoUrl: '', content: '饮水打卡完成', contentType: 'text' },
                header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
                success: function(cr) {
                  if (cr.data && cr.data.code === 200) {
                    uni.showToast({ title: '任务已完成', icon: 'success' })
                  }
                },
                fail: function() {}
              })
            }
          } else {
            var msg = (res.data && res.data.message) || '打卡失败'
            uni.showToast({ title: msg, icon: 'none' })
          }
        },
        fail: function() {
          self.submitting = false
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.content { flex: 1; padding: 30rpx; }
.card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.card-accent { width: 8rpx; background-color: #FF8C42; flex-shrink: 0; }
.card-body { flex: 1; padding: 30rpx; }
.card-title { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 24rpx; display: block; }
.info-list { display: flex; flex-direction: column; gap: 20rpx; }
.info-item { display: flex; flex-direction: column; gap: 6rpx; }
.info-age { font-size: 26rpx; font-weight: 500; color: #FF8C42; display: block; }
.info-desc { font-size: 24rpx; color: #666; line-height: 1.6; display: block; }
.form-group { margin-bottom: 24rpx; }
.form-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 12rpx; display: block; }
.form-input { border: 1rpx solid #ddd; border-radius: 12rpx; padding: 16rpx 20rpx; font-size: 26rpx; background-color: #FAFAFA; width: auto; }
.amount-row { display: flex; gap: 16rpx; margin-bottom: 16rpx; }
.amount-btn {
  flex: 1; text-align: center; padding: 16rpx 0; border: 1rpx solid #ddd; border-radius: 12rpx;
  background-color: #FAFAFA;
}
.amount-active { border-color: #FF8C42; color: #FF8C42; background-color: #FFF5EB; }
.amount-num { font-size: 28rpx; font-weight: 600; display: block; }
.amount-unit { font-size: 20rpx; color: #999; display: block; }
.tag-row { display: flex; flex-wrap: wrap; gap: 16rpx; }
.tag-btn {
  padding: 12rpx 24rpx; border: 1rpx solid #ddd; border-radius: 30rpx;
  font-size: 24rpx; color: #666; background-color: #FAFAFA;
}
.tag-active { border-color: #FF8C42; color: #FF8C42; background-color: #FFF5EB; }
.submit-btn {
  background-color: #FF8C42; color: #FFFFFF; text-align: center; padding: 22rpx 0;
  border-radius: 16rpx; font-size: 28rpx; font-weight: 500; margin-top: 10rpx;
}
.history-list { display: flex; flex-direction: column; gap: 16rpx; }
.history-item {
  display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.history-left { display: flex; flex-direction: column; gap: 4rpx; }
.history-type { font-size: 26rpx; font-weight: 500; color: #333; }
.history-duration { font-size: 22rpx; color: #999; }
.history-right { text-align: right; }
.history-date { font-size: 22rpx; color: #999; }
.empty-state { text-align: center; padding: 40rpx 0; font-size: 26rpx; color: #999; }
</style>