Merge branch 'master' of http://git.ycjcjy.com/state_grid/training-wx

src/App.vue

 <template>
   <div id="app">
     <router-view />
-    <Tabber />
   </div>
 </template>
 
   computed: {
     ...mapState(['LOADING'])
   },
-  mounted() {
-    // this.onLogin()
-  },
-  methods: {
-    // onLogin() {
-    //   UserLogin('123').then((e) => {
-    //     console.log(e)
-    //     console.log(22222222222222222222222)
-    //     let tokens = e.token
-    //     this.$store.commit('SET_USER_INFO', { token: tokens })
-    //   })
-    // }
-  }
 }
 </script>
 

src/components/ClassInfo.vue

-<template>
-  <div class="class-box">
-    <img width="100%" height="200vh" :src="ClassContent.thumb" alt />
-    <div class="class-box-body">
-      <div class="class-box-body-top">
-        <div class="class-box-body-top-title">{{ClassContent.title}}</div>
-        <div class="class-box-body-top-Info">
-          <div
-            class="class-box-body-top-Info-Time"
-          >课程时间：{{parseTime(ClassContent.startDate,'{m}月{d}日 {h}:{i}')}}~{{parseTime(ClassContent.endDate,'{m}月{d}日 {h}:{i}')}}</div>
-          <div
-            class="class-box-body-top-Info-Shoucang"
-            @click="ClassContent.isFavored==null? collectionHande():deleteColl()"
-          >
-            <img :src="ClassContent.isFavored?on:off" alt />
-            <span>{{ClassContent.isFavored?'已收藏':'收藏'}}</span>
-          </div>
-        </div>
-      </div>
-      <div class="class-box-body-box">
-        <div>{{ClassContent.subTitle}}</div>
-        <img :src="ClassContent.content" alt />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCourseInfof, addCollection, deleteCollection } from '../util/api'
-import { parseTime, SignInTime } from '../util/formattingData'
-
-export default {
-  data() {
-    return {
-      ClassContent: {},
-      isShoucang: false,
-      courseIds: '',
-
-      on: require('../assets/Collection/on.png'),
-      off: require('../assets/Collection/off.png')
-    }
-  },
-  mounted() {
-    this.onloadClass()
-    this.courseIds = this.$route.query.courseId
-  },
-  methods: {
-    parseTime,
-    onloadClass() {
-      getCourseInfof(this.$route.query.courseId).then((e) => {
-        this.ClassContent = e
-        if (e.isFavored) {
-          this.isShoucang = true
-        }
-
-        console.log(e)
-      })
-    },
-    collectionHande() {
-      addCollection({
-        targetId: this.$route.query.courseId,
-        targetName: this.ClassContent.title,
-        targetType: 'course'
-      }).then((e) => {
-        console.log(e)
-        this.$toast('收藏成功')
-        this.onloadClass()
-      })
-    },
-    deleteColl() {
-      deleteCollection({
-        targetId: this.$route.query.courseId,
-        targetName: this.ClassContent.title,
-        targetType: 'course'
-      }).then((e) => {
-        console.log(e)
-        this.$toast('取消收藏成功')
-        this.onloadClass()
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.class-box {
-  width: 100vw;
-  height: 100%;
-  &-body {
-    width: 100%;
-    border-radius: 30px;
-    background-color: #fff;
-    position: absolute;
-    top: 54vw;
-    height: calc(100% - 54vh);
-    &-top {
-      width: 100%;
-      height: 10vh;
-
-      &-title {
-        padding: 10px 20px 8px 20px;
-        width: 70%;
-        font-size: 14px;
-        font-weight: 700;
-      }
-      &-Info {
-        padding: 0px 20px;
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        &-Time {
-          font-size: 9px;
-          color: #999;
-        }
-        &-Shoucang {
-          display: flex;
-          align-items: center;
-
-          > img {
-            width: 18px;
-            padding-right: 5px;
-          }
-          & > span {
-            color: #999;
-            font-size: 10px;
-          }
-        }
-      }
-    }
-    &-box {
-      margin: 0 auto;
-      box-shadow: 0 0 15px rgb(214, 214, 214);
-      min-height: 67vh;
-      border-radius: 30px;
-      background-color: #fff;
-      position: absolute;
-      top: 13vh;
-      padding: 1.5em;
-      > img {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>

src/global_style.less

+
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-0 {
+  flex: none;
+}
+

src/layout/index.vue

     <router-view />
 
     <!-- 底部导航栏 -->
-    <van-tabbar v-model="active">
+    <van-tabbar v-model="active" active-color="#000" inactive-color="#D9DEE4" >
       <van-tabbar-item
         v-for="item in tabbar"
-        @click="goto(item.path)"
         :key="item.path"
         :icon="item.icon"
+        :to="item.path"
       >{{ item.text }}</van-tabbar-item>
     </van-tabbar>
   </div>

src/main.js

 import Vue from 'vue'
-import App from './App.vue'
-import animated from 'animate.css'
-import { Login, redirect } from './util/initial'
-
-import Questionnaire from './components/Questionnaire'
-import Loading from './components/Questionnaire/Loading.vue';
-import router from './router/index'//路由
-import store from './store';//状态管理
+import 'animate.css'
 import {
   Cell, CellGroup,
   Icon,
   NavBar,
   Image, SwipeItem, Tag, Swipe, Divider, Picker, Popup, List,ImagePreview 
 } from 'vant';
+import App from './App.vue'
+import { Login, redirect } from './util/initial'
+
+// import Questionnaire from './views/components/Questionnaire'
+// import Loading from './views/components/Questionnaire/Loading.vue';
+import router from './router/index'//路由
+import store from './store';//状态管理
+
+import './global_style.less'
+
 Vue.config.productionTip = false
 
 Vue.use(Popup);
 Vue.use(Tabbar).use(TabbarItem);
 Vue.use(Button);
 Vue.use(Icon);
-Vue.component('v-loading', Loading);
-Vue.use(Questionnaire)
-Vue.use(animated)
+// Vue.component('v-loading', Loading);
+// Vue.use(Questionnaire)
+// Vue.use(animated)
 
 // Vue.use(Tabbar);
 // Vue.use(TabbarItem);
   }).$mount('#app')
 
 })
-
-
-

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 
-import store from '../store'
-
 import Course from '@/views/Course.vue'//课程
-import MyCollection from '@/components/MyCollection.vue'//收藏
-import signIn from '@/components/signIn.vue'//打卡
-import ClassInfo from '@/components/ClassInfo.vue'//课堂详情
+import MyCollection from '@/views/MyCollection.vue'//收藏
+import signIn from '@/views/signIn.vue'//打卡
+import ClassInfo from '@/views/ClassInfo.vue'//课堂详情
 import StrongPhoto from '@/views/StrongPhoto.vue'//精彩集锦
 import UserCenter from '@/views/UserCenter.vue'//我的页面
-import Questionnaire from '@/components/Questionnaire.vue'
-import SetUser from '@/components/userPages/SetUser.vue'//修改个人信息
+import Questionnaire from '@/views/Questionnaire.vue'
+import SetUser from '@/views/userPages/SetUser.vue'//修改个人信息
 // // import Login from '../Login.vue'
 
 
 Vue.use(Router)
 
-
-
 const router = new Router({
   routes: [
 
-
-    //培训通知
     {
       path: '/',
-      name: 'Course',
-      component: Course,
-      meta: {
-        requireAuth: true //是否登陆
-      }
-
-
-    },
-    //精彩集锦
-    {
-      path: '/StrongPhoto',
-      name: 'StrongPhoto',
-      component: StrongPhoto,
-      meta: {
-        requireAuth: true //是否登陆
-      }
-
-    },
-    //个人中心
-    {
-      path: '/UserCenter',
-      name: 'UserCenter',
-      component: UserCenter,
-      meta: {
-        requireAuth: false //是否登陆
-      }
+      name: 'index',
+      redirect: '/Course',
+      component: () => import('@/layout/index.vue'),
+      children: [
+        //培训通知
+        {
+          path: 'Course',
+          name: 'Course',
+          component: Course,
+        },
+        //精彩集锦
+        {
+          path: 'StrongPhoto',
+          name: 'StrongPhoto',
+          component: StrongPhoto,
+        },
+        //个人中心
+        {
+          path: 'UserCenter',
+          name: 'UserCenter',
+          component: UserCenter,
+        },
+      ]
     },
 
     // 修改个人信息
       path: '/SetUser',
       name: 'SetUser',
       component: SetUser,
-      meta: {
-        requireAuth: true //是否登陆
-      }
     },
     //问卷页面
     {
       path: '/Questionnaire',
       name: 'Questionnaire',
       component: Questionnaire,
-      meta: {
-        requireAuth: true //是否登陆
-      }
     },
     //打卡页面
     {
       path: '/signIn',
       name: 'signIn',
       component: signIn,
-      meta: {
-        requireAuth: true //是否登陆
-      }
     },
     //课程详情页面
     {
       path: '/ClassInfo',
       name: 'ClassInfo',
       component: ClassInfo,
-      meta: {
-        requireAuth: true,//是否登陆
-        showBottomTabBar: true
-      }
     },
     //收藏
     {
       path: '/MyCollection',
       name: 'MyCollection',
       component: MyCollection,
-
     },
-
-
   ]
 
 })
-router.beforeEach((to, from, next) => {
-  const { personId } = store.state.user
-
-
-  console.log('-----person.personId---->', personId)
-
-  // 未登录
-  if (!personId) {
-    console.log(2222222);
-  } else {
-    console.log('登陆了');
-  }
-
-  next()
-})
-
-
 
 export default router;

src/views/ClassInfo.vue

+<template>
+  <div class="class-box">
+    <ratio-div class="thumb-banner" :ratio="0.6">
+      <img width="100%" :src="ClassContent.thumb" alt />
+    </ratio-div>
+
+    <div class="summary">
+      <div class="title">
+        {{ClassContent.title}}
+      </div>
+      <div class="flex" style="margin-top: 16px">
+        <div class="flex-1 subtitle">
+          {{dateStr}}
+        </div>
+        <div class="flex-0" @click="handleFavor()">
+          <span>
+            <van-icon size="1.4em" :name="favor.icon" :color="favor.color" />
+          </span>
+          <span class="star-favor">{{favor.text}}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-bar"></div>
+    
+    <div class="class-box-body">
+      <img :src="ClassContent.content" alt />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCourseInfof, addCollection, deleteCollection } from '@/util/api'
+import { parseTime, SignInTime } from '@/util/formattingData'
+
+export default {
+  components: {
+    RatioDiv: () => import('@/components/RatioDiv/index.vue')
+  },
+  data() {
+    return {
+      ClassContent: {},
+      isShoucang: false,
+      courseIds: '',
+
+      on: require('@/assets/Collection/on.png'),
+      off: require('@/assets/Collection/off.png')
+    }
+  },
+  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}`
+    },
+    favor() {
+      const isFavored = this.ClassContent.isFavored || false
+
+      return {
+        icon: isFavored ? 'star' : 'star-o',
+        color: isFavored ? '#2BB898' : '#000',
+        text: isFavored?'已收藏':'收藏',
+      }
+    }
+  },
+  watch: {
+    '$route.query.courseId': {
+      handler(id) {
+        this.onloadClass(id)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onloadClass(id) {
+      const courseId = id || this.$route.query.courseId;
+
+      getCourseInfof(courseId).then((e) => {
+        this.ClassContent = e
+        if (e.isFavored) {
+          this.isShoucang = true
+        }
+
+        console.log(e)
+      })
+    },
+    handleFavor() {
+      if (this.ClassContent.isFavored) {
+        this.deleteColl()
+      } else {
+        this.collectionHande()
+      }
+    },
+    collectionHande() {
+      addCollection({
+        targetId: this.$route.query.courseId,
+        targetName: this.ClassContent.title,
+        targetType: 'course'
+      }).then((e) => {
+        console.log(e)
+        this.ClassContent.isFavored = true
+        this.$toast('收藏成功')
+        // this.onloadClass()
+      })
+    },
+    deleteColl() {
+      deleteCollection({
+        targetId: this.$route.query.courseId,
+        targetName: this.ClassContent.title,
+        targetType: 'course'
+      }).then((e) => {
+        console.log(e)
+        this.ClassContent.isFavored = false
+        this.$toast('取消收藏成功')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.class-box {
+  font-size: 14px;
+  height: 100%;
+  background: #fff;
+
+  .summary {
+    margin-top: -30px;
+    font-size: 12px;
+    color: #000;
+    padding: 24px 2em 3em;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    position: relative;
+
+    .title {
+      font-size: 1.3em;
+      // min-height: 2.6em;
+      line-height: 1.4em;
+    }
+    .subtitle {
+      color: rgb(133, 133, 133);
+    }
+
+    .star-favor {
+      display: inline-block;
+      margin-left: .6em;
+      vertical-align: top;
+    }
+  }
+
+  .content-bar {
+    position: relative;
+    margin-top: -1.5em;
+    box-shadow: 0 0 4px 4px rgba(0, 0, 0, .08);
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    height: 30px;
+    background: #fff;
+  }
+
+  &-body {
+    position: relative;
+    background: #fff;
+    padding: 0 2em 1em;
+
+    > img {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/Course.vue

     
     <!-- 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>
+      <course-card
+        v-for="item in courseList"
+        :key="item.courseId"
+        v-bind="item"
+        @click.native="$router.push({ name: 'ClassInfo', query: { courseId: item.courseId } })"
+      ></course-card>
     </van-list>
   </div>
 </template>

src/components/Questionnaire.vue → src/views/Questionnaire.vue

 </template>
 
 <script>
-import { getQuestion, getQuestionInfo, getQuestionAnswer } from '../util/api'
-import query from '../util/query'
+import { getQuestion, getQuestionInfo, getQuestionAnswer } from '@/util/api'
+// import query from '@/util/query'
 
 export default {
   name: 'QuestionDetail',
   components: {
-    Question: () => import('./Question'),
-    Popup: () => import('./Questionnaire/Popup.vue'),
-    QuestionnHome: () => import('./QuestionnHome.vue')
+    Question: () => import('./components/Question'),
+    Popup: () => import('./components/Questionnaire/Popup.vue'),
+    QuestionnHome: () => import('./components/QuestionnHome.vue')
   },
   props: {},
   data() {

src/components/QuestionnHome.vue → src/views/components/QuestionnHome.vue

 </template>
 
 <script>
-import { getQuestionnaire } from '../util/api'
+import { getQuestionnaire } from '@/util/api'
 
 export default {
   name: 'QuestionnHome',