课件列表/详细

.env

@@ -0,0 +1 @@
+VITE_COMMON_API_URL=

src/pages.json

@@ -175,6 +175,23 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/train-books",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "培训课件"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "培训课件"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

src/pages/train-books/detail.vue

@@ -0,0 +1,47 @@
+<template>
+    <!-- 文章 -->
+    <template v-if="info.type == 1">
+        <uv-image :src="info.cover_image" width="200px" height="100px" />
+        <view>{{ info.title  }}</view>
+        <view>{{ info.description  }}</view>
+        <view>{{ info.created_at  }}</view>
+        <uv-divider />
+        <!-- 富文本 -->
+        <view>{!! info.content !!}</view>
+    </template>
+    <template v-if="info.type == 2">
+        <!-- 视频 -->
+        <video :src="info.video" />
+    </template>
+    <template v-if="info.type == 3">
+        <view>{{ info.title  }}</view>
+        <view>{{ info.description  }}</view>
+        <view>{{ info.created_at  }}</view>
+        <uv-divider />
+        <!-- 文件列表 -->
+        <view>
+            <view v-for="item in info.files" :key="item.id" @click="downloadFile(item)">{{ item.name }}</view>
+        </view>
+    </template>
+</template>
+<script setup>
+    import { http } from '@/utils/request'
+    import { onLoad } from '@dcloudio/uni-app'
+    import { ref } from 'vue'
+
+    const id = ref('');
+    const info = ref({})
+    onLoad((options) => {
+        id.value = options.id
+        http.get(`/train/books/${id.value}`).then(res => {
+            info.value = res
+        })
+    })
+
+    const downloadFile = (item) => {
+        // 文件名
+        const name = item.name
+        // 文件地址
+        const url = item.url
+    }
+</script>

src/pages/train-books/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <view>
+    <CuNavbar title="培训课件"></CuNavbar>
+    <uv-sticky bgColor="#fff">
+      <uv-tabs
+        height="44"
+        :activeStyle="{ color: '#ee2c37' }"
+        :scrollable="false"
+        :current="tabIndex"
+        lineColor="#ee2c37"
+        :list="tabList"
+        @change="tabChange"
+      ></uv-tabs>
+    </uv-sticky>
+
+    <MescrollItem
+      v-for="(item, key) in tabList"
+      :key="item.id"
+      :ref="`mescrollItem${item.id}`"
+      :top="88"
+      :i="key"
+      :index="tabIndex"
+      apiUrl="/train/books"
+      :params="{category_id: item.id}"
+    >
+      <template v-slot="{ list }">
+        <view class="space-y-15rpx p-base">
+          <template v-for="subItem in list" :key="subItem.id">
+            <view class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx" @click="detail(subItem.id)">
+              <view class="flex items-center justify-between">
+                <uv-image :src="subItem.cover_image" width="40px" height="40px" />
+                <view class="text-30rpx">{{ subItem.title }}</view>
+                <view class="text-30rpx">{{ subItem.description }}</view>
+                <view class="text-30rpx">{{ subItem.created_at }}</view>
+              </view>
+            </view>
+          </template>
+        </view>
+      </template>
+    </MescrollItem>
+  </view>
+</template>
+<script setup>
+import { http } from '@/utils/request'
+import CuNavbar from '@/components/cu-navbar/index'
+import { ref } from 'vue'
+import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
+import useMescrollMore from '@/uni_modules/mescroll-uni/hooks/useMescrollMore.js'
+import MescrollItem from '@/components/mescroll-api/more.vue'
+
+const mescrollItems = ref([])
+
+const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(
+  mescrollItems,
+  onPageScroll,
+  onReachBottom
+)
+let tabList = ref([])
+http.get('/keywords', {params: { parent_key: 'book_category' }}).then(res => {
+  tabList.value = res
+})
+
+const tabChange = ({ index }) => {
+  tabIndex.value = index
+  scrollToLastY()
+}
+
+const detail = (id) => {
+  uni.navigateTo({
+    url: `/pages/train-books/detail?id=${id}`,
+  })
+}
+</script>