akoo/akmon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit of akmon project

Browse Source
This commit is contained in:
akoo
2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

635
pages/mall/nfc/parent/index.uvue Normal file
View File

@@ -0,0 +1,635 @@
<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>