update

.eslintrc.js

@@ -354,7 +354,7 @@ module.exports = {
     'prefer-spread': 0,
     'prefer-reflect': 0,
     'quote-props': [0, 'always'],
-    radix: 2,
+    radix: 0,
     'id-match': 0,
     'require-yield': 0,
     'sort-vars': 0,

src/api/app.js

@@ -1,5 +1,5 @@
 import { request, getRequestParams } from '@/utils/request';
-import { getUserInfo } from '@/utils/auth';
+import { getToken } from '@/utils/auth';
 
 /**
  * 得到语言列表
@@ -32,11 +32,12 @@ export function GetWordPack(data) {
  * @param {String} SecurityLevel 保密级别
  */
 export function fileUpload(SecurityLevel, file) {
-  const { session_id, user_code, user_type } = getUserInfo();
+  const { token, isHas } = getToken();
+
   let params = {
-    UserCode: user_code,
-    UserType: user_type,
-    SessionID: session_id,
+    UserCode: isHas ? token.user_code : '',
+    UserType: isHas ? token.user_type : '',
+    SessionID: isHas ? token.session_id : '',
     SecurityLevel
   };
   const formData = new FormData();

src/api/course.js

@@ -271,3 +271,18 @@ export function GetCourseInfoBox(data) {
     data
   });
 }
