合并

src/axios.js

@@ -5,8 +5,7 @@ import { Message } from 'element-ui'
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'https://test.xyyxt.net'   //预发布
 // export const BASE_URL = 'http://192.168.1.7:5055'    //dev
-export const BASE_URL = 'http://192.168.1.24:5055'    //dev
-// export const BASE_URL = 'http://120.79.166.78:19012'    //测试-外网
+export const BASE_URL = 'http://120.79.166.78:19012'    //测试-外网
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'http://192.168.1.222:5055'    //测试
 export const tenantId = '867735392558919680'

src/components/goodsItem/index.vue

@@ -21,6 +21,7 @@
       </div>
       <div class="course-item__desc">
         <div class="price">{{item.standPrice === 0 ? '免费' : `￥${item.standPrice}`}}</div>
+        <div v-if="item.linePrice" class="linePrice">￥{{item.linePrice}}</div>
       </div>
       <div class="course-item__btns">
         <a class="add" @click.stop="addCart(item)">加购物车</a>
@@ -226,7 +227,8 @@ export default {
   &__desc {
     height: 32px;
     margin-left: 8px;
-
+    display: flex;
+    align-items: center;
     .price {
       font-size: 18px;
       font-family: Microsoft YaHei;
@@ -234,6 +236,12 @@ export default {
       color: #ff2d55;
       line-height: 32px;
     }
+    .linePrice {
+      color: #999999;
+      font-size: 16px;
+      text-decoration:line-through;
+      margin-left: 10px;
+    }
   }
 
   &__btns {

src/pages/bank-report/index.vue

@@ -151,6 +151,40 @@
             >全部解析</el-button
           >
         </div>
+
+        <div v-if="courseList.length" class="course_list">
+          <div class="course__header">
+            <div class="title">相关推荐</div>
+          </div>
+          <div class="course__body">
+            <!-- <p
+              v-if="
+                !courseList.length
+              "
+              class="text_align"
+            >
+              无推荐课程
+            </p> -->
+            <ul class="list clearfix">
+              <template v-for="(item, index) in courseList">
+                <li class="course-item" :key="index">
+                  <GoodsItem :item="item"></GoodsItem>
+                </li>
+              </template>
+            </ul>
+          </div>
+
+          <div class="pagination">
+            <el-pagination
+              @current-change="currentChangeCou"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :page-size="pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
       </div>
     </section>
     <ToolBar></ToolBar>
@@ -162,6 +196,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
 import { mapGetters } from "vuex";
 export default {
   name: "BankExplain",
@@ -169,6 +204,7 @@ export default {
     Footer,
     Header,
     ToolBar,
+    GoodsItem,
   },
   data() {
     return {
@@ -182,6 +218,10 @@ export default {
       examId: 0,
       recordId: 0,
       orderGoodsId: "",
+      courseList: [],
+			pageNum: 1,
+			pageSize: 10,
+			total: 0,
     };
   },
   computed: {
@@ -195,12 +235,33 @@ export default {
     this.orderGoodsId = this.$route.query.orderGoodsId || "";
     this.goodsId = this.$route.params.goodsId;
 
+    this.getcourList()
     this.examWrongRecordWrongNum();
     this.bankExamNextExam();
     await this.bankExam();
     await this.examReport();
   },
   methods: {
+    getcourList() {
+        this.$axios({
+            url: '/apply/recommend/goodsList',
+            method: 'post',
+            data: {
+                examId: this.examId,
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+            }
+        }).then((res) => {
+            if (res.code == 200) {
+              this.courseList = res.rows || []
+              this.total = res.total
+            }
+        })
+    },
+    currentChangeCou(val) {
+      this.pageNum = val
+      this.getcourList()
+    },
     back() {
       // this.$router.replace({
       //   path: "/person-center/my-bank/bank-detail/" + this.goodsId,
@@ -625,5 +686,49 @@ export default {
       }
     }
   }
+
+  .course_list {
+      .course {
+        background: #f5f7fa;
+        padding-top: 40px;
+
+        &__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .title {
+            background: url("~@/assets/video.png") no-repeat left center;
+            padding-left: 36px;
+            font-size: 24px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            color: #333333;
+            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
+          }
+
+          
+        }
+
+        
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .course-item {
+              float: left;
+            }
+          }
+        }
+
+      }
+      .pagination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0px;
+      }
+    }
 }
 </style>

src/pages/course-detail/index.vue

@@ -4834,7 +4834,6 @@ export default {
      * 切换科目
      */
     courseChange() {
-      console.log('切换科目')
       return new Promise((resolve) => {
         this.needOpen = true;
         this.noteParams = {
@@ -6292,8 +6291,6 @@ export default {
      * 刷新父级列表
      */
     refreshParentList(sectionItem, rebuildObj) {
-      console.log(sectionItem, "看完视频==========sectionItem", this.menuList);
-      console.log(rebuildObj, "rebuildObj");
       let self = this;
       if (sectionItem.menuId) {
         //最外层节有menuid

src/pages/course-exam/index.vue

@@ -2293,6 +2293,9 @@ export default {
             this.setExamResult(result);
             this.$router.replace({
               path: "/course-report",
+              query: {
+                examId: this.examId,
+              }
             });
           }, 1000);
         })

src/pages/course-report/index.vue

@@ -90,6 +90,40 @@
           <el-button type="primary" class="btn">错题解析</el-button>
           <el-button type="primary" class="btn">全部解析</el-button>
         </div> -->
+
+        <div v-if="courseList.length" class="course_list">
+          <div class="course__header">
+            <div class="title">相关推荐</div>
+          </div>
+          <div class="course__body">
+            <!-- <p
+              v-if="
+                !courseList.length
+              "
+              class="text_align"
+            >
+              无推荐课程
+            </p> -->
+            <ul class="list clearfix">
+              <template v-for="(item, index) in courseList">
+                <li class="course-item" :key="index">
+                  <GoodsItem :item="item"></GoodsItem>
+                </li>
+              </template>
+            </ul>
+          </div>
+
+          <div class="pagination">
+            <el-pagination
+              @current-change="currentChangeCou"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :page-size="pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
       </div>
     </section>
     <ToolBar></ToolBar>
@@ -101,6 +135,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
 import { mapGetters } from "vuex";
 export default {
   name: "BankExplain",
@@ -108,19 +143,51 @@ export default {
     Footer,
     Header,
     ToolBar,
+    GoodsItem,
   },
   data() {
-    return {};
+    return {
+      examId: '',
+      courseList: [],
+			pageNum: 1,
+			pageSize: 10,
+			total: 0,
+    };
   },
   computed: {
     ...mapGetters(["examResult"]),
   },
+  created() {
+    this.examId = this.$route.query.examId
+    this.getcourList()
+  },
   mounted() {
     if (JSON.stringify(this.examResult) == "{}") {
       this.$router.back(-1);
     }
   },
-  methods: {},
+  methods: {
+    getcourList() {
+        this.$axios({
+            url: '/apply/recommend/goodsList',
+            method: 'post',
+            data: {
+                examId: this.examId,
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+            }
+        }).then((res) => {
+            if (res.code == 200) {
+              this.courseList = res.rows || []
+              this.total = res.total
+            }
+        })
+    },
+    currentChangeCou(val) {
+      this.pageNum = val
+      this.getcourList()
+    },
+  },
 };
 </script>
 
@@ -380,5 +447,49 @@ export default {
       }
     }
   }
+
+  .course_list {
+      .course {
+        background: #f5f7fa;
+        padding-top: 40px;
+
+        &__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .title {
+            background: url("~@/assets/video.png") no-repeat left center;
+            padding-left: 36px;
+            font-size: 24px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            color: #333333;
+            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
+          }
+
+          
+        }
+
+        
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .course-item {
+              float: left;
+            }
+          }
+        }
+
+      }
+      .pagination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0px;
+      }
+    }
 }
 </style>

src/pages/goods-detail/course-detail.vue

