636 lines
14 KiB
Plaintext
636 lines
14 KiB
Plaintext
<template>
|
|
<view class="parent-home">
|
|
<!-- 家长信息头部 -->
|
|
<view class="parent-header">
|
|
<view class="parent-info">
|
|
<image class="avatar" :src="parentInfo.avatar || '/static/default-avatar.png'" />
|
|
<view class="info">
|
|
<text class="name">{{ parentInfo.name }}</text>
|
|
<text class="role">家长</text>
|
|
</view>
|
|
</view>
|
|
<view class="notification-btn" @click="goToNotifications">
|
|
<image class="bell-icon" src="/static/icons/bell.png" />
|
|
<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 孩子选择器 -->
|
|
<view class="children-selector">
|
|
<scroll-view scroll-x="true" class="children-scroll">
|
|
<view class="child-item"
|
|
v-for="child in children"
|
|
:key="child.id"
|
|
:class="{ 'active': selectedChild.id === child.id }"
|
|
@click="selectChild(child)">
|
|
<image class="child-avatar" :src="child.avatar || '/static/default-avatar.png'" />
|
|
<text class="child-name">{{ child.name }}</text>
|
|
<view class="child-balance">余额: ￥{{ child.balance }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 今日概况 -->
|
|
<view class="today-overview">
|
|
<view class="section-title">今日概况</view>
|
|
<view class="overview-cards">
|
|
<view class="overview-card">
|
|
<text class="card-value">￥{{ todayData.consumption }}</text>
|
|
<text class="card-label">今日消费</text>
|
|
<text class="card-change" :class="{ 'increase': todayData.change > 0 }">
|
|
{{ todayData.change > 0 ? '+' : '' }}{{ todayData.change }}%
|
|
</text>
|
|
</view>
|
|
<view class="overview-card">
|
|
<text class="card-value">{{ todayData.meals }}</text>
|
|
<text class="card-label">用餐次数</text>
|
|
</view>
|
|
<view class="overview-card">
|
|
<text class="card-value">{{ todayData.accessCount }}</text>
|
|
<text class="card-label">进出次数</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快速操作 -->
|
|
<view class="quick-actions">
|
|
<view class="action-item" @click="goToRecharge">
|
|
<image class="action-icon" src="/static/icons/recharge.png" />
|
|
<text class="action-text">代充值</text>
|
|
</view>
|
|
<view class="action-item" @click="goToSpendingLimit">
|
|
<image class="action-icon" src="/static/icons/limit.png" />
|
|
<text class="action-text">消费限额</text>
|
|
</view>
|
|
<view class="action-item" @click="goToNutritionReport">
|
|
<image class="action-icon" src="/static/icons/nutrition.png" />
|
|
<text class="action-text">营养报告</text>
|
|
</view>
|
|
<view class="action-item" @click="goToAccessAlerts">
|
|
<image class="action-icon" src="/static/icons/location.png" />
|
|
<text class="action-text">位置提醒</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最近消费 -->
|
|
<view class="recent-consumption">
|
|
<view class="section-header">
|
|
<text class="section-title">最近消费</text>
|
|
<text class="view-more" @click="goToConsumptionMonitor">查看更多</text>
|
|
</view>
|
|
<view class="consumption-list">
|
|
<view class="consumption-item" v-for="item in recentConsumption" :key="item.id">
|
|
<view class="consumption-info">
|
|
<text class="merchant">{{ item.merchant }}</text>
|
|
<text class="time">{{ formatTime(item.time) }}</text>
|
|
</view>
|
|
<view class="consumption-amount">
|
|
<text class="amount">-￥{{ item.amount.toFixed(2) }}</text>
|
|
<text class="balance">余额: ￥{{ item.balanceAfter }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 营养健康 -->
|
|
<view class="nutrition-health">
|
|
<view class="section-title">营养健康</view>
|
|
<view class="nutrition-summary">
|
|
<view class="nutrition-chart">
|
|
<canvas canvas-id="nutritionChart" class="chart"></canvas>
|
|
</view>
|
|
<view class="nutrition-details">
|
|
<view class="nutrition-item">
|
|
<text class="nutrition-label">今日卡路里</text>
|
|
<text class="nutrition-value">{{ nutritionData.calories }}kcal</text>
|
|
</view>
|
|
<view class="nutrition-item">
|
|
<text class="nutrition-label">营养均衡</text>
|
|
<text class="nutrition-value">{{ nutritionData.balance }}%</text>
|
|
</view>
|
|
<view class="nutrition-item">
|
|
<text class="nutrition-label">健康评分</text>
|
|
<text class="nutrition-value">{{ nutritionData.score }}分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 安全提醒 -->
|
|
<view class="safety-alerts" v-if="safetyAlerts.length > 0">
|
|
<view class="section-title">安全提醒</view>
|
|
<view class="alert-item" v-for="alert in safetyAlerts" :key="alert.id">
|
|
<image class="alert-icon" :src="alert.icon" />
|
|
<view class="alert-content">
|
|
<text class="alert-title">{{ alert.title }}</text>
|
|
<text class="alert-time">{{ formatTime(alert.time) }}</text>
|
|
</view>
|
|
<view class="alert-status" :class="alert.type">{{ alert.status }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
parentInfo: {
|
|
name: '王女士',
|
|
avatar: ''
|
|
},
|
|
unreadCount: 3,
|
|
children: [
|
|
{
|
|
id: 1,
|
|
name: '王小明',
|
|
avatar: '',
|
|
balance: 156.80,
|
|
class: '三年级2班'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '王小红',
|
|
avatar: '',
|
|
balance: 98.50,
|
|
class: '一年级1班'
|
|
}
|
|
],
|
|
selectedChild: {},
|
|
todayData: {
|
|
consumption: '25.50',
|
|
change: -12.5,
|
|
meals: 3,
|
|
accessCount: 8
|
|
},
|
|
recentConsumption: [
|
|
{
|
|
id: 1,
|
|
merchant: '第一饭堂',
|
|
amount: 12.50,
|
|
balanceAfter: 144.30,
|
|
time: new Date(Date.now() - 1800000)
|
|
},
|
|
{
|
|
id: 2,
|
|
merchant: '校园便利店',
|
|
amount: 8.80,
|
|
balanceAfter: 156.80,
|
|
time: new Date(Date.now() - 3600000)
|
|
}
|
|
],
|
|
nutritionData: {
|
|
calories: 1650,
|
|
balance: 88,
|
|
score: 85
|
|
},
|
|
safetyAlerts: [
|
|
{
|
|
id: 1,
|
|
title: '孩子已安全到校',
|
|
time: new Date(Date.now() - 7200000),
|
|
status: '正常',
|
|
type: 'normal',
|
|
icon: '/static/icons/check.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.selectedChild = this.children[0] || {}
|
|
this.loadData()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refreshData()
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
this.loadTodayData()
|
|
this.loadRecentConsumption()
|
|
this.loadNutritionData()
|
|
this.loadSafetyAlerts()
|
|
},
|
|
refreshData() {
|
|
Promise.all([
|
|
this.loadData()
|
|
]).then(() => {
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
selectChild(child) {
|
|
this.selectedChild = child
|
|
this.loadData() // 重新加载选中孩子的数据
|
|
},
|
|
loadTodayData() {
|
|
// 加载今日数据
|
|
uni.request({
|
|
url: '/api/v1/parent/today-stats',
|
|
data: { childId: this.selectedChild.id },
|
|
success: (res) => {
|
|
this.todayData = res.data
|
|
}
|
|
})
|
|
},
|
|
loadRecentConsumption() {
|
|
// 加载最近消费
|
|
uni.request({
|
|
url: '/api/v1/parent/recent-consumption',
|
|
data: { childId: this.selectedChild.id },
|
|
success: (res) => {
|
|
this.recentConsumption = res.data
|
|
}
|
|
})
|
|
},
|
|
loadNutritionData() {
|
|
// 加载营养数据
|
|
uni.request({
|
|
url: '/api/v1/parent/nutrition',
|
|
data: { childId: this.selectedChild.id },
|
|
success: (res) => {
|
|
this.nutritionData = res.data
|
|
}
|
|
})
|
|
},
|
|
loadSafetyAlerts() {
|
|
// 加载安全提醒
|
|
uni.request({
|
|
url: '/api/v1/parent/safety-alerts',
|
|
data: { childId: this.selectedChild.id },
|
|
success: (res) => {
|
|
this.safetyAlerts = res.data
|
|
}
|
|
})
|
|
},
|
|
goToNotifications() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/parent/notifications' })
|
|
},
|
|
goToRecharge() {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/nfc/parent/recharge-for-child?childId=${this.selectedChild.id}`
|
|
})
|
|
},
|
|
goToSpendingLimit() {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/nfc/parent/spending-limit?childId=${this.selectedChild.id}`
|
|
})
|
|
},
|
|
goToNutritionReport() {
|
|
uni.navigateTo({
|
|
url: `/pages/mall/nfc/parent/nutrition-report?childId=${this.selectedChild.id}`
|
|
})
|
|
},
|
|
goToAccessAlerts() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/parent/access-alerts' })
|
|
},
|
|
goToConsumptionMonitor() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/parent/consumption-monitor' })
|
|
},
|
|
formatTime(time) {
|
|
const now = new Date()
|
|
const diff = now - time
|
|
const minutes = Math.floor(diff / 60000)
|
|
|
|
if (minutes < 1) return '刚刚'
|
|
if (minutes < 60) return `${minutes}分钟前`
|
|
|
|
const hours = Math.floor(minutes / 60)
|
|
if (hours < 24) return `${hours}小时前`
|
|
|
|
return time.toLocaleDateString()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.parent-home {
|
|
padding: 20rpx;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.parent-header {
|
|
background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.parent-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.name {
|
|
color: white;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.role {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.notification-btn {
|
|
position: relative;
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.bell-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
right: 8rpx;
|
|
background: #ff3b30;
|
|
color: white;
|
|
font-size: 20rpx;
|
|
padding: 4rpx 8rpx;
|
|
border-radius: 12rpx;
|
|
min-width: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.children-selector {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.children-scroll {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.child-item {
|
|
display: inline-block;
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 20rpx;
|
|
margin-right: 16rpx;
|
|
text-align: center;
|
|
min-width: 140rpx;
|
|
border: 2rpx solid transparent;
|
|
}
|
|
|
|
.child-item.active {
|
|
border-color: #FF6B35;
|
|
}
|
|
|
|
.child-avatar {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.child-name {
|
|
display: block;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.child-balance {
|
|
font-size: 20rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.today-overview, .quick-actions, .recent-consumption,
|
|
.nutrition-health, .safety-alerts {
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.view-more {
|
|
font-size: 24rpx;
|
|
color: #FF6B35;
|
|
}
|
|
|
|
.overview-cards {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.overview-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #FF6B35;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.card-change {
|
|
font-size: 20rpx;
|
|
color: #28a745;
|
|
}
|
|
|
|
.card-change.increase {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.consumption-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.consumption-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.consumption-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.merchant {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.consumption-amount {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 28rpx;
|
|
color: #ff3b30;
|
|
font-weight: bold;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.balance {
|
|
font-size: 20rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.nutrition-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nutrition-chart {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.nutrition-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.nutrition-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.nutrition-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.nutrition-value {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alert-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.alert-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.alert-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.alert-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.alert-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.alert-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.alert-status {
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.alert-status.normal {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.alert-status.warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.alert-status.danger {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
</style>
|