+
+/**
+ * 申请加入课程（购买课程）
+ * @param {Object} data
+ */
+export function ApplyJoinCourse(data) {
+  let params = getRequestParams('teaching-course_manager-ApplyJoinCourse');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/components/payment/Audit.vue

@@ -0,0 +1,259 @@
+<template>
+  <!-- 审核 -->
+  <div class="Nopyment">
+    <div class="message">
+      <div>
+        <img :src="data.coverUrl" alt="" />
+      </div>
+      <div class="text">
+        <p class="p1">
+          {{ data.name }}
+        </p>
+        <p class="p2">
+          <span>xx课程</span>
+        </p>
+        <p class="p3">{{ data.teacher }}</p>
+      </div>
+      <div class="price">
+        <p>￥{{ data.price }}</p>
+      </div>
+    </div>
+    <div class="total">
+      <p class="p1">
+        <span> 一件商品，总金额： </span>
+        <span class="co-value">￥{{ data.price }}</span>
+      </p>
+      <p class="p2">
+        <span> 优惠折扣： </span>
+        <span class="co-value">-￥{{ discount_money }}</span>
+      </p>
+      <p class="p4">
+        <span></span>
+        <span class="co-value useCode">使没使用优惠码</span>
+      </p>
+      <p class="p3">
+        <span> 应付： </span>
+        <span class="co-value">￥{{ receivables_money }}</span>
+      </p>
+    </div>
+    <div class="submitBtn">
+      <div class="text">
+        <img src="../../assets/course_details/auditimg.png" alt="" />
+        参加本课程学习需提交申请，审核通过后完成付款即可参加学习。
+      </div>
+      <button @click="buy(data)">提交申请</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ApplyJoinCourse } from '@/api/course';
+
+export default {
+  props: ['data'],
+  data() {
+    // 这里存放数据
+    return {
+      discount_code: '', // 优惠码
+      discount_money: 0.0, // 优惠金额
+      receivables_money: this.data.price // 应收款
+    };
+  },
+  // 方法集合
+  methods: {
+    // 提交申请
+    buy(item) {
+      ApplyJoinCourse({
+        course_id: '20210607-1015-XUWUUZO8MLEU', // 课程 ID
+        discount_code: '' // 优惠码 （目前暂时没有用到）
+      }).then(res => {
+        console.log(res);
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.Nopyment {
+  .message {
+    width: 656px;
+    height: 152px;
+    background: rgba(70, 70, 70, 0.03);
+    border-radius: 8px;
+    display: flex;
+
+    img {
+      width: 120px;
+      height: 120px;
+      margin-left: 16px;
+      margin-top: 16px;
+    }
+
+    .text {
+      margin-left: 24px;
+
+      .p1 {
+        width: 360px;
+        //   height: 45px;
+        max-height: 48px;
+        font-size: 16px;
+        line-height: 20px;
+        color: #2c2c2c;
+        margin-top: 22px;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .p2 {
+        margin-top: 10px;
+
+        span {
+          width: 64px;
+          height: 24px;
+          background: #ffefd8;
+          border-radius: 4px;
+          font-weight: bold;
+          font-size: 12px;
+          text-align: center;
+          color: #f90;
+          line-height: 24px;
+          padding: 2px 8px;
+        }
+      }
+
+      .p3 {
+        margin-top: 10px;
+      }
+    }
+
+    .price {
+      p {
+        margin-left: 67px;
+        margin-top: 22px;
+        font-weight: bold;
+        font-size: 16px;
+        text-align: right;
+        color: #ff4c00;
+      }
+    }
+  }
+
+  .promotionCode {
+    display: flex;
+    justify-content: flex-start;
+    align-self: center;
+    width: 100%;
+    margin-top: 24px;
+    height: 58px;
+    line-height: 56px;
+    border-top: 1px solid rgba(44, 44, 44, 0.15);
+    border-bottom: 1px solid rgba(44, 44, 44, 0.15);
+
+    .sp1 {
+      font-size: 16px;
+      color: #000;
+    }
+
+    input {
+      padding: 0 24px;
+      flex: 1;
+      height: 56px;
+      outline: none;
+      border: none;
+      box-sizing: border-box;
+    }
+
+    .sp2 {
+      cursor: pointer;
+      font-size: 16px;
+      color: #f90;
+    }
+  }
+
+  .total {
+    width: 656px;
+    text-align: right;
+    color: #000;
+    font-size: 16px;
+    padding-top: 24px;
+
+    .useCode {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    > p {
+      > span {
+        display: inline-block;
+      }
+
+      .co-value {
+        width: 160px;
+      }
+    }
+
+    .p1 {
+      > span {
+        display: inline-block;
+        line-height: 24px;
+      }
+    }
+
+    .p2 {
+      margin: 16px 0 10px;
+    }
+
+    .p3 {
+      > span {
+        line-height: 36px;
+      }
+
+      .co-value {
+        font-size: 24px;
+        color: #ff4c00;
+      }
+    }
+  }
+
+  .submitBtn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+
+    .text {
+      width: 520px;
+      height: 40px;
+      background: #ff6c69;
+      border-radius: 4px;
+      color: white;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 24px;
+        margin-left: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    button {
+      width: 120px;
+      height: 40px;
+      background: #f90;
+      border-radius: 4px;
+      color: white;
+      line-height: 40px;
+      text-align: center;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/icons/svg/view.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path d="M12 18C17.5229 18 22 12 22 12C22 12 17.5229 6 12 6C6.47715 6 2 12 2 12C2 12 6.47715 18 12 18Z" stroke="#333333" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5Z" stroke="#333333" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/router/index.js

@@ -144,6 +144,17 @@ const routes = [
     ]
   },
   {
+    path: '/course_details',
+    component: Layout,
+    redirect: '/GoodsDetail',
+    children: [
+      {
+        path: '/GoodsDetail',
+        component: () => import('@/views/course_details/index')
+      }
+    ]
+  },
+  {
     path: '*',
     redirect: '/404'
   }

src/store/modules/user.js

@@ -1,19 +1,19 @@
-import { getUserInfo, removeSessionID, setUserInfo } from '@/utils/auth';
+import { setToken, getToken, removeToken } from '@/utils/auth';
 import { user } from '@/store/mutation-types';
 import { resetRouter } from '@/router';
 import { login, updateLanguageType, GetLoginInfoByAccessCode } from '@/api/user';
 
 const getDefaultSate = () => {
-  const { session_id, user_code, user_real_name, user_type, user_name, image_url } = getUserInfo();
+  const { token, isHas } = getToken();
 
   return {
-    session_id: session_id,
-    user_code: user_code,
-    user_real_name: user_real_name,
-    user_type: user_type,
-    user_name: user_name,
-    image_url: image_url,
-    language_type: localStorage.getItem('language_type') || 'ZH'
+    session_id: isHas ? token.session_id : '',
+    user_code: isHas ? token.user_code : '',
+    user_real_name: isHas ? token.user_real_name : '',
+    user_type: isHas ? token.user_type : '',
+    user_name: isHas ? token.user_name : '',
+    image_url: isHas ? token.image_url : '',
+    language_type: isHas ? (token.language_type ? token.language_type : 'ZH') : 'ZH'
   };
 };
 
@@ -27,13 +27,15 @@ const mutations = {
     state,
     { user_code, user_real_name, user_type, language_type, session_id, image_url }
   ) => {
+    console.log(language_type);
+    console.log(language_type || 'ZH');
     state.user_code = user_code;
     state.user_real_name = user_real_name;
     state.user_type = user_type;
     state.language_type = language_type;
     state.session_id = session_id;
     state.image_url = image_url;
-    localStorage.setItem('language_type', language_type);
+    state.language_type = language_type || 'ZH';
   },
   [user.UPDATE_LANGUAGE_TYPE]: (state, language_type) => {
     localStorage.setItem('language_type', language_type);
@@ -48,7 +50,7 @@ const actions = {
     return new Promise((reslove, reject) => {
       login(loginForm)
         .then(response => {
-          setUserInfo(response);
+          setToken(response);
           commit(user.SET_USER_INFO, response);
           reslove();
         })
@@ -63,7 +65,7 @@ const actions = {
     return new Promise((reslove, reject) => {
       GetLoginInfoByAccessCode(access_code)
         .then(response => {
-          setUserInfo(response);
+          setToken(response);
           commit(user.SET_USER_INFO, response);
           reslove();
         })
@@ -76,7 +78,7 @@ const actions = {
   // 用户退出
   signOut({ commit }) {
     return new Promise(resolve => {
-      removeSessionID();
+      removeToken();
       resetRouter();
       commit(user.RESET_STATE);
       resolve();
@@ -99,7 +101,14 @@ const actions = {
 
   resetSessionID({ commit }) {
     return new Promise(reslove => {
-      removeSessionID();
+      removeToken();
+      commit(user.RESET_STATE);
+      reslove();
+    });
+  },
+
+  resetState({ commit }) {
+    return new Promise(reslove => {
       commit(user.RESET_STATE);
       reslove();
     });

src/utils/auth.js

@@ -1,39 +1,27 @@
 import Cookies from 'js-cookie';
 
-const userInfoList = [
-  'user_code',
-  'session_id',
-  'user_type',
-  'user_real_name',
-  'user_name',
-  'image_url'
-];
-
-export function getUserInfo() {
-  let userInfo = {};
-  for (let i = 0; i < userInfoList.length; i++) {
-    const key = userInfoList[i];
-    userInfo[key] = Cookies.get(key);
-  }
-  return userInfo;
-}
+const TokenKey = 'GCLS_Token';
 
 export function getSessionID() {
-  return Cookies.get('session_id');
+  let token = Cookies.get(TokenKey);
+  if (token) {
+    return JSON.parse(token)['session_id'];
+  }
+  return '';
 }
 
-export function setUserInfo(data) {
-  for (let i = 0; i < userInfoList.length; i++) {
-    const key = userInfoList[i];
-
-    Cookies.set(key, data[key]);
+export function getToken() {
+  const token = Cookies.get(TokenKey);
+  if (token) {
+    return { token: JSON.parse(token), isHas: true };
   }
+  return { token: {}, isHas: false };
 }
 
-export function removeSessionID() {
-  for (let i = 0; i < userInfoList.length; i++) {
-    const key = userInfoList[i];
+export function setToken(token) {
+  return Cookies.set(TokenKey, token);
+}
 
-    Cookies.remove(key);
-  }
+export function removeToken() {
+  return Cookies.remove(TokenKey);
 }

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import store from '@/store';
 import { Message } from 'element-ui';
-import { getUserInfo } from '@/utils/auth';
+import { getToken } from '@/utils/auth';
 
 axios.defaults.withCredentials = true; // 跨域请求时是否需要使用凭证
 axios.defaults.dataType = 'json';
@@ -84,13 +84,13 @@ service.interceptors.response.use(
  * @returns {Object} 返回必需的请求参数
  * */
 export function getRequestParams(MethodName) {
-  const { session_id, user_code, user_type } = getUserInfo();
+  const { token, isHas } = getToken();
 
   return {
     MethodName,
-    UserCode: user_code,
-    UserType: user_type,
-    SessionID: session_id
+    UserCode: isHas ? token.user_code : '',
+    UserType: isHas ? token.user_type : '',
+    SessionID: isHas ? token.session_id : ''
   };
 }
 

src/views/404.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="http-404">
     <h1>404</h1>
-    <router-link to="/live">直播</router-link>
   </div>
 </template>
 

src/views/CourseDetails/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="course-details">
-    <div class="course-details-introduction"></div>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="scss">
-@import '~@/styles/mixin.scss';
-
-.course-details {
-  @include container;
-
-  &-introduction {
-    height: 560px;
-    margin-bottom: 24px;
-  }
-}
-</style>

src/views/course_details/index.vue

@@ -0,0 +1,1333 @@
+<template>
+  <!-- 课程详情 -->
+  <div v-if="CourseData" class="CourseDetail">
+    <div v-if="CourseData" v-loading="loading" class="main">
+      <div class="bookDetail">
+        <div class="rightUp">
+          <span>HOT</span>
+        </div>
+        <div class="text">
+          <p class="p1">{{ CourseData.name }}</p>
+          <p>Beijing language and Culture University</p>
+          <p>{{ CourseData.teacher_list[0].teacher_name }}</p>
+          <p>
+            <!-- Learn to design data models, build data warehouses and data lakes,
+            automate data pipelines, and work with massive datasets. At the end
+            of the program, you’ll combine your new skills by completing a
+            capstone project. -->
+            {{ CourseData.intro }}
+          </p>
+          <p>
+            <span> {{ CourseData.begin_date }} </span>
+            <span>-</span>
+            <span> {{ CourseData.end_date }} </span>
+          </p>
+
+          <div class="operation">
+            <!-- <div class="countdown" v-if="backTime">
+              <p>距离关闭购买渠道还有</p>
+              <div class="time">
+                <div>
+                  <p>{{ backTime.days }}</p>
+                  <p>天</p>
+                </div>
+                <div>
+                  <p>{{ backTime.hours }}</p>
+                  <p>小时</p>
+                </div>
+                <div>
+                  <p>{{ backTime.minutes }}</p>
+                  <p>分钟</p>
+                </div>
+                <div>
+                  <p>{{ backTime.seconds }}</p>
+                  <p>秒</p>
+                </div>
+              </div>
+            </div>
+            <div v-else>The purchase channel has been closed</div>-->
+            <div>
+              <span class="price">
+                $
+                <span class="price_1" v-text="changePrice('1', CourseData.price)"></span>
+                <span class="price_2" v-text="changePrice('2', CourseData.price)"></span>
+              </span>
+              <button v-if="!IsPurchase" class="get" @click="getPurchase">获取课程</button>
+              <button v-else class="acquired" @click="getPurchase">ACQUIRED</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="more">
+        <div class="moreTitle">教学材料</div>
+        <div class="moreList">
+          <div v-for="(item, i) in CourseData.book_list" :key="i" class="moreOne">
+            <div>
+              <img :src="item.book_picture_url" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">{{ item.book_name }}</p>
+              <p>{{ item.book_org_name }}</p>
+              <p>{{ item.book_author }}</p>
+              <div class="operation">
+                <span class="price">
+                  $
+                  <span class="price_1" v-text="changePrice('1', item.book_price)"></span>
+                  <span class="price_2" v-text="changePrice('2', item.book_price)"></span>
+                </span>
+                <button v-if="!IsPurchase" class="get">购买</button>
+                <button v-else class="acquired">ACQUIRED</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="more">
+        <div class="moreTitle">老师</div>
+        <div class="moreList teacherList">
+          <div v-for="(item, i) in CourseData.teacher_list" :key="i" class="moreOne">
+            <div>
+              <img :src="item.teacher_image_url" alt="" />
+            </div>
+            <div class="text">
+              <p class="p1">{{ item.teacher_name }}</p>
+              <p>{{ item.teacher_org_name }}</p>
+              <p>
+                拌铍痹柔宫搏疲执胰逊持侨懈赫蜘秩锥畴陵黑阎停拢狂员棕鸟今纪秘也害棍亩疫潜，荫畜凉劈押望鹏艇从地赏果汛*隔微颊剪法震占
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="coursearrangement">
+        <div class="moreTitle">课程安排</div>
+        <div v-for="(item, i) in CourseData.cs_item_list" :key="i" class="angement">
+          <div class="courseOne">
+            <div class="title">
+              <div>
+                <span>{{ i + 1 }}.</span>
+                <span>{{ item.name }}</span>
+              </div>
+              <div style="color: #737373">{{ item.begin_time }} ~ {{ item.end_time }}</div>
+            </div>
+          </div>
+          <div class="content" style="width: 670px">
+            <el-collapse @change="handleChange">
+              <el-collapse-item :name="item.id">
+                <div slot="title" class="Coursetasks">
+                  课程任务
+                  <img
+                    v-show="openList.indexOf(item.id) != -1"
+                    class="open1"
+                    src="../../assets/course_details/open1.png"
+                    alt=""
+                  />
+                  <img
+                    v-show="openList.indexOf(item.id) == -1"
+                    class="open2"
+                    src="../../assets/course_details/open2.png"
+                    alt=""
+                  />
+                </div>
+                <div class="courseContent">
+                  <div class="tasks">
+                    <div class="title">
+                      <span></span>
+                      课前任务
+                    </div>
+                    <div class="content">
+                      <el-collapse-item
+                        v-for="(it, it_i) in item.pre_task_list"
+                        :key="it_i"
+                        :name="it.id"
+                      >
+                        <div
+                          slot="title"
+                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                        >
+                          <span>{{ it.name }}</span>
+                          <span>
+                            <span>
+                              <img src="../../assets/course_details/people.png" alt="" />
+                              姓名</span
+                            >
+                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
+                              {{ it.begin_time }} ~ {{ it.end_time }}
+                            </span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              {{ it.content }}
+                            </p>
+                          </div>
+                          <div v-if="it.courseware_list.length > 0">
+                            <span>课件</span>
+                            <div>
+                              <div
+                                v-for="(courseware, courseware_i) in it.courseware_list"
+                                :key="courseware_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/file.png" alt="" />
+                                <span> {{ courseware.courseware_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div v-if="it.accessory_list.length > 0">
+                            <span>附件</span>
+                            <div>
+                              <div
+                                v-for="(accessory, accessory_i) in it.accessory_list"
+                                :key="accessory_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/fileType1.png" alt="" />
+                                <span> {{ accessory.file_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item>
+                      <!-- <el-collapse-item style="margin-top: 16px" name="1-2">
+                        <div
+                          slot="title"
+                          :class="
+                            openList.indexOf('1-2') != -1
+                              ? 'contenttitle2'
+                              : 'contenttitle'
+                          "
+                        >
+                          <span>阅读</span>
+                          <span>
+                            <span>
+                              <img
+                                src="../../assets/course_details/people.png"
+                                alt=""
+                              />
+                              姓名</span
+                            >
+                            <span class="gray">08-21 06:00 ~ 11:00</span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              You need to complete the online courseware task.
+                              Choose one of the attached articles to read aloud
+                              and record it and upload it.
+                            </p>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/fileType1.png"
+                                  alt=""
+                                />
+                                <span> The first class.doc </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item> -->
+                    </div>
+                  </div>
+                  <div class="tasks">
+                    <div class="title">
+                      <span></span>
+                      课中任务
+                    </div>
+                    <div class="content">
+                      <el-collapse-item
+                        v-for="(it, it_i) in item.mid_task_list"
+                        :key="it_i"
+                        :name="it.id"
+                      >
+                        <div
+                          slot="title"
+                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                        >
+                          <span>{{ it.name }}</span>
+                          <span>
+                            <span>
+                              <img src="../../assets/course_details/people.png" alt="" />
+                              姓名</span
+                            >
+                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
+                              {{ it.begin_time }} ~ {{ it.end_time }}
+                            </span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              {{ it.content }}
+                            </p>
+                          </div>
+                          <div v-if="it.courseware_list.length > 0">
+                            <span>课件</span>
+                            <div>
+                              <div
+                                v-for="(courseware, courseware_i) in it.courseware_list"
+                                :key="courseware_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/file.png" alt="" />
+                                <span> {{ courseware.courseware_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div v-if="it.accessory_list.length > 0">
+                            <span>附件</span>
+                            <div>
+                              <div
+                                v-for="(accessory, accessory_i) in it.accessory_list"
+                                :key="accessory_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/fileType1.png" alt="" />
+                                <span> {{ accessory.file_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item>
+                      <!-- <el-collapse-item style="margin-top: 16px" name="1-4">
+                        <div
+                          slot="title"
+                          :class="
+                            openList.indexOf('1-4') != -1
+                              ? 'contenttitle2'
+                              : 'contenttitle'
+                          "
+                        >
+                          <span>阅读</span>
+                          <span>
+                            <span>
+                              <img
+                                src="../../assets/course_details/people.png"
+                                alt=""
+                              />
+                              姓名</span
+                            >
+                            <span class="gray">08-21 06:00 ~ 11:00</span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              You need to complete the online courseware task.
+                              Choose one of the attached articles to read aloud
+                              and record it and upload it.
+                            </p>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/fileType1.png"
+                                  alt=""
+                                />
+                                <span> The first class.doc </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item> -->
+                    </div>
+                  </div>
+                  <div v-if="item.after_task_list.length > 0" class="tasks">
+                    <div class="title">
+                      <span></span>
+                      课后任务
+                    </div>
+                    <div class="content">
+                      <el-collapse-item
+                        v-for="(it, it_i) in item.after_task_list"
+                        :key="it_i"
+                        :name="it.id"
+                      >
+                        <div
+                          slot="title"
+                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                        >
+                          <span>{{ it.name }}</span>
+                          <span>
+                            <span>
+                              <img src="../../assets/course_details/people.png" alt="" />
+                              姓名</span
+                            >
+                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
+                              {{ it.begin_time }} ~ {{ it.end_time }}
+                            </span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              {{ it.content }}
+                            </p>
+                          </div>
+                          <div v-if="it.courseware_list.length > 0">
+                            <span>课件</span>
+                            <div>
+                              <div
+                                v-for="(courseware, courseware_i) in it.courseware_list"
+                                :key="courseware_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/file.png" alt="" />
+                                <span> {{ courseware.courseware_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div v-if="it.accessory_list.length > 0">
+                            <span>附件</span>
+                            <div>
+                              <div
+                                v-for="(accessory, courseware_i) in it.accessory_list"
+                                :key="courseware_i"
+                                class="btn"
+                              >
+                                <img src="../../assets/course_details/fileType1.png" alt="" />
+                                <span> {{ accessory.file_name }} </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item>
+                      <!-- <el-collapse-item style="margin-top: 16px" name="1-6">
+                        <div
+                          slot="title"
+                          :class="
+                            openList.indexOf('1-6') != -1
+                              ? 'contenttitle2'
+                              : 'contenttitle'
+                          "
+                        >
+                          <span>阅读</span>
+                          <span>
+                            <span>
+                              <img
+                                src="../../assets/course_details/people.png"
+                                alt=""
+                              />
+                              姓名</span
+                            >
+                            <span class="gray">08-21 06:00 ~ 11:00</span>
+                            <span class="gray">···</span>
+                          </span>
+                        </div>
+                        <div class="detail">
+                          <div>
+                            <span>说明</span>
+                            <p>
+                              You need to complete the online courseware task.
+                              Choose one of the attached articles to read aloud
+                              and record it and upload it.
+                            </p>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/file.png"
+                                  alt=""
+                                />
+                                <span> say the Chinese number </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div>
+                            <span>课件</span>
+                            <div>
+                              <div class="btn">
+                                <img
+                                  src="../../assets/course_details/fileType1.png"
+                                  alt=""
+                                />
+                                <span> The first class.doc </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </el-collapse-item> -->
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </div>
+      </div>
+      <el-dialog
+        class="orderDialog"
+        title="商品详情"
+        :visible.sync="auditShow"
+        width="720px"
+        :before-close="closeaudit"
+      >
+        <audit :data="data" :goods_type="201" />
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Audit from '@/components/payment/Audit';
+import { GetCourseInfoBox } from '@/api/course';
+
+export default {
+  components: {
+    Audit
+  },
+  data() {
+    return {
+      enshrine: false,
+      IsPurchase: false,
+      SelectShow: '1', // 选择展示课程资源还是下载
+      courseRW: null,
+      openList: [],
+      timer: null, // 获取倒计时
+      backTime: new Date(),
+      CouserId: null,
+      auditShow: false,
+      loading: false,
+      data: {
+        articleId: '2',
+        coverFileId: '00101-20210705-17-RBB2NLXL',
+        coverUrl:
+          'http://gcls.helxsoft.cn/GCLSFileStore/00101/D-WFXZJCY3AK1XES1JUR/F-EN7NXT1LSO6XZEZZLK.png',
+        createTime: '2021-07-05 17:36:55',
+        id: 2,
+        isFavorite: false,
+        isPurchased: false,
+        name: '录播课程1',
+        price: '19.9',
+        status: 4,
+        tag: [''],
+        teacher: '王老师',
+        tenantId: '2021052017-HFTZIRVKWOWPAUU',
+        updateTime: '2021-07-05 17:39:42',
+        userId: '20210702-1013-3JVWVHHRGVUX',
+        videoDuration: 60,
+        visitCount: 132,
+        weight: 1
+      },
+      CourseData: null
+    };
+  },
+  created() {
+    // 获取课程详情
+    this.loading = true;
+    GetCourseInfoBox({
+      id: this.$route.query.id
+    })
+      .then(res => {
+        this.CourseData = res;
+        this.loading = false;
+      })
+      .catch(() => {
+        this.loading = false;
+      });
+    this.getBackTime();
+  },
+  // 方法集合
+  methods: {
+    // 小节时间处理
+    changeitTime(beginTime, endTime) {
+      let arr1 = beginTime.split(' ');
+      let arr2 = endTime.split(' ');
+      if (arr1[0] === arr2[0]) {
+        return arr1[0] + ' ' + arr1[1] + '~' + arr2[1];
+      }
+      return arr1[0] + ' ' + arr1[1] + '~' + arr2[0] + ' ' + arr2[1];
+    },
+    // 课程任务的打开和关闭
+    handleChange(val) {
+      this.openList = val;
+    },
+    // 选择课程资源还是下载
+    SelectShowEvent(num) {
+      this.SelectShow = num;
+    },
+    // 处理价格
+    changePrice(type, item) {
+      if (item) {
+        let str = String(item);
+        if (str.indexOf('.') !== -1) {
+          if (type === 1) {
+            return str.split('.')[0];
+          } else if (type === 2) {
+            return '.' + str.split('.')[1];
+          }
+        } else if (type === 1) {
+          return str;
+        }
+      }
+    },
+    // 收藏
+    enshrineEvent() {
+      this.enshrine = !this.enshrine;
+    },
+    // 购买   需要先加入课程 审核 审核通过之后才能购买课程
+    getPurchase() {
+      // 购买通道关闭
+      // if (!this.backTime) {
+      //   this.$message.warning("购买渠道已关闭");
+      //   return;
+      // }
+      this.auditShow = true;
+    },
+    closeaudit() {
+      this.auditShow = false;
+    },
+    // 获取当前时间到指定时间的倒计时
+    getBackTime() {
+      let targetTime = new Date('2021-7-30 13:00').getTime();
+      // 目标时间戳 - 当前时间戳 = 倒计时
+      this.timer = setInterval(() => {
+        let currentTime = new Date().getTime();
+        let backTime = targetTime - currentTime;
+        backTime = this.formatduring(backTime);
+        this.backTime = backTime;
+      }, 1000);
+    },
+    // 倒计时时间戳转换为 天 小时 分钟 秒
+    formatduring(mss) {
+      var days = parseInt(mss / (1000 * 60 * 60 * 24));
+      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
+      var seconds = parseInt((mss % (1000 * 60)) / 1000);
+      // 如果到时间了返回false  关闭购买通道  无法购买
+      if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
+        return false;
+      }
+      return {
+        days,
+        hours,
+        minutes,
+        seconds
+      };
+    }
+  },
+  beforeDestory() {
+    // 清空定时器
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.CourseDetail {
+  .nav {
+    // background: url('../../assets/learncenter/Homebg2.png') no-repeat center;
+    background-size: 100% 100%;
+    height: 60px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    position: relative;
+
+    .shade {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      color: #fff;
+      font-weight: bold;
+      font-size: 18px;
+      justify-content: space-around;
+      align-items: center;
+
+      .el-menu-demo {
+        background: rgba(0, 0, 0, 0);
+      }
+
+      // 取消组件默认的样式
+      .el-menu.el-menu--horizontal {
+        border-bottom: none;
+
+        li:hover {
+          background: none;
+        }
+
+        li {
+          background: none;
+        }
+      }
+
+      .nav_title {
+        text-align: left;
+      }
+
+      .seek {
+        input {
+          width: 450px;
+          height: 46px;
+          background: #979797;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 18px;
+          opacity: 0.5;
+        }
+
+        img {
+          position: relative;
+          right: 40px;
+          top: 8px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .main {
+    min-height: 100%;
+    padding-top: 52px;
+    background: #e5e5e5;
+    padding-bottom: 20px;
+
+    .bookDetail {
+      width: 1200px;
+      height: 452px;
+      margin: 0 auto;
+      background: url('../../assets/course_details/Rectangle113.png');
+      border-radius: 8px;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+
+      .rightUp {
+        margin: 0;
+        width: 72px;
+        height: 72px;
+        background: url('../../assets/course_details/Rectangle903.png');
+        position: absolute;
+        right: 0;
+        top: 0;
+        // text-align: right;
+        span {
+          display: inline-block;
+          color: #fff;
+          transform: rotateZ(45deg);
+          position: absolute;
+          left: 30px;
+          top: 10px;
+        }
+      }
+
+      > div {
+        margin-top: 40px;
+        margin-left: 40px;
+      }
+
+      .text {
+        width: 1100px;
+        color: white;
+
+        p {
+          font-size: 16px;
+        }
+
+        .p1 {
+          font-size: 40px;
+          margin-top: 16px;
+        }
+
+        > :not(.p1) {
+          margin-top: 20px;
+        }
+
+        .price {
+          font-size: 24px;
+
+          .price_2 {
+            font-size: 16px;
+          }
+        }
+
+        .operation {
+          display: flex;
+          align-items: flex-end;
+          justify-content: space-between;
+          margin-top: 52px;
+
+          .countdown {
+            > p {
+              color: rgba(255, 255, 255, 0.7);
+            }
+
+            .time {
+              margin-top: 16px;
+              display: flex;
+
+              div {
+                width: 48px;
+                margin-right: 48px;
+                text-align: center;
+
+                p:nth-child(1) {
+                  font-size: 40px;
+                }
+
+                p:nth-child(2) {
+                  margin-top: 5px;
+                  font-size: 24px;
+                }
+              }
+            }
+          }
+        }
+
+        .get {
+          width: 200px;
+          height: 56px;
+          background: #f90;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 30px;
+          cursor: pointer;
+        }
+
+        .acquired {
+          width: 120px;
+          height: 40px;
+          background: #d5d5d5;
+          border-radius: 4px;
+          border: none;
+          outline: none;
+          color: white;
+          font-size: 16px;
+          margin-left: 30px;
+          cursor: pointer;
+        }
+
+        .enshrine {
+          margin-left: 30px;
+
+          img {
+            width: 24px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+
+    .more {
+      width: 1200px;
+      margin: 0 auto;
+      margin-top: 30px;
+
+      .moreTitle {
+        font-weight: 600;
+        font-size: 20px;
+        color: #000;
+      }
+
+      .moreTitle::before {
+        content: '|';
+        background: #f90;
+        color: #f90;
+        margin-right: 16px;
+      }
+
+      .moreList {
+        width: 1300px;
+        margin: 0 auto;
+        // margin-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        // overflow-y: hidden;
+        // overflow-x: scroll;
+        .moreOne {
+          margin-right: 20px;
+          margin-top: 20px;
+          width: 598px;
+          height: 236px;
+          background: #fff;
+          border-radius: 8px;
+          display: flex;
+
+          > div {
+            margin-left: 32px;
+            margin-top: 32px;
+
+            img {
+              width: 120px;
+              height: 160px;
+            }
+          }
+
+          .text {
+            width: 390px;
+            margin-right: 23px;
+
+            > p:not(.p1) {
+              font-size: 16px;
+              color: #2c2c2c;
+              opacity: 0.7;
+              margin-top: 10px;
+            }
+
+            .p1 {
+              font-weight: 600;
+              font-size: 20px;
+              color: #2c2c2c;
+            }
+
+            .operation {
+              margin-top: 10px;
+              text-align: right;
+            }
+
+            .get {
+              width: 120px;
+              height: 40px;
+              background: #f90;
+              border-radius: 4px;
+              border: none;
+              outline: none;
+              color: white;
+              font-size: 20px;
+              margin-left: 30px;
+              cursor: pointer;
+            }
+
+            .acquired {
+              width: 120px;
+              height: 40px;
+              background: #d5d5d5;
+              border-radius: 4px;
+              border: none;
+              outline: none;
+              color: white;
+              font-size: 16px;
+              margin-left: 30px;
+              cursor: pointer;
+            }
+
+            .price {
+              font-size: 24px;
+
+              .price_2 {
+                font-size: 16px;
+              }
+            }
+          }
+        }
+      }
+
+      .teacherList {
+        .moreOne {
+          > div {
+            img {
+              width: 120px;
+              height: 120px;
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+
+    .coursearrangement {
+      width: 1200px;
+      margin: 0 auto;
+      margin-top: 30px;
+
+      .moreTitle {
+        font-weight: 600;
+        font-size: 20px;
+        color: #000;
+      }
+
+      .moreTitle::before {
+        content: '|';
+        background: #f90;
+        color: #f90;
+        margin-right: 16px;
+      }
+
+      .angement {
+        margin-top: 30px;
+        width: 1200px;
+        background: #fff;
+        padding: 40px 68px 40px 40px;
+        font-size: 18px;
+
+        > :not(.courseOne) {
+          padding-left: 40px;
+          margin-top: 16px;
+        }
+
+        .courseOne {
+          .title {
+            display: flex;
+            justify-content: space-between;
+
+            > div:nth-child(1) {
+              font-size: 20px;
+              font-weight: bold;
+
+              span {
+                margin-right: 24px;
+              }
+            }
+          }
+        }
+
+        .Coursetasks {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+
+          img {
+            width: 24px;
+            margin-left: 8px;
+          }
+        }
+
+        .courseContent {
+          .tasks {
+            padding-left: 10px;
+
+            .title {
+              font-size: 16px;
+              color: #2c2c2c;
+
+              span {
+                display: inline-block;
+                width: 8px;
+                height: 8px;
+                background: #fe6d68;
+                border-radius: 50%;
+                position: relative;
+                right: 3px;
+                margin-right: 16px;
+              }
+            }
+
+            .content {
+              border-left: 1px solid #fe6d68;
+              padding-left: 20px;
+              margin-top: 16px;
+              padding-bottom: 10px;
+
+              .contenttitle {
+                padding: 0 10px;
+                // margin-top: 16px;
+                width: 670px;
+                // height: 44px;
+                background: #fff;
+                border: 1px solid #e6e6e6;
+                box-sizing: border-box;
+                border-radius: 8px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 16px;
+                cursor: pointer;
+
+                img {
+                  width: 16px;
+                  margin-left: 8px;
+                }
+
+                span {
+                  margin-left: 16px;
+                }
+
+                .gray {
+                  opacity: 0.5;
+                }
+              }
+
+              .contenttitle2 {
+                padding: 0 10px;
+                // margin-top: 16px;
+                width: 670px;
+                // height: 44px;
+                background: #f9f9f9;
+                border: 1px solid #e6e6e6;
+                box-sizing: border-box;
+                border-top-left-radius: 8px;
+                border-top-right-radius: 8px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 16px;
+                cursor: pointer;
+
+                img {
+                  width: 16px;
+                  margin-left: 8px;
+                }
+
+                span {
+                  margin-left: 16px;
+                }
+
+                .gray {
+                  opacity: 0.5;
+                }
+              }
+
+              .detail {
+                width: 670px;
+                background: #fff;
+                border: 1px solid #e7e7e7;
+                box-sizing: border-box;
+                border-bottom-left-radius: 8px;
+                border-bottom-right-radius: 8px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                padding-bottom: 24px;
+
+                > div {
+                  margin-top: 24px;
+                  display: flex;
+
+                  > :nth-child(1) {
+                    width: 78px;
+                    font-size: 16px;
+                    color: #000;
+                    margin-left: 24px;
+                  }
+
+                  > :nth-child(2) {
+                    margin-left: 16px;
+
+                    img {
+                      width: 24px;
+                    }
+
+                    .btn {
+                      width: 270px;
+                      height: 40px;
+                      background: #fff;
+                      border: 1px solid #dbdbdb;
+                      box-sizing: border-box;
+                      border-radius: 4px;
+                      display: flex;
+                      align-items: center;
+                      cursor: pointer;
+
+                      img {
+                        margin-left: 16px;
+                        margin-right: 8px;
+                      }
+                    }
+
+                    .btn:not(:nth-child(1)) {
+                      margin-top: 8px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .cutDownOrimg {
+      width: 1200px;
+      margin: 0 auto;
+      margin-top: 24px;
+
+      .sele {
+        width: 318px;
+        height: 48px;
+        background: #ebebeb;
+        border-radius: 30px;
+        color: #9f9f9f;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+
+        > div {
+          width: 158px;
+          height: 48px;
+          border-radius: 30px;
+          line-height: 48px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+        .select {
+          background: #f90;
+          color: white;
+          box-shadow: 0 2px 8px rgba(255, 153, 0, 0.15);
+        }
+      }
+    }
+
+    .Catalogue {
+      margin: 24px auto;
+      width: 1200px;
+      height: 710px;
+      background: #fff;
+      display: flex;
+
+      .left {
+        width: 340px;
+        height: 710px;
+        border-right: 1px solid #d9d9d9;
+
+        .title {
+          width: 80%;
+          margin: 29px auto;
+          font-weight: 600;
+          font-size: 24px;
+          color: #000;
+        }
+      }
+
+      .right {
+        width: 860px;
+        height: 710px;
+      }
+    }
+
+    .Resources {
+      margin: 24px auto;
+      width: 1200px;
+      height: 710px;
+      background: #fff;
+      display: flex;
+
+      div {
+        height: 40px;
+        margin: 10px;
+        border: 1px solid rgba(44, 44, 44, 0.15);
+        border-radius: 4px;
+        padding: 0 10px;
+        margin-left: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        img {
+          width: 24px;
+          margin: 0 10px;
+        }
+
+        span {
+          width: 182px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.el-collapse {
+  border: none;
+
+  .el-collapse-item__header {
+    border: none;
+    height: none;
+
+    .l-collapse-item__arrow,
+    .el-icon-arrow-right {
+      display: none;
+    }
+  }
+
+  .el-collapse-item__wrap {
+    border: none;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+}
+
+.orderDialog {
+  .el-dialog__header {
+    padding: 32px 20px 24px 32px;
+
+    .el-dialog__title {
+      line-height: 150%;
+      font-size: 20px;
+      color: #000;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0 32px 32px 32px;
+  }
+}
+</style>

src/views/teacher/main/CurriculaList.vue

@@ -77,6 +77,9 @@
                   <el-dropdown-item @click.native="edit(row.id)">
                     <svg-icon icon-class="edit" /> 编辑
                   </el-dropdown-item>
+                  <el-dropdown-item @click.native="view(row.id)">
+                    <svg-icon icon-class="view" /> 查看
+                  </el-dropdown-item>
                   <el-dropdown-item @click.native="studentList(row.id)">
                     <svg-icon icon-class="students" /> 学生列表
                   </el-dropdown-item>
@@ -218,6 +221,9 @@ export default {
     },
     edit(id) {
       this.$router.push(`/create_course_step_table/course_info?id=${id}`);
+    },
+    view(id) {
+      this.$router.push(`/GoodsDetail?id=${id}`);
     }
   }
 };