zhjwxt/uniapp/pages/demo/mock-demo.vue

<template>
	<view class="mock-demo">
		<view class="header">
			<text class="title">Mock数据演示</text>
			<view class="env-info">
				<text class="env-label">当前环境: {{ envInfo.env }}</text>
				<text class="mock-status" :class="{ active: envInfo.mockEnabled }">
					Mock状态: {{ envInfo.mockEnabled ? '已开启' : '已关闭' }}
				</text>
			</view>
		</view>
		
		<view class="content">
			<!-- 用户信息展示 -->
			<view class="section">
				<view class="section-title">用户信息</view>
				<view class="user-card" v-if="userInfo">
					<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="user-details">
						<text class="username">{{ userInfo.username }}</text>
						<text class="phone">{{ userInfo.phone }}</text>
						<text class="email">{{ userInfo.email }}</text>
					</view>
				</view>
				<view class="loading" v-else>
					<text>加载中...</text>
				</view>
			</view>
			
			<!-- 课程表展示 -->
			<view class="section">
				<view class="section-title">今日课程</view>
				<view class="schedule-list">
					<view class="schedule-item" v-for="item in scheduleList" :key="item.id">
						<view class="time">{{ item.start_time }} - {{ item.end_time }}</view>
						<view class="course-info">
							<text class="course-name">{{ item.course_name }}</text>
							<text class="teacher">{{ item.teacher_name }}</text>
							<text class="classroom">{{ item.classroom }}</text>
						</view>
						<view class="status" :class="item.status">
							{{ getStatusText(item.status) }}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 操作按钮 -->
			<view class="actions">
				<button class="btn primary" @click="refreshData">刷新数据</button>
				<button class="btn secondary" @click="toggleMock">
					{{ envInfo.mockEnabled ? '关闭Mock' : '开启Mock' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { Api_url, isMockEnabled, isDebug, env } from '@/common/config.js'
import http from '@/common/axios.js'

export default {
	data() {
		return {
			userInfo: null,
			scheduleList: [],
			envInfo: {
				env: env,
				mockEnabled: isMockEnabled,
				debug: isDebug
			}
		}
	},
	
	onLoad() {
		this.loadData()
	},
	
	methods: {
		async loadData() {
			try {
				// 加载用户信息
				await this.loadUserInfo()
				// 加载课程表
				await this.loadSchedule()
			} catch (error) {
				console.error('数据加载失败:', error)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			}
		},
		
		async loadUserInfo() {
			try {
				const response = await http.get('/user/info')
				this.userInfo = response.data
			} catch (error) {
				console.error('用户信息加载失败:', error)
			}
		},
		
		async loadSchedule() {
			try {
				const response = await http.get('/student/schedule')
				this.scheduleList = response.data || []
			} catch (error) {
				console.error('课程表加载失败:', error)
			}
		},
		
		async refreshData() {
			uni.showLoading({
				title: '刷新中...'
			})
			
			try {
				await this.loadData()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			} catch (error) {
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},
		
		toggleMock() {
			// 这里只是演示，实际需要重新配置环境变量
			uni.showModal({
				title: '提示',
				content: 'Mock开关需要在环境变量中配置，请修改.env文件中的VUE_APP_MOCK_ENABLED参数',
				showCancel: false
			})
		},
		
		getStatusText(status) {
			const statusMap = {
				scheduled: '已安排',
				completed: '已完成',
				cancelled: '已取消'
			}
			return statusMap[status] || status
		}
	}
}
</script>

<style scoped>
.mock-demo {
	padding: 20rpx;
	background-color: #f8f9fa;
	min-height: 100vh;
}

.header {
	background: white;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.env-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.env-label {
	font-size: 28rpx;
	color: #666;
}

.mock-status {
	font-size: 28rpx;
	color: #999;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	background: #f5f5f5;
}

.mock-status.active {
	color: #52c41a;
	background: #f6ffed;
}

.content {
	flex: 1;
}

.section {
	background: white;
	padding: 30rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.user-card {
	display: flex;
	align-items: center;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-right: 30rpx;
}

.user-details {
	flex: 1;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.phone, .email {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 5rpx;
}

.schedule-list {
	display: flex;
	flex-direction: column;
}

.schedule-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.schedule-item:last-child {
	border-bottom: none;
}

.time {
	width: 200rpx;
	font-size: 28rpx;
	color: #666;
}

.course-info {
	flex: 1;
	margin-left: 20rpx;
}

.course-name {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.teacher, .classroom {
	font-size: 26rpx;
	color: #666;
	display: block;
	margin-bottom: 5rpx;
}

.status {
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	text-align: center;
	min-width: 120rpx;
}

.status.scheduled {
	background: #e6f7ff;
	color: #1890ff;
}

.status.completed {
	background: #f6ffed;
	color: #52c41a;
}

.status.cancelled {
	background: #fff2e8;
	color: #fa8c16;
}

.loading {
	text-align: center;
	padding: 60rpx;
	color: #666;
}

.actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
}

.btn {
	flex: 1;
	padding: 24rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	border: none;
	cursor: pointer;
}

.btn.primary {
	background: #1890ff;
	color: white;
}

.btn.secondary {
	background: #f5f5f5;
	color: #666;
}

.btn:active {
	opacity: 0.8;
}
</style>