@@ -940,6 +940,7 @@ export default {
      * 试看
      */
     toDo(section, courseId) {
+      console.log('section, courseId', section, courseId)
       this.videoModalShow = true;
       this.section;
       this.playCourseId = courseId;
@@ -1246,6 +1247,7 @@ export default {
      * 展开模块卷
      */
     openModule(Module) {
+      console.log('点击模块卷')
       this.$set(Module, "showList", !Module.showList);
       if (!Module.list.length) {
         this.getChapterList(Module);
@@ -1272,6 +1274,7 @@ export default {
      * 展开章卷
      */
     openChapter(chapter) {
+      console.log('点开章卷')
       this.$set(chapter, "showList", !chapter.showList);
 
       if (!chapter.list.length) {

src/pages/goodsTopic/components/buyDialog.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="buyDialog">
+        <el-dialog
+            :title="titles"
+            :visible.sync="buyModal"
+            width="452px"
+            class="appoint-modal"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="cancel"
+        >
+            <div v-loading="loading" class="contentts">
+                <div class="pop_prices">
+                    <span v-if="skuItem.standPrice || skuItem.standPrice == 0" class="price">￥ {{ skuItem.standPrice || 0 }}</span>
+                    <span v-if="skuItem.linePrice" class="lin_price">￥ {{ skuItem.linePrice }}</span>
+                </div>
+                <div v-if="courseSku.length" class="checks">
+                    请在下方
+                    <span>选择科目：</span>
+                </div>
+                <div v-if="courseSku.length" class="check_con">
+                    <div class="course_items" v-for="(item, index) in courseSku" :key="index" :class="{nactive: skuIndex == index}" @click="selectSku(item, index)">
+                        {{ item.goodsName }}
+                    </div>
+                </div>
+                <div v-else class="nodata">暂无科目选择</div>
+            </div>
+            <span v-if="courseSku.length" slot="footer" class="dialog-footer">
+                <el-button type="primary" size="small" @click="rightNowBuy()">立即购买</el-button>
+            </span>
+        </el-dialog>
+
+        <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import BuyCourseModal from "@/components/buyCourseModal/index";
+export default {
+    name: 'buyDialog',
+    components: { BuyCourseModal },
+    props: {
+        buyModal: {
+            type: Boolean,
+            default: false,
+        },
+        subjectType: {
+            type: Number,
+            default: 1
+        },
+        type: { // 1黄金班，2钻石班，3至尊班
+            type: Number,
+            default: 1
+        },
+        topicId: {
+            type: [String, Number],
+            default: '1'
+        }
+    },
+    data() {
+        return {
+            applyId: "",
+            courseSku: [],
+            skuItem: {},
+            skuIndex: -1,
+            loading: false,
+            titles: '选择课程',
+        }
+    },
+    watch: {
+        buyModal(newV, oldV) {
+            if (newV) {
+                console.log('监听')
+                this.getDetail()
+            }
+        },
+    },
+    methods: {
+        ...mapMutations(["setCurrentRouter", "getCartCount"]),
+        cancel() {
+            this.$emit('update:buyModal', false)
+        },
+        selectSku(item, index) {
+            console.log('defhd', item, index)
+            this.skuItem = item
+            this.skuIndex = index
+        },
+        getDetail() {
+            this.loading = true
+            this.skuItem = {}
+            this.skuIndex = -1
+            this.$axios({
+                url: '/app/common/get/goodsList',
+                method: 'get',
+                noToken: true,
+                params: {
+                    subjectType: this.subjectType,
+                    topicId: this.topicId || 1,
+                    type: this.type
+                }
+            }).then((res) => {
+                if (res.code == 200) {
+                    this.courseSku = res.data || []
+                } else {
+                    this.$message.warning(res.msg)
+                }
+                this.loading = false
+            }).catch(err => {
+                this.loading = false
+            })
+        },
+        rightNowBuy() {
+            if (Object.keys(this.skuItem).length == 0) {
+                this.$message.warning('请选择科目')
+                return
+            }
+            console.log('this.$tools.isLogin()', this.$tools.isLogin())
+            if (!this.$tools.isLogin()) {
+                this.setCurrentRouter(this.$route)
+                this.$router.push({
+                    path: "/login",
+                })
+                return
+            }
+
+            this.getGoodsDetail(this.skuItem.goodsId).then((res) => {
+                console.log('res.templateType', res,res.templateType)
+                if (res.templateType) {
+                    if (res.goodsType === 1) {
+                        this.$refs.selectClassModal.showModal(res);
+                    }
+                    if (res.goodsType === 2 || res.goodsType === 6) {
+                        let selectGoodsList = JSON.parse(JSON.stringify([res]));
+                        localStorage.setItem(
+                            "checkGoodsList",
+                            JSON.stringify(selectGoodsList)
+                        );
+                        this.$router.push({
+                            path: "/payment",
+                        });
+                    }
+                } else {
+                    let selectGoodsList = JSON.parse(JSON.stringify([res]));
+                    localStorage.setItem(
+                        "checkGoodsList",
+                        JSON.stringify(selectGoodsList)
+                    );
+                    this.$router.push({
+                        path: "/payment",
+                    });
+                }
+            });
+        },
+
+        getGoodsDetail(goodsId) {
+            return new Promise((resolve) => {
+                this.$request.commonGoodsDetail(goodsId).then((res) => {
+                    resolve(res.data);
+                });
+            });
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.contentts {
+    width: 100%;
+    .pop_prices {
+        .price {
+            font-size: 28px;
+            font-weight: 500;
+            color: #FC3F3F;
+        }
+        .lin_price {
+            color: #999999;
+            font-size: 18px;
+            text-decoration:line-through;
+            margin-left: 5px;
+        }
+    }
+    .checks {
+        font-size: 14px;
+        color: #606266;
+        margin: 31px 0px 16px 0px;
+        >span {
+            color: #409EFF;
+        }
+    }
+    .check_con {
+        display: flex;
+        .course_items {
+            min-width: 190px;
+            padding: 13px 16px;
+            border-radius: 8px;
+            margin-right: 16px;
+            margin-bottom: 16px;
+            background: #F8F8F8;
+            font-size: 14px;
+            font-weight: 500;
+            color: #222222;
+            text-align: center;
+            cursor: pointer;
+            &.nactive {
+                background: #D5E4FF;
+                color: #3F8DFD;
+            }
+        }
+    }
+    .nodata {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+}
+</style>

src/pages/goodsTopic/components/catalogue.vue

@@ -0,0 +1,825 @@
+<template>
+    <!-- <div> -->
+    <div class="container">
+        <div class="con_header">
+            <div v-for="(item, index) in subList" :key="index" class="con_item"
+                :class="{nactive: subIndex == index}" @click="toChangeCou(item, index)">{{ item.subjectName }}</div>
+        </div>
+        <div class="course_info">
+            <div
+                class="video_box"
+                :style="{ backgroundImage: `url(${$tools.splitImgHost(goodsDetail.coverUrl,false)})`,}"
+                >
+                <div v-show="vid" id="player"></div>
+                <div v-show="vidzb" id="playerzb"></div>
+            </div>
+            <div class="right-box">
+                <div class="right-box__header">
+                    <div class="tabs">
+                        <el-tabs v-model="courseTabIndex">
+                            <el-tab-pane
+                                :name="tab.name"
+                                v-for="(tab, index) in menuTab"
+                                :key="index"
+                            >
+                                <div slot="label">
+                                    <span class="label">{{ tab.label }}</span>
+                                </div>
+                                <!-- 章节目录 -->
+                                <template v-if="tab.name == '1'">
+                                    <!-- <catalogue :goodsId='goodsId'></catalogue> -->
+                                    <div class="mulu_body">
+                                        <div class="left-box">
+                                            <div class="left-box__body">
+                                                <div
+                                                class="course-list-item"
+                                                v-for="(course, index) in s_courseList"
+                                                :key="index"
+                                                >
+                                                <div
+                                                    class="course-list-item_title"
+                                                    @click="openCourse(course)"
+                                                >
+                                                    <i
+                                                    :class="{
+                                                        'el-icon-caret-right': !course.showList,
+                                                        'el-icon-caret-bottom': course.showList,
+                                                    }"
+                                                    ></i>
+                                                    {{ course.courseName }}
+                                                </div>
+                                                <template v-if="course.showList">
+                                                    <div
+                                                    class="item"
+                                                    v-for="(item, index) in course.list"
+                                                    :key="index"
+                                                    >
+                                                    <template v-if="item.type == 1">
+                                                        <div
+                                                        class="item__title"
+                                                        @click="openModule(item)"
+                                                        >
+                                                        <i
+                                                            :class="{
+                                                            'el-icon-caret-right': !item.showList,
+                                                            'el-icon-caret-bottom': item.showList,
+                                                            }"
+                                                        ></i>
+                                                        {{ item.name }}
+                                                        </div>
+                                                        <div class="item__content">
+                                                        <div
+                                                            class="bank-chapter"
+                                                            v-if="item.showList"
+                                                        >
+                                                            <div
+                                                            class="bank-chapter__item"
+                                                            v-for="(
+                                                                chapter, chapterIndex
+                                                            ) in item.list"
+                                                            :key="chapterIndex"
+                                                            >
+                                                            <div
+                                                                class="bank-chapter__item__text"
+                                                                @click="openChapter(chapter)"
+                                                            >
+                                                                <i
+                                                                :class="{
+                                                                    'el-icon-caret-right':
+                                                                    !chapter.showList,
+                                                                    'el-icon-caret-bottom':
+                                                                    chapter.showList,
+                                                                }"
+                                                                ></i
+                                                                >{{ chapter.name }}
+                                                            </div>
+
+                                                            <div
+                                                                class="bank-section"
+                                                                v-if="chapter.showList"
+                                                            >
+                                                                <div
+                                                                class="bank-section__item"
+                                                                v-for="(
+                                                                    section, sectionIndex
+                                                                ) in chapter.list"
+                                                                :key="sectionIndex"
+                                                                >
+                                                                <div
+                                                                    class="bank-section__item__text"
+                                                                >
+                                                                    {{ section.name }}
+                                                                </div>
+                                                                <div
+                                                                    v-if="section.tryListen"
+                                                                    @click="
+                                                                    toDo(section, item.courseId)
+                                                                    "
+                                                                    class="btn"
+                                                                >
+                                                                    试看
+                                                                </div>
+                                                                </div>
+                                                            </div>
+                                                            </div>
+                                                        </div>
+                                                        </div>
+                                                    </template>
+
+                                                    <template v-if="item.type == 2">
+                                                        <div class="item__content">
+                                                        <div class="bank-chapter">
+                                                            <div class="bank-chapter__item">
+                                                            <div
+                                                                class="bank-chapter__item__text"
+                                                                @click="openChapter(item)"
+                                                            >
+                                                                <i
+                                                                :class="{
+                                                                    'el-icon-caret-right':
+                                                                    !item.showList,
+                                                                    'el-icon-caret-bottom':
+                                                                    item.showList,
+                                                                }"
+                                                                ></i
+                                                                >{{ item.name }}
+                                                            </div>
+
+                                                            <div
+                                                                class="bank-section"
+                                                                v-if="item.showList"
+                                                            >
+                                                                <div
+                                                                class="bank-section__item"
+                                                                v-for="(
+                                                                    section, sectionIndex
+                                                                ) in item.list"
+                                                                :key="sectionIndex"
+                                                                >
+                                                                <div
+                                                                    class="bank-section__item__text"
+                                                                >
+                                                                    {{ section.name }}
+                                                                </div>
+                                                                <div
+                                                                    v-if="section.tryListen"
+                                                                    @click="
+                                                                    toDo(section, item.courseId)
+                                                                    "
+                                                                    class="btn"
+                                                                >
+                                                                    试看
+                                                                </div>
+                                                                </div>
+                                                            </div>
+                                                            </div>
+                                                        </div>
+                                                        </div>
+                                                    </template>
+
+                                                    <template v-if="item.type == 3">
+                                                        <div class="item__content">
+                                                        <div class="bank-section">
+                                                            <div class="bank-section__item">
+                                                            <div class="bank-section__item__text">
+                                                                {{ item.name }}
+                                                            </div>
+                                                            <div
+                                                                v-if="item.tryListen"
+                                                                @click="toDo(item, item.courseId)"
+                                                                class="btn"
+                                                            >
+                                                                试看
+                                                            </div>
+                                                            </div>
+                                                        </div>
+                                                        </div>
+                                                    </template>
+                                                    </div>
+                                                </template>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="down_bottons">
+                                        <div class="ask_manage" @click="toAskManage()">咨询管理</div>
+                                        <div class="ask_manage ask_buy" @click="togoBuy()">立即购买</div>
+                                        <div v-if="showAsk" class="apply_ask">
+                                            <div class="ask_titles">报名咨询</div>
+                                            <div class="ask_time">周一至周日 9:00-18:00</div>
+                                            <div class="phones">
+                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
+                                                <span>020-87085983</span>
+                                            </div>
+                                            <div class="phones">
+                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
+                                                <span>020-87085982</span>
+                                            </div>
+                                            <div class="phones">
+                                                <img class="icon_phone" src="@/assets/topic/ask_phone.png" alt="" />
+                                                <span>13631379636</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 弹窗 -->
+        <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="1" :type="1"></buy-dialog>
+    </div>
+        
+    <!-- </div> -->
+</template>
+
+<script>
+import buyDialog from './buyDialog.vue'
+export default {
+    name: 'boxs',
+    components: { buyDialog },
+    props: {
+        goodsId: {
+            type: [String, Number],
+            default: ''
+        },
+        topicId: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+    data() {
+        return {
+            vid: "",
+            vidzb: "",
+            player: "",
+            playerzb: "",
+            activeId: "", //当前选中ID
+            vodPlayerJs: "https://player.polyv.net/script/player.js",
+            playerJs:
+                "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
+            uidzb: "egsxlptzdq",
+            menuTab: [
+                {
+                    name: "1",
+                    label: "章节目录",
+                }
+            ],
+            courseTabIndex: "1",
+            param: {
+                pageNum: 1,
+                pageSize: 100,
+                total: 0,
+            },
+            needOpen: true, //是否需要一进来展开第一章节
+            menuIndex: [], //需要展开的章节索引值
+            courseList: [],
+            s_courseList: [],
+            goodsAuditionConfigIdList: [],
+            listenConfigList: [],
+            courserIndex: 0,
+            goodsDetail: {},
+            goodsExamConfig: [],
+            subList: [],
+            subIndex: 0,
+            playCourseId: 0, // 播放课程id
+            showAsk: false,
+            buyModal: false,
+        }
+    },
+    watch: {
+        async goodsId(newV, oldV) {
+            if (newV) {
+                console.log('监听', this.topicId)
+                await this.getGoodsDetail()
+                this.goodsCourseList()
+            }
+        }
+    },
+    methods: {
+        toAskManage() {
+            this.showAsk = !this.showAsk
+        },
+        toChangeCou(item, index) {
+            this.subIndex = index
+            this.s_courseList = this.courseList.filter(e => e.subjectId == item.subjectId)
+        },
+        togoBuy() {
+            this.buyModal = true
+        },
+        /**
+         * 获取商品详情
+         */
+        getGoodsDetail() {
+            this.$request.commonGoodsDetail(this.goodsId).then((res) => {
+                if (res.data.pcDetailHtml) {
+                res.data.pcDetailHtml =
+                    res.data.pcDetailHtml &&
+                    res.data.pcDetailHtml.replace(
+                    /<img/gi,
+                    '<img style="max-width:100%;height:100%;display:block;margin:0px auto;"'
+                    );
+                }
+                this.goodsDetail = res.data
+                this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig)
+
+                if (this.goodsDetail.goodsAuditionConfig) {
+                    this.listenConfigList = JSON.parse(this.goodsDetail.goodsAuditionConfig);
+                    for (var itemChild of this.listenConfigList) {
+                        this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
+                    }
+                    console.log(
+                        this.goodsAuditionConfigIdList,
+                        "this.goodsAuditionConfigIdList"
+                    );
+                }
+            });
+        },
+        /**
+         * 获取课程章节列表，/app/common/goods/course/list/' + data,
+         */
+        goodsCourseList() {
+            this.$request.goodsCourseList(this.goodsId).then(async (res) => {
+                if (res.code == 200) {
+                    res.rows.forEach((item) => {
+                        item.showList = false
+                        item.list = []
+                    })
+                    this.courseList = res.rows || []
+                    // 筛选科目名称
+                    let ids = []
+                    const newArr = []
+                    this.courseList.forEach(item => {
+                        if (ids.indexOf(item.subjectId) == -1) {
+                            ids.push(item.subjectId)
+                            newArr.push(item)
+                        }
+                    })
+					this.subList = [...newArr]
+                    this.subList = this.subList.filter(item => item.subjectName)
+                    console.log('this.subList', this.subList)
+                    
+                    if (this.needOpen) {
+                        for (let i = 0; i < this.courseList.length; i++) {
+                            let menuIndexOrFalse = await this.getCourseMenus(
+                                this.courseList[i]
+                            )
+                            // console.log('111menuIndexOrFalse', menuIndexOrFalse)
+                            if (menuIndexOrFalse !== false) {
+                                this.menuIndex = [i, menuIndexOrFalse]
+                                this.openCourse(this.courseList[i])
+                                break
+                            }
+                        }
+                        this.s_courseList = this.courseList.filter(item => item.subjectId == this.subList[0].subjectId)
+                    }
+                    console.log('s_courseList', this.s_courseList);
+                }
+                
+            })
+        },
+        // 获取课程目录，/app/common/course/menuList
+        getCourseMenus(item) {
+            return new Promise((resolve) => {
+                this.$request.menuList({ courseId: item.courseId }).then((res) => {
+                if (res.code == 200) {
+                    for (let i = 0; i < res.rows.length; i++) {
+                        // 1模块 2章 3节	
+                        if (res.rows[i].type == 1 || res.rows[i].type == 2) {
+                            resolve(i);
+                            break;
+                        }
+                    }
+                }
+                });
+            });
+        },
+        /**
+         * 点击课程大目录
+         */
+        openCourse(course) {
+            course.showList = !course.showList;
+
+            if (!course.list.length) {
+                this.getMenuList(course);
+            }
+        },
+        /**
+         * 获取模块列表
+         */
+        getMenuList(item) {
+            this.$request.menuList({ courseId: item.courseId }).then((res) => {
+                for (let i = 0; i < res.rows.length; i++) {
+                    let item = res.rows[i];
+                    item.showList = false;
+                    item.id = item.menuId;
+                    item.name = item.menuName;
+
+                    if (item.type == 3) {
+                        //判断是否试听
+                        item.tryListen = false;
+                        if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
+                            item.tryListen = true;
+                        }
+                    } else {
+                        item.list = [];
+                    }
+                }
+                item.list = res.rows;
+
+                if (this.needOpen) {
+                    if (item.list[this.menuIndex[1]].type == 1) {
+                        this.openModule(item.list[this.menuIndex[1]]);
+                    } else if (item.list[this.menuIndex[1]].type == 2) {
+                        this.needOpen = false;
+                        this.openChapter(item.list[this.menuIndex[1]]);
+                    }
+                }
+            });
+        },
+        /**
+         * 展开模块卷
+         */
+        openModule(Module) {
+            console.log('点击模块卷')
+            this.$set(Module, "showList", !Module.showList);
+            if (!Module.list.length) {
+                this.getChapterList(Module);
+            }
+        },
+        getChapterList(Module) {
+            this.$request.chapterList(Module.id).then((res) => {
+                for (let i = 0; i < res.data.length; i++) {
+                    let item = res.data[i];
+                    item.id = item.chapterId;
+                    item.showList = false;
+                    item.list = [];
+                    item.menuType = 2;
+                }
+                Module.list = res.data;
+
+                if (this.needOpen) {
+                    this.needOpen = false;
+                    this.openChapter(Module.list[0]);
+                }
+            });
+        },
+        /**
+         * 展开章卷
+         */
+        openChapter(chapter) {
+            console.log('点开章卷')
+            this.$set(chapter, "showList", !chapter.showList);
+
+            if (!chapter.list.length) {
+                this.getSectionList(chapter);
+            }
+        },
+        getSectionList(chapter) {
+            this.$request.sectionList(chapter.id).then((res) => {
+                for (let i = 0; i < res.data.length; i++) {
+                    let item = res.data[i];
+                    item.id = item.sectionId;
+                    item.menuType = 3;
+                    //判断是否试听
+                    item.tryListen = false;
+                    if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
+                        item.tryListen = true;
+                    }
+                }
+                chapter.list = res.data;
+            });
+        },
+        /**
+         * 试看
+         */
+        toDo(section, courseId) {
+            console.log('section, courseId', section, courseId)
+            this.playCourseId = courseId
+            console.log(this.playCourseId, "playCourseId")
+            this.initVideo(section)
+        },
+        async initVideo(option) {
+            await this.clears();
+            console.log('option:',option);
+            this.sectionItem = option;
+            if (option.sectionType === 2) {
+                this.vidzb = option.liveUrl;
+                this.loadPlayerScriptzb(this.loadPlayerzb);
+            } else {
+                this.vid = option.recordingUrl;
+                this.loadPlayerScript(this.loadPlayer);
+            }
+        },
+        /**
+         * @param {String} 关闭视频窗口-销毁实例
+         */
+        clears() {
+            return new Promise((resolve, reject) => {
+                this.vid = "";
+                this.vidzb = "";
+                if (this.player) {
+                    this.player.destroy();
+                }
+                if (this.playerzb) {
+                    this.playerzb.destroy();
+                }
+                resolve();
+            });
+        },
+        loadPlayerzb() {
+            const polyvLivePlayer = window.polyvLivePlayer;
+            this.playerzb = polyvLivePlayer({
+                wrap: "#playerzb",
+                width: 700,
+                height: 528,
+                uid: this.uidzb,
+                vid: this.vidzb,
+            });
+        },
+        loadPlayer() {
+            const polyvPlayer = window.polyvPlayer;
+            let auditionMinute = this.listenConfigList.find((item) => {
+                if (item.sectionId == (this.sectionItem.sectionId || this.sectionItem.menuId) && item.courseId == this.playCourseId) {
+                    return true;
+                }
+            }).auditionMinute;
+
+            // this.$request.obtainpolyvvideosign(this.vid).then((res) => {
+            this.player = polyvPlayer({
+                wrap: "#player",
+                width: 700,
+                height: 528,
+                vid: this.vid,
+                start: 0,
+                end: auditionMinute,
+                teaser_show: 0,
+                // ts: res.data.ts,
+                // sign: res.data.sign,
+                playsafe: function (vid, next) {
+                    next();
+                },
+            });
+
+            this.player.on("s2j_onPlayOver", () => {
+                this.$confirm("试看结束，购买课程可学习全部", "提示", {
+                    closeOnClickModal: false,
+                    showCancelButton: false,
+                    closeOnPressEscape: false,
+                    distinguishCancelAndClose: false,
+                    showClose: false,
+                }).then((res) => {
+                    // this.videoModalShow = false;
+                });
+            });
+            // });
+        },
+        /**
+         * @param {String} 直播预览
+         */
+        loadPlayerScriptzb(callback) {
+            if (!window.polyvLivePlayer) {
+                const myScript = document.createElement("script");
+                myScript.setAttribute("src", this.playerJs);
+                myScript.onload = callback;
+                document.body.appendChild(myScript);
+            } else {
+                callback();
+            }
+        },
+        loadPlayerScript(callback) {
+            if (!window.polyvPlayer) {
+                const myScript = document.createElement("script");
+                myScript.setAttribute("src", this.vodPlayerJs);
+                myScript.onload = callback;
+                document.body.appendChild(myScript);
+            } else {
+                callback();
+            }
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+}
+.con_header {
+    width: 1104px;
+    height: 44px;
+    background: #3F4449;
+    display: flex;
+    @media screen and (max-width: 1370px){
+        width: 900px;
+    }
+    .con_item {
+        padding: 12px 20px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #FFFFFF;
+        cursor: pointer;
+        &.nactive {
+            background: #3F8DFD;
+        }
+    }
+}
+.course_info {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+}
+.video_box {
+    width: 700px;
+    height: 484px;
+    background-size: 100% 100%;
+    @media screen and (max-width: 1370px){
+        width: 497px;
+    }
+    .video {
+        width: 100%;
+        height: 100%;
+    }
+}
+.right-box {
+    width: 404px;
+    height: 484px;
+    background: #3f4449;
+    border-radius: 0px;
+    &__header {
+        .tabs {
+            /deep/.el-tabs__nav-wrap::after {
+                background-color: #999;
+            }
+
+            /deep/ .el-tabs__header {
+                margin: 0;
+            }
+
+            .label {
+                color: #fff;
+                height: 40px;
+                line-height: 40px;
+                padding: 0 20px;
+            }
+            
+        }
+    }
+}
+.mulu_body {
+    width: 404px;
+    height: 401px;
+    background: #3f4449;
+    border-radius: 0px;
+    .left-box {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+
+        .course-list-item {
+            padding: 16px;
+            border-radius: 10px;
+
+            .item {
+                overflow: hidden;
+                margin-top: 12px;
+                &__title {
+                    padding: 10px 0;
+                    cursor: pointer;
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #fff;
+                }
+
+                &__content {
+                    .bank-chapter {
+                        margin-left: 4px;
+
+                        &__item {
+                            padding-top: 10px;
+                            padding-bottom: 10px;
+                            // border-bottom: 1px solid #eeeeee;
+                            font-size: 14px;
+                            color: #fff;
+                            &__text {
+                                cursor: pointer;
+                                flex: 1;
+                            }
+                        }
+                    }
+
+                    .bank-section {
+                        margin-left: 40px;
+
+                        &__item {
+                            padding-top: 10px;
+                            padding-bottom: 10px;
+                            // border-bottom: 1px solid #eeeeee;
+                            font-size: 14px;
+                            display: flex;
+                            color: #3f8dfd;
+                            &__text {
+                                flex: 1;
+                            }
+
+                            .btn {
+                                margin-right: 20px;
+                                width: 40px;
+                                height: 24px;
+                                border: 1px solid #ff3b30;
+                                border-radius: 8px;
+                                line-height: 22px;
+                                color: #ff3b30;
+                                text-align: center;
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .course-list-item_title {
+            font-size: 16px;
+            color: #fff;
+            font-weight: bold;
+            cursor: pointer;
+        }
+    }
+}
+.down_bottons {
+    width: 404px;
+    height: 44px;
+    display: flex;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    .ask_manage {
+        width: 202px;
+        height: 44px;
+        background: #1B2632;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 44px;
+        text-align: center;
+        cursor: pointer;
+    }
+    .ask_buy {
+        background: #3F8DFD;
+    }
+    .apply_ask {
+        width: 173px;
+        height: 196px;
+        background: #FFFFFF;
+        border: 1px solid #CCCCCC;
+        border-radius: 2px;
+        padding: 20px;
+        position: absolute;
+        top: -213px;
+        left: 17px;
+        .ask_titles {
+            font-size: 14px;
+            font-weight: bold;
+            color: #222222;
+        }
+        .ask_time {
+            font-size: 12px;
+            color: #999999;
+            margin: 3px 0px 21px 0px;
+        }
+        .phones {
+            margin-bottom: 21px;
+            display: flex;
+            align-items: center;
+            .icon_phone {
+                width: 16px;
+                height: 16px;
+                margin-right: 12px;
+            }
+            >span {
+                font-size: 14px;
+                color: #222222;
+            }
+        }
+        &::after {
+            content: '';
+            width: 0;
+            height: 0;
+            border-top: 14px solid #fff;
+            border-right: 12px solid transparent;
+            border-left: 12px solid transparent;
+            position: absolute;
+            bottom: -10px;
+            left: 72px;
+        }
+    }
+}
+</style>

src/pages/goodsTopic/index.vue

@@ -0,0 +1,763 @@
+<template>
+    <div class="goods_topic">
+        <Header></Header>
+        <section class="section">
+            <div class="section__header">
+                <div class="container">
+                    <el-breadcrumb separator="/">
+                        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+                        <el-breadcrumb-item>商品专题</el-breadcrumb-item>
+                    </el-breadcrumb>
+                </div>
+            </div>
+            <div class="course_btns">
+                <div class="meun_btns">
+                    <div class="btns" @click="changeCouMeun()">
+                        课程导航
+                    </div>
+                    <div class="slide-list">
+                        <div
+                            class="slide-list__item"
+                            v-for="(type, typeItem) in typeList"
+                            :key="'type' + typeItem"
+                        >
+                        <div class="title" @click="goCourse(type)">
+                            {{ type.educationName }}
+                        </div>
+                        <ul class="nav">
+                            <li
+                                v-for="(slideItem, slideIndex) in slideList[typeItem]"
+                                :key="'item' + slideIndex"
+                                @click="goCourse(slideItem)"
+                            >
+                            <div class="text">
+                                {{ slideItem.aliasName }}
+                            </div>
+                            </li>
+                        </ul>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            <div class="mains">
+                <div class="content_up">
+                    <div class="banner_one"></div>
+                    <div class="banner_two">
+                        <catalogue :goodsId='goodsId' :topicId="topicId"></catalogue>
+                    </div> 
+                </div>
+                <div class="topic_detail">
+                    <div class="titles">
+                        <img src="@/assets/topic/icon_left.png" alt="" />
+                        <span class="scheme">通关方案</span>
+                        <img src="@/assets/topic/icon_right.png" alt="" />
+                    </div>
+                    <div class="min_title">2023年二级建造师考前培训</div>
+                    <div class="details">
+                        <div class="detail_one">
+                            <div class="deatil_titles">黄金基础班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥980</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥350</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥500</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 1)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_one.png" alt="" />
+                            </div>
+                        </div>
+                        <div class="detail_one">
+                            <div class="deatil_titles two">钻石强化班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥1280</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥450</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥700</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 2)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_two.png" alt="" />
+                            </div>
+                        </div>
+
+                        <div class="detail_one">
+                            <div class="deatil_titles three">至尊私塾班</div>
+                            <div class="detail_mid">
+                                <div class="mid_item">
+                                    <div class="lefts">全科</div>
+                                    <div class="rights">
+                                        <span class="price">￥1980</span>
+                                        <div class="right_buy"  @click="togoBuy(1, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">公共单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥700</span>
+                                        <div class="right_buy"  @click="togoBuy(2, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                                <div class="mid_item">
+                                    <div class="lefts">实务单科</div>
+                                    <div class="rights">
+                                        <span class="price">￥900</span>
+                                        <div class="right_buy"  @click="togoBuy(3, 3)">立即购买</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="down_img">
+                                <img class="l_img" src="@/assets/topic/detail_three.png" alt="" />
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
+        <!-- 弹窗 -->
+        <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="subjectType" :type="type"></buy-dialog>
+        <ToolBar></ToolBar>
+        <Footer></Footer>
+    </div>
+</template>
+
+<script>
+import Header from "@/components/header/index.vue";
+import Footer from "@/components/footer/index.vue";
+import ToolBar from "@/components/toolbar/index.vue";
+import buyDialog from './components/buyDialog.vue'
+import catalogue from './components/catalogue.vue'
+export default {
+    name: '',
+    components: { Header, Footer, ToolBar, buyDialog, catalogue },
+    data() {
+        return {
+            buyModal: false,
+            topicId: '',
+            subjectType: 0,
+            type: 0,
+            goodsInfo: {},
+            // goodsData: {},
+            vid: '',
+            vidzb: '',
+            vodPlayerJs: "https://player.polyv.net/script/player.js",
+            playerJs: "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
+            uidzb: "egsxlptzdq",
+            menuTab: [
+                {
+                    name: "1",
+                    label: "章节目录",
+                }
+            ],
+            courseTabIndex: "1",
+            courseId: "",
+            goodsId: "",
+            gradeId: "",
+            orderGoodsId: "",
+            needOpen: true, //是否需要一进来展开第一章节
+            menuIndex: [], //需要展开的章节索引值
+            courseList: [],
+            s_courseList: [],
+            goodsAuditionConfigIdList: [],
+            listenConfigList: [],
+            courserIndex: 0,
+            goodsDetail: {},
+            goodsExamConfig: [],
+            subList: [],
+            subIndex: 0,
+            typeList: [],
+            slideList: [],
+            showMeun: false,
+        }
+    },
+    created() {
+        this.topicId = this.$route.query.topicId || 1
+        this.getgoodsInfo()
+        this.educationTypeList()
+    },
+    methods: {
+        educationTypeList() {
+            this.$request.educationTypeList().then((res) => {
+                this.typeList = res.rows.slice(0, 5);
+                this.typeList.forEach((typeItem, index) => {
+                    this.businessList(typeItem.id, index);
+                });
+            });
+        },
+
+        businessList(educationId, index) {
+            this.$request
+                .businessList({ educationId })
+                .then((res) => {
+                    let rows = res.rows.filter((item) => item.aliasName)
+                    this.$set(this.slideList, index, rows);
+                    if (rows.length >= 2) {
+                        let newRows = rows.slice(0, 2);
+                        let length = 0;
+                        newRows.forEach((row) => {
+                        let str = row.projectName + "-" + row.businessName;
+                        length = length + str.length;
+                        });
+
+                        if (length >= 17) {
+                            this.$set(this.typeList[index], "list", rows.slice(0, 1));
+                        } else {
+                            this.$set(this.typeList[index], "list", rows.slice(0, 2));
+                        }
+                    } else {
+                        this.$set(this.typeList[index], "list", rows);
+                    }
+                    console.log('this.typeList:',this.slideList, this.typeList)
+                })
+                .catch((err) => {
+                console.log(err, "err");
+            });
+        },
+        changeCouMeun() {
+            this.showMeun = !this.showMeun
+        },
+        goCourse(item) {
+            if (item.topicId) {
+                this.topicId = item.topicId
+                return
+            }
+            this.$router.push({
+                path: "/course-list",
+                query: {
+                    educationId: item.educationId ? item.educationId : item.id || "",
+                    projectId: item.projectId || "",
+                    businessId: item.educationId ? item.id : "",
+                },
+            });
+        },
+        getgoodsInfo() {
+            this.$axios({
+                url: `/app/common/get/goodsInfo/${this.topicId}`,
+                method: 'get',
+                noToken: true
+            }).then(async(res) => {
+                if (res.code == 200) {
+                    this.goodsInfo = res.data
+                    // this.goodsId = res.data.goodsId
+                    this.goodsId = 823
+                    console.log('goodsInfo: ', this.goodsInfo)
+                    
+                }
+            })
+        },
+        
+        togoBuy(subjectType, type) {
+            this.subjectType = subjectType
+            this.type = type
+            this.buyModal = true
+        },
+        
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.goods_topic {
+    width: 100%;
+    .section {
+        &__header {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+        }
+    }
+    .course_btns {
+        padding: 10px 10px 10px 115px;
+        .meun_btns {
+            width: 100%;
+            .btns {
+                width: 96px;
+                height: 32px;
+                line-height: 32px;
+                text-align: center;
+                background: #3F8DFD;
+                border-radius: 4px;
+                color: #fff;
+                font-size: 14px;
+                cursor: pointer;
+                
+            }
+            &:hover {
+                .slide-list {
+                    display: block;
+                }
+            }
+            .slide-list {
+                display: none;
+                transition: all 0.3s;
+                width: 672px;
+                background: #F8F8F8;
+                position: absolute;
+                top: 163px;
+                left: 115px;
+                padding-left: 24px;
+                z-index: 10;
+                border-radius: 4px;
+                &__item {
+                    min-height: 80px;
+                    display: flex;
+                    align-items: center;
+                    border-bottom: 1px solid #ddd;
+
+                    &:nth-last-of-type(1) {
+                        border: 0;
+                    }
+                    .title {
+                        cursor: pointer;
+                        color: #fff;
+                        width: 120px;
+                        height: 28px;
+                        border: 1px solid #ffffff;
+                        border-radius: 14px;
+                        background: #3f8dfd;
+                        line-height: 26px;
+                        text-align: center;
+                        border-radius: 15px;
+                        margin-right: 10px;
+                    }
+
+                    .nav {
+                        flex: 1;
+                        display: flex;
+                        flex-wrap: wrap;
+                        li {
+                            margin: 9px 24px 9px 0;
+                            display: flex;
+
+                            .text {
+                            cursor: pointer;
+                            font-size: 14px;
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            color: #666;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mains {
+        // width: 100%;
+        padding: 0px 116px;
+        .content_up {
+            width: 100%;
+            height: 808px;
+            .banner_one {
+                width: 100%;
+                height: 280px;
+                background: url('../../assets/topic/banner_one.png') center center no-repeat;
+                background-size: 100% 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .banner_two {
+                width: 100%;
+                height: 528px;
+                background: url('../../assets/topic/banner_bg.png') center center no-repeat;
+                background-size: 100% 100%;
+                .con_header {
+                    width: 1120px;
+                    height: 44px;
+                    background: #3F4449;
+                    display: flex;
+                    .con_item {
+                        padding: 12px 20px;
+                        font-size: 16px;
+                        font-weight: 500;
+                        color: #FFFFFF;
+                        &.nactive {
+                            background: #3F8DFD;
+                        }
+                    }
+                }
+                .course_info {
+                    display: flex;
+                    align-items: center;
+                    justify-items: center;
+                }
+                .left_box {
+                    width: 700px;
+                    height: 528px;
+                    .video {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+                .right-box {
+                    width: 420px;
+                    height: 528px;
+                    background: #3f4449;
+                    border-radius: 0px;
+                    &__header {
+                        .tabs {
+                            /deep/.el-tabs__nav-wrap::after {
+                                background-color: #999;
+                            }
+
+                            /deep/ .el-tabs__header {
+                                margin: 0;
+                            }
+
+                            .label {
+                                color: #fff;
+                                height: 40px;
+                                line-height: 40px;
+                                padding: 0 20px;
+                            }
+
+                            .item {
+                                &__title {
+                                    padding-left: 12px;
+                                    height: 40px;
+                                    line-height: 40px;
+                                    cursor: pointer;
+                                    font-size: 14px;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: bold;
+                                    color: #fff;
+
+                                    .el-icon-caret-right,
+                                    .el-icon-caret-bottom {
+                                    color: #999;
+                                    }
+                                }
+
+                                &__content {
+                                    .bank-chapter {
+                                        &__item {
+                                            color: #fff;
+                                            font-size: 14px;
+
+                                            &__text {
+                                            padding: 8px 8px 8px 24px;
+                                            cursor: pointer;
+                                            flex: 1;
+
+                                            .el-icon-caret-right,
+                                            .el-icon-caret-bottom {
+                                                color: #999;
+                                            }
+                                            }
+                                        }
+                                    }
+
+                                    .bank-section {
+                                        &__item {
+                                            user-select: none;
+                                            color: #fff;
+                                            font-size: 14px;
+                                            display: flex;
+                                            align-items: center;
+
+                                            &.active {
+                                            background: #132b4d;
+                                            font-size: 14px;
+                                            font-family: Microsoft YaHei;
+                                            font-weight: bold;
+                                            color: #3f8dfd;
+                                            }
+
+                                            &__text {
+                                            flex: 1;
+                                            padding: 8px 8px 8px 12px;
+                                            height: 40px;
+                                            display: flex;
+                                            flex-direction: column;
+                                            justify-content: center;
+                                            cursor: pointer;
+
+                                            .el-icon-caret-right,
+                                            .el-icon-caret-bottom {
+                                                color: #999;
+                                            }
+                                            }
+
+                                            .test-btn {
+                                            margin-left: 10px;
+                                            width: 32px;
+                                            height: 20px;
+                                            background: #007aff;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #fff;
+                                            text-align: center;
+                                            }
+
+                                            .note {
+                                            margin-left: 10px;
+                                            width: 32px;
+                                            height: 20px;
+                                            border: 1px solid #ff3b30;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #ff3b30;
+                                            text-align: center;
+
+                                            &--yellow {
+                                                border-color: #ff9500;
+                                                color: #ff9500;
+                                            }
+
+                                            &--blue {
+                                                border-color: #3f8dfd;
+                                                color: #3f8dfd;
+                                            }
+                                            }
+
+                                            .during {
+                                            color: #999;
+                                            margin-right: 10px;
+                                            }
+
+                                            .btn {
+                                            margin-right: 12px;
+                                            width: 48px;
+                                            height: 20px;
+                                            border: 1px solid #ff3b30;
+                                            background: #ff3b30;
+                                            border-radius: 4px;
+                                            line-height: 18px;
+                                            color: #fff;
+                                            text-align: center;
+
+                                            &--green {
+                                                border: 1px solid #34c759;
+                                                background: #34c759;
+                                            }
+                                            }
+
+                                            .live-btn {
+                                            margin-left: 20px;
+                                            width: 60px;
+                                            height: 20px;
+                                            border-radius: 4px;
+                                            background: #eeeeee;
+                                            line-height: 18px;
+                                            color: #666666;
+                                            text-align: center;
+
+                                            &--yellow {
+                                                background: #fff7eb;
+                                                color: #ff9500;
+                                            }
+
+                                            &--blue {
+                                                border-color: #ebf4ff;
+                                                color: #007aff;
+                                            }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        .title {
+                            height: 40px;
+                            border-bottom: 1px solid #999;
+                            color: #fff;
+
+                            .select {
+                            width: 100%;
+                            }
+
+                            /deep/ .el-input__icon {
+                            width: 20px;
+                            height: 20px;
+                            border: 1px solid #fff;
+                            border-radius: 4px;
+                            margin-top: 10px;
+                            line-height: 20px;
+                            }
+
+                            /deep/ .el-input__inner {
+                            color: #fff;
+                            font-size: 16px;
+                            background: none;
+                            border: 0;
+                            }
+                        }
+                    }
+                    &__body {
+                        height: 374px;
+                        overflow-y: scroll;
+                        &::-webkit-scrollbar {
+                            // width: 6px;
+                            display: none;
+                        }
+                        &::-webkit-scrollbar-track {
+                            background-color: #060e1a;
+                            -webkit-border-radius: 2em;
+                            -moz-border-radius: 2em;
+                            border-radius: 2em;
+                        }
+                        &::-webkit-scrollbar-thumb {
+                            background-color: #eeeeee;
+                            -webkit-border-radius: 2em;
+                            -moz-border-radius: 2em;
+                            border-radius: 2em;
+                        }
+                    }
+                }
+            }
+            
+        }
+        .topic_detail {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            // height: 3444px;
+            height: 3100px;
+            background: url('../../assets/topic/topic_bg.png') center center no-repeat;
+            background-size: 100% 100%;
+            
+            .titles {
+                margin-top: 109px;
+                >img {
+                    width: 32px;
+                    height: 20px;
+                }
+                .scheme {
+                    font-size: 48px;
+                    font-weight: bold;
+                    color: #363543;
+                    margin: 0px 40px;
+                }
+            }
+            .min_title {
+                margin: 13px 0px 50px;
+                font-size: 28px;
+                font-weight: 500;
+                color: #363543;
+            }
+            
+        }
+        .details {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .detail_one {
+                width: 358px;
+                height: 2753px;
+                background-color: #fff;
+                border-radius: 8px;
+                margin-right: 20px;
+                @media screen and (max-width: 1370px){
+                    width: 300px;
+                }
+            }
+            .deatil_titles {
+                width: 100%;
+                height: 110px;
+                line-height: 110px;
+                text-align: center;
+                border-radius: 8px 8px 0px 0px;
+                background: linear-gradient(45deg, #71A9F6 0%, #1658DA 100%);
+                font-size: 32px;
+                font-weight: bold;
+                color: #FFFFFF;
+                &.two {
+                    background: linear-gradient(45deg, #FE8D6D 0%, #ED3531 100%);
+                }
+                &.three {
+                    background: linear-gradient(45deg, #E3BC79 0%, #BF7D2E 100%);
+                }
+            }
+            .detail_mid {
+                width: 100%;
+                padding: 0px 24px;
+                
+                .mid_item {
+                    width: 100%;
+                    height: 74px;
+                    border-bottom: 1px solid #EAEAEA;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                .lefts {
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #363543;
+                }
+                .rights {
+                    display: flex;
+                }
+                .price {
+                    font-size: 18px;
+                    font-weight: 500;
+                    color: #FC3F3F;
+                    margin-right: 20px;
+                }
+                .right_buy {
+                    width: 76px;
+                    height: 28px;
+                    line-height: 28px;
+                    text-align: center;
+                    background: #FC3F3F;
+                    border-radius: 50px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    cursor: pointer;
+                }
+            }
+
+            .down_img {
+                width: 100%;
+                height: 2369px;
+                >.l_img {
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/home/index.vue

@@ -376,16 +376,19 @@
       <div class="container">
         <div class="course__header">
           <div class="title">推荐课程</div>
-          <div class="tabs">
-            <div
-              v-for="(item, index) in goodsList1"
-              :key="index"
-              class="tab"
-              :class="active1 === index ? 'active' : ''"
-              @click="active1 = index"
-            >
-              {{ item.name }}
-            </div>
+          <div class="course__footer">
+            <div class="btn" @click="go('/course-list')">查看更多</div>
+          </div>
+        </div>
+        <!-- <div class="tabs">
+          <div
+            v-for="(item, index) in goodsList1"
+            :key="index"
+            class="tab"
+            :class="active1 === index ? 'active' : ''"
+            @click="active1 = index"
+          >
+            {{ item.name }}
           </div>
         </div>
         <div class="course__body">
@@ -406,11 +409,52 @@
               </li>
             </template>
           </ul>
+        </div> -->
+        <div v-if="courseName.length > 1" class="tabs">
+          <div
+            v-for="(item, index) in courseName"
+            :key="index"
+            class="tab"
+            :class="couIndex === index ? 'active' : ''"
+            @click="changeCou(item.recommendId, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="course__body">
+          <p
+            v-if="
+              !goodsList1.length
+            "
+            class="text_align"
+          >
+            该培训项目无推荐课程
+          </p>
+          <ul v-else class="list clearfix">
+            <template v-for="(item, index) in goodsList1">
+              <li class="course-item" :key="index">
+                <GoodsItem :item="item"></GoodsItem>
+              </li>
+            </template>
+          </ul>
         </div>
 
-        <div class="course__footer">
-          <div class="btn" @click="go('/course-list')">查看更多</div>
+        <div class="pagination">
+          <el-pagination
+            @current-change="currentChangeCou"
+            background
+            layout="prev, pager, next"
+            :total="paramList[0].total"
+            :current-page.sync="paramList[0].currentPage"
+            :page-size="paramList[0].pageSize"
+          >
+          </el-pagination>
         </div>
+
+        <!-- <div class="course__footer">
+          <div class="btn" @click="go('/course-list')">查看更多</div>
+        </div> -->
+
       </div>
     </section>
 
@@ -418,16 +462,19 @@
       <div class="container">
         <div class="bank__header">
           <div class="title">推荐题库</div>
-          <div class="tabs">
-            <div
-              v-for="(item, index) in goodsList2"
-              :key="index"
-              class="tab"
-              :class="active2 === index ? 'active' : ''"
-              @click="active2 = index"
-            >
-              {{ item.name }}
-            </div>
+          <div class="bank__footer">
+            <div class="btn" @click="go('/bank-list')">查看更多</div>
+          </div>
+        </div>
+        <!-- <div class="tabs">
+          <div
+            v-for="(item, index) in goodsList2"
+            :key="index"
+            class="tab"
+            :class="active2 === index ? 'active' : ''"
+            @click="active2 = index"
+          >
+            {{ item.name }}
           </div>
         </div>
         <div class="bank__body">
@@ -450,29 +497,56 @@
                 @click="goodsDetail(item, 2)"
               >
                 <GoodsItem :item="item"></GoodsItem>
-                <!-- <div class="bank-item__img">
-                  <div class="note" v-if="item.year">{{ item.year }}</div>
-                  <img
-                    v-if="item.coverUrl"
-                    :src="$tools.splitImgHost(item.coverUrl)"
-                    alt=""
-                  />
-                </div>
-                <div class="bank-item__title">
-                  {{ item.goodsName }}
-                </div>
-                <div class="bank-item__desc">
-                  <div class="price">￥{{ item.standPrice }}</div>
-                  <a class="add" @click.stop="addCart(item)">加购物车</a>
-                </div> -->
               </li>
             </template>
           </ul>
-        </div>
+        </div> -->
 
-        <div class="bank__footer">
-          <div class="btn" @click="go('/bank-list')">查看更多</div>
+        <div v-if="bankName.length > 1" class="tabs">
+          <div
+            v-for="(item, index) in bankName"
+            :key="index"
+            class="tab"
+            :class="bankIndex === index ? 'active' : ''"
+            @click="changebank(item.recommendId, index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="bank__body">
+          <p
+            v-if="
+              !goodsList2.length
+            "
+            class="text_align"
+          >
+            该培训项目无推荐题库
+          </p>
+          <ul v-else class="list clearfix">
+            <template v-for="(item, index) in goodsList2">
+              <li
+                class="bank-item"
+                :key="index"
+                @click="goodsDetail(item, 2)"
+              >
+                <GoodsItem :item="item"></GoodsItem>
+              </li>
+            </template>
+          </ul>
+        </div>
+        
+        <div class="pagination">
+          <el-pagination
+            @current-change="currentChangeBank"
+            background
+            layout="prev, pager, next"
+            :total="paramList[1].total"
+            :current-page.sync="paramList[1].currentPage"
+            :page-size="paramList[1].pageSize"
+          >
+          </el-pagination>
         </div>
+        
       </div>
     </section>
 
@@ -630,15 +704,46 @@ export default {
       searchKey: "",
       type: "1",
       recordList: {},
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      paramList: [
+				{
+					pageNum: 1,
+					pageSize: 10,
+          currentPage: 1,
+					total: 0,
+				},
+				{
+					pageNum: 1,
+					pageSize: 10,
+          currentPage: 1,
+					total: 0,
+				}
+			],
+      total1: 0,
+			total2: 0,
+      courseName: [],
+			bankName: [],
+			couIndex: 0,
+			bankIndex: 0,
+			courseId: '',
+			bankId: '',
     };
   },
+  created() {
+    this.goodsList1 = []
+		this.goodsList2 = []
+		this.courseLists()
+  },
   mounted() {
     if (this.userInfo) {
       this.getRecord();
       this.getmsg();
       this.getMsgCount();
     }
-    this.getActivityList();
+    // this.getActivityList();
     // this.color = this.colors[0];
     this.advertisingList();
     this.educationTypeList();
@@ -653,6 +758,94 @@ export default {
     },
   },
   methods: {
+    //课程
+		 courseLists() {			
+			this.$request.appCommonActivityRecommendList({ platform: 2, status: 1 }).then(async (res) => {
+        // return
+				if (res.code == 200) {
+					let list = res.rows || []
+					//课程
+					this.courseName = list.filter(x => x.type == 1).sort((a,b) => a.sort - b.sort).map(x => {
+						return {
+							name: x.name,
+							recommendId: x.recommendId
+						}
+					});
+					console.log('couIndex', this.couIndex, this.courseName)
+					//题库
+					this.bankName = list.filter(x => x.type == 2).sort((a,b) => a.sort - b.sort).map(x => {
+						return {
+							name: x.name,
+							recommendId: x.recommendId
+						}
+					});
+					if (this.courseName.length) {
+						this.courseId = this.courseName[0].recommendId
+						let list1 = await this.getGoodsList(this.courseName[0].recommendId, 0)
+						this.goodsList1.push(...list1)
+					}
+					
+					if (this.bankName.length) {
+						this.bankId = this.bankName[0].recommendId
+						let list2 = await this.getGoodsList(this.bankName[0].recommendId, 1)
+						this.goodsList2.push(...list2)
+					}
+
+				}
+			});
+		},
+    getGoodsList(recommendId, num) {	
+			return new Promise((resolve, reject) => {
+				 this.$axios({
+					url: `/app/common/activity/recommend/goodsList`,
+					method: 'get',
+					params: {
+						pageNum: this.paramList[num].pageNum,
+						pageSize: this.paramList[num].pageSize,
+						recommendId: recommendId
+					},
+					noToken: true
+				}).then((res) => {
+					if (res.code == 200) {
+						this.paramList[num].total = res.total
+						resolve(res.rows)
+					}	
+				})
+			})
+			 
+		},
+    async currentChangeCou(val) {
+      console.log('vallll', val)
+      this.paramList[0].pageNum = val
+      this.goodsList1 = []
+      let list1 = await this.getGoodsList(this.courseId, 0)
+      this.goodsList1.push(...list1)
+    },
+    async changeCou(recommendId, index) {
+			this.couIndex = index
+			this.courseId = recommendId
+			this.paramList[0].pageNum = 1
+      this.paramList[0].currentPage = 1
+			this.goodsList1 = []
+			let list1 = await this.getGoodsList(recommendId, 0)
+			this.goodsList1.push(...list1)
+		},
+    async currentChangeBank(val) {
+      console.log('val--', val)
+      this.paramList[1].pageNum = val
+      this.goodsList2 = []
+      let list2 = await this.getGoodsList(this.bankId, 1)
+      this.goodsList2.push(...list2)
+    },
+    async changebank(recommendId, index) {
+			this.bankIndex = index
+			this.bankId = recommendId
+			this.paramList[1].pageNum = 1
+      this.paramList[1].currentPage = 1
+			this.goodsList2 = []
+			let list2 = await this.getGoodsList(recommendId, 1)
+			this.goodsList2.push(...list2)
+		},
     /**
      * 关闭消息
      */
@@ -1143,6 +1336,17 @@ export default {
         });
     },
     goCourse(item) {
+      console.log('sdsf', item)
+      if (item.topicId) {
+        this.$router.push({
+          path: "/goodsTopic",
+          query: {
+            topicId: item.topicId,
+          },
+        })
+        return
+      }
+      
       this.$router.push({
         path: "/course-list",
         query: {
@@ -1907,6 +2111,7 @@ export default {
     &__header {
       display: flex;
       align-items: center;
+      justify-content: space-between;
 
       .title {
         background: url("~@/assets/video.png") no-repeat left center;
@@ -1918,33 +2123,39 @@ export default {
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
 
-      .tabs {
-        margin-left: 40px;
-        display: flex;
-        align-items: center;
+      
+    }
+    .tabs {
+      margin-left: 28px;
+      display: flex;
+      align-items: center;
 
-        .tab {
-          cursor: pointer;
-          user-select: none;
-          // width: 88px;
-          padding: 0px 6px;
-          height: 24px;
-          border: 1px solid #f84e05;
-          border-radius: 12px;
-          text-align: center;
-          line-height: 24px;
-          color: #f84e05;
-          font-size: 14px;
-          margin: 0 4px;
+      .tab {
+        cursor: pointer;
+        user-select: none;
+        // width: 88px;
+        padding: 0px 6px;
+        height: 24px;
+        border: 1px solid #f84e05;
+        border-radius: 12px;
+        text-align: center;
+        line-height: 24px;
+        color: #f84e05;
+        font-size: 14px;
+        margin: 0 4px;
 
-          &.active {
-            color: #fff;
-            background: #f84e05;
-          }
+        &.active {
+          color: #fff;
+          background: #f84e05;
         }
       }
     }
 
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
+    }
+
     &__body {
       .list {
         width: 100%;
@@ -1984,7 +2195,7 @@ export default {
     &__header {
       display: flex;
       align-items: center;
-
+      justify-content: space-between;
       .title {
         background: url("~@/assets/exercise.png") no-repeat left center;
         padding-left: 36px;
@@ -1995,7 +2206,9 @@ export default {
         text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
       }
 
-      .tabs {
+      
+    }
+    .tabs {
         margin-left: 40px;
         display: flex;
         align-items: center;
@@ -2020,6 +2233,9 @@ export default {
           }
         }
       }
+    .pagination {
+      padding: 30px 0;
+      text-align: center;
     }
 
     &__body {

src/pages/mock-report/index.vue

@@ -197,6 +197,40 @@
             >全部解析</el-button
           >
         </div>
+
+        <div v-if="courseList.length" class="course_list">
+          <div class="course__header">
+            <div class="title">相关推荐</div>
+          </div>
+          <div class="course__body">
+            <!-- <p
+              v-if="
+                !courseList.length
+              "
+              class="text_align"
+            >
+              无推荐课程
+            </p> -->
+            <ul class="list clearfix">
+              <template v-for="(item, index) in courseList">
+                <li class="course-item" :key="index">
+                  <GoodsItem :item="item"></GoodsItem>
+                </li>
+              </template>
+            </ul>
+          </div>
+
+          <div class="pagination">
+            <el-pagination
+              @current-change="currentChangeCou"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :page-size="pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
       </div>
     </section>
 
@@ -242,6 +276,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
 import { mapGetters, mapActions } from "vuex";
 export default {
   name: "BankExplain",
@@ -249,6 +284,7 @@ export default {
     Footer,
     Header,
     ToolBar,
+    GoodsItem,
   },
   data() {
     return {
@@ -263,6 +299,10 @@ export default {
       eachExamId: 0,
       subscribeId: 0,
       subscribeInfo: {},
+      courseList: [],
+			pageNum: 1,
+			pageSize: 10,
+			total: 0,
     };
   },
   computed: {
@@ -273,6 +313,7 @@ export default {
     this.examId = this.$route.query.examId;
     this.recordId = this.$route.query.recordId;
     this.subscribeId = this.$route.query.subscribeId;
+    this.getcourList()
     this.setSystemTime();
     this.mockSubscribeInfo();
     this.mockWrongRecordWrongNum();
@@ -281,6 +322,26 @@ export default {
   },
   methods: {
     ...mapActions(["setSystemTime"]),
+      getcourList() {
+        this.$axios({
+            url: '/apply/recommend/goodsList',
+            method: 'post',
+            data: {
+                examId: this.examId,
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+            }
+        }).then((res) => {
+            if (res.code == 200) {
+              this.courseList = res.rows || []
+              this.total = res.total
+            }
+        })
+    },
+    currentChangeCou(val) {
+      this.pageNum = val
+      this.getcourList()
+    },
     goLive() {
       this.$router.push({
         path: "/living-room/" + this.subscribeInfo.liveUrl,
@@ -728,6 +789,50 @@ export default {
         margin: 0 4px;
       }
     }
+
+    .course_list {
+      .course {
+        background: #f5f7fa;
+        padding-top: 40px;
+
+        &__header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .title {
+            background: url("~@/assets/video.png") no-repeat left center;
+            padding-left: 36px;
+            font-size: 24px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            color: #333333;
+            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
+          }
+
+          
+        }
+
+        
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .course-item {
+              float: left;
+            }
+          }
+        }
+
+      }
+      .pagination {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 20px 0px;
+      }
+    }
   }
 
   .info {

src/pages/person-center/my-bank/bank-detailCopy/index.vue

@@ -1165,7 +1165,7 @@ export default {
     },
     // 新增用户视频学习日志
 		studyLog(courseId, moduleId, chapterId, examId) {
-			this.$http({
+			this.$axios({
 				url: '/user/study/log',
 				method: 'post',
 				data: {

src/router/index.js

@@ -410,6 +410,18 @@ const router =  new Router({
         }
       }
     },
+    {
+      path: '/goodsTopic',
+      name: '商品专题',
+      component: resolve => require(['@/pages/goodsTopic/index'],resolve),
+      meta: {
+        title: '祥粤云学堂-题库-一建二建试题下载_考试科目题库_考题答案_历年试题_在线真题_水平测试_历年真题_在线题库',
+        content: {
+          keywords: '祥粤云学堂-模拟试题练习,试题答案,一级建造师试题查找,二级建造师试题练习,题目类型,考试书籍,考试图书,考试教材',
+          description: '祥粤云学堂-提供一二级建造师学习资料、教材教辅，一二级建造师考试专业培训辅导课程，免费试听，建造师内部习题资料、工程师教学辅导视频、建筑考试课件视频等资料'
+        }
+      }
+    },
     {
       path: '/person-center',
       name: '个人中心',