|
|
@@ -0,0 +1,284 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="nav-bar">
|
|
|
+ <view class="nav-back" @tap="goBack">
|
|
|
+ <text class="back-text">‹ 返回</text>
|
|
|
+ </view>
|
|
|
+ <text class="nav-title">饮水</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import config from '@/config.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ memberId: 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() {
|
|
|
+ this.memberId = uni.getStorageSync('currentChildId') || 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,
|
|
|
+ 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) {
|
|
|
+ uni.showToast({ title: '打卡成功', icon: 'success' })
|
|
|
+ self.form.amountMl = 200
|
|
|
+ self.form.waterType = 'plain'
|
|
|
+ self.loadHistory()
|
|
|
+ } 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;
|
|
|
+}
|
|
|
+.nav-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 88rpx;
|
|
|
+ padding-top: var(--status-bar-height, 0);
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+}
|
|
|
+.nav-back {
|
|
|
+ position: absolute;
|
|
|
+ left: 30rpx;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ padding: 10rpx;
|
|
|
+}
|
|
|
+.back-text { font-size: 28rpx; color: #333; }
|
|
|
+.nav-title { font-size: 32rpx; font-weight: 600; color: #333; }
|
|
|
+.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>
|
E2E Test Bot