feats

src/App.vue

@@ -5,16 +5,10 @@
 </template>
 
 <script>
-import { UserLogin } from './util/api'
 import { mapState } from 'vuex'
 
-import Tabber from './views/Tabber.vue'
-
 export default {
   name: 'App',
-  components: {
-    Tabber
-  },
   computed: {
     ...mapState(['LOADING'])
   },

src/views/Course.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="Course-box">
-    <div class="banner-box-top mglr-10" >
-      <van-swipe class="banner-swipe" :autoplay="3000" @change="i => currentItem = i" :show-indicators="false">
-        <van-swipe-item v-for="(image, index) in HomeBannerImages" :key="index">
-          <ration-div :ratio="0.6">
-            <van-image width="100%" height="100%" :src="image.thumb" />
-          </ration-div>
-        </van-swipe-item>
-      </van-swipe>
-      <div class="custom-indicator">
-        <span v-for="(_, index) in HomeBannerImages" :key="index" :class="{'active': currentItem === index }"></span>
-      </div>
+    <div class="banner-box-top" >
+      <banner-swipe :list="HomeBannerImages" />
     </div>
     
     <!-- list -->
@@ -31,13 +22,12 @@ import { getBanner, getCourse } from '@/util/api'
 
 export default {
   components: {
-    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+    BannerSwipe: () => import('./components/BannerSwipe.vue'),
     CourseCard: () => import('./components/CourseCard.vue')
   },
 
   data() {
     return {
-      currentItem: -1,
       icon: require('@/assets/icon/courseIcon.svg'),
       loading: false,
       finished: true,
@@ -69,37 +59,12 @@ export default {
     },
     onBanner() {
       getBanner('Training').then((e) => {
-        this.HomeBannerImages = e.records
+        this.HomeBannerImages = (e.records || []).map(x => x.thumb)
 
         console.log(e)
       })
     },
     onLoad() {
-      // 异步更新数据
-      let params = {
-        // type: this.selectedType,
-        index: this.currentPage, //页数
-        size: this.pageSize //每页个数
-      }
-      // xxxxxxx(params).then((res) => {
-      //   console.log(res)
-      //   this.dataTotal = res.total
-      //   //进行判断
-      //   if (this.dataTotal <= this.pageSize) {
-      //     this.Array = res.data.list
-      //     console.log(this.Array)
-      //   } else {
-      //     this.currentPage++
-      //     let arr = res.data.data.list
-      //     this.Array = this.Array.concat(arr)
-      //   }
-      //   // 加载状态结束
-      //   this.loading = false
-      //   // 数据全部加载完成
-      //   if (this.Array.length >= this.dataTotal) {
-      //     this.finished = true //结束，显示我也是有底线的
-      //   }
-      // })
     }
   }
 }
@@ -116,16 +81,6 @@ export default {
   width: 100vw;
   padding-top: 10px;
 
-  .banner-box-top {
-    position: relative;
-    width: calc(100% - 20px);
-
-    .banner-swipe {
-      border-radius: 6px;
-      box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.12);
-    }
-  }
-
   .course-list {
     margin-top: 10vw;
   }

src/views/StrongPhoto.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="Photo-box">
-    <van-swipe :autoplay="3000">
-      <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
-        <van-image width="100%" height="57vw" :src="image.thumb" />
-      </van-swipe-item>
-    </van-swipe>
+    <banner-swipe :list="photoBannerImages" />
     <div style="display: flex; aline-itme:center;margin-top: 30px;position:relative ">
       <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
       <div :class="{'Zhedie-box': true, 'expand': classStyle}">
@@ -45,6 +41,9 @@ import { parseTime } from '@/util/formattingData'
 import { getBanner } from '@/util/api'
 
 export default {
+  components: {
+    BannerSwipe: () => import('./components/BannerSwipe.vue'),
+  },
   data() {
     return {
       classStyle: false,
@@ -137,7 +136,7 @@ export default {
     },
     onBanner() {
       getBanner('Wonderful').then((e) => {
-        this.photoBannerImages = e.records
+        this.photoBannerImages = (e.records || []).map(x => x.thumb)
         // console.log(e)
       })
     }
@@ -150,12 +149,8 @@ export default {
   width: 100vw;
   height: 100%;
   background-color: #fff;
-  .van-swipe {
-    width: 95%;
-    border-radius: 10px;
-    margin: 10px auto;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-  }
+  padding-top: 10px;
+
   .Zhedie-box {
     padding: 0 4vw;
     overflow: hidden;

src/views/Tabber.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="tabbar">
-    <van-tabbar class="van-tabbar" v-model="active" @change="onChange">
-      <van-tabbar-item icon="column">培训通知</van-tabbar-item>
-      <van-tabbar-item icon="photo">精彩集锦</van-tabbar-item>
-      <van-tabbar-item icon="manager">个人中心</van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Tabber',
-  props: {
-    // active: Number
-  },
-  data() {
-    return {
-      // tabbarTempValue: this.active,
-      active: 0
-    }
-  },
-  created() {
-    //由于 vant 标签栏路由模式，无法自动加载页面，所以这里需要初始化
-    // console.log(this.$route) //打印当前路由属性
-    this.active = 0
-
-    switch (this.$route.name) {
-      case 'Course':
-        this.active = 0
-        break
-      case 'StrongPhoto':
-        this.active = 1
-        break
-      case 'UserCenter':
-        this.active = 2
-        break
-      default:
-        break
-    }
-  },
-  methods: {
-    onChange(index) {
-      // console.log(index)
-      switch (index) {
-        case 0:
-          this.$router.push('/')
-
-          break
-        case 1:
-          this.$router.push('/StrongPhoto')
-
-          break
-        case 2:
-          this.$router.push('/UserCenter')
-
-          break
-        default:
-          break
-      }
-      // const routerArray = ['/Course', '/StrongPhoto', '/UserCenter']
-      // this.$router.push(routerArray[index])
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tabbar {
-  .van-tabbar {
-    // padding-bottom: 2em;
-  }
-}
-</style>

src/views/components/BannerSwipe.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="banner-swipe-box" >
+    <van-swipe class="banner-swipe" :autoplay="3000" @change="i => current = i" :show-indicators="false">
+      <van-swipe-item v-for="image in list" :key="image">
+        <ration-div :ratio="0.6">
+          <van-image width="100%" height="100%" :src="image" />
+        </ration-div>
+      </van-swipe-item>
+    </van-swipe>
+    <div class="custom-indicator">
+      <span v-for="(image, index) in list" :key="image" :class="{'active': current === index }"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BannerSwipe',
+  components: {
+    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      current: 0,
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.banner-swipe-box {
+  position: relative;
+  margin-left: 10px;
+  margin-right: 10px;
+  width: calc(100% - 20px);
+
+  .banner-swipe {
+    border-radius: 6px;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  .custom-indicator {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    right: 0;
+    z-index: 10;
+
+    & > span {
+      display: inline-block;
+      width: 1em;
+      height: 2px;
+      background: rgba(0, 0, 0, 0.2);
+
+      & + span {
+        margin-left: .2em;
+      }
+    }
+    .active {
+      background: rgba(0, 0, 0, .65);
+    }
+  }
+}
+</style>