'制作阅读demo'

pages.json

@@ -119,6 +119,12 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "home/book",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

pages/index/desk.vue

@@ -95,7 +95,7 @@ export default {
         title: '确认删除',
         content: `确定要从书桌中移除《${book.book.booksName}》吗？`,
         confirmText: '删除',
-        confirmColor: '#06DADC',
+        confirmColor: '#ff4757',
         success: (res) => {
           if (res.confirm) {
             this.deleteBook(book, index)
@@ -115,6 +115,7 @@ export default {
           id: book.id
         })
         
+        uni.hideLoading()
         
         if (res.code === 200) {
           // 从列表中移除该项
@@ -143,7 +144,6 @@ export default {
   onShow() {
     // 只有登录才会获取书籍
     if (uni.getStorageSync('token')) {
-      this.list = []
       this.initPage()
       this.getList(true)
     }

pages/index/home.vue

@@ -79,6 +79,7 @@
             v-for="(item, index) in labelData.books" 
             :key="index" 
             class="content-item"
+            @click="goBook(item)"
           >
             <view class="item-cover">
               <image :src="item.booksImg || '/static/默认图片.png'" mode="aspectFill"></image>
@@ -129,6 +130,7 @@
           v-for="(book, index) in labelData.books" 
           :key="index" 
           class="book-grid-item"
+          @click="goBook(book)"
         >
           <view class="book-grid-cover">
             <image :src="book.booksImg || '/static/默认图片.png'" mode="aspectFill"></image>

subPages/home/book.vue

@@ -0,0 +1,404 @@
+<template>
+  <view class="book-container">
+    <!-- 自定义顶部导航栏 -->
+    <uv-status-bar></uv-status-bar>
+    <view class="custom-navbar" :class="{ 'navbar-hidden': !showNavbar }">
+      <uv-status-bar></uv-status-bar>
+      <view class="navbar-content">
+        <view class="navbar-left" @click="goBack">
+          <uv-icon name="arrow-left" size="20" color="#262626"></uv-icon>
+        </view>
+        <view class="navbar-title">{{ bookTitle }}</view>
+        <view class="navbar-right" @click="showMenu">
+          <uv-icon name="more-dot-fill" size="20" color="#262626"></uv-icon>
+        </view>
+      </view>
+    </view>
+
+    <!-- Swiper内容区域 -->
+    <swiper 
+      class="content-swiper" 
+      :current="currentPage - 1"
+      @change="onSwiperChange"
+      
+    >
+      <swiper-item 
+        v-for="(page, index) in bookPages" 
+        :key="index"
+        class="swiper-item"
+      >
+        <view class="content-area" @click="toggleNavbar">
+          <!-- 图片卡片页面 -->
+          <view v-if="page.type === 'card'" class="card-content">
+            <view class="card-line">
+              <image src="/static/划重点图标.png" class="card-line-image" mode="aspectFill" />
+              <text class="card-line-text">划线重点</text>
+            </view>
+            <image class="card-image" :src="page.image" mode="aspectFill"></image>
+            <text class="english-text">{{ page.englishText }}</text>
+            <text class="chinese-text">{{ page.chineseText }}</text>
+          </view>
+          
+          <!-- 文本页面 -->
+          <view v-else-if="page.type === 'text'" class="text-content">
+            <text class="content-text">{{ page.content }}</text>
+          </view>
+
+          <!-- 视频页面 -->
+          <view v-else-if="page.type === 'video'" class="video-content">
+            <video :src="page.video" class="video-player" controls></video>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 自定义底部控制栏 -->
+    <view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }">
+      <view class="tabbar-content">
+        <view class="tabbar-left">
+          <view class="tab-button" @click="toggleSound">
+            <image src="/static/课程图标.png" class="tab-icon" />
+            <text class="tab-text">课程</text>
+          </view>
+          <view class="tab-button" @click="toggleSound">
+            <image src="/static/音色切换图标.png" class="tab-icon" />
+            <text class="tab-text">音色切换</text>
+          </view>
+        </view>
+        
+        <view class="tabbar-right">
+          <view class="page-controls">
+            <view class="page-numbers">
+              <view 
+                v-for="(page, index) in bookPages" 
+                :key="index"
+                class="page-number"
+                :class="{ 'active': (index + 1) === currentPage }"
+                @click="goToPage(index + 1)"
+              >
+                {{ index + 1 }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <uv-safe-bottom></uv-safe-bottom>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showNavbar: true,
+      currentPage: 1,
+      bookTitle: '看，乔治！',
+      bookPages: [
+        {
+          type: 'card',
+          englishText: 'I ought to have judged by deeds and not by words.',
+          chineseText: '要对一个人下定论，不应听其言，而应观其行。',
+          image: '/static/画重点图片.png'
+        },
+        {
+          type: 'video',
+          video: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
+        },
+        {
+          type: 'text',
+          content: '索菲达以南几英里处，萨利和斯坦对着近旁河岸的斜坡流淌，水深且绿意盎然。水也很温暖，因为它在阳光下闪烁着，清澈黄色的沙子，才到达深深的池塘。河的一侧，金色的山丘斜坡向上蜿蜒，通往坚固多岩石的加比亚山脉，但在山谷一侧，水边排列着树木——柳树在春天新鲜而翠绿，它们的低垂接触处充满着各天的冰水残留物；还有枫树，它们现实的，白色的横枝条和树枝；吉他也是绿色的地塘，在河下游的河岸上，叶子能发出很大的啪啪声。傍晚时分，兔子们从灌木中出现，坐在沙子上，湖泊的平地上覆盖着沉重的夜晚迹，还有来自农场的狗的散布的垫子，以及前来暗黑中饮水的鹿的分裂形足迹。'
+        },
+        {
+          type: 'text',
+          content: '有一条穿过柳树和榆树之间的路，这条路从农场下来的男孩们踏得又硬又深；他们来深池游泳，也被那些上游运送货物公路上下来的流浪汉使得又硬又深。他们在水边停歇，在一棵巨大的榆树低垂的水平树枝前，有一个由许多火堆形成的灰烬堆，核桃被坐在上面的人留下光滑。'
+        }
+      ]
+    }
+  },
+  methods: {
+    toggleNavbar() {
+      this.showNavbar = !this.showNavbar
+    
+    },
+    goBack() {
+      uni.navigateBack()
+    },
+    showMenu() {
+      console.log('显示菜单')
+    },
+    toggleSound() {
+      console.log('音色切换')
+    },
+    goToPage(page) {
+      this.currentPage = page
+      console.log('跳转到页面:', page)
+    },
+    onSwiperChange(e) {
+      this.currentPage = e.detail.current + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.book-container {
+  width: 100%;
+  height: 100vh;
+  background-color: #F8F8F8;
+  position: relative;
+  overflow: hidden;
+}
+
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #F8F8F8;
+  z-index: 1000;
+  transition: transform 0.3s ease;
+  
+  &.navbar-hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 32rpx;
+  // padding-top: calc(20rpx + var(--status-bar-height, 0));
+  height: 60rpx;
+}
+
+.navbar-left,
+.navbar-right {
+  width: 80rpx;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-right {
+  justify-content: flex-end;
+}
+
+.navbar-title {
+  flex: 1;
+  text-align: center;
+  font-family: PingFang SC;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #262626;
+  line-height: 48rpx;
+}
+
+.content-swiper {
+  flex: 1;
+  height: calc(100vh - 200rpx);
+  margin-top: 100rpx;
+  margin-bottom: 100rpx;
+}
+
+.swiper-item {
+  height: 100%;
+}
+
+.content-area {
+  flex: 1;
+  padding: 0 40rpx;
+  // background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.card-content {
+  background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+  height: 1172rpx;
+  margin-top: 20rpx;
+  border-radius: 32rpx;
+    // height: 100%;
+    padding: 40rpx;
+    // margin: 0 
+    border: 1px solid #FFFFFF;
+    box-sizing: border-box;
+    .card-line {
+      display: flex;
+      align-items: center;
+      // margin-bottom: 20rpx;
+    }
+  
+    .card-line-image {
+      width: 48rpx;
+      height: 48rpx;
+      margin-right: 16rpx;
+    }
+  
+    .card-line-text {
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-size: 30rpx;
+      line-height: 48rpx;
+      color: #3B3D3D;
+    }
+  
+    .card-image {
+      width: 590rpx;
+      height: 268rpx;
+      border-radius: 24rpx;
+      // margin-bottom: 20rpx;
+    }
+    .english-text {
+  display: block;
+  font-family: PingFang SC;
+  font-weight: 600;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  color: #3B3D3D;
+  // margin-bottom: 16rpx;
+}
+
+.chinese-text {
+  display: block;
+  font-family: PingFang SC;
+  // font-weight: 400;
+  font-size: 28rpx;
+  line-height: 48rpx;
+  color: #4F4F4F;
+}
+  }
+
+.video-content {
+  width: 100vw;
+  margin: 200rpx -40rpx 0;
+  height: 500rpx;
+  background-color: #FFFFFF;
+  padding: 40rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+
+
+.text-content {
+  width: 100vw;
+  background-color: #F6F6F6;
+  height: 100%;
+  padding: 40rpx;
+  margin: -40rpx;
+  box-sizing: border-box;
+}
+
+.content-text {
+  font-family: PingFang SC;
+  // font-weight: 400;
+  font-size: 28rpx;
+  color: #3B3D3D;
+  line-height: 48rpx;
+  letter-spacing: 0;
+  text-align: justify;
+  word-break: break-all;
+}
+
+.custom-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  border-top: 1rpx solid #EEEEEE;
+  z-index: 1000;
+  transition: transform 0.3s ease;
+  
+  &.tabbar-hidden {
+    transform: translateY(100%);
+  }
+}
+
+.tabbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 62rpx;
+  // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  height: 88rpx;
+}
+
+.tabbar-left {
+  display: flex;
+  align-items: center;
+  gap: 35rpx;
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.tab-icon {
+  width: 52rpx;
+  height: 52rpx;
+}
+
+.tab-text {
+  font-family: PingFang SC;
+  // font-weight: 400;
+  font-size: 22rpx;
+  color: #999;
+  line-height: 24rpx;
+}
+
+.tabbar-right {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.page-controls {
+  display: flex;
+  align-items: center;
+}
+
+.page-numbers {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  overflow-x: auto;
+  max-width: 400rpx;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.page-number {
+  min-width: 84rpx;
+  height: 58rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100rpx;
+  font-family: PingFang SC;
+  // font-weight: 400;
+  font-size: 30rpx;
+  color: #3B3D3D;
+  background-color: transparent;
+  border: 1px solid #3B3D3D;
+  transition: all 0.3s ease;
+  
+  &.active {
+    border: 1px solid $primary-color;
+    color: $primary-color;
+  }
+}
+</style>

subPages/home/directory.vue

@@ -41,6 +41,7 @@
         </view>
         <view class="course-list">
           <view 
+            @click="startLearning()"
             v-for="(course, index) in courseList.records" 
             :key="index"
             class="course-item"
@@ -97,7 +98,7 @@
           <image src="/static/内容图标.png" class="button-icon" ></image>
           <text>内容朗读</text>
         </view>
-        <uv-button type="primary" :custom-style="{
+        <uv-button @click="startLearning" type="primary" :custom-style="{
           width: '400rpx',
           height: '80rpx',
           borderRadius: '198rpx',
@@ -147,6 +148,12 @@ export default {
         })
       }
     },
+    // 开始学习
+    startLearning() {
+      uni.navigateTo({
+        url: '/subPages/home/book?id=' + this.id
+      })
+    },
     // 获取书籍详情
     async getDetail() {
       const detailRes = await this.$api.book.detail({