zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：课程首页增加骨架屏

Browse Source
This commit is contained in:
chenghuan
2025-12-12 10:22:44 +08:00
parent 3ce5e07573
commit 6e5d63febe
10 changed files with 378 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/config.ts
View File

@@ -7,7 +7,7 @@ export const ENV = process.env.NODE_ENV || 'development';
*/
const BASE_URL_MAP = {
development: {
//MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
// MAIN: 'http://192.168.110.100:9300/pb/', // 张川川
MAIN: 'https://global.nuttyreading.com/', // 线上
// PAYMENT: 'https://dev-pay.example.com', // 暂时用不到
// CDN: 'https://cdn-dev.example.com', // 暂时用不到

6
api/modules/common.ts
View File

@@ -1,11 +1,9 @@
// api/modules/common.ts
import { mainClient } from '@/api/clients/main'
import { mainClient, skeletonClient } from '@/api/clients'
import type { IApiResponse } from '@/api/types'
import type { IAgreement } from '@/types/user'
import { useUserStore } from '@/stores/user'
export const commonApi = {
/**
* 发送邮箱验证码
@@ -40,7 +38,7 @@ export const commonApi = {
*/
getMessageList(isBook: number, isMedical: number, isSociology: number) {
const userStore = useUserStore()
return mainClient.request<IMessageListResponse>({
return skeletonClient.request<IApiResponse>({
url: userStore.token ? 'common/message/listByPage' : '/visitor/listByPage',
method: 'POST',
data: { isBook, isMedical, isSociology }

4
api/modules/course.ts
View File

@@ -36,7 +36,7 @@ export const courseApi = {
* @returns 观看记录列表
*/
getUserLateCourseList() {
return mainClient.request<IUserLateCourseListResponse>({
return skeletonClient.request<IUserLateCourseListResponse>({
url: 'medical/home/getUserLateCourseList',
method: 'POST',
data: {}
@@ -56,7 +56,7 @@ export const courseApi = {
limit: number
}) {
const userStore = useUserStore()
return mainClient.request<IMarketCourseListResponse>({
return skeletonClient.request<IMarketCourseListResponse>({
url: userStore.token ? 'medical/home/getMarketCourseList' : 'visitor/getMarketCourseList',
method: 'POST',
data

5
api/modules/cousre_subject_classification.ts
View File

@@ -8,6 +8,7 @@ import type {
ICourseMedicalLabelsResponse
} from '@/types/course'
import { useUserStore } from '@/stores/user'
import { skeletonClient } from '../clients'
const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
@@ -36,7 +37,7 @@ export const courseSubjectClassificationApi = {
* @returns 分类数据
*/
getCourseSoulTree() {
return client.request<ICourseCategoryResponse>({
return skeletonClient.request<ICourseCategoryResponse>({
url: 'psyche/home/getPsycheLabels',
method: 'POST',
data: { id: 0 }
@@ -49,7 +50,7 @@ export const courseSubjectClassificationApi = {
* @returns 分类数据
*/
getCourseSociologyTree() {
return client.request<ICourseCategoryResponse>({
return skeletonClient.request<ICourseCategoryResponse>({
url: 'sociology/home/getSociologyLabels',
method: 'POST',
data: { id: 0 }

4
components/Skeleton/Skeleton.vue
View File

@@ -19,6 +19,9 @@ import LineList from './templates/LineList.vue'
import BookCard from './templates/BookCard.vue'
import ImageCard from './templates/ImageCard.vue'
import BookInfo from './templates/BookInfo.vue'
import Menu from './templates/Menu.vue'
// 注册组件
const components = {
@@ -28,6 +31,7 @@ const components = {
'image-card': ImageCard,
'book-card': BookCard,
'book-info': BookInfo,
'menu': Menu
}
type RequestFn = () => Promise<any>

33
components/Skeleton/templates/Menu.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<view class="menu-box">
<wd-skeleton :row-col="grid" animation="gradient" />
</view>
</template>
<script lang="ts" setup>
const props = defineProps<{
size?: any[],
count: number
}>()
const list = Array.from({ length: props.count }, (_, index) => (props.size || []))
const grid = [
[
{ width: '96rpx', height: '96rpx' },
{ width: '96rpx', height: '96rpx' },
{ width: '96rpx', height: '96rpx' },
{ width: '96rpx', height: '96rpx' }
]
]
</script>
<style lang="scss" scoped>
.menu-box {
padding: 40rpx 80rpx;
background-color: #f5f5f5;
:deep(.wd-skeleton) {
margin: 0 auto;
}
}
</style>

375
pages/course/index.vue
View File

@@ -31,80 +31,87 @@
>{{ item }}</view>
</view>
<!-- 医学 -->
<view v-if="selectedFirstLevel === '医学'" class="newLeve2">
<view class="home_nar nomargin" style="padding: 0; background-color: #fff">
<view class="flexbox">
<Skeleton
v-if="selectedFirstLevel === '医学'"
ref="medicineMenuSkeletonRef"
theme="menu"
:request="getMedicineMenus"
@success="getMedicineMenusSuccess"
>
<template #content>
<view v-if="selectedFirstLevel === '医学'" class="newLeve2">
<view class="home_nar nomargin" style="padding: 0; background-color: #fff">
<view class="flexbox">
<view
:class="['hn_cl_tit', currentIndex == index ? 'active' : '']"
@click="curseClick(item, index)"
v-for="(item, index) in curseTagList"
:key="item.id"
>
<image :src="item.icon" mode="aspectFit"></image>
<text>{{ item.title }}</text>
</view>
</view>
</view>
<view
:class="['hn_cl_tit', currentIndex == index ? 'active' : '']"
@click="curseClick(item, index)"
v-for="(item, index) in curseTagList"
:key="item.id"
class="fourBox"
style="padding: 0; padding-bottom: 8rpx"
v-if="sbuMedicalTagsList?.length > 0"
>
<image :src="item.icon" mode="aspectFit"></image>
<text>{{ item.title }}</text>
<view
class="childrenBox fourIcon flexbox"
style="justify-content: space-around"
>
<view
class="item flexbox"
@click="curseClickJump(item)"
v-for="(item, index) in sbuMedicalTagsList"
:key="item.id"
>
<image
:src="item.icon"
mode="aspectFit"
v-if="item.icon != '' && item.icon != null"
></image>
<text>{{ item.title }}</text>
</view>
</view>
</view>
</view>
</view>
<view
class="fourBox"
style="padding: 0; padding-bottom: 8rpx"
v-if="sbuMedicalTagsList?.length > 0"
>
</template>
</Skeleton>
<!-- 心理学和国学 -->
<Skeleton
v-if="selectedFirstLevel === '心理学' || selectedFirstLevel === '国学'"
ref="menuSkeletonRef"
theme="menu"
:request="getMenus"
>
<template #content="{ data }">
<view
class="childrenBox fourIcon flexbox"
style="justify-content: space-around"
v-if="data.labels.length > 0"
:class="[
{'sociology_cate_box': selectedFirstLevel === '国学'},
{'soul_cate_box': selectedFirstLevel === '心理学'}
]"
>
<view
class="item flexbox"
@click="curseClickJump(item)"
v-for="(item, index) in sbuMedicalTagsList"
:key="item.id"
>
<image
:src="item.icon"
mode="aspectFit"
v-if="item.icon != '' && item.icon != null"
></image>
<text>{{ item.title }}</text>
</view>
</view>
</view>
</view>
<!-- 心理学 -->
<view v-if="selectedFirstLevel === '心理学'" class="soul_cate_box">
<scroll-view scroll-x="true">
<view class="cate_list" v-if="soulCateList.length > 0">
<view
class="cate_item_box"
v-for="(item, index) in soulCateList"
:key="index"
v-for="item in data.labels"
@click="curseClickJump(item)"
>
<view class="cate_item_border">
<image :src="item.icon"></image>
<image
:src="item.icon"
mode="aspectFill"
style="width: 49rpx; height: 49rpx"
></image>
</view>
<view class="cate_item_name">{{ item.title }}</view>
</view>
</view>
</scroll-view>
</view>
<!-- 国学 -->
<view v-if="selectedFirstLevel === '国学' && sociologyCateList.length > 0" class="sociology_cate_box">
<view
class="cate_item_box"
v-for="(v, i) in sociologyCateList"
@click="curseClickJump(v)"
>
<view class="cate_item_border">
<image
:src="v.icon"
mode="aspectFill"
style="width: 49rpx; height: 49rpx"
></image>
</view>
<view class="cate_item_name">{{ v.title }}</view>
</view>
</view>
</template>
</Skeleton>
<!-- 观看记录区域 -->
<view class="learnBox" v-if="learnList.length > 0">
@@ -143,7 +150,7 @@
<view class="newscoll">
<swiper
class="swiper"
interval="5000"
:interval="5000"
circular
autoplay
vertical
@@ -163,40 +170,50 @@
</view>
<!-- 精彩试听区域 -->
<view class="learnBox" v-if="tryListenList.length > 0">
<view class="learnBox">
<view class="titleBox flexbox">
<image src="../../static/course/try_listen.png" mode="aspectFit"></image>
<text>{{ $t('courseHome.tryListen') }}</text>
</view>
<view class="learn flexbox shiting">
<view
class="item"
v-for="(item, index) in tryListenList"
:key="item.id"
@click="onPageJump('/pages/course/details/course', item.id, item.title)"
>
<view class="imgcontainer">
<image
v-if="item.image == '' || !item.image"
src="../../static/course/nobg.jpg"
mode="aspectFit"
<Skeleton
theme="image-card"
class=""
:size="Array(2).fill({ width: '48%', height: '260rpx' })"
:count="3"
:request="getTryListenList"
>
<template #content="{ data }">
<view v-if="data.courseList.records.length > 0" class="learn flexbox shiting">
<view
class="item"
v-for="(item, index) in data.courseList.records"
:key="item.id"
@click="onPageJump('/pages/course/details/course', item.id, item.title)"
>
</image>
<image v-else :src="item.image"></image>
</view>
<view class="buyItems flexbox">
<view class="txt555">
{{ item.title }}
</view>
<view class="buybtn">
<span>{{ $t('courseHome.buy') }}</span>
<view class="imgcontainer">
<image
v-if="item.image == '' || !item.image"
src="../../static/course/nobg.jpg"
mode="aspectFit"
>
</image>
<image v-else :src="item.image"></image>
</view>
<view class="buyItems flexbox">
<view class="txt555">
{{ item.title }}
</view>
<view class="buybtn">
<span>{{ $t('courseHome.buy') }}</span>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="moreBox shiting">
<text @click="onPageJump('/pages/course/list/tryListen', 1, $t('courseHome.tryListen'))">{{ $t('courseHome.moreTryListen') }}</text>
</view>
<view class="moreBox shiting">
<text @click="onPageJump('/pages/course/list/tryListen', 1, $t('courseHome.tryListen'))">{{ $t('courseHome.moreTryListen') }}</text>
</view>
</template>
</Skeleton>
</view>
</view>
</template>
@@ -236,34 +253,18 @@ const currentItem = ref<IMedicalTag | null>(null) // 当前选中的一级
// 学科数据
const firstLevelCategories = ref<string[]>(['医学', '心理学', '国学'])
const selectedFirstLevel = ref<number>('医学') // 当前选中的一级分类索引
/**
* 学科点击处理
*/
const handleFirstLevelClick = (item: string) => {
getPrompt()
if(!uni.getStorageSync('token')) return
selectedFirstLevel.value = item
switch (item) {
case '医学':
getMedicalTags()
break
case '心理学':
getSoulCateList()
break
case '国学':
getSociologyCateList()
break
}
}
const selectedFirstLevel = ref('医学') // 当前选中的一级分类索引
/**
* 医学
* 获取课程分类数据
*/
const getMedicalTags = async () => {
const medicineMenuSkeletonRef = ref()
const getMedicineMenus = () => {
sbuMedicalTagsList.value = []
const res = await courseSubjectClassificationApi.getCourseMedicalTree()
return courseSubjectClassificationApi.getCourseMedicalTree()
}
const getMedicineMenusSuccess = (res: any) => {
if (res && res.code === 0) {
if (res.labels && res.labels.length > 0) {
curseTagList.value = res.labels
@@ -304,27 +305,46 @@ const curseClick = (item: IMedicalTag, index: number) => {
}
/**
* 心理学
* 菜单
* 获取课程分类数据
*/
const soulCateList = ref<IMedicalTag[]>([])
const getSoulCateList = async () => {
const res = await courseSubjectClassificationApi.getCourseSoulTree()
if (res.labels&&res.labels.length>0) {
soulCateList.value = res.labels;
const menuSkeletonRef = ref()
const getMenus = () => {
switch (selectedFirstLevel.value) {
// case '医学':
// return getMedicalTags()
case '心理学':
return courseSubjectClassificationApi.getCourseSoulTree()
case '国学':
return courseSubjectClassificationApi.getCourseSociologyTree()
}
}
/**
* 国学
* 获取课程分类数据
* 学科点击处理
*/
const sociologyCateList = ref<IMedicalTag[]>([])
const getSociologyCateList = async () => {
const res = await courseSubjectClassificationApi.getCourseSociologyTree()
if (res.labels&&res.labels.length>0) {
sociologyCateList.value = res.labels;
const handleFirstLevelClick = (item: string) => {
getPrompt()
if(!uni.getStorageSync('token')) return
selectedFirstLevel.value = item
if (item === '医学') {
medicineMenuSkeletonRef.value.reload()
} else {
menuSkeletonRef.value?.reload()
}
// switch (item) {
// case '医学':
// getMedicalTags()
// break
// case '心理学':
// getSoulCateList()
// break
// case '国学':
// getSociologyCateList()
// break
// }
}
/**
@@ -399,24 +419,10 @@ const newsClick = (item: INews) => {
}
// 精彩试听
const tryListenList = ref<ICourse[]>([]) // 试听课程列表
/**
* 获取试听课程列表
*/
const getTryListenList = async () => {
const res = await courseApi.getMarketCourseList({
page: 1,
limit: 6,
id: 1
})
if (res && res.code === 0) {
if (res.courseList && res.courseList.records && res.courseList.records.length > 0) {
tryListenList.value = res.courseList.records
} else {
tryListenList.value = []
}
}
}
const getTryListenList = () => courseApi.getMarketCourseList({ page: 1, limit: 6, id: 1 })
/**
* 登录提示语
@@ -444,8 +450,7 @@ const getTryListenList = async () => {
const requestAll = async () => {
if(uni.getStorageSync('token')){
getLearnCourse()
}
getMedicalTags()
}
getTryListenList()
getNewsList()
}
@@ -472,16 +477,19 @@ onMounted(() => {
*/
onShow(() => {
// 检查是否有固定的分类选择状态
const fixed = uni.getStorageSync('fixed')
if (fixed && currentItem.value) {
curseClick(currentItem.value, currentIndex.value)
} else {
currentIndex.value = 0
currentItem.value = null
}
// const fixed = uni.getStorageSync('fixed')
// if (fixed && currentItem.value) {
// curseClick(currentItem.value, currentIndex.value)
// } else {
// currentIndex.value = 0
// currentItem.value = null
// }
// 刷新数据
requestAll()
// requestAll()
if(userStore.token){
getLearnCourse()
}
})
/**
@@ -673,42 +681,47 @@ $border-color: #eeeeee;
box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
border-radius: 10rpx;
margin: 0 10rpx;
display: flex;
align-items: center;
justify-content: space-around;
.cate_item_box {
width: 20%;
padding: 40rpx 0 30rpx;
text-align: center;
.cate_list {
display: flex;
align-items: center;
justify-content: space-around;
.cate_item_border {
width: 60rpx;
height: 60rpx;
background-size: 100% 100%;
background-image: url("@/static/soul/cate_bg.png");
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
.cate_item_box {
width: 20%;
padding: 40rpx 0 30rpx;
image {
width: 46rpx;
height: 46rpx;
}
}
.cate_item_name {
margin-top: 15rpx;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
color: #fff;
font-weight: bold;
}
.cate_item_border {
width: 60rpx;
height: 60rpx;
background-size: 100% 100%;
background-image: url("@/static/soul/cate_bg.png");
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
image {
width: 46rpx;
height: 46rpx;
}
}
.cate_item_name {
margin-top: 15rpx;
font-size: 24rpx;
line-height: 34rpx;
text-align: center;
color: #fff;
font-weight: bold;
}
.child-menu {
display: none;
background-color: #000;
box-shadow: 0 4rpx 12rpx rgba(51, 97, 165, 0.08);
border-radius: 0 0 20rpx 20rpx;
padding: 10rpx 0;
}
}
}
@@ -890,7 +903,6 @@ $border-color: #eeeeee;
.learn {
justify-content: space-between;
margin-top: 20rpx;
flex-wrap: wrap;
.item {
@@ -917,6 +929,7 @@ $border-color: #eeeeee;
.titleBox {
align-items: center;
margin-bottom: 20rpx;
image {
width: 50rpx;

139
pages/index.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div class="menu-container">
<!-- 一级导航 -->
<div class="menu-level-1">
<div
v-for="item in level1"
:key="item.id"
class="menu-item"
:class="{ active: selectedParentId === item.id }"
@click="selectParent(item)"
>
{{ item.name }}
</div>
</div>
<!-- 二级导航区域 -->
<transition name="fade">
<div
v-if="childList.length"
class="menu-level-2"
:style="{ gridRowStart: childRowIndex }"
>
<div
v-for="child in childList"
:key="child.id"
class="menu-item child"
>
{{ child.name }}
</div>
</div>
</transition>
</div>
</template>
<script setup>
import { ref, computed } from "vue"
// 模拟接口返回的一级导航
const level1 = ref([
{ id: 1, name: "导航1", children: [] },
{ id: 2, name: "导航2", children: [
{ id: 21, name: "子2-1" },
{ id: 22, name: "子2-2" },
{ id: 23, name: "子2-3" }
]},
{ id: 3, name: "导航3", children: [] },
{ id: 4, name: "导航4", children: [
{ id: 41, name: "子4-1" },
{ id: 42, name: "子4-2" }
]},
{ id: 5, name: "导航5", children: [] },
{ id: 6, name: "导航6", children: [
{ id: 61, name: "子6-1" },
{ id: 62, name: "子6-2" },
{ id: 63, name: "子6-3" },
{ id: 64, name: "子6-4" },
]},
{ id: 7, name: "导航7", children: [] },
{ id: 8, name: "导航8", children: [] }
])
// 选择的一级导航
const selectedParentId = ref(null)
// 当前一级导航的子级
const childList = computed(() => {
const parent = level1.value.find(i => i.id === selectedParentId.value)
return parent ? parent.children : []
})
// 计算二级导航应该显示在哪一行（每行 4 个）
const childRowIndex = computed(() => {
if (!selectedParentId.value) return 3
const index = level1.value.findIndex(i => i.id === selectedParentId.value)
return Math.floor(index / 4) + 2 // 第一行 row=1，二级导航从 row=2 或 row=3
})
const selectParent = (item) => {
// 点击同一个时关闭
if (selectedParentId.value === item.id) {
selectedParentId.value = null
} else {
selectedParentId.value = item.id
}
}
</script>
<style scoped>
.menu-container {
display: grid;
grid-template-rows: auto auto auto;
gap: 10px;
}
/* 一级导航：4列布局 */
.menu-level-1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.menu-item {
padding: 12px;
text-align: center;
background: #4a90e2;
color: white;
border-radius: 6px;
cursor: pointer;
}
.menu-item.active {
background: #2d73c7;
}
/* 二级导航：自动换行 */
.menu-level-2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
background: #2d73c7;
padding: 10px;
border-radius: 6px;
}
.menu-item.child {
background: #1e4f8a;
}
/* 动画 */
.fade-enter-active, .fade-leave-active {
transition: all .2s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateY(-5px);
}
</style>

36
style/tailwind.css
View File

@@ -217,18 +217,9 @@
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-2\! {
margin-top: calc(var(--spacing) * 2) !important;
}
.mt-2\.5\! {
margin-top: calc(var(--spacing) * 2.5) !important;
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-3\! {
margin-top: calc(var(--spacing) * 3) !important;
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
@@ -238,27 +229,12 @@
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-20\! {
margin-top: calc(var(--spacing) * 20) !important;
}
.mt-\[20rpx\]\! {
margin-top: 20rpx !important;
}
.mr-\[20rpx\] {
margin-right: 20rpx;
}
.mr-\[20rpx\]\! {
margin-right: 20rpx !important;
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
.mb-1\! {
margin-bottom: calc(var(--spacing) * 1) !important;
}
.mb-1\.5\! {
margin-bottom: calc(var(--spacing) * 1.5) !important;
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
@@ -283,12 +259,6 @@
.ml-2\.5\! {
margin-left: calc(var(--spacing) * 2.5) !important;
}
.ml-\[20rpx\] {
margin-left: 20rpx;
}
.ml-\[20rpx\]\! {
margin-left: 20rpx !important;
}
.block {
display: block;
}
@@ -362,9 +332,6 @@
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
@@ -374,9 +341,6 @@
.p-\[20rpx\] {
padding: 20rpx;
}
.p-\[20rpx\]\! {
padding: 20rpx !important;
}
.p-\[30rpx\] {
padding: 30rpx;
}

5
types/course.d.ts vendored
View File

@@ -50,11 +50,6 @@ export interface IMarketCourseListResponse extends IApiResponse {
}
}
/** 消息列表响应 */
export interface IMessageListResponse extends IApiResponse {
messages: INews[] // 消息列表
}
/** 课程详情 */
export interface ICourseDetail {
id: number