Initial commit of akmon project
This commit is contained in:
373
pages/mall/nfc/student/index.uvue
Normal file
373
pages/mall/nfc/student/index.uvue
Normal file
@@ -0,0 +1,373 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user