update 课程详情

src/components/payment/Audit.vue

@@ -1,39 +1,41 @@
 <template>
   <!-- 审核 -->
-  <div class="Nopyment">
+  <div class="product-details">
     <div class="message">
       <div>
-        <img :src="data.coverUrl" alt="" />
+        <el-image :src="data.picture_url" />
       </div>
       <div class="text">
         <p class="p1">
           {{ data.name }}
         </p>
-        <p class="p2">
+        <!-- <p class="p2">
           <span>xx课程</span>
+        </p> -->
+        <p class="p3">
+          {{ data.teacher_list.length > 0 ? data.teacher_list[0].teacher_name : '' }}
         </p>
-        <p class="p3">{{ data.teacher }}</p>
       </div>
       <div class="price">
-        <p>￥{{ data.price }}</p>
+        <p>¥ {{ data.price }}</p>
       </div>
     </div>
     <div class="total">
-      <p class="p1">
+      <p class="total-price">
         <span> 一件商品，总金额： </span>
-        <span class="co-value">￥{{ data.price }}</span>
+        <span class="co-value">¥ {{ data.price }}</span>
       </p>
-      <p class="p2">
+      <p class="discount">
         <span> 优惠折扣： </span>
-        <span class="co-value">-￥{{ discount_money }}</span>
+        <span class="co-value">-¥ {{ discount_money }}</span>
       </p>
       <p class="p4">
         <span></span>
         <span class="co-value useCode">使没使用优惠码</span>
       </p>
-      <p class="p3">
+      <p class="payable">
         <span> 应付： </span>
-        <span class="co-value">￥{{ receivables_money }}</span>
+        <span class="co-value">¥ {{ receivables_money }}</span>
       </p>
     </div>
     <div class="submitBtn">
@@ -41,7 +43,7 @@
         <img src="../../assets/course_details/auditimg.png" alt="" />
         参加本课程学习需提交申请，审核通过后完成付款即可参加学习。
       </div>
-      <button @click="buy(data)">提交申请</button>
+      <button @click="buy">提交申请</button>
     </div>
   </div>
 </template>
