feats

jsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/util/*": [
+        "src/util/*"
+      ],
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

src/components/Course.vue

@@ -1,178 +0,0 @@
-<template>
-  <div class="Course-box">
-    <div style="banner-box-top">
-      <van-swipe :autoplay="3000">
-        <van-swipe-item v-for="(image, index) in HomeBannerImages" :key="index">
-          <van-image width="100%" height="100%" :src="image.thumb" />
-        </van-swipe-item>
-      </van-swipe>
-    </div>
-    <!-- list -->
-    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-      <div class="Card-box" v-for="(item, index) in courseList" :key="index">
-        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
-        <div>
-          <div class="Card-box-top">
-            <img :src="item.content" alt />
-            <div class="Card-box-top-box">
-              <div class="Card-box-top-title">{{item.title}}</div>
-              <div
-                class="Card-box-top-time"
-              >课程时间：{{parseTime(item.startDate, '{m}月{d}日 {h}:{i}')}}~{{parseTime(item.endDate, '{m}月{d}日 {h}:{i}')}}</div>
-            </div>
-          </div>
-          <div class="Card-box-botton" @click="goQuestion(item.courseId)">
-            <div>查看详情</div>
-            <van-icon name="arrow" />
-          </div>
-        </div>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { parseTime } from '../util/formattingData'
-
-import { getBanner, getCourse } from '../util/api'
-export default {
-  data() {
-    return {
-      icon: require('../assets/icon/courseIcon.svg'),
-      loading: false,
-      finished: true,
-      currentPage: 1,
-      pageSize: 10,
-      courseList: [],
-      HomeBannerImages: []
-    }
-  },
-  mounted() {
-    this.onBanner()
-    this.kecheng()
-  },
-
-  methods: {
-    goQuestion(courseId) {
-      // this.$router.push({ name: 'ClassInfo', params: { courseId: courseId } })
-      this.$router.push('/Questionnaire')
-    },
-    parseTime, //时间格式化
-
-    kecheng() {
-      getCourse().then((e) => {
-        // console.log(parseTime(aTime, '{y}年{m}月{d}日 {h}:{i}'))
-
-        this.courseList = e.records
-      })
-    },
-    onBanner() {
-      getBanner('Training').then((e) => {
-        this.HomeBannerImages = e.records
-
-        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 //结束，显示我也是有底线的
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.Course-box {
-  width: 100vw;
-
-  .van-swipe {
-    width: 95%;
-    border-radius: 10px;
-    margin: 10px auto;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-    margin-bottom: 2em;
-    height: 33vh;
-    .van-swipe-item {
-    }
-  }
-  .van-cell-group {
-    display: flex;
-  }
-
-  .Card-box {
-    width: 93%;
-    border-radius: 10px;
-    background-color: #fff;
-    margin: 1em auto 0.4em auto;
-    box-shadow: 0 0 15px rgb(214, 214, 214);
-
-    .Card-box-top {
-      display: flex;
-      align-items: center;
-      padding: 0.8em 0 0.6em 0.4em;
-      > img {
-        width: 65px;
-        height: 65px;
-        border-radius: 50%;
-
-        // padding: 20px;
-      }
-      &-box {
-        // width: 63vw;
-      }
-
-      &-title {
-        font-size: 16px;
-        font-weight: 700;
-        letter-spacing: 1px;
-        padding: 0 0 12px 10px;
-      }
-      &-time {
-        font-size: 12px;
-        color: rgb(133, 133, 133);
-        padding: 0px 0 0px 10px;
-      }
-    }
-    .Card-box-botton {
-      width: 90%;
-      margin: 0 auto;
-      border-top: 1px solid rgb(238, 238, 238);
-      display: flex;
-      color: rgb(133, 133, 133);
-      justify-content: space-between;
-      font-size: 10px;
-
-      > div {
-        padding: 10px 0 10px 0;
-      }
-      .van-icon {
-        position: relative;
-        top: 1.9vh;
-      }
-    }
-  }
-}
-</style>

src/components/RatioDiv/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="ratio-div">
+    <div class="ratio-div_box" :style="boxStyle"></div>
+    <div class="ratio-div_content"><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RatioDiv',
+  props: {
+    ratio: Number
+  },
+  computed: {
+    boxStyle() {
+      if (!this.ratio) return {}
+
+      const percent = (this.ratio * 100).toFixed(2);
+      return {
+        paddingBottom: `${percent}%`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.ratio-div {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &_box {
+    width: 100%;
+    position: relative;
+    height: 0;
+    z-index: -1;
+  }
+
+  &_content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/router/index.js

@@ -5,7 +5,7 @@ import Router from 'vue-router'
 
 import store from '../store'
 
-import Course from '../components/Course.vue'//课程
+import Course from '@/views/Course.vue'//课程
 import MyCollection from '../components/MyCollection.vue'//收藏
 import signIn from '../components/signIn.vue'//打卡
 import ClassInfo from '../components/ClassInfo.vue'//课堂详情
@@ -21,10 +21,6 @@ Vue.use(Router)
 
 
 const router = new Router({
-
-  mode: "history",
-
-
   routes: [
 
 

src/views/Course.vue

@@ -0,0 +1,152 @@
+<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>
+    
+    <!-- list -->
+    <van-list class="mglr-10 course-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <course-card v-for="item in courseList" :key="item.courseId" v-bind="item"></course-card>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { parseTime } from '@/util/formattingData'
+import { getBanner, getCourse } from '@/util/api'
+
+export default {
+  components: {
+    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+    CourseCard: () => import('./components/CourseCard.vue')
+  },
+
+  data() {
+    return {
+      currentItem: -1,
+      icon: require('@/assets/icon/courseIcon.svg'),
+      loading: false,
+      finished: true,
+      currentPage: 1,
+      pageSize: 10,
+      courseList: [],
+      HomeBannerImages: []
+    }
+  },
+  mounted() {
+    this.onBanner()
+    this.kecheng()
+  },
+
+  methods: {
+    goQuestion(courseId) {
+      // this.$router.push({ name: 'ClassInfo', params: { courseId: courseId } })
+      this.$router.push('/Questionnaire')
+    },
+    parseTime, //时间格式化
+
+    kecheng() {
+      getCourse().then((e) => {
+        // console.log(parseTime(aTime, '{y}年{m}月{d}日 {h}:{i}'))
+
+        this.courseList = e.records
+      })
+    },
+    onBanner() {
+      getBanner('Training').then((e) => {
+        this.HomeBannerImages = e.records
+
+        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 //结束，显示我也是有底线的
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.mglr-10 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.Course-box {
+  width: 100vw;
+
+  .banner-box-top {
+    position: relative;
+    margin-top: 10px;
+    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: 2em;
+  }
+
+  .custom-indicator {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    right: 0;
+    bottom: -1em;
+    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>

src/views/components/CourseCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="course-card">
+    <div class="media-box">
+      <div class="media-head">
+        <img :src="thumb" alt="">
+      </div>
+      <div class="media-body">
+        <div class="title">{{title}}</div>
+        <div class="subtitle">{{dateStr}}</div>
+      </div>
+    </div>
+    <div class="card-footer">
+      <div class="footer-body">
+        查看详情
+      </div>
+      <div class="footer-action">
+        <van-icon name="arrow" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { parseTime } from "@/util/formattingData";
+
+export default {
+  name: 'CourseCard',
+  props: {
+    title: String,
+    startDate: [String, Date],
+    endDate: [String, Date],
+    thumb: String
+  },
+  computed: {
+    dateStr() {
+      if (!this.startDate || !this.endDate) return '课程时间: 暂无';
+
+      const start = parseTime(this.startDate, '{y}-{m}-{d} {h}:{i}')
+      const end = parseTime(this.endDate, '{y}-{m}-{d} {h}:{i}')
+
+      return `课程时间: ${start} ~ ${end}`
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.course-card {
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 6px;
+  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.06);
+
+  & + & {
+    margin-top: 1.5em;
+  }
+
+  .media-box, .card-footer {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .media-box {
+    padding: 1em;
+    .media-head {
+      flex: none;
+      width: 20vw;
+
+      & > img {
+        width: 100%;
+        min-height: 20vw;
+        border-radius: 50%;
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25);
+      }
+    }
+
+    .media-body {
+      margin-left: 1em;
+      flex: 1;
+
+      .title {
+        font-size: 1.2em;
+        color: #000;
+        min-height: 2.6em;
+        line-height: 1.3em;
+      }
+
+      .subtitle {
+        color: rgb(133, 133, 133);
+      }
+    }
+  }
+
+  .card-footer {
+    padding: 1em;
+    border-top: 1px solid rgb(238, 238, 238);
+
+    & > div {
+      color: rgb(133, 133, 133);
+    }
+
+    .footer-action {
+      flex: none;
+      width: 1em;
+    }
+  }
+}
+</style>