feat: 新增文章详情页和悬浮按钮组件

refactor: 优化音频控制逻辑和列表混入代码

fix: 修复H5环境下用户信息存储问题

style: 调整搜索页面样式和分类标签栏

perf: 优化开屏动画在H5环境下的显示逻辑

docs: 更新package.json项目描述

test: 添加视频弹窗组件和文章列表组件

api/modules/home.js

@@ -35,5 +35,22 @@ export default{
       url: '/index/banner',
       method: 'GET',
     })
-  }
+  },
+
+    // 查询文章列表
+  async getArticle() {
+    return http({
+      url: '/index/articleList',
+      method: 'GET',
+    })
+  },
+
+  // 查询文章详情
+  async getArticleDetail(data) {
+    return http({
+      url: '/index/articleDetail',
+      method: 'GET',
+      data
+    })
+  },
 }

components/BookList.vue

@@ -0,0 +1,164 @@
+<template>
+    <view class="book-list">
+        <view v-for="(book, index) in list" :key="index" class="book-item" @click="goToDetail(book)">
+            <view class="book-cover">
+                <image :src="book.booksImg" mode="aspectFill"></image>
+            </view>
+            <view class="book-info">
+                <view class="book-title">{{ book.booksName }}</view>
+                <view class="book-author">{{ book.booksAuthor }}</view>
+                <view class="book-meta">
+                    <view class="book-duration">
+                        <image src="/static/play-icon.png" mode="aspectFill" class="book-icon"></image>
+                        <text>{{ book.duration }}</text>
+                    </view>
+                    <view class="book-membership" :class="classMap[book.vipInfo.title]">
+                        {{ book.vipInfo.title }}
+                    </view>
+                </view>
+            </view>
+        </view>
+        <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"></uv-loading-icon>
+        <uv-empty v-else-if="list.length === 0"></uv-empty>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'BookList',
+    props: {
+        list: {
+            type: Array,
+            default: () => []
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            // 类型映射表
+            classMap: {
+                '蕾朵会员': 'book-membership-premium',
+                '盛放会员': 'book-membership-vip',
+                '萌芽会员': 'book-membership-basic',
+            }
+        }
+    },
+    methods: {
+        goToDetail(book) {
+            uni.navigateTo({
+                url: '/subPages/home/directory?id=' + book.id
+            })
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.book-list {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.book-item {
+    display: flex;
+    align-items: center;
+    background: #F8F8F8;
+    height: 212rpx;
+    gap: 16rpx;
+    border-radius: 16rpx;
+    padding: 0rpx 16rpx;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .book-cover {
+        width: 136rpx;
+        height: 180rpx;
+        border-radius: 16rpx;
+        overflow: hidden;
+        margin-right: 16rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .book-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .book-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: $primary-text-color;
+        line-height: 48rpx;
+        letter-spacing: 0;
+        margin-bottom: 12rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .book-author {
+        font-size: 24rpx;
+        color: $secondary-text-color;
+        margin-bottom: 16rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .book-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .book-duration {
+        display: flex;
+        align-items: center;
+        font-size: 22rpx;
+        color: #999;
+
+        .book-icon {
+            width: 18rpx;
+            height: 18rpx;
+        }
+
+        text {
+            margin-left: 8rpx;
+        }
+    }
+
+    .book-membership {
+        padding: 8rpx 16rpx;
+        border-radius: 8rpx;
+        font-size: 24rpx;
+        color: #211508;
+        flex-shrink: 0;
+    }
+}
+
+.book-membership-premium {
+    background: #E9F1FF;
+    border: 2rpx solid #C4DAFF
+}
+
+.book-membership-vip {
+    background: #FFF4E9;
+    border: 2rpx solid #FFE2C4
+}
+
+.book-membership-basic {
+    background: #FFE9E9;
+    border: 2rpx solid #FFDBC4
+}
+</style>

components/articleList.vue

@@ -0,0 +1,251 @@
+<template>
+    <view class="article-section" v-if="articleList.length > 0">
+        <view class="section-header">
+            <text class="section-title">精选文章</text>
+        </view>
+        <view class="article-list">
+            <view v-for="(article, index) in articleList" :key="article.id" class="article-item"
+                @click="goArticleDetail(article)">
+                <view class="article-content">
+                    <view class="article-title">{{ article.title }}</view>
+                    <view class="article-meta">
+                        <!-- <view class="article-tag">精选</view> -->
+                        <text class="article-time">{{ formatTime(article.createTime) }}</text>
+                    </view>
+                </view>
+                <view class="article-arrow">
+                    <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        articleList: {
+            type: Array,
+            default: () => []
+        },
+    },
+    methods: {
+        goArticleDetail(article) {
+            uni.navigateTo({
+                url: '/subPages/home/articleDetail?id=' + article.id
+            })
+        },
+        formatTime(timeStr) {
+            if (!timeStr) return ''
+
+            // 处理iOS兼容性问题，将 "2025-10-23 16:36:43" 格式转换为 "2025/10/23 16:36:43"
+            let formattedTimeStr = timeStr.replace(/-/g, '/')
+
+            const date = new Date(formattedTimeStr)
+
+            // 检查日期是否有效
+            if (isNaN(date.getTime())) {
+                console.warn('Invalid date format:', timeStr)
+                return timeStr // 返回原始字符串
+            }
+
+            const year = date.getFullYear()
+            const month = String(date.getMonth() + 1).padStart(2, '0')
+            const day = String(date.getDate()).padStart(2, '0')
+            return `${year}-${month}-${day}`
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// 文章列表样式
+.article-section {
+    margin-top: 40rpx;
+    padding: 0 30rpx;
+
+    .article-scroll {
+        white-space: nowrap;
+    }
+
+    .article-list {
+        display: flex;
+        flex-direction: column;
+        padding: 0 20rpx;
+        gap: 24rpx;
+
+        .article-item {
+            flex-shrink: 0;
+            // width: 580rpx;
+            height: 120rpx;
+            background: #f8f9fa;
+            border-radius: 16rpx;
+            padding: 24rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            transition: all 0.3s ease;
+
+            &:active {
+                transform: scale(0.98);
+                background: #f0f1f2;
+            }
+
+            .article-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                gap: 12rpx;
+
+                .article-title {
+                    font-size: 32rpx;
+                    font-weight: 600;
+                    color: $primary-text-color;
+                    line-height: 1.4;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 2;
+                    overflow: hidden;
+                    word-break: break-word;
+                }
+
+                .article-meta {
+                    display: flex;
+                    align-items: center;
+                    gap: 16rpx;
+
+                    .article-tag {
+                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                        color: #fff;
+                        font-size: 20rpx;
+                        padding: 4rpx 12rpx;
+                        border-radius: 12rpx;
+                        font-weight: 500;
+                    }
+
+                    .article-time {
+                        font-size: 24rpx;
+                        color: $secondary-text-color;
+                    }
+                }
+            }
+
+            .article-arrow {
+                margin-left: 16rpx;
+                opacity: 0.6;
+            }
+        }
+    }
+}
+
+// 书本列表样式（从搜索页面复制）
+.book-list-container {
+    background: #fff;
+    min-height: 50vh;
+}
+
+.book-list-results {
+    padding: 32rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.book-list-item {
+    display: flex;
+    align-items: center;
+    background: #F8F8F8;
+    height: 212rpx;
+    gap: 16rpx;
+    border-radius: 16rpx;
+    padding: 0rpx 16rpx;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .book-list-cover {
+        width: 136rpx;
+        height: 180rpx;
+        border-radius: 16rpx;
+        overflow: hidden;
+        margin-right: 16rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .book-list-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .book-list-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: $primary-text-color;
+        line-height: 48rpx;
+        letter-spacing: 0;
+        margin-bottom: 12rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .book-list-author {
+        font-size: 24rpx;
+        color: $secondary-text-color;
+        margin-bottom: 16rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .book-list-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .book-list-duration {
+        display: flex;
+        align-items: center;
+        font-size: 22rpx;
+        color: #999;
+
+        .book-list-icon {
+            width: 18rpx;
+            height: 18rpx;
+        }
+
+        text {
+            margin-left: 8rpx;
+        }
+    }
+
+    .book-list-membership {
+        padding: 8rpx 16rpx;
+        border-radius: 8rpx;
+        font-size: 24rpx;
+        color: #211508;
+    }
+}
+
+.book-membership-premium {
+    background: #E9F1FF;
+    border: 2rpx solid #C4DAFF;
+}
+
+.book-membership-vip {
+    background: #FFF4E9;
+    border: 2rpx solid #FFE2C4;
+}
+
+.book-membership-basic {
+    background: #FFE9E9;
+    border: 2rpx solid #FFDBC4;
+}
+</style>

mixins/list.js

@@ -1,138 +1,138 @@
 // 简化版列表的混入
 export default {
-	data() {
-		return {
-			list: [],
-      pageNo : 1,
-      pageSize : 8,
-      mixinListApi: '',
-      isLoading: false,
-      hasMore: true,
-      // 额外返回出去的数据
-      extraData: null,
-      // 每次更新数据后执行的函数 可以进行数据处理
-      afterUpdateDataFn: function() {},
-      // 每次更新数据前执行的函数，
-      beforeUpdateDataFn: function() {},
-      // 混入配置
-      mixinListConfig: {
-        // 数据返回的直接路径
-        responsePath: 'result.records',
-        // 列表是否需要下拉刷新
-        isPullDownRefresh: true,
-        // 列表是否需要上拉加载
-        isReachBottomLoad: true,
-        // 额外返回出去的数据的路径
-        extraDataPath: '' ,
-        // 自定义onShow
-        customOnShow: false,
-      }
-		}
-	},
-  computed: {
-    // 自定义onShow前会执行的函数
-    mixinFnBeforePageShow() {
-      return function() {}
-    }
-  },
-	methods: {
-    // 获取文件的自定义传参 -- 可以在页面中重写
-    mixinSetParams() {
-      return {}
-    },
-    // 解析分路径获取嵌套值
-    resolvePath(obj, path) {
-      if (path){
-        return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj)
-      }else {
-        return obj
-      }
+    data() {
+        return {
+            list: [],
+            pageNo: 1,
+            pageSize: 8,
+            mixinListApi: '',
+            isLoading: false,
+            hasMore: true,
+            // 额外返回出去的数据
+            extraData: null,
+            // 每次更新数据后执行的函数 可以进行数据处理
+            afterUpdateDataFn: function () { },
+            // 每次更新数据前执行的函数，
+            beforeUpdateDataFn: function () { },
+            // 混入配置
+            mixinListConfig: {
+                // 数据返回的直接路径
+                responsePath: 'result.records',
+                // 列表是否需要下拉刷新
+                isPullDownRefresh: true,
+                // 列表是否需要上拉加载
+                isReachBottomLoad: true,
+                // 额外返回出去的数据的路径
+                extraDataPath: '',
+                // 自定义onShow
+                customOnShow: false,
+            }
+        }
     },
-    // 初始化分页
-    initPage(){
-      this.pageNo = 1,
-      this.hasMore = true
+    computed: {
+        // 自定义onShow前会执行的函数
+        mixinFnBeforePageShow() {
+            return function () { }
+        }
     },
-    // 获取列表
-    async getList(isRefresh = false) {
-      // console.log('本次请求的pageNo和pageSize', this.pageNo, this.pageSize)
+    methods: {
+        // 获取文件的自定义传参 -- 可以在页面中重写
+        mixinSetParams() {
+            return {}
+        },
+        // 解析分路径获取嵌套值
+        resolvePath(obj, path) {
+            if (path) {
+                return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : null), obj)
+            } else {
+                return obj
+            }
+        },
+        // 初始化分页
+        initPage() {
+            this.pageNo = 1
+            this.hasMore = true
+        },
+        // 获取列表
+        async getList(isRefresh = false) {
+            // console.log('本次请求的pageNo和pageSize', this.pageNo, this.pageSize)
 
-      if (!this.hasMore) {
-        return
-      }
-      this.isLoading = true
-      const apiMethod = this.resolvePath(this.$api, this.mixinListApi)
-      if (typeof apiMethod !== 'function') {
-        console.log('mixinApi不存在', this.mixinListApi);
-        return
-      }
-      // 每次更新数据前执行的函数
-      if (this.beforeUpdateDataFn) {
-        this.beforeUpdateDataFn(this.list)
-      }
-      
-      const res = await apiMethod({
-        pageNo: this.pageNo,
-        pageSize: this.pageSize,
-        ...this.mixinSetParams()
-      })
-      const resData = this.resolvePath(res, this.mixinListConfig.responsePath) || []
-      if (res.code === 200) {
-        // 如果没有值了
-        if (!resData.length) {
-          this.hasMore = false
-          // uni.showToast({
-          //   title: '暂无更多数据',
-          //   icon: 'none'
-          // })
-        }else {
-          this.pageNo++
-        }
+            if (!this.hasMore) {
+                return
+            }
+            this.isLoading = true
+            const apiMethod = this.resolvePath(this.$api, this.mixinListApi)
+            if (typeof apiMethod !== 'function') {
+                console.log('mixinApi不存在', this.mixinListApi);
+                return
+            }
+            // 每次更新数据前执行的函数
+            if (this.beforeUpdateDataFn) {
+                this.beforeUpdateDataFn(this.list)
+            }
 
-        if (isRefresh ) {
-          // 如果是刷新，直接覆盖
-          this.list = resData
-          
-        } else {
-          this.list = [...this.list, ...resData]
-        }
+            const res = await apiMethod({
+                pageNo: this.pageNo,
+                pageSize: this.pageSize,
+                ...this.mixinSetParams()
+            })
+            const resData = this.resolvePath(res, this.mixinListConfig.responsePath) || []
+            if (res.code === 200) {
+                // 如果没有值了
+                if (!resData.length) {
+                    this.hasMore = false
+                    // uni.showToast({
+                    //   title: '暂无更多数据',
+                    //   icon: 'none'
+                    // })
+                } else {
+                    this.pageNo++
+                }
+
+                if (isRefresh) {
+                    // 如果是刷新，直接覆盖
+                    this.list = resData
 
-        // 如果有额外数据的路径，刷新后，需要将额外数据也刷新
-        if (this.mixinListConfig.extraDataPath !== '') {
-          this.extraData = this.resolvePath(res, this.mixinListConfig.extraDataPath)
+                } else {
+                    this.list = [...this.list, ...resData]
+                }
+
+                // 如果有额外数据的路径，刷新后，需要将额外数据也刷新
+                if (this.mixinListConfig.extraDataPath !== '') {
+                    this.extraData = this.resolvePath(res, this.mixinListConfig.extraDataPath)
+                }
+            }
+            // 每次更新数据后执行的函数
+            if (this.afterUpdateDataFn) {
+                this.afterUpdateDataFn(this.list)
+            }
+            // 如果有在加载中
+            if (this.isLoading) {
+                this.isLoading = false
+            }
+            // 有过有在下拉加载
+            uni.stopPullDownRefresh()
+        },
+    },
+    async onShow() {
+        if (!this.mixinListConfig.customOnShow) {
+            if (this.mixinFnBeforePageShow) this.mixinFnBeforePageShow()
+            this.initPage()
+            await this.getList(true)
         }
-      }
-      // 每次更新数据后执行的函数
-      if (this.afterUpdateDataFn) {
-        this.afterUpdateDataFn(this.list)
-      }
-      // 如果有在加载中
-      if (this.isLoading) {
-        this.isLoading = false
-      }
-      // 有过有在下拉加载
-      uni.stopPullDownRefresh()
     },
-	},
-  async onShow() {
-    if (!this.mixinListConfig.customOnShow) {
-      if (this.mixinFnBeforePageShow) this.mixinFnBeforePageShow()
-      this.initPage()
-      await this.getList(true)
-    }
-  },
-  async onPullDownRefresh() {
-    // 在下拉还没结束前 不做任何操作
-    if (this.isLoading) {
-      return
-    }
-    this.initPage()
-    await this.getList(true)
-  },
-  async onReachBottom() {
-    if (this.isLoading) {
-      return
+    async onPullDownRefresh() {
+        // 在下拉还没结束前 不做任何操作
+        if (this.isLoading) {
+            return
+        }
+        this.initPage()
+        await this.getList(true)
+    },
+    async onReachBottom() {
+        if (this.isLoading) {
+            return
+        }
+        await this.getList()
     }
-    await this.getList()
-  }
 }

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "englishread-front",
+  "version": "1.0.0",
+  "description": "四零语境",
+  "main": "main.js",
+  "scripts": {
+    "dev:h5": "uni build --platform h5 --watch",
+    "build:h5": "uni build --platform h5",
+    "serve": "uni serve"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "^2.0.0",
+    "@dcloudio/uni-h5": "^2.0.0",
+    "@dcloudio/uni-helper-json": "*"
+  },
+  "devDependencies": {
+    "@dcloudio/uni-cli-shared": "*",
+    "@dcloudio/webpack-uni-mp-loader": "*",
+    "@dcloudio/webpack-uni-pages-loader": "*"
+  },
+  "browserslist": [
+    "Android >= 4.4",
+    "ios >= 9"
+  ]
+}

pages.json

@@ -197,6 +197,13 @@
 						// #endif
 						"navigationBarTitleText": "分享"
 					}
+				},
+				{
+					"path": "home/articleDetail",
+					"style": {
+						"navigationStyle": "custom",
+						"navigationBarTitleText": "文章详情"
+					}
 				}
 			]
 		}

pages/components/SplashScreen.vue

@@ -79,9 +79,50 @@ export default {
     this.clearTimer()
   },
   methods: {
-    // 初始化開動頁面
+    // 檢查是否為H5环境
+    isH5() {
+      // #ifdef H5
+      return true
+      // #endif
+      // #ifndef H5
+      return false
+      // #endif
+    },
+    
+    // 檢查是否已显示过开屏
+    hasShownSplash() {
+      if (this.isH5()) {
+        try {
+          return sessionStorage.getItem('splash_shown') === 'true'
+        } catch (error) {
+          console.error('读取sessionStorage失败:', error)
+          return false
+        }
+      }
+      return false
+    },
+    
+    // 设置开屏已显示标记
+    setSplashShown() {
+      if (this.isH5()) {
+        try {
+          sessionStorage.setItem('splash_shown', 'true')
+        } catch (error) {
+          console.error('设置sessionStorage失败:', error)
+        }
+      }
+    },
+    
+    // 初始化开动頁面
     async initSplash() {
       try {
+        // 在H5环境下检查是否已显示过开屏
+        if (this.hasShownSplash()) {
+          console.log('开屏已显示过，跳过开屏动画')
+          this.$emit('close')
+          return
+        }
+        
         // 等待一小段時間確保 store 數據加載完成
         await this.$nextTick()
         
@@ -130,6 +171,10 @@ export default {
     // 關閉開動頁面
     closeSplash() {
       this.showSplash = false
+      
+      // 在H5环境下设置开屏已显示标记
+      this.setSplashShown()
+      
       uni.showTabBar({
         animation: true
       })

pages/components/VideoPopup.vue

@@ -0,0 +1,113 @@
+<template>
+  <uv-popup 
+    ref="videoModal"
+    title="视频播放"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    :close-on-click-overlay="true"
+    :safeAreaInsetBottom="false"
+    @close="handleClose"
+  >
+    <template #default>
+      <view class="video-container">
+        <video 
+          v-if="currentVideo"
+          :src="currentVideo"
+          controls
+          autoplay
+          :show-fullscreen-btn="true"
+          :show-play-btn="true"
+          :show-center-play-btn="true"
+          style="width: 100%; height: 400rpx; border-radius: 8rpx;"
+          @error="onVideoError"
+          @play="onVideoPlay"
+          @pause="onVideoPause"
+        ></video>
+        <view v-else class="video-loading">
+          <text>视频加载中...</text>
+        </view>
+      </view>
+    </template>
+  </uv-popup>
+</template>
+
+<script>
+export default {
+  name: 'VideoPopup',
+  data() {
+    return {
+      currentVideo: ''
+    }
+  },
+  methods: {
+    // 打开视频弹窗
+    open(videoUrl) {
+      if (videoUrl) {
+        this.currentVideo = videoUrl
+        this.$refs.videoModal.open()
+      } else {
+        uni.showToast({
+          title: '视频地址无效',
+          icon: 'error'
+        })
+      }
+    },
+    
+    // 关闭视频弹窗
+    close() {
+      this.$refs.videoModal.close()
+      this.currentVideo = ''
+    },
+    
+    // 处理弹窗关闭事件
+    handleClose() {
+      this.currentVideo = ''
+      this.$emit('close')
+    },
+    
+    // 视频错误处理
+    onVideoError(e) {
+      console.error('视频播放错误:', e)
+      uni.showToast({
+        title: '视频播放失败',
+        icon: 'error'
+      })
+      this.close()
+      this.$emit('error', e)
+    },
+    
+    // 视频开始播放
+    onVideoPlay() {
+      console.log('视频开始播放')
+      this.$emit('play')
+    },
+    
+    // 视频暂停
+    onVideoPause() {
+      console.log('视频暂停播放')
+      this.$emit('pause')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.video-container {
+  position: relative;
+  width: 90vw;
+  
+  .video-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 400rpx;
+    background: #f5f5f5;
+    border-radius: 8rpx;
+    
+    text {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+}
+</style>

stores/index.js

@@ -9,134 +9,134 @@ import share from '@/utils/share.js'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-  state: {
-    // 存放状态
-    configList: [],
-    departmentList: [],
-    categoryList: [],
-    userInfo:{},
-    Qrcode: ''
-  },
-  mutations: {
-    // 构造用于uv-picker的树状结构数组
-    setCategoryList(state, data) {
-      // 将返回的平面数组data 根据pid和hasChild组装成两个数组，其一为pid为0的父级一维数组，其二为pid不为0的子级二维数组，其中pid相同的排一起 不同的分为不同子数组，并且按顺序排序，比如第一个为[中国，美国] 第二个按顺序为[[上海，福建],[纽约,华盛顿]]
-      
-      // 分离父级和子级数据
-      const parentCategories = data.filter(item => item.pid === 0 || item.pid === '0')
-      const childCategories = data.filter(item => item.pid !== 0 && item.pid !== '0')
-      
-      // 构建父级一维数组
-      const parentArray = parentCategories.map((item) => {
-        return {
-          label: item.name || item.title || item.categoryName,
-          value: item.id
-        }
-      })
-      
-      // 构建子级二维数组
-      const childArray = []
-      parentCategories.forEach(parent => {
-        const children = childCategories
-          .filter(child => child.pid === parent.id)
-          .map(child => {
-            return {
-              label: child.name || child.title || child.categoryName,
-              value: child.id
-            }
-          })
-        childArray.push(children.length > 0 ? children : [{
-          label: '全部',
-          value: 0
-        }])
-      })
-      
-      // 组装最终结果
-      state.categoryList = [parentArray, childArray]
-      
-    },
-    setConfigList(state, data) {
-      state.configList = data
-    },
-    setDepartmentList(state, data) {
-      state.departmentList = data
-    },
-    setUserInfo(state, data) {
-      state.userInfo = data
-	  // #ifdef H5
-	  localStorage.setItem('userInfo', JSON.stringify(data))
-	  share()
-	  // #endif
-    },
-    setQrcode(state, data) {
-      state.Qrcode = data
+    state: {
+        // 存放状态
+        configList: [],
+        departmentList: [],
+        categoryList: [],
+        userInfo: {},
+        Qrcode: ''
     },
-    // 
-  },
-  actions: {
-    // 查询配置列表
-    async getConfig({ commit }) {
-      const res = await api.config.queryConfigList()
-      // 要求变成键值对的样子
-      const config = res.result.reduce((acc, item) => {
-        if (!item.code) {
-          console.log('code为空', item);
-          return acc
-        }
-        acc[item.code] = item
-        return acc
-      }, {})
-      console.log('configList列表为：', config);
-      
-      // 事先永久存儲首屏圖片的數據
-      if (config.creen_image) {
-        uni.setStorageSync('screen_image', config.creen_image.content)
-      }
-      if (config.login_logo) {
-        uni.setStorageSync('login_logo', config.login_logo.content)
-      }
+    mutations: {
+        // 构造用于uv-picker的树状结构数组
+        setCategoryList(state, data) {
+            // 将返回的平面数组data 根据pid和hasChild组装成两个数组，其一为pid为0的父级一维数组，其二为pid不为0的子级二维数组，其中pid相同的排一起 不同的分为不同子数组，并且按顺序排序，比如第一个为[中国，美国] 第二个按顺序为[[上海，福建],[纽约,华盛顿]]
 
-      commit('setConfigList', config)
-	  
-		// #ifdef H5
-		share()
-		// #endif
-    },
-    // 查询部门列表
-    async getDepartment({ commit }) {
-      const res = await api.config.queryDepartmentList()
-      commit('setDepartmentList', res.result.records)
-    },
-    // 获取分类列表
-    async getCategory({ commit }) {
-      const res = await api.config.queryCategoryList()
-      commit('setCategoryList', res.result.records)
-    },
-    // 初始化数据
-    async initData({ dispatch, state }) {
-      // 检查是否已初始化
-      if (state.configList.length > 0) {
+            // 分离父级和子级数据
+            const parentCategories = data.filter(item => item.pid === 0 || item.pid === '0')
+            const childCategories = data.filter(item => item.pid !== 0 && item.pid !== '0')
 
-        console.log('配置数据已初始化，无需重复初始化')
-        return
-      }
+            // 构建父级一维数组
+            const parentArray = parentCategories.map((item) => {
+                return {
+                    label: item.name || item.title || item.categoryName,
+                    value: item.id
+                }
+            })
 
-      try {
-        await Promise.all([
-          dispatch('getConfig'),
-          // dispatch('getDepartment'),
-          // dispatch('getCategory'),
-          ])
-        console.log('所有配置数据初始化完成')
-      } catch (error) {
-        console.error('配置数据初始化失败:', error)
-      }
-    },
-    // 更新/存儲用戶最新數據
-    updateUserInfo({ commit }, userInfo) {
-      commit('setUserInfo', userInfo)
+            // 构建子级二维数组
+            const childArray = []
+            parentCategories.forEach(parent => {
+                const children = childCategories
+                    .filter(child => child.pid === parent.id)
+                    .map(child => {
+                        return {
+                            label: child.name || child.title || child.categoryName,
+                            value: child.id
+                        }
+                    })
+                childArray.push(children.length > 0 ? children : [{
+                    label: '全部',
+                    value: 0
+                }])
+            })
+
+            // 组装最终结果
+            state.categoryList = [parentArray, childArray]
+
+        },
+        setConfigList(state, data) {
+            state.configList = data
+        },
+        setDepartmentList(state, data) {
+            state.departmentList = data
+        },
+        setUserInfo(state, data) {
+            state.userInfo = data
+            // #ifdef H5
+            uni.setStorageSync('userInfo', data)
+            share()
+            // #endif
+        },
+        setQrcode(state, data) {
+            state.Qrcode = data
+        },
+        // 
     },
-  }
+    actions: {
+        // 查询配置列表
+        async getConfig({ commit }) {
+            const res = await api.config.queryConfigList()
+            // 要求变成键值对的样子
+            const config = res.result.reduce((acc, item) => {
+                if (!item.code) {
+                    console.log('code为空', item);
+                    return acc
+                }
+                acc[item.code] = item
+                return acc
+            }, {})
+            console.log('configList列表为：', config);
+
+            // 事先永久存儲首屏圖片的數據
+            if (config.creen_image) {
+                uni.setStorageSync('screen_image', config.creen_image.content)
+            }
+            if (config.login_logo) {
+                uni.setStorageSync('login_logo', config.login_logo.content)
+            }
+
+            commit('setConfigList', config)
+
+            // #ifdef H5
+            share()
+            // #endif
+        },
+        // 查询部门列表
+        async getDepartment({ commit }) {
+            const res = await api.config.queryDepartmentList()
+            commit('setDepartmentList', res.result.records)
+        },
+        // 获取分类列表
+        async getCategory({ commit }) {
+            const res = await api.config.queryCategoryList()
+            commit('setCategoryList', res.result.records)
+        },
+        // 初始化数据
+        async initData({ dispatch, state }) {
+            // 检查是否已初始化
+            if (state.configList.length > 0) {
+
+                console.log('配置数据已初始化，无需重复初始化')
+                return
+            }
+
+            try {
+                await Promise.all([
+                    dispatch('getConfig'),
+                    // dispatch('getDepartment'),
+                    // dispatch('getCategory'),
+                ])
+                console.log('所有配置数据初始化完成')
+            } catch (error) {
+                console.error('配置数据初始化失败:', error)
+            }
+        },
+        // 更新/存儲用戶最新數據
+        updateUserInfo({ commit }, userInfo) {
+            commit('setUserInfo', userInfo)
+        },
+    }
 })
 
 export default store

subPages/home/AudioControls.vue

@@ -19,7 +19,7 @@
                 <text class="loading-indicator-text">正在加载更多音频...</text>
             </view>
 
-            <view class="audio-time">
+            <!-- <view class="audio-time">
                 <text class="time-text">{{ formatTime(currentTime) }}</text>
                 <view class="progress-container">
                     <uv-slider v-model="sliderValue" :min="0" :max="totalTime" :step="0.1" activeColor="#06DADC"
@@ -27,7 +27,7 @@
                         :customStyle="{ flex: 1, margin: '0 10px' }" />
                 </view>
                 <text class="time-text">{{ formatTime(totalTime) }}</text>
-            </view>
+            </view> -->
 
             <view class="audio-controls-row">
                 <view class="control-btn" @click="toggleLoop">
@@ -260,7 +260,7 @@ export default {
                 if (currentPageData && !oldCurrentPageData && this.shouldLoadAudio && this.courseId) {
                     console.log(`🎵 bookPages监听: 当前页面数据已加载，自动获取音频，页面=${this.currentPage}`);
                     this.$nextTick(() => {
-                        this.getCurrentPageAudio();
+                        this.getCurrentPageAudio(true); // 启用自动播放
                     });
                 }
             },
@@ -292,7 +292,7 @@ export default {
             const cachedAudio = this.audioCache[pageKey];
 
             if (cachedAudio && cachedAudio.audios && cachedAudio.audios.length > 0) {
-                // 有缓存：直接显示控制栏
+                // 有缓存：直接显示控制栏并自动播放
                 this.currentPageAudios = cachedAudio.audios;
                 this.totalTime = cachedAudio.totalDuration || 0;
                 this.hasAudioData = true;
@@ -309,10 +309,21 @@ export default {
                     isLoading: false,
                     currentHighlightIndex: -1
                 });
+
+                // 自动播放缓存的音频
+                this.$nextTick(() => {
+                    if (this.currentPageAudios.length > 0 && !this.isVoiceChanging) {
+                        const firstAudioData = this.currentPageAudios[0];
+                        console.log(`🎵 自动播放缓存音频: ${firstAudioData.url}`);
+                        audioManager.playAudio(firstAudioData.url, 'sentence', { playbackRate: this.playSpeed });
+                        this.isPlaying = true;
+                        this.updateHighlightIndex();
+                    }
+                });
             } else {
                 // 没有缓存：自动开始加载音频
                 console.log(`🎵 checkAndLoadPreloadedAudio: 无缓存，开始加载音频，页面=${this.currentPage}`);
-                this.getCurrentPageAudio();
+                this.getCurrentPageAudio(true); // 启用自动播放
             }
         },
 

subPages/home/articleDetail.vue

@@ -0,0 +1,385 @@
+<template>
+    <view class="article-detail">
+        <!-- 导航栏 -->
+        <!-- #ifndef H5 -->
+        <uv-navbar :placeholder="true" left-icon="arrow-left" :title="articleData.title || '文章详情'"
+            @leftClick="goBack"></uv-navbar>
+        <!-- #endif -->
+
+        <!-- 文章内容 -->
+        <view class="article-container" v-if="articleData.id">
+            <!-- 文章标题 -->
+            <view class="article-title">{{ articleData.title }}</view>
+
+            <!-- 文章信息 -->
+            <view class="article-info">
+                <text class="article-time">{{ formatTime(articleData.createTime) }}</text>
+                <!-- <text class="article-author">{{ articleData.createBy }}</text> -->
+            </view>
+
+            <!-- 文章内容 -->
+            <view class="article-content">
+                <uv-parse :content="articleData.content"/>
+            </view>
+        </view>
+
+        <!-- 加载状态 -->
+        <view class="loading-container" v-else-if="loading">
+            <uv-loading-icon mode="circle"></uv-loading-icon>
+            <text class="loading-text">加载中...</text>
+        </view>
+
+        <!-- 音频播放悬浮按钮 -->
+        <view class="audio-float-button" v-if="hasAudio && articleData.id" @click="toggleAudio">
+            <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="50"
+                :color="isPlaying ? '#ff6b6b' : '#4CAF50'"></uv-icon>
+        </view>
+
+    </view>
+</template>
+
+<script>
+import audioManager from '@/utils/audioManager.js'
+
+export default {
+    data() {
+        return {
+            articleId: '',
+            articleData: {},
+            loading: true,
+            isPlaying: false,
+            audioUrl: '',
+            hasAudio: false
+        }
+    },
+
+    onLoad(options) {
+        if (options.id) {
+            this.articleId = options.id
+            this.getArticleDetail()
+        }
+        
+        // 绑定音频管理器事件监听
+        this.bindAudioEvents()
+    },
+
+    onUnload() {
+        // 页面卸载时清理音频资源和事件监听
+        this.stopAudio()
+        this.unbindAudioEvents()
+    },
+
+    methods: {
+        // 绑定音频管理器事件监听
+        bindAudioEvents() {
+            audioManager.on('play', this.onAudioPlay)
+            audioManager.on('pause', this.onAudioPause)
+            audioManager.on('ended', this.onAudioEnded)
+            audioManager.on('error', this.onAudioError)
+        },
+
+        // 解绑音频管理器事件监听
+        unbindAudioEvents() {
+            audioManager.off('play', this.onAudioPlay)
+            audioManager.off('pause', this.onAudioPause)
+            audioManager.off('ended', this.onAudioEnded)
+            audioManager.off('error', this.onAudioError)
+        },
+
+        // 音频播放开始事件
+        onAudioPlay(data) {
+            if (data.audioType === 'article') {
+                this.isPlaying = true
+                console.log('文章音频开始播放')
+            }
+        },
+
+        // 音频暂停事件
+        onAudioPause(data) {
+            if (data.audioType === 'article') {
+                this.isPlaying = false
+                console.log('文章音频暂停播放')
+            }
+        },
+
+        // 音频播放结束事件
+        onAudioEnded(data) {
+            if (data.audioType === 'article') {
+                this.isPlaying = false
+                console.log('文章音频播放结束')
+            }
+        },
+
+        // 音频播放错误事件
+        onAudioError(data) {
+            if (data.audioType === 'article') {
+                this.isPlaying = false
+                console.error('文章音频播放错误:', data.error)
+                uni.showToast({
+                    title: '音频播放失败',
+                    icon: 'none'
+                })
+            }
+        },
+
+        // 返回上一页
+        goBack() {
+            uni.navigateBack()
+        },
+
+        // 获取文章详情
+        async getArticleDetail() {
+            try {
+                this.loading = true
+                const res = await this.$api.home.getArticleDetail({ id: this.articleId })
+
+                if (res.code === 200) {
+                    this.articleData = res.result
+
+                    // #ifdef H5
+                    window.document.title = this.articleData.title || '文章详情'
+                    // #endif
+
+                    // 处理音频数据
+                    if (res.result.audios && Object.keys(res.result.audios).length > 0) {
+                        // 获取第一个音频URL
+                        const audioKeys = Object.keys(res.result.audios)
+                        this.audioUrl = res.result.audios[audioKeys[0]]
+                        this.hasAudio = true
+                    }
+                } else {
+                    uni.showToast({
+                        title: res.message || '获取文章详情失败',
+                        icon: 'none'
+                    })
+                }
+            } catch (error) {
+                console.error('获取文章详情失败:', error)
+                uni.showToast({
+                    title: '网络错误，请重试',
+                    icon: 'none'
+                })
+            } finally {
+                this.loading = false
+            }
+        },
+
+        // 切换音频播放状态
+        toggleAudio() {
+            if (!this.audioUrl) {
+                console.error('音频URL为空')
+                return
+            }
+
+            try {
+                if (this.isPlaying) {
+                    // 暂停音频
+                    this.pauseAudio()
+                } else {
+                    // 播放音频
+                    this.playAudio()
+                }
+            } catch (error) {
+                console.error('音频播放切换异常:', error)
+                this.isPlaying = false
+            }
+        },
+
+        // 播放音频
+        async playAudio() {
+            if (!this.audioUrl) {
+                console.error('音频URL为空')
+                return
+            }
+
+            try {
+                // 使用audioManager播放音频，指定音频类型为'article'
+                await audioManager.playAudio(this.audioUrl, 'article')
+                console.log('开始播放文章音频:', this.audioUrl)
+            } catch (error) {
+                console.error('音频播放异常:', error)
+                this.isPlaying = false
+                uni.showToast({
+                    title: '音频播放失败',
+                    icon: 'none'
+                })
+            }
+        },
+
+        // 暂停音频
+        pauseAudio() {
+            try {
+                audioManager.pause()
+                console.log('暂停文章音频')
+            } catch (error) {
+                console.error('暂停音频失败:', error)
+            }
+        },
+
+        // 停止音频
+        stopAudio() {
+            try {
+                audioManager.stopCurrentAudio()
+                this.isPlaying = false
+                console.log('停止文章音频')
+            } catch (error) {
+                console.error('停止音频失败:', error)
+            }
+        },
+
+        // 格式化时间
+        formatTime(timeStr) {
+            if (!timeStr) return ''
+
+            // 处理iOS兼容性问题，将 "2025-10-23 16:36:43" 格式转换为 "2025/10/23 16:36:43"
+            let formattedTimeStr = timeStr.replace(/-/g, '/')
+
+            const date = new Date(formattedTimeStr)
+
+            // 检查日期是否有效
+            if (isNaN(date.getTime())) {
+                console.warn('Invalid date format:', timeStr)
+                return timeStr // 返回原始字符串
+            }
+
+            const year = date.getFullYear()
+            const month = String(date.getMonth() + 1).padStart(2, '0')
+            const day = String(date.getDate()).padStart(2, '0')
+            return `${year}-${month}-${day}`
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.article-detail {
+    min-height: 100vh;
+    background: #fff;
+}
+
+.article-container {
+    padding: 30rpx;
+}
+
+.article-title {
+    font-size: 40rpx;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
+    margin-bottom: 30rpx;
+}
+
+.article-info {
+    display: flex;
+    align-items: center;
+    gap: 30rpx;
+    margin-bottom: 40rpx;
+    padding-bottom: 30rpx;
+    border-bottom: 1px solid #f0f0f0;
+
+    .article-time {
+        font-size: 26rpx;
+        color: #999;
+    }
+
+    .article-author {
+        font-size: 26rpx;
+        color: #666;
+
+        &::before {
+            content: '作者：';
+        }
+    }
+}
+
+.article-content {
+    font-size: 32rpx;
+    line-height: 1.8;
+    color: #333;
+
+    // 富文本内容样式
+    :deep(.rich-text) {
+        p {
+            margin-bottom: 20rpx;
+            line-height: 1.8;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8rpx;
+            margin: 20rpx 0;
+        }
+
+        section {
+            margin: 20rpx 0;
+        }
+    }
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 400rpx;
+
+    .loading-text {
+        margin-top: 20rpx;
+        font-size: 28rpx;
+        color: #999;
+    }
+}
+
+// 音频播放悬浮按钮
+.audio-float-button {
+    position: fixed;
+    right: 30rpx;
+    bottom: 100rpx;
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 999;
+    transition: all 0.3s ease;
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    // 添加呼吸动画效果
+    &::before {
+        content: '';
+        position: absolute;
+        top: -10rpx;
+        left: -10rpx;
+        right: -10rpx;
+        bottom: -10rpx;
+        border-radius: 50%;
+        background: rgba(76, 175, 80, 0.2);
+        animation: pulse 2s infinite;
+        z-index: -1;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    50% {
+        transform: scale(1.1);
+        opacity: 0.7;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+</style>

subPages/home/book.vue

@@ -129,6 +129,14 @@
         <!-- 释义弹出窗 -->
         <MeaningPopup :style="{ zIndex: 10000 }" :current-word-meaning="currentWordMeaning"
             @close-meaning-popup="closeMeaningPopup" @repeat-word-audio="repeatWordAudio" ref="meaningPopup" />
+
+        <!-- 悬浮按钮组件 -->
+        <FloatingButtons 
+            :is-last-page="isLastPage" 
+            :has-next-course="hasNextCourse"
+            @next-course="goToNextCourse"
+            @back-to-start="backToStart"
+        />
     </view>
 </template>
 
@@ -137,6 +145,7 @@ import AudioControls from './AudioControls.vue'
 import CustomTabbar from './components/CustomTabbar.vue'
 import CoursePopup from './components/CoursePopup.vue'
 import MeaningPopup from './components/MeaningPopup.vue'
+import FloatingButtons from './components/FloatingButtons.vue'
 import audioManager from '@/utils/audioManager.js'
 
 export default {
@@ -144,7 +153,8 @@ export default {
         AudioControls,
         CustomTabbar,
         CoursePopup,
-        MeaningPopup
+        MeaningPopup,
+        FloatingButtons
     },
     data() {
         return {
@@ -153,7 +163,7 @@ export default {
             voiceId: null,
             courseId: '',
             showNavbar: true,
-            currentPage: 1,
+            currentPage: 1, // 当前页面索引
             currentCourse: 1, // 当前课程索引
             currentWordMeaning: null, // 当前显示的单词释义
             isReversed: false, // 是否倒序显示
@@ -252,6 +262,19 @@ export default {
         // 当前页面是否需要会员
         currentPageRequiresMember() {
             return this.pagePay[this.currentPage - 1] === 'Y';
+        },
+
+        // 判断是否为当前课程的最后一页
+        isLastPage() {
+            return this.currentPage === this.bookPages.length;
+        },
+
+        // 判断是否有下一课
+        hasNextCourse() {
+            if (!this.courseList || this.courseList.length === 0) return false;
+            // 使用 courseId 而不是 currentCourse，因为 courseId 是当前正在学习的课程ID
+            const currentCourseIndex = this.courseList.findIndex(course => course.id == this.courseId);
+            return currentCourseIndex >= 0 && currentCourseIndex < this.courseList.length - 1;
         }
     },
     // watch: {
@@ -918,6 +941,7 @@ export default {
         },
         selectCourse(courseId) {
             this.currentCourse = courseId
+            this.courseId = courseId  // 同时更新 courseId
             // 这里可以添加切换课程的逻辑
             // console.log('选择课程:', courseId)
             this.getCourseList(courseId)
@@ -1423,6 +1447,72 @@ export default {
                 url: '/subPages/member/recharge'
             })
         },
+
+        // 跳转到下一课
+        async goToNextCourse() {
+            if (!this.hasNextCourse) {
+                uni.showToast({
+                    title: '已经是最后一课了',
+                    icon: 'none',
+                    duration: 2000
+                });
+                return;
+            }
+
+            try {
+                // 找到当前课程在课程列表中的索引
+                const currentCourseIndex = this.courseList.findIndex(course => course.id == this.courseId);
+                if (currentCourseIndex >= 0 && currentCourseIndex < this.courseList.length - 1) {
+                    // 获取下一课的ID
+                    const nextCourse = this.courseList[currentCourseIndex + 1];
+                    console.log('跳转到下一课:', nextCourse);
+                    
+                    // 切换到下一课
+                    await this.selectCourse(nextCourse.id);
+                    
+                    uni.showToast({
+                        title: `已切换到第${currentCourseIndex + 2}课`,
+                        icon: 'success',
+                        duration: 2000
+                    });
+                }
+            } catch (error) {
+                console.error('跳转下一课失败:', error);
+                uni.showToast({
+                    title: '跳转失败，请重试',
+                    icon: 'none',
+                    duration: 2000
+                });
+            }
+        },
+
+        // 回到开始（当前课程的第一页）
+        async backToStart() {
+            try {
+                // 回到当前课程的第一页
+                this.currentPage = 1;
+                console.log('回到开始，跳转到第一页');
+                
+                // 获取第一页的数据（如果还没有获取过）
+                if (this.courseIdList[0] && this.bookPages[0].length === 0) {
+                    await this.getBookPages(this.courseIdList[0]);
+                }
+                
+                uni.showToast({
+                    title: '已回到第一页',
+                    icon: 'success',
+                    duration: 2000
+                });
+            } catch (error) {
+                console.error('回到开始失败:', error);
+                uni.showToast({
+                    title: '操作失败，请重试',
+                    icon: 'none',
+                    duration: 2000
+                });
+            }
+        },
+
         async goToPage(page) {
             this.currentPage = page
             console.log('跳转到页面:', page)
@@ -1714,6 +1804,7 @@ export default {
         })
 
         this.courseId = args.courseId
+        this.currentCourse = args.courseId  // 同时设置 currentCourse
         this.memberId = args.memberId
 
         // 先获取点进来的课程的页面列表

subPages/home/components/CoursePopup.vue

@@ -25,7 +25,7 @@
           @click="selectCourse(course.id)"
         >
           <view class="course-number" :class="{ 'highlight': course.id === currentCourse }">
-            {{ String(course.index).padStart(2, '0') }}
+            {{ String(course.index + 1).padStart(2, '0') }}
           </view>
           <view class="course-content">
             <view class="course-english" :class="{ 'highlight': course.id === currentCourse }">

subPages/home/components/FloatingButtons.vue

@@ -0,0 +1,147 @@
+<template>
+    <!-- 悬浮按钮 - 只在最后一页显示 -->
+    <div v-if="isLastPage" class="floating-buttons">
+        <button 
+            v-if="hasNextCourse" 
+            class="floating-button next-lesson" 
+            @click="handleNextCourse"
+        >
+            <span class="floating-button-text">下一课</span>
+        </button>
+        <button 
+            class="floating-button back-to-start" 
+            @click="handleBackToStart"
+        >
+            <span class="floating-button-text">回到开始</span>
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FloatingButtons',
+    props: {
+        // 是否为最后一页
+        isLastPage: {
+            type: Boolean,
+            default: false
+        },
+        // 是否有下一课
+        hasNextCourse: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        // 跳转到下一课
+        handleNextCourse() {
+            this.$emit('next-course');
+        },
+        // 回到开始
+        handleBackToStart() {
+            this.$emit('back-to-start');
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* 悬浮按钮样式 */
+.floating-buttons {
+    position: fixed;
+    top: 50%;
+    right: 30rpx;
+    transform: translateY(-50%);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+}
+
+.floating-button {
+    width: 180rpx;
+    height: 88rpx;
+    background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 6rpx 24rpx rgba(6, 218, 220, 0.25);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: none;
+    outline: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.floating-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-radius: 44rpx;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.floating-button:hover::before {
+    opacity: 1;
+}
+
+.floating-button:active {
+    transform: scale(0.96);
+    box-shadow: 0 3rpx 12rpx rgba(6, 218, 220, 0.35);
+}
+
+.floating-button-text {
+    font-family: PingFang SC, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-weight: 600;
+    font-size: 26rpx;
+    color: #FFFFFF;
+    text-align: center;
+    line-height: 1;
+    letter-spacing: 0.5rpx;
+    position: relative;
+    z-index: 1;
+}
+
+.floating-button.next-lesson {
+    background: linear-gradient(135deg, #06DADC 0%, #04B8BA 100%);
+    box-shadow: 0 6rpx 24rpx rgba(6, 218, 220, 0.25);
+}
+
+.floating-button.next-lesson:active {
+    box-shadow: 0 3rpx 12rpx rgba(6, 218, 220, 0.35);
+}
+
+.floating-button.back-to-start {
+    background: linear-gradient(135deg, #FF7B7B 0%, #FF6B6B 100%);
+    box-shadow: 0 6rpx 24rpx rgba(255, 107, 107, 0.25);
+}
+
+.floating-button.back-to-start:active {
+    box-shadow: 0 3rpx 12rpx rgba(255, 107, 107, 0.35);
+}
+
+/* 响应式调整 */
+@media (max-width: 750px) {
+    .floating-buttons {
+        top: 50%;
+        right: 24rpx;
+        transform: translateY(-50%);
+    }
+    
+    .floating-button {
+        width: 160rpx;
+        height: 80rpx;
+        border-radius: 40rpx;
+    }
+    
+    .floating-button-text {
+        font-size: 24rpx;
+    }
+}
+</style>

subPages/home/search.vue

@@ -1,321 +1,140 @@
 <template>
-  <view class="search-container">
-    
-    <!-- 顶部搜索栏 -->
-    <view class="search-header">
-      <uv-search 
-        v-model="searchKeyword"
-        placeholder="请输入内容"
-        :show-action="true"
-        action-text="搜索"
-        :action-style="{
-          color: '#fff',
-          backgroundColor: '#06DADC',
-          borderRadius: '198rpx',
-          width: '100rpx',
-          height: '64rpx',
-          textAlign: 'center',
-          fontSize: '26rpx',
-          lineHeight: '64rpx',
-        }"
-        @search="handleSearch"
-        @custom="handleSearch"
-        @clear="handleSearch"
-      ></uv-search>
-      <!-- 分类标签栏 -->
-      <view class="category-tabs">
-        <scroll-view scroll-x class="tab-scroll">
-          <view class="tab-list">
-            <view 
-              v-for="(tab, index) in categoryTabs" 
-              :key="index"
-              class="tab-item"
-              :class="{ active: currentTab === index }"
-              @click="switchTab(index)"
-            >
-              {{ tab.title }}
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-    
-    
-    <!-- 搜索结果列表 -->
-    <view class="search-results">
-      <view 
-        v-for="(book, index) in list" 
-        :key="index"
-        class="book-item"
-        @click="goToDetail(book)"
-      >
-        <view class="book-cover">
-          <image :src="book.booksImg" mode="aspectFill"></image>
+    <view class="search-container">
+
+        <!-- 顶部搜索栏 -->
+        <view class="search-header">
+            <uv-search v-model="searchKeyword" placeholder="请输入内容" :show-action="true" action-text="搜索" :action-style="{
+                color: '#fff',
+                backgroundColor: '#06DADC',
+                borderRadius: '198rpx',
+                width: '100rpx',
+                height: '64rpx',
+                textAlign: 'center',
+                fontSize: '26rpx',
+                lineHeight: '64rpx',
+            }" @search="handleSearch" @custom="handleSearch" @clear="handleSearch"></uv-search>
+            <!-- 分类标签栏 -->
+            <uv-tabs 
+                :list="categoryTabs" 
+                :current="currentTab" 
+                keyName="title"
+                @change="switchTab"
+                :scrollable="true"
+                :lineColor="'#000'"
+                :activeStyle="{ color: '#000', fontWeight: '900' }"
+                :inactiveStyle="{ color: '#606266' }"
+            ></uv-tabs>
         </view>
-        <view class="book-info">
-          <view class="book-title">{{ book.booksName }}</view>
-          <view class="book-author">{{ book.booksAuthor }}</view>
-          <view class="book-meta">
-            <view class="book-duration">
-              <image src="/static/play-icon.png" mode="aspectFill" class="book-icon"></image>
-              <text>{{ book.duration }}</text>
-            </view>
-            <view class="book-membership"  :class="classMap[book.vipInfo.title]">
-              {{ book.vipInfo.title }}
-            </view>
-          </view>
+
+
+        <!-- 搜索结果列表 -->
+        <view class="search-results">
+            <BookList :list="list" :isLoading="isLoading" />
         </view>
-      </view>
-      <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"  ></uv-loading-icon>
-      <uv-empty v-else-if="list.length === 0" ></uv-empty>
     </view>
-  </view>
 </template>
 
 <script>
 
 import MixinList from '@/mixins/list.js'
+import BookList from '@/components/BookList.vue'
+
 export default {
-  mixins: [MixinList],
-  data() {
-    return {
-      mixinListApi: 'book.list',
-      // 自定义onShow
-      mixinListConfig: {
-        customOnShow: true,
-      },
-      searchKeyword: '',
-      label : '',
-      currentTab: 0,
-      categoryTabs: [ ],
-      // 类型引射表
-      classMap: {
-        '蕾朵会员': 'book-membership-premium',
-        '盛放会员': 'book-membership-vip',
-        '萌芽会员': 'book-membership-basic',
-      },
-      bookList: [
- 
-      ]
-    }
-  },
-  methods: {
-    mixinSetParams(){
-      const params = {
-        category: this.categoryTabs[this.currentTab].id,
-      }
-      if(this.label){
-        params.label = this.label
-      }
-      if(this.searchKeyword){
-        params.title = this.searchKeyword
-      }
-      return params
-    },
-    handleSearch() {
-      // console.log('搜索:', this.searchKeyword)
-      this.list = []
-      this.initPage()
-      this.getList(true)
-      // 这里添加搜索逻辑
+    mixins: [MixinList],
+    components: {
+        BookList
     },
+    data() {
+        return {
+            mixinListApi: 'book.list',
+            // 自定义onShow
+            mixinListConfig: {
+                customOnShow: true,
+            },
+            searchKeyword: '',
+            label: '',
+            currentTab: 0,
+            categoryTabs: [],
+            bookList: [
 
-    switchTab(index) {
-      this.currentTab = index
-      // console.log('切换分类:', this.categoryTabs[index])
-      this.list = []
-      this.initPage()
-      this.getList(true)
-      // 这里添加分类切换逻辑
+            ]
+        }
     },
-    goToDetail(book) {
-      uni.navigateTo({
-        url: '/subPages/home/directory?id=' + book.id
-      })
+    methods: {
+        mixinSetParams() {
+            const params = {}
+            // 只有当不是"全部"选项时才添加category参数
+            if (this.categoryTabs[this.currentTab] && this.categoryTabs[this.currentTab].id) {
+                params.category = this.categoryTabs[this.currentTab].id
+            }
+            if (this.label) {
+                params.label = this.label
+            }
+            if (this.searchKeyword) {
+                params.title = this.searchKeyword
+            }
+            return params
+        },
+        handleSearch() {
+            // console.log('搜索:', this.searchKeyword)
+            this.list = []
+            this.initPage()
+            this.getList(true)
+            // 这里添加搜索逻辑
+        },
+
+        switchTab(e) {
+            this.currentTab = e.index
+            this.initPage()
+            this.getList(true)
+        },
+        // 获取书籍分类
+        async getCategory() {
+            const categoryRes = await this.$api.book.category()
+            if (categoryRes.code === 200) {
+                this.categoryTabs = categoryRes.result.map(item => ({
+                    title: item.title,
+                    id: item.id
+                }))
+                // 在数组开头添加"全部"选项
+                this.categoryTabs.unshift({
+                    title: '全部',
+                    id: null
+                })
+            }
+        },
     },
-    // 获取书籍分类
-    async getCategory() {
-      const categoryRes = await this.$api.book.category()
-      if (categoryRes.code === 200){
-        this.categoryTabs = categoryRes.result.map(item => ({
-            title:item.title,
-            id: item.id
-        }))
-      }
+    onLoad(options) {
+        if (options.label) {
+            this.label = options.label
+        }
     },
-  },
-  onLoad(options) {
-    if (options.label){
-      this.label = options.label
+    async onShow() {
+        await this.getCategory()
+        this.getList()
     }
-  },
-  async onShow() {
-    await this.getCategory()
-    this.getList()
-  }
 }
 </script>
 
 <style scoped lang="scss">
 .search-container {
-  background: #fff;
-  min-height: 100vh;
+    background: #fff;
+    min-height: 100vh;
 }
 
 .search-header {
-  padding: 10rpx 32rpx  6rpx;
-  background: #fff;
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-
-}
-.category-tabs {
-  background: #fff;
-  // border-bottom: 1rpx solid #f0f0f0;
-  
-  .tab-scroll {
-    white-space: nowrap;
-  }
-  
-  .tab-list {
-    display: flex;
-    padding: 0 32rpx;
-  }
-  
-  .tab-item {
-    flex-shrink: 0;
-    padding: 24rpx 22rpx;
-    font-size: 32rpx;
-    color: $secondary-text-color;
-    position: relative;
-    
-    &.active {
-      color: $primary-text-color;
-      font-weight: 600;
-      
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 22rpx;
-        height: 4rpx;
-        background: $primary-text-color;
-        border-radius: 2rpx;
-      }
-    }
-  }
+    padding: 10rpx 32rpx 6rpx;
+    background: #fff;
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    z-index: 9;
 }
 
 
 .search-results {
-  padding: 32rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 32rpx;
-}
-
-.book-item {
-  display: flex;
-  align-items: center;
-  // border-bottom: 1rpx solid #f5f5f5;
-  background: #F8F8F8;
-  // width: 686rpx;
-  height: 212rpx;
-  gap: 16rpx;
-  border-radius: 16rpx;
-  padding: 0rpx 16rpx;
-
-  &:last-child {
-    border-bottom: none;
-  }
-  
-  .book-cover {
-    width: 136rpx;
-    height: 180rpx;
-    border-radius: 16rpx;
-    overflow: hidden;
-    margin-right: 16rpx;
-    
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  
-  .book-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-  
-  .book-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: $primary-text-color;
-    line-height: 48rpx;
-    letter-spacing: 0;
-    margin-bottom: 12rpx;
-    overflow: hidden;
-    
-    text-overflow: ellipsis;
-  }
-  
-  .book-author {
-    font-size: 24rpx;
-    color: $secondary-text-color;
-    margin-bottom: 16rpx;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  
-  .book-meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  .book-duration {
-    display: flex;
-    align-items: center;
-    font-size: 22rpx;
-    color: #999;
-    .book-icon{
-      width: 18rpx;
-      height: 18rpx;
-    }
-    text {
-      margin-left: 8rpx;
-    }
-  }
-  
-  .book-membership {
-    padding: 8rpx 16rpx;
-    border-radius: 8rpx;
-    font-size: 24rpx;
-    color: #211508;
-  }
-}
-
-.book-membership-premium {
-  background: #E9F1FF;
-  border: 2rpx solid #C4DAFF
-}
-
-.book-membership-vip {
-  background: #FFF4E9;
-  border: 2rpx solid #FFE2C4
+    padding: 32rpx;
 }
-
-.book-membership-basic {
-  background: #FFE9E9;
-  border: 2rpx solid #FFDBC4
-}
-  
-
 </style>

utils/share.js

@@ -79,14 +79,19 @@ function share() { //微信分享
 }
 
 function addQueryParams(url) {
-	if (url) {
-		//获取用户id
-		let userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null
-		if (userInfo) {
-			url += `?inviter=${userInfo.id}`
-		}
-	}
-	return url
+	try{
+        if (url) {
+            //获取用户id
+            let userInfo = uni.getStorageSync('userInfo')
+            if (userInfo?.id) {
+                url += `?inviter=${userInfo.id}`
+            }
+        }
+	    return url
+    }catch(e){
+        console.log(e);
+        return url
+    }
 }
 
 export default share