养老课堂

src/views/zhulao/api/index.js

@@ -25,4 +25,13 @@ export function getArticleMessage(params) {
         requestBase: 'VUE_APP_ZL_WSS_ZP',
         params
     })
+}
+// 视频 分类
+export function getColumnList(params) {
+    return request({
+        url: '/cms/portal/column/list',
+        method: 'get',
+        requestBase: 'VUE_APP_ZL_WSS_ZP',
+        params
+    })
 }

src/views/zhulao/components/Tabbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <van-tabbar v-model="active" placeholder safe-area-inset-bottom active-color="#f0896e">
-      <van-tabbar-item v-for="(item,index) in list" :key="index">
+    <van-tabbar v-model="active" placeholder route safe-area-inset-bottom active-color="#f0896e">
+      <van-tabbar-item v-for="(item,index) in list" :key="index" :to="item.router">
         <span>{{item.text}}</span>
         <template #icon="props">
           <img :src="props.active ? item.selectedIconPath : item.iconPath" />
@@ -12,18 +12,20 @@
 </template>
 <script>
 export default {
+  props: ['active'],
   data() {
     return {
-      active: 0,
       list: [
         {
           iconPath: require('../assets/images/nav/home-off.png'),
           selectedIconPath: require('../assets/images/nav/home-on.png'),
           text: '首页',
+          router: '/',
         },
         {
           iconPath: require('../assets/images/nav/book-off.png'),
           selectedIconPath: require('../assets/images/nav/book-on.png'),
+          router: '/classRoom',
           text: '老年课堂',
         },
         {

src/views/zhulao/router/router.js

@@ -15,10 +15,20 @@ const routes = [{
         path: '/newsDetails',
         name: 'NewsDetails',
         meta: {
-            keepAlive: true
+            keepAlive: false
         },
         component: () => import('../views/home/newsDetails.vue')
-    }
+    },
+    {
+        path: '/classRoom',
+        name: 'classRoom',
+        meta: {
+            keepAlive: true
+        },
+        component: () => import('../views/classRoom/index.vue')
+    },
+
+
 ]
 const router = new VueRouter({
     routes

src/views/zhulao/views/classRoom/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="page">
+    <van-nav-bar title="老年课堂" fixed placeholder safe-area-inset-top />
+    <van-tabs @click="clickTab" sticky offset-top="46">
+      <van-tab v-for="item in columnList" sticky :key="item.id" :title="item.title" :name="item.columnCode">
+        <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div v-for="(item,index) in info" :key='index' bindtap="videoCilck" @click="$router.push({path:'/newsDetails',query:{id:item.id}})">
+            <div class='videoBg' v-if='item.coverImgUrl'>
+              <div class='videoUrl'>
+                <div class='coverImageBg'>
+                  <img class='coverImage' lazy-load="true" mode="aspectFill" :src='item.coverImgUrl?item.coverImgUrl: "/images/homePage/runloop_01.png"' />
+                </div>
+              </div>
+              <div class='videoUrl videoContent'>
+                <div class='videoName'>{{item.title}}</div>
+              </div>
+            </div>
+            <div class='videoBgnullimage' wx:else>
+              <div class='videoUrl videoContentnull'>
+                <div class='videoName'>{{item.title }}</div>
+              </div>
+            </div>
+          </div>
+        </van-list>
+      </van-tab>
+    </van-tabs>
+    <Tabbar />
+  </div>
+</template>
+<script>
+import { getColumnList, getArticleList } from '../../api/index.js'
+import Tabbar from '../../components/Tabbar.vue'
+export default {
+  components: { Tabbar },
+  data() {
+    return {
+      columnList: [],
+      active: '',
+      info: [],
+      loading: false,
+      finished: false,
+      pageNum: 1,
+      pageSize: 10,
+    }
+  },
+  created() {
+    this.getColumnList()
+  },
+  methods: {
+    async getColumnList() {
+      const res = await getColumnList({})
+      this.columnList = res.data
+      this.active = this.columnList[0].columnCode
+      this.getList()
+    },
+    async getList() {
+      var data = {
+        orderByColumn: 'publish_time',
+        isAsc: 'desc',
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        columnCode: this.active,
+      }
+      const res = await getArticleList(data)
+
+      if (this.pageNum == 1) {
+        this.info = res.rows
+      } else {
+        this.info = this.info.concat(res.rows)
+      }
+      if (this.info.length >= res.total) {
+        this.finished = true
+      }
+      this.loading = false
+      this.pageNum++
+    },
+    onLoad() {
+      this.getList('')
+    },
+    clickTab(e) {
+      this.active = e
+      this.pageNum = 1
+      this.getList()
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.page {
+  background-color: #f5f5f5;
+}
+.van-tabs {
+  border-bottom: 0;
+}
+.videoBg {
+  margin-bottom: 15px;
+  width: 750px;
+  height: 495px;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+.videoBgnullimage {
+  margin-bottom: 15px;
+  width: 750px;
+  height: 100px;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.videoUrl {
+  width: 686px;
+  height: 80%;
+  margin-left: 32px;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-top: 10px;
+}
+
+.myVideo {
+  width: 100%;
+  height: 100%;
+}
+
+.videoContent {
+  height: 20%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0px;
+}
+.videoContentnull {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0px;
+}
+.videoName {
+  flex: 0.95;
+  font-size: 30px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  /* align-content: center; */
+}
+
+.coverImageBg {
+  margin-top: 10px;
+  border-radius: 16px;
+  overflow: hidden;
+  width: 100%;
+  height: 98%;
+  position: relative;
+}
+.coverImage {
+  border-radius: 16px;
+  overflow: hidden;
+  width: 100%;
+  height: 99%;
+}
+</style>