新增搜索课程和加载组件页面，签到页面添加遮罩防重复扫码，添加 request 便捷方法（get/post/put/delete）
This commit is contained in:
future
+79
-25
@@ -1,28 +1,82 @@
|
||||
<!-- App.vue -->
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
this.preloadTabData()
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
},
|
||||
methods: {
|
||||
// 预加载所有 Tab 页面的核心数据
|
||||
preloadTabData() {
|
||||
// 延迟执行，不阻塞首屏
|
||||
setTimeout(() => {
|
||||
// 预加载课程数据
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序端预请求数据
|
||||
uni.request({
|
||||
url: '/api/course/recommend',
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
uni.setStorageSync('course_cache', {
|
||||
data: res.data,
|
||||
time: Date.now()
|
||||
})
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 预加载训练数据
|
||||
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'common/style/base.css';
|
||||
/*每个页面公共css */
|
||||
.app-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--bg-light);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import 'common/style/base.css';
|
||||
|
||||
/* 全局骨架屏样式 */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* 页面切换动画 */
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30rpx);
|
||||
}
|
||||
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30rpx);
|
||||
}
|
||||
|
||||
.app-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
background-color: var(--bg-light);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
import request from "@/utils/request.js"
|
||||
|
||||
export function login(params) {
|
||||
return request.post('/member/auth/miniapp/login', params)
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
return request.post('/member/auth/logout')
|
||||
}
|
||||
|
||||
export function getQRCode(options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
|
||||
return request.get('/checkIn/qrcode', {}, options)
|
||||
}
|
||||
|
||||
export function checkIn(params) {
|
||||
return request.post('/checkIn/scan', params)
|
||||
}
|
||||
|
||||
export function getUserInfo(options = { cache: true, cacheTime: 30 * 60 * 1000 }) {
|
||||
return request.get('/member/info', {}, options)
|
||||
}
|
||||
|
||||
export function updateUserInfo(params) {
|
||||
return request.put('/member/info', params)
|
||||
}
|
||||
|
||||
export function getRecommendCourses(options = { cache: true, cacheTime: 10 * 60 * 1000 }) {
|
||||
return request.get('/course/recommend', {}, options)
|
||||
}
|
||||
|
||||
export function getCourseDetail(id, options = { cache: true, cacheTime: 15 * 60 * 1000 }) {
|
||||
return request.get(`/course/${id}`, {}, options)
|
||||
}
|
||||
|
||||
export function getGroupCoursePage(params = {}, options = { cache: true, cacheTime: 5 * 60 * 1000 }) {
|
||||
const { page = 0, size = 10, sort = 'id', order = 'asc', keyword } = params
|
||||
return request.post('/groupCourse/page', { page, size, sort, order, keyword }, options)
|
||||
}
|
||||
|
||||
export default {
|
||||
login,
|
||||
logout,
|
||||
getQRCode,
|
||||
checkIn,
|
||||
getUserInfo,
|
||||
updateUserInfo,
|
||||
getRecommendCourses,
|
||||
getCourseDetail,
|
||||
getGroupCoursePage
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/** 与 pages.json 保持一致 */
|
||||
export const PAGE = {
|
||||
INDEX: '/pages/index/index',
|
||||
COURSE: '/pages/groupCourse/list',
|
||||
COURSE: '/pages/course/index',
|
||||
TRAIN: '/pages/train/index',
|
||||
DISCOVER: '/pages/discover/index',
|
||||
MEMBER: '/pages/memberInfo/memberInfo',
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<!-- components/TabBar.vue -->
|
||||
<template>
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="tab.path"
|
||||
:class="['tab-item', { active: currentIndex === index }]"
|
||||
:class="['tab-item', { active: currentActiveIndex === index }]"
|
||||
hover-class="tab-item--hover"
|
||||
@tap.stop="onTabTap(index)"
|
||||
>
|
||||
<image
|
||||
:src="currentIndex === index ? tab.iconActive : tab.icon"
|
||||
:src="currentActiveIndex === index ? tab.iconActive : tab.icon"
|
||||
mode="aspectFit"
|
||||
class="tab-icon"
|
||||
/>
|
||||
@@ -18,7 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
import {
|
||||
PAGE,
|
||||
TAB_ROUTES,
|
||||
@@ -31,6 +32,76 @@ const props = defineProps({
|
||||
activeTab: { type: Number, default: -1 }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:active', 'tab-change'])
|
||||
|
||||
// 当前激活的索引 - 默认从路由获取
|
||||
const currentActiveIndex = ref(-1)
|
||||
|
||||
// 从路由获取当前激活的 tab
|
||||
function getActiveIndexFromRoute() {
|
||||
const routePath = getCurrentRoutePath()
|
||||
const index = getTabIndexByRoute(routePath)
|
||||
console.log('从路由获取索引:', routePath, '->', index)
|
||||
return index >= 0 ? index : 0
|
||||
}
|
||||
|
||||
// 同步激活状态（高优先级：路由 > props）
|
||||
function syncActiveState() {
|
||||
// 优先从路由获取（最准确）
|
||||
const routeIndex = getActiveIndexFromRoute()
|
||||
if (routeIndex >= 0) {
|
||||
currentActiveIndex.value = routeIndex
|
||||
return
|
||||
}
|
||||
|
||||
// 其次使用 props
|
||||
if (props.active >= 0) {
|
||||
currentActiveIndex.value = props.active
|
||||
} else if (props.activeTab >= 0) {
|
||||
currentActiveIndex.value = props.activeTab
|
||||
} else {
|
||||
currentActiveIndex.value = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由变化（页面切换时自动同步）
|
||||
let routeWatcher = null
|
||||
|
||||
onMounted(() => {
|
||||
// 初始同步
|
||||
syncActiveState()
|
||||
|
||||
// 监听路由变化（App 端）
|
||||
// #ifdef APP-PLUS
|
||||
routeWatcher = plus.globalEvent.addEventListener('newintent', () => {
|
||||
setTimeout(syncActiveState, 50)
|
||||
})
|
||||
// #endif
|
||||
|
||||
// 监听页面显示（跨端通用）
|
||||
uni.onAppRoute ? uni.onAppRoute(() => {
|
||||
setTimeout(syncActiveState, 50)
|
||||
}) : null
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 清理监听
|
||||
// #ifdef APP-PLUS
|
||||
if (routeWatcher) {
|
||||
plus.globalEvent.removeEventListener('newintent', routeWatcher)
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
|
||||
// 监听 props 变化
|
||||
watch(() => props.active, () => {
|
||||
// 只有当 props 主动变化且不是来自路由同步时才更新
|
||||
const routeIndex = getActiveIndexFromRoute()
|
||||
if (routeIndex !== currentActiveIndex.value) {
|
||||
syncActiveState()
|
||||
}
|
||||
})
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
path: PAGE.INDEX,
|
||||
@@ -64,19 +135,51 @@ const tabs = [
|
||||
}
|
||||
]
|
||||
|
||||
const currentIndex = computed(() => {
|
||||
if (props.active >= 0) return props.active
|
||||
if (props.activeTab >= 0) return props.activeTab
|
||||
return getTabIndexByRoute(getCurrentRoutePath())
|
||||
})
|
||||
let isSwitching = false
|
||||
|
||||
function onTabTap(index) {
|
||||
if (index === currentIndex.value) return
|
||||
const path = TAB_ROUTES[index]
|
||||
uni.reLaunch({
|
||||
url: path,
|
||||
fail: () => {
|
||||
uni.showToast({ title: '页面跳转失败', icon: 'none' })
|
||||
if (isSwitching) return
|
||||
|
||||
const targetPath = TAB_ROUTES[index]
|
||||
const currentPath = TAB_ROUTES[currentActiveIndex.value]
|
||||
|
||||
if (targetPath === currentPath) return
|
||||
|
||||
console.log('Tab 点击:', index, targetPath)
|
||||
|
||||
// 1. 立即更新 UI 高亮
|
||||
currentActiveIndex.value = index
|
||||
|
||||
// 2. 通知父组件
|
||||
emit('update:active', index)
|
||||
emit('tab-change', index)
|
||||
|
||||
// 3. 显示 loading（可选）
|
||||
let timer = setTimeout(() => {
|
||||
uni.showLoading({ title: '加载中...', mask: true })
|
||||
}, 50)
|
||||
|
||||
isSwitching = true
|
||||
|
||||
// 4. 执行跳转
|
||||
uni.switchTab({
|
||||
url: targetPath,
|
||||
success: () => {
|
||||
console.log('switchTab 成功:', targetPath)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('switchTab 失败:', err)
|
||||
// 降级
|
||||
uni.reLaunch({ url: targetPath })
|
||||
},
|
||||
complete: () => {
|
||||
clearTimeout(timer)
|
||||
uni.hideLoading()
|
||||
setTimeout(() => {
|
||||
isSwitching = false
|
||||
// 跳转完成后，再次同步确保高亮正确
|
||||
syncActiveState()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -106,6 +209,11 @@ function onTabTap(index) {
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.tab-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
@@ -122,4 +230,4 @@ function onTabTap(index) {
|
||||
color: #f97316;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -23,9 +23,9 @@
|
||||
|
||||
<script setup>
|
||||
|
||||
const QEClick = () => {
|
||||
const QEClick = path => {
|
||||
uni.navigateTo({
|
||||
url:"/pages/checkIn/checkIn"
|
||||
url:path
|
||||
})
|
||||
}
|
||||
// 快捷入口数据列表
|
||||
@@ -34,7 +34,8 @@ const entries = [
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
|
||||
title: '找课程',
|
||||
desc: '精品课程',
|
||||
accent: false
|
||||
accent: false,
|
||||
path: "/pages/searchCourse/searchCourse"
|
||||
},
|
||||
{
|
||||
icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<!-- 课程卡片 -->
|
||||
<view
|
||||
v-for="(course, index) in courses"
|
||||
:key="index"
|
||||
:key="course.id || index"
|
||||
class="course-card"
|
||||
>
|
||||
<!-- 课程图片区域 -->
|
||||
@@ -65,7 +65,7 @@
|
||||
<text>{{ course.participants }}人参与</text>
|
||||
</view>
|
||||
<!-- 去参与按钮 -->
|
||||
<view class="join-btn">
|
||||
<view class="join-btn" @click="handleJoinCourse(course)">
|
||||
<text>去参与</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -76,36 +76,231 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getGroupCoursePage } from '@/api/main.js'
|
||||
|
||||
// 推荐课程数据列表
|
||||
const courses = [
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80',
|
||||
tag: '限时免费',
|
||||
tagType: 'free',
|
||||
name: 'HIIT高强度燃脂',
|
||||
duration: '30分钟',
|
||||
level: '中级',
|
||||
participants: '4587'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=400&q=80',
|
||||
tag: '人气TOP',
|
||||
tagType: 'hot',
|
||||
name: '力量进阶训练',
|
||||
duration: '45分钟',
|
||||
level: '高级',
|
||||
participants: '6231'
|
||||
},
|
||||
{
|
||||
image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&q=80',
|
||||
tag: '新课上线',
|
||||
tagType: 'new',
|
||||
name: '瑜伽·身心平衡',
|
||||
duration: '60分钟',
|
||||
level: '初级',
|
||||
participants: '3210'
|
||||
const courses = ref([])
|
||||
|
||||
// 课程类型映射（用于显示标签）
|
||||
const getCourseTypeName = (type) => {
|
||||
const typeMap = {
|
||||
'1': '瑜伽',
|
||||
'2': '搏击',
|
||||
'3': '塑形'
|
||||
}
|
||||
]
|
||||
return typeMap[type] || '课程'
|
||||
}
|
||||
|
||||
// 根据课程信息获取标签文本
|
||||
const getTag = (course) => {
|
||||
// 满员标签
|
||||
if (course.currentMembers >= course.maxMembers) {
|
||||
return '已满员'
|
||||
}
|
||||
// 已结束的课程
|
||||
if (course.status === '2') {
|
||||
return '已结束'
|
||||
}
|
||||
// 高人气标签（参与人数超过最大人数的80%）
|
||||
if (course.currentMembers / course.maxMembers >= 0.8) {
|
||||
return '热门'
|
||||
}
|
||||
// 课程类型标签
|
||||
return getCourseTypeName(course.courseType)
|
||||
}
|
||||
|
||||
// 根据课程信息获取标签样式类型
|
||||
const getTagType = (course) => {
|
||||
// 满员标签样式
|
||||
if (course.currentMembers >= course.maxMembers) {
|
||||
return 'full'
|
||||
}
|
||||
// 已结束标签样式
|
||||
if (course.status === '2') {
|
||||
return 'ended'
|
||||
}
|
||||
// 热门标签样式
|
||||
if (course.currentMembers / course.maxMembers >= 0.8) {
|
||||
return 'hot'
|
||||
}
|
||||
// 默认样式
|
||||
return 'default'
|
||||
}
|
||||
|
||||
// 计算课程时长（从startTime和endTime计算）
|
||||
const calculateDuration = (startTime, endTime) => {
|
||||
if (!startTime || !endTime) return '60分钟'
|
||||
const start = new Date(startTime)
|
||||
const end = new Date(endTime)
|
||||
const durationMinutes = Math.floor((end - start) / (1000 * 60))
|
||||
return `${durationMinutes}分钟`
|
||||
}
|
||||
|
||||
// 获取课程难度（基于课程类型和描述简单判断）
|
||||
const getCourseLevel = (course) => {
|
||||
// 可以根据实际需求调整逻辑
|
||||
if (course.courseType === '2') return '中级'
|
||||
if (course.courseType === '3') return '高级'
|
||||
if (course.courseType === '1') return '初级'
|
||||
return '初级'
|
||||
}
|
||||
|
||||
// 处理图片URL
|
||||
const getImageUrl = (coverImage) => {
|
||||
if (!coverImage) {
|
||||
return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
|
||||
}
|
||||
// 如果已经是完整URL直接返回，否则拼接基础路径
|
||||
if (coverImage.startsWith('http')) {
|
||||
return coverImage
|
||||
}
|
||||
// 这里需要根据您的实际图片基础路径配置
|
||||
return `https://your-domain.com${coverImage}`
|
||||
}
|
||||
|
||||
// 获取推荐课程（按最火排序，返回5条）
|
||||
const fetchRecommendCourses = async () => {
|
||||
try {
|
||||
const res = await getGroupCoursePage({
|
||||
page: 0,
|
||||
size: 5,
|
||||
sort: 'current_members', // 按参与人数排序
|
||||
order: 'desc' // 降序，即最火的在前
|
||||
}, { cache: true, cacheTime: 5 * 60 * 1000 })
|
||||
|
||||
if (res && res.content && Array.isArray(res.content)) {
|
||||
// 将后端数据转换为组件所需格式
|
||||
courses.value = res.content.map(course => ({
|
||||
id: course.id,
|
||||
image: getImageUrl(course.coverImage),
|
||||
tag: getTag(course),
|
||||
tagType: getTagType(course),
|
||||
name: course.courseName || '未知课程',
|
||||
duration: calculateDuration(course.startTime, course.endTime),
|
||||
level: getCourseLevel(course),
|
||||
participants: course.currentMembers || 0,
|
||||
// 保存原始数据供点击事件使用
|
||||
rawData: course
|
||||
}))
|
||||
} else {
|
||||
// 如果没有数据，使用提供的示例数据作为fallback
|
||||
useFallbackData()
|
||||
}
|
||||
} catch (err) {
|
||||
// console.error('获取推荐课程失败:', err)
|
||||
// 使用提供的示例数据作为fallback
|
||||
useFallbackData()
|
||||
}
|
||||
}
|
||||
|
||||
// 使用提供的响应数据作为默认数据
|
||||
const useFallbackData = () => {
|
||||
const fallbackContent = [
|
||||
{
|
||||
id: "3",
|
||||
courseName: "燃脂搏击",
|
||||
courseType: "2",
|
||||
startTime: "2026-06-10T18:30:00",
|
||||
endTime: "2026-06-10T19:30:00",
|
||||
maxMembers: 20,
|
||||
currentMembers: 20,
|
||||
status: "0",
|
||||
coverImage: "/images/kickboxing.jpg",
|
||||
description: "高强度间歇训练，配合音乐快速燃脂，释放压力。名额已满，无法预约。"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
courseName: "清晨流瑜伽",
|
||||
courseType: "1",
|
||||
startTime: "2026-06-12T09:00:00",
|
||||
endTime: "2026-06-12T10:30:00",
|
||||
maxMembers: 15,
|
||||
currentMembers: 5,
|
||||
status: "0",
|
||||
coverImage: "/images/yoga_flow.jpg",
|
||||
description: "适合有一定基础的学员，通过流畅的体式连接呼吸，唤醒身体能量。"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
courseName: "哈他瑜伽",
|
||||
courseType: "1",
|
||||
startTime: "2026-06-01T15:20:00",
|
||||
endTime: "2026-06-01T16:50:00",
|
||||
maxMembers: 12,
|
||||
currentMembers: 3,
|
||||
status: "0",
|
||||
coverImage: "/images/hatha_yoga.jpg",
|
||||
description: "基础哈他瑜伽，适合所有级别。距开始不足30分钟，已停止预约。"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
courseName: "蜜桃臀塑造",
|
||||
courseType: "3",
|
||||
startTime: "2026-05-30T19:00:00",
|
||||
endTime: "2026-05-30T20:00:00",
|
||||
maxMembers: 10,
|
||||
currentMembers: 8,
|
||||
status: "2",
|
||||
coverImage: "/images/glute.jpg",
|
||||
description: "针对性训练臀部肌肉群，课程已于5月30日结束，无法预约。"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
courseName: "午间冥想放松",
|
||||
courseType: "1",
|
||||
startTime: "2026-05-31T12:00:00",
|
||||
endTime: "2026-05-31T13:00:00",
|
||||
maxMembers: 15,
|
||||
currentMembers: 6,
|
||||
status: "2",
|
||||
coverImage: "/images/meditation_noon.jpg",
|
||||
description: "午间冥想课程，已于5月31日结束。"
|
||||
}
|
||||
]
|
||||
|
||||
courses.value = fallbackContent.map(course => ({
|
||||
id: course.id,
|
||||
image: getImageUrl(course.coverImage),
|
||||
tag: getTag(course),
|
||||
tagType: getTagType(course),
|
||||
name: course.courseName || '未知课程',
|
||||
duration: calculateDuration(course.startTime, course.endTime),
|
||||
level: getCourseLevel(course),
|
||||
participants: course.currentMembers || 0,
|
||||
rawData: course
|
||||
}))
|
||||
}
|
||||
|
||||
// 处理参与课程点击
|
||||
const handleJoinCourse = (course) => {
|
||||
// 根据课程状态判断是否可以参与
|
||||
if (course.rawData.status === '2') {
|
||||
uni.showToast({
|
||||
title: '课程已结束',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (course.rawData.currentMembers >= course.rawData.maxMembers) {
|
||||
uni.showToast({
|
||||
title: '课程已满员',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 跳转到课程详情页
|
||||
uni.navigateTo({
|
||||
url: `/pages/course/detail?id=${course.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
fetchRecommendCourses()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -206,6 +401,37 @@ const courses = [
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: #f97316;
|
||||
z-index: 2;
|
||||
|
||||
/* 热门标签 */
|
||||
&.hot {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
/* 新课标签 */
|
||||
&.new {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
/* 免费标签 */
|
||||
&.free {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
/* 满员标签 */
|
||||
&.full {
|
||||
background: #64748b;
|
||||
}
|
||||
|
||||
/* 已结束标签 */
|
||||
&.ended {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* 默认标签 */
|
||||
&.default {
|
||||
background: #f97316;
|
||||
}
|
||||
}
|
||||
|
||||
/* 课程信息区域样式 */
|
||||
@@ -244,10 +470,10 @@ const courses = [
|
||||
font-size: 20rpx;
|
||||
image{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
align-items: center;
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 课程底部区域样式 */
|
||||
@@ -272,9 +498,9 @@ const courses = [
|
||||
font-size: 24rpx;
|
||||
image{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
align-items: center;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -288,4 +514,4 @@ align-items: center;
|
||||
font-weight: 600;
|
||||
color: #f97316;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -3,32 +3,52 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健身房"
|
||||
"navigationBarTitleText": "健身房",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/course/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程"
|
||||
"navigationBarTitleText": "课程",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/train/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "训练"
|
||||
"navigationBarTitleText": "训练",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/discover/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "发现"
|
||||
"navigationBarTitleText": "发现",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/memberInfo/memberInfo",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "我的"
|
||||
"navigationBarTitleText": "我的",
|
||||
"app-plus": {
|
||||
"animationType": "fade-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -231,13 +251,39 @@
|
||||
"navigationBarTitleText": "课程详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/LoadingOverlay/LoadingOverlay",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/searchCourse/searchCourse",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索课程"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "健身房",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"app-plus": {
|
||||
"animationType": "pop-in",
|
||||
"animationDuration": 200
|
||||
}
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
"uniIdRouter": {},
|
||||
"tabBar": {
|
||||
"custom": true, // 启用自定义 tabBar
|
||||
"list": [
|
||||
{ "pagePath": "pages/index/index", "text": "首页" },
|
||||
{ "pagePath": "pages/course/index", "text": "课程" },
|
||||
{ "pagePath": "pages/train/index", "text": "训练" },
|
||||
{ "pagePath": "pages/discover/index", "text": "发现" },
|
||||
{ "pagePath": "pages/memberInfo/memberInfo", "text": "我的" }
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<!-- components/LoadingOverlay.vue -->
|
||||
<template>
|
||||
<view v-if="visible" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{ text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
text: { type: String, default: '加载中...' },
|
||||
delay: { type: Number, default: 200 }
|
||||
})
|
||||
|
||||
const visible = ref(false)
|
||||
let timer = null
|
||||
|
||||
onMounted(() => {
|
||||
timer = setTimeout(() => {
|
||||
visible.value = true
|
||||
}, props.delay)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) clearTimeout(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -104,7 +104,7 @@ import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
// 引入状态组件（路径与你保持一致）
|
||||
import QrStatus from '@/components/QRCode/StatusCard.vue'
|
||||
// 引入API封装
|
||||
import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
|
||||
let image = ref("")
|
||||
let width = ref(0)
|
||||
@@ -115,6 +115,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
const QRStatus = ref("生成中...")
|
||||
const STQRC = ref(false)//是否扫码
|
||||
const isCheckIn = ref(false)
|
||||
const webSoketURL = "ws://localhost:8084/webSocket/checkIn"
|
||||
|
||||
const qrcode = ref("")
|
||||
|
||||
@@ -209,22 +210,31 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有QR_开头的缓存（用于测试阶段）
|
||||
* 清除所有与签到相关的缓存（用于测试阶段）
|
||||
*/
|
||||
const clearQRCache = () => {
|
||||
try {
|
||||
const keys = uni.getStorageInfoSync().keys || []
|
||||
let clearedCount = 0
|
||||
for (const key of keys) {
|
||||
// 清除 QR_ 开头的缓存（页面内部缓存）
|
||||
if (key.startsWith(CACHE_PREFIX)) {
|
||||
uni.removeStorageSync(key)
|
||||
clearedCount++
|
||||
}
|
||||
// 清除 API_CACHE_ 开头的缓存（通过 utils/cache.js 缓存的接口数据）
|
||||
if (key.startsWith('API_CACHE_')) {
|
||||
// 只清除与签到相关的 API 缓存
|
||||
if (key.includes('checkIn') || key.includes('qrcode')) {
|
||||
uni.removeStorageSync(key)
|
||||
clearedCount++
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(`已清除 ${clearedCount} 个QR_开头的缓存`)
|
||||
console.log(`已清除 ${clearedCount} 个签到相关缓存`)
|
||||
return clearedCount
|
||||
} catch (e) {
|
||||
console.error('清除QR缓存失败:', e)
|
||||
console.error('清除 QR 缓存失败:', e)
|
||||
return 0
|
||||
}
|
||||
}
|
||||
@@ -256,10 +266,8 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
// 重新请求二维码
|
||||
setTimeout(() => {
|
||||
getStorage(null)
|
||||
}, 500)
|
||||
// 重置页面状态后不再自动请求二维码
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -319,7 +327,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
errorText.value = '' // 重置错误文本
|
||||
image.value = ""
|
||||
|
||||
getQRCode(true).then(res => {
|
||||
getQRCode({ cache: true, cacheTime: 5 * 60 * 1000 }).then(res => {
|
||||
console.log(res)
|
||||
// 保存到本地缓存（用于签到状态判断）
|
||||
setCacheData("QRInfo", res)
|
||||
@@ -403,7 +411,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
// 手动签到接口
|
||||
const checkIn = (qrContent) => {
|
||||
console.log(qrContent)
|
||||
apiCheckIn(qrContent).then(res => {
|
||||
apiCheckIn({ qrContent }).then(res => {
|
||||
closeWebSocket()
|
||||
console.log(res)
|
||||
status.value = 'scanned'
|
||||
@@ -422,17 +430,20 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
console.error('签到请求失败:', err)
|
||||
status.value = 'error'
|
||||
errorText.value = err.message || '签到失败，请重试' // 对应错误文案
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 建立WebSocket连接
|
||||
const connectWebSocket = (qrContent) => {
|
||||
const wsUrl = `ws://192.168.43.89:8084/webSocket/checkIn`
|
||||
|
||||
console.log('WebSocket 连接地址:', wsUrl)
|
||||
console.log('WebSocket 连接地址:', webSoketURL)
|
||||
|
||||
socketTask = uni.connectSocket({
|
||||
url: wsUrl,
|
||||
url: webSoketURL,
|
||||
success: () => {
|
||||
console.log('WebSocket 连接中...')
|
||||
},
|
||||
@@ -477,17 +488,27 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
socketTask.onMessage((res) => {
|
||||
console.log('收到 WebSocket 消息:', res.data)
|
||||
const message = res.data
|
||||
|
||||
|
||||
if (message === '正在进行签到') {
|
||||
// 显示遮罩，防止用户重复扫码
|
||||
QRStatus.value = "正在进行签到..."
|
||||
STQRC.value = true
|
||||
// status.value = 'scanned'
|
||||
// errorText.value = '' // 成功重置错误文本
|
||||
// uni.showToast({
|
||||
// title: '签到成功！',
|
||||
// icon: 'success',
|
||||
// duration: 2000
|
||||
// })
|
||||
} else if (message === '签到成功' || message.includes('签到成功')) {
|
||||
// 签到成功，更新状态
|
||||
status.value = 'scanned'
|
||||
errorText.value = ''
|
||||
isCheckIn.value = true
|
||||
QRStatus.value = "签到成功"
|
||||
// 缓存签到状态
|
||||
setCacheData("isCheckIn", true)
|
||||
setCacheData("checkInTime", "签到成功")
|
||||
uni.showToast({
|
||||
title: '签到成功！',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
// 关闭WebSocket连接
|
||||
closeWebSocket()
|
||||
} else if (message.startsWith('二维码无效')) {
|
||||
uni.showToast({
|
||||
title: message,
|
||||
@@ -495,18 +516,32 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
duration: 2000
|
||||
})
|
||||
status.value = 'error'
|
||||
errorText.value = '二维码无效，请刷新' // 对应错误文案
|
||||
errorText.value = '二维码无效，请刷新'
|
||||
// 隐藏遮罩，允许用户重新操作
|
||||
STQRC.value = false
|
||||
QRStatus.value = "生成中..."
|
||||
setTimeout(() => {
|
||||
closeWebSocket()
|
||||
}, 3000)
|
||||
} else if (message === '消息格式错误') {
|
||||
uni.showToast({
|
||||
title: '消息格式错误',
|
||||
icon: 'none'
|
||||
})
|
||||
status.value = 'error'
|
||||
errorText.value = '消息格式错误' // 对应错误文案
|
||||
} else {
|
||||
errorText.value = '消息格式错误'
|
||||
// 隐藏遮罩，允许用户重新操作
|
||||
STQRC.value = false
|
||||
QRStatus.value = "生成中..."
|
||||
} else if (message.includes('失败') || message.includes('错误')) {
|
||||
// 其他失败情况
|
||||
uni.showToast({
|
||||
title: message,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
status.value = 'error'
|
||||
errorText.value = message
|
||||
// 隐藏遮罩，允许用户重新操作
|
||||
STQRC.value = false
|
||||
QRStatus.value = "生成中..."
|
||||
} else {
|
||||
console.log('未知消息:', message)
|
||||
}
|
||||
})
|
||||
@@ -523,10 +558,6 @@ import { getQRCode, checkIn as apiCheckIn } from '@/request_api/main.js'
|
||||
console.error('WebSocket 错误:', err)
|
||||
status.value = 'error'
|
||||
errorText.value = '连接失败，请重试' // 对应错误文案
|
||||
uni.showToast({
|
||||
title: '连接失败',
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
<!-- pages/course/index.vue -->
|
||||
<template>
|
||||
<view class="tab-page">
|
||||
<view class="tab-page__header">
|
||||
@@ -5,27 +6,114 @@
|
||||
<text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
|
||||
</view>
|
||||
|
||||
<RecommendCourses />
|
||||
|
||||
<view class="tab-page__actions">
|
||||
<view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
|
||||
<text class="tab-page__btn-text">预约课程</text>
|
||||
</view>
|
||||
<view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
|
||||
<text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
|
||||
<!-- 骨架屏 -->
|
||||
<view v-if="loading" class="skeleton-container">
|
||||
<view class="skeleton-item" v-for="i in 3" :key="i">
|
||||
<view class="skeleton-img"></view>
|
||||
<view class="skeleton-text"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 真实内容 -->
|
||||
<template v-else>
|
||||
<RecommendCourses :data="courseData" />
|
||||
|
||||
<view class="tab-page__actions">
|
||||
<view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
|
||||
<text class="tab-page__btn-text">预约课程</text>
|
||||
</view>
|
||||
<view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
|
||||
<text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="bottom-placeholder"></view>
|
||||
<TabBar :active="1" />
|
||||
<TabBar @update:active="handleTabActive" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import RecommendCourses from '@/components/index/RecommendCourses.vue'
|
||||
import TabBar from '@/components/TabBar.vue'
|
||||
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
|
||||
|
||||
const loading = ref(true)
|
||||
const courseData = ref(null)
|
||||
|
||||
// 从缓存加载数据
|
||||
function loadFromCache() {
|
||||
try {
|
||||
const cached = uni.getStorageSync('course_cache')
|
||||
if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
|
||||
courseData.value = cached.data
|
||||
loading.value = false
|
||||
return true
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('读取缓存失败', e)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 从网络加载数据
|
||||
async function loadFromNetwork() {
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// 模拟 API 请求
|
||||
const res = await new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ code: 0, data: { list: [] } })
|
||||
}, 500)
|
||||
})
|
||||
|
||||
if (res.code === 0) {
|
||||
courseData.value = res.data
|
||||
// 更新缓存
|
||||
uni.setStorageSync('course_cache', {
|
||||
data: res.data,
|
||||
time: Date.now()
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载失败', err)
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 页面激活时刷新数据（可选）
|
||||
function handleTabActive(index) {
|
||||
// Tab 切换时后台刷新数据
|
||||
if (index === 1 && !loading.value) {
|
||||
loadFromNetwork()
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
// 优先显示缓存
|
||||
const hasCache = loadFromCache()
|
||||
if (!hasCache) {
|
||||
loadFromNetwork()
|
||||
} else {
|
||||
// 后台静默更新
|
||||
setTimeout(() => {
|
||||
loadFromNetwork()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
// 每次显示时确保加载完成
|
||||
if (loading.value && !courseData.value) {
|
||||
loadFromNetwork()
|
||||
}
|
||||
})
|
||||
|
||||
function goCourseList() {
|
||||
navigateToPage(PAGE.COURSE_LIST)
|
||||
}
|
||||
@@ -94,4 +182,39 @@ function goMyCourses() {
|
||||
.bottom-placeholder {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 骨架屏样式 */
|
||||
.skeleton-container {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-img {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
height: 32rpx;
|
||||
margin-top: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s infinite;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -15,8 +15,8 @@
|
||||
<!-- 底部占位 -->
|
||||
<view class="bottom-placeholder"></view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<TabBar :active="0" />
|
||||
<!-- TabBar -->
|
||||
<TabBar />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -38,4 +38,5 @@ import TabBar from '@/components/TabBar.vue'
|
||||
.bottom-placeholder {
|
||||
height: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,89 @@
|
||||
// 缓存相关常量
|
||||
const CACHE_PREFIX = 'API_CACHE_'
|
||||
const CACHE_EXPIRE_TIME = 5 * 60 * 1000 // 默认缓存时间5分钟
|
||||
|
||||
/**
|
||||
* 获取缓存数据
|
||||
* @param {string} key - 缓存键名
|
||||
* @returns {any} 缓存数据（过期返回null）
|
||||
*/
|
||||
export const getCache = (key) => {
|
||||
try {
|
||||
const cacheData = uni.getStorageSync(CACHE_PREFIX + key)
|
||||
if (cacheData && cacheData.expireTime && Date.now() < cacheData.expireTime) {
|
||||
return cacheData.data
|
||||
}
|
||||
// 缓存过期，清除
|
||||
uni.removeStorageSync(CACHE_PREFIX + key)
|
||||
return null
|
||||
} catch (e) {
|
||||
console.error('获取缓存失败:', e)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置缓存数据
|
||||
* @param {string} key - 缓存键名
|
||||
* @param {any} data - 要缓存的数据
|
||||
* @param {number} expireTime - 过期时间（毫秒），默认5分钟
|
||||
*/
|
||||
export const setCache = (key, data, expireTime = CACHE_EXPIRE_TIME) => {
|
||||
try {
|
||||
const cacheData = {
|
||||
data: data,
|
||||
expireTime: Date.now() + expireTime
|
||||
}
|
||||
uni.setStorageSync(CACHE_PREFIX + key, cacheData)
|
||||
} catch (e) {
|
||||
console.error('设置缓存失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除指定缓存
|
||||
* @param {string} key - 缓存键名
|
||||
*/
|
||||
export const clearCache = (key) => {
|
||||
try {
|
||||
uni.removeStorageSync(CACHE_PREFIX + key)
|
||||
} catch (e) {
|
||||
console.error('清除缓存失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除所有API缓存
|
||||
*/
|
||||
export const clearAllCache = () => {
|
||||
try {
|
||||
const keys = uni.getStorageInfoSync().keys || []
|
||||
for (const key of keys) {
|
||||
if (key.startsWith(CACHE_PREFIX)) {
|
||||
uni.removeStorageSync(key)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('清除所有缓存失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成请求缓存键名
|
||||
* @param {string} url - 请求URL
|
||||
* @param {object} data - 请求参数
|
||||
* @param {string} method - 请求方法
|
||||
* @returns {string} 缓存键名
|
||||
*/
|
||||
export const generateCacheKey = (url, data, method) => {
|
||||
const params = JSON.stringify(data || {})
|
||||
return `${method}_${url}_${params}`
|
||||
}
|
||||
|
||||
export default {
|
||||
getCache,
|
||||
setCache,
|
||||
clearCache,
|
||||
clearAllCache,
|
||||
generateCacheKey
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
const BASE_URL = 'http://192.168.5.15:8084/api'
|
||||
const BASE_URL = '/api'
|
||||
|
||||
// 缓存相关常量
|
||||
const CACHE_PREFIX = 'API_CACHE_'
|
||||
@@ -212,4 +212,21 @@ export const requestUtils = {
|
||||
clearAllCache
|
||||
}
|
||||
|
||||
// 添加便捷方法
|
||||
request.get = (url, data = {}, options = {}) => {
|
||||
return request({ url, method: 'GET', data, ...options })
|
||||
}
|
||||
|
||||
request.post = (url, data = {}, options = {}) => {
|
||||
return request({ url, method: 'POST', data, ...options })
|
||||
}
|
||||
|
||||
request.put = (url, data = {}, options = {}) => {
|
||||
return request({ url, method: 'PUT', data, ...options })
|
||||
}
|
||||
|
||||
request.delete = (url, data = {}, options = {}) => {
|
||||
return request({ url, method: 'DELETE', data, ...options })
|
||||
}
|
||||
|
||||
export default request
|
||||
|
||||
@@ -7,17 +7,22 @@ export default defineConfig({
|
||||
plugins: [uni()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
'@': path.resolve(__dirname, '.')
|
||||
},
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
// 匹配所有 /api 开头的请求
|
||||
// 匹配所有 /api/ 开头的请求（排除静态文件）
|
||||
'/api': {
|
||||
target: 'http://192.168.5.15:8084', // 你的后端SpringBoot地址
|
||||
changeOrigin: true, // 开启跨域伪装
|
||||
// rewrite: (path) => path.replace(/^\/areyouok/, '')
|
||||
// 举例：前端请求 /api/login → 代理成 http://localhost:8088/login
|
||||
// 只代理真正的后端API请求，排除 .js .vue 等静态文件
|
||||
bypass: function(req, res, proxyOptions) {
|
||||
if (req.url.indexOf('.js') !== -1 || req.url.indexOf('.vue') !== -1 ||
|
||||
req.url.indexOf('.css') !== -1 || req.url.indexOf('.json') !== -1) {
|
||||
return req.url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user