374 lines
8.5 KiB
Plaintext
374 lines
8.5 KiB
Plaintext
<template>
|
|
<view class="student-home">
|
|
<!-- 顶部用户信息卡片 -->
|
|
<view class="user-card">
|
|
<view class="user-info">
|
|
<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" />
|
|
<view class="info">
|
|
<text class="name">{{ userInfo.name }}</text>
|
|
<text class="student-id">学号: {{ userInfo.studentId }}</text>
|
|
<text class="class">{{ userInfo.class }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="balance-info" @click="goToBalance">
|
|
<text class="balance-label">余额</text>
|
|
<text class="balance-amount">￥{{ userInfo.balance }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快速操作区 -->
|
|
<view class="quick-actions">
|
|
<view class="action-item" @click="goToNFCPay">
|
|
<image class="action-icon" src="/static/icons/nfc-pay.png" />
|
|
<text class="action-text">NFC支付</text>
|
|
</view>
|
|
<view class="action-item" @click="goToQRCode">
|
|
<image class="action-icon" src="/static/icons/qr-code.png" />
|
|
<text class="action-text">付款码</text>
|
|
</view>
|
|
<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="goToTransactions">
|
|
<image class="action-icon" src="/static/icons/history.png" />
|
|
<text class="action-text">消费记录</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 校园服务 -->
|
|
<view class="campus-services">
|
|
<view class="section-title">校园服务</view>
|
|
<view class="service-grid">
|
|
<view class="service-item" @click="goToCanteen">
|
|
<image class="service-icon" src="/static/icons/restaurant.png" />
|
|
<text class="service-name">饭堂消费</text>
|
|
</view>
|
|
<view class="service-item" @click="goToShop">
|
|
<image class="service-icon" src="/static/icons/shop.png" />
|
|
<text class="service-name">小卖部</text>
|
|
</view>
|
|
<view class="service-item" @click="goToLibrary">
|
|
<image class="service-icon" src="/static/icons/library.png" />
|
|
<text class="service-name">图书借阅</text>
|
|
</view>
|
|
<view class="service-item" @click="goToAccessLog">
|
|
<image class="service-icon" src="/static/icons/access.png" />
|
|
<text class="service-name">进出记录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 今日数据 -->
|
|
<view class="today-data">
|
|
<view class="section-title">今日数据</view>
|
|
<view class="data-cards">
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.consumption }}</text>
|
|
<text class="data-label">今日消费</text>
|
|
</view>
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.transactions }}</text>
|
|
<text class="data-label">交易次数</text>
|
|
</view>
|
|
<view class="data-card">
|
|
<text class="data-value">{{ todayData.access }}</text>
|
|
<text class="data-label">进出次数</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 营养分析 -->
|
|
<view class="nutrition-section" @click="goToNutrition">
|
|
<view class="section-title">营养分析</view>
|
|
<view class="nutrition-summary">
|
|
<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>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
name: '张三',
|
|
studentId: '2024001',
|
|
class: '计算机科学与技术1班',
|
|
avatar: '',
|
|
balance: 156.80
|
|
},
|
|
todayData: {
|
|
consumption: '25.50',
|
|
transactions: 3,
|
|
access: 8
|
|
},
|
|
nutritionData: {
|
|
calories: 1850,
|
|
balance: 85
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadUserInfo()
|
|
this.loadTodayData()
|
|
this.loadNutritionData()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refreshData()
|
|
},
|
|
methods: {
|
|
loadUserInfo() {
|
|
// 加载用户信息
|
|
uni.request({
|
|
url: '/api/v1/student/profile',
|
|
success: (res) => {
|
|
this.userInfo = res.data
|
|
}
|
|
})
|
|
},
|
|
loadTodayData() {
|
|
// 加载今日数据
|
|
uni.request({
|
|
url: '/api/v1/student/today-stats',
|
|
success: (res) => {
|
|
this.todayData = res.data
|
|
}
|
|
})
|
|
},
|
|
loadNutritionData() {
|
|
// 加载营养数据
|
|
uni.request({
|
|
url: '/api/v1/student/nutrition',
|
|
success: (res) => {
|
|
this.nutritionData = res.data
|
|
}
|
|
})
|
|
},
|
|
refreshData() {
|
|
Promise.all([
|
|
this.loadUserInfo(),
|
|
this.loadTodayData(),
|
|
this.loadNutritionData()
|
|
]).then(() => {
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
goToBalance() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/balance' })
|
|
},
|
|
goToNFCPay() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/nfc-pay' })
|
|
},
|
|
goToQRCode() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/qr-code' })
|
|
},
|
|
goToRecharge() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/recharge' })
|
|
},
|
|
goToTransactions() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/transactions' })
|
|
},
|
|
goToCanteen() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/canteen' })
|
|
},
|
|
goToShop() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/shop' })
|
|
},
|
|
goToLibrary() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/library' })
|
|
},
|
|
goToAccessLog() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/access-log' })
|
|
},
|
|
goToNutrition() {
|
|
uni.navigateTo({ url: '/pages/mall/nfc/student/nutrition' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.student-home {
|
|
padding: 20rpx;
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.user-card {
|
|
background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-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;
|
|
}
|
|
|
|
.student-id, .class {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.balance-info {
|
|
text-align: right;
|
|
}
|
|
|
|
.balance-label {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.balance-amount {
|
|
color: white;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.quick-actions {
|
|
display: flex;
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
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;
|
|
}
|
|
|
|
.campus-services, .today-data, .nutrition-section {
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.service-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.service-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.service-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.service-name {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.data-cards {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.data-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.data-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #007AFF;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.data-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.nutrition-summary {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.nutrition-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.nutrition-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.nutrition-value {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #28a745;
|
|
}
|
|
</style>
|