@@ -50,7 +52,18 @@
 import { ApplyJoinCourse } from '@/api/course';
 
 export default {
-  props: ['data'],
+  props: {
+    data: {
+      default: () => {
+        return {};
+      },
+      type: Object
+    },
+    id: {
+      default: '',
+      type: String
+    }
+  },
   data() {
     // 这里存放数据
     return {
@@ -62,9 +75,9 @@ export default {
   // 方法集合
   methods: {
     // 提交申请
-    buy(item) {
+    buy() {
       ApplyJoinCourse({
-        course_id: '20210607-1015-XUWUUZO8MLEU', // 课程 ID
+        course_id: this.id, // 课程 ID
         discount_code: '' // 优惠码 （目前暂时没有用到）
       }).then(res => {
         console.log(res);
@@ -75,7 +88,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.Nopyment {
+.product-details {
   .message {
     width: 656px;
     height: 152px;
@@ -83,7 +96,7 @@ export default {
     border-radius: 8px;
     display: flex;
 
-    img {
+    .el-image {
       width: 120px;
       height: 120px;
       margin-left: 16px;
@@ -95,13 +108,13 @@ export default {
 
       .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;
@@ -120,7 +133,7 @@ export default {
           font-weight: bold;
           font-size: 12px;
           text-align: center;
-          color: #f90;
+          color: $basicColor;
           line-height: 24px;
           padding: 2px 8px;
         }
@@ -171,7 +184,7 @@ export default {
     .sp2 {
       cursor: pointer;
       font-size: 16px;
-      color: #f90;
+      color: $basicColor;
     }
   }
 
@@ -197,18 +210,15 @@ export default {
       }
     }
 
-    .p1 {
-      > span {
-        display: inline-block;
-        line-height: 24px;
-      }
+    &-price > span {
+      line-height: 24px;
     }
 
-    .p2 {
+    .discount {
       margin: 16px 0 10px;
     }
 
-    .p3 {
+    .payable {
       > span {
         line-height: 36px;
       }
@@ -245,13 +255,11 @@ export default {
     button {
       width: 120px;
       height: 40px;
-      background: #f90;
+      background: $basicColor;
       border-radius: 4px;
       color: white;
       line-height: 40px;
-      text-align: center;
       border: none;
-      outline: none;
       cursor: pointer;
     }
   }

src/views/course_details/index.vue

@@ -1,22 +1,19 @@
 <template>
   <!-- 课程详情 -->
   <div v-if="CourseData" class="CourseDetail">
-    <div v-if="CourseData" v-loading="loading" class="main">
+    <div 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.length > 0 ? 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>
@@ -25,32 +22,32 @@
             <span> {{ CourseData.end_date }} </span>
           </p>
 
+          <p v-if="backTime">距离关闭购买渠道还有</p>
           <div class="operation">
-            <!-- <div class="countdown" v-if="backTime">
-              <p>距离关闭购买渠道还有</p>
+            <div v-if="backTime" class="countdown">
               <div class="time">
                 <div>
-                  <p>{{ backTime.days }}</p>
-                  <p>天</p>
+                  <div class="time-num">{{ backTime.days }}</div>
+                  <div class="time-name">天</div>
                 </div>
                 <div>
-                  <p>{{ backTime.hours }}</p>
-                  <p>小时</p>
+                  <div class="time-num">{{ backTime.hours }}</div>
+                  <div class="time-name">小时</div>
                 </div>
                 <div>
-                  <p>{{ backTime.minutes }}</p>
-                  <p>分钟</p>
+                  <div class="time-num">{{ backTime.minutes }}</div>
+                  <div class="time-name">分钟</div>
                 </div>
                 <div>
-                  <p>{{ backTime.seconds }}</p>
-                  <p>秒</p>
+                  <div class="time-num">{{ backTime.seconds }}</div>
+                  <div class="time-name">秒</div>
                 </div>
               </div>
             </div>
-            <div v-else>The purchase channel has been closed</div>-->
+            <div v-else>The purchase channel has been closed</div>
             <div>
               <span class="price">
-                ¥
+                ¥ {{ CourseData.price }}
                 <span class="price_1" v-text="changePrice('1', CourseData.price)"></span>
                 <span class="price_2" v-text="changePrice('2', CourseData.price)"></span>
               </span>
@@ -61,7 +58,7 @@
         </div>
       </div>
       <div class="more">
-        <div class="moreTitle">教学材料</div>
+        <div class="moreTitle">配套教材</div>
         <div class="moreList">
           <div v-for="(item, i) in CourseData.book_list" :key="i" class="moreOne">
             <div>
@@ -73,7 +70,7 @@
               <p>{{ item.book_author }}</p>
               <div class="operation">
                 <span class="price">
-                  ¥
+                  ¥ {{ item.book_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>
@@ -85,7 +82,7 @@
         </div>
       </div>
       <div class="more">
-        <div class="moreTitle">老师</div>
+        <div class="moreTitle">授课教师</div>
         <div class="moreList teacherList">
           <div v-for="(item, i) in CourseData.teacher_list" :key="i" class="moreOne">
             <div>
@@ -101,7 +98,7 @@
           </div>
         </div>
       </div>
-      <div class="coursearrangement">
+      <div class="course-arrangement">
         <div class="moreTitle">课程安排</div>
         <div v-for="(item, i) in CourseData.cs_item_list" :key="i" class="angement">
           <div class="courseOne">
@@ -119,16 +116,14 @@
                 <div slot="title" class="Coursetasks">
                   课程任务
                   <img
-                    v-show="openList.indexOf(item.id) != -1"
+                    v-show="openList.indexOf(item.id) !== -1"
                     class="open1"
                     src="../../assets/course_details/open1.png"
-                    alt=""
                   />
                   <img
-                    v-show="openList.indexOf(item.id) == -1"
+                    v-show="openList.indexOf(item.id) === -1"
                     class="open2"
                     src="../../assets/course_details/open2.png"
-                    alt=""
                   />
                 </div>
                 <div class="courseContent">
@@ -145,7 +140,7 @@
                       >
                         <div
                           slot="title"
-                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                          :class="openList.indexOf(it.id) !== -1 ? 'contenttitle2' : 'contenttitle'"
                         >
                           <span>{{ it.name }}</span>
                           <span>
@@ -273,7 +268,7 @@
                       >
                         <div
                           slot="title"
-                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                          :class="openList.indexOf(it.id) !== -1 ? 'contenttitle2' : 'contenttitle'"
                         >
                           <span>{{ it.name }}</span>
                           <span>
@@ -401,7 +396,7 @@
                       >
                         <div
                           slot="title"
-                          :class="openList.indexOf(it.id) != -1 ? 'contenttitle2' : 'contenttitle'"
+                          :class="openList.indexOf(it.id) !== -1 ? 'contenttitle2' : 'contenttitle'"
                         >
                           <span>{{ it.name }}</span>
                           <span>
@@ -522,6 +517,7 @@
           </div>
         </div>
       </div>
+
       <el-dialog
         class="orderDialog"
         title="商品详情"
@@ -529,7 +525,7 @@
         width="720px"
         :before-close="closeaudit"
       >
-        <audit :data="data" :goods_type="201" />
+        <audit :id="id" :data="CourseData" :goods_type="$route.query.goodsType" />
       </el-dialog>
     </div>
   </div>
@@ -545,37 +541,15 @@ export default {
   },
   data() {
     return {
+      id: this.$route.query.id,
       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
     };
   },
@@ -583,7 +557,7 @@ export default {
     // 获取课程详情
     this.loading = true;
     GetCourseInfoBox({
-      id: this.$route.query.id
+      id: this.id
     })
       .then(res => {
         this.CourseData = res;
@@ -683,70 +657,6 @@ export default {
 
 <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;
@@ -814,32 +724,32 @@ export default {
 
         .operation {
           display: flex;
-          align-items: flex-end;
+          align-items: center;
           justify-content: space-between;
-          margin-top: 52px;
+          margin-top: 20px;
 
           .countdown {
             > p {
               color: rgba(255, 255, 255, 0.7);
             }
-
+            // 倒计时
             .time {
-              margin-top: 16px;
               display: flex;
+              margin-top: 24px;
 
               div {
                 width: 48px;
                 margin-right: 48px;
                 text-align: center;
+              }
 
-                p:nth-child(1) {
-                  font-size: 40px;
-                }
+              &-num {
+                font-size: 30px;
+              }
 
-                p:nth-child(2) {
-                  margin-top: 5px;
-                  font-size: 24px;
-                }
+              &-name {
+                font-size: 24px;
+                margin-top: 12px;
               }
             }
           }
@@ -848,7 +758,7 @@ export default {
         .get {
           width: 200px;
           height: 56px;
-          background: #f90;
+          background: $basicColor;
           border-radius: 4px;
           border: none;
           outline: none;
@@ -895,8 +805,8 @@ export default {
 
       .moreTitle::before {
         content: '|';
-        background: #f90;
-        color: #f90;
+        background: $basicColor;
+        color: $basicColor;
         margin-right: 16px;
       }
 
@@ -952,7 +862,7 @@ export default {
             .get {
               width: 120px;
               height: 40px;
-              background: #f90;
+              background: $basicColor;
               border-radius: 4px;
               border: none;
               outline: none;
@@ -999,7 +909,7 @@ export default {
       }
     }
 
-    .coursearrangement {
+    .course-arrangement {
       width: 1200px;
       margin: 0 auto;
       margin-top: 30px;
@@ -1012,8 +922,8 @@ export default {
 
       .moreTitle::before {
         content: '|';
-        background: #f90;
-        color: #f90;
+        background: $basicColor;
+        color: $basicColor;
         margin-right: 16px;
       }
 
@@ -1224,7 +1134,7 @@ export default {
         }
 
         .select {
-          background: #f90;
+          background: $basicColor;
           color: white;
           box-shadow: 0 2px 8px rgba(255, 153, 0, 0.15);
         }

src/views/teacher/main/CurriculaList.vue

@@ -223,7 +223,7 @@ export default {
       this.$router.push(`/create_course_step_table/course_info?id=${id}`);
     },
     view(id) {
-      this.$router.push(`/GoodsDetail?id=${id}`);
+      this.$router.push(`/GoodsDetail?id=${id}&goodsType=201`);
     }
   }
 };