课程跳转

src/pages/goodsTopic/components/buyDialog.vue

@@ -65,14 +65,13 @@ export default {
             skuItem: {},
             skuIndex: -1,
             loading: false,
-            titles: '黄金班',
+            titles: '选择课程',
         }
     },
     watch: {
         buyModal(newV, oldV) {
             if (newV) {
                 console.log('监听')
-                this.titles = ['黄金班', '钻石班', '至尊班'][this.type - 1]
                 this.getDetail()
             }
         },

src/pages/goodsTopic/components/catalogue.vue

@@ -1,194 +1,171 @@
 <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 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="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="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="course-list-item"
-                                                    v-for="(course, index) in s_courseList"
+                                                    class="item"
+                                                    v-for="(item, index) in course.list"
                                                     :key="index"
                                                     >
-                                                    <div
-                                                        class="course-list-item_title"
-                                                        @click="openCourse(course)"
-                                                    >
+                                                    <template v-if="item.type == 1">
+                                                        <div
+                                                        class="item__title"
+                                                        @click="openModule(item)"
+                                                        >
                                                         <i
-                                                        :class="{
-                                                            'el-icon-caret-right': !course.showList,
-                                                            'el-icon-caret-bottom': course.showList,
-                                                        }"
+                                                            :class="{
+                                                            'el-icon-caret-right': !item.showList,
+                                                            'el-icon-caret-bottom': item.showList,
+                                                            }"
                                                         ></i>
-                                                        {{ course.courseName }}
-                                                    </div>
-                                                    <template v-if="course.showList">
+                                                        {{ item.name }}
+                                                        </div>
+                                                        <div class="item__content">
                                                         <div
-                                                        class="item"
-                                                        v-for="(item, index) in course.list"
-                                                        :key="index"
+                                                            class="bank-chapter"
+                                                            v-if="item.showList"
                                                         >
-                                                        <template v-if="item.type == 1">
                                                             <div
-                                                            class="item__title"
-                                                            @click="openModule(item)"
+                                                            class="bank-chapter__item"
+                                                            v-for="(
+                                                                chapter, chapterIndex
+                                                            ) in item.list"
+                                                            :key="chapterIndex"
+                                                            >
+                                                            <div
+                                                                class="bank-chapter__item__text"
+                                                                @click="openChapter(chapter)"
                                                             >
-                                                            <i
+                                                                <i
                                                                 :class="{
-                                                                'el-icon-caret-right': !item.showList,
-                                                                'el-icon-caret-bottom': item.showList,
+                                                                    'el-icon-caret-right':
+                                                                    !chapter.showList,
+                                                                    'el-icon-caret-bottom':
+                                                                    chapter.showList,
                                                                 }"
-                                                            ></i>
-                                                            {{ item.name }}
+                                                                ></i
+                                                                >{{ chapter.name }}
                                                             </div>
-                                                            <div class="item__content">
+
                                                             <div
-                                                                class="bank-chapter"
-                                                                v-if="item.showList"
+                                                                class="bank-section"
+                                                                v-if="chapter.showList"
                                                             >
                                                                 <div
-                                                                class="bank-chapter__item"
+                                                                class="bank-section__item"
                                                                 v-for="(
-                                                                    chapter, chapterIndex
-                                                                ) in item.list"
-                                                                :key="chapterIndex"
+                                                                    section, sectionIndex
+                                                                ) in chapter.list"
+                                                                :key="sectionIndex"
                                                                 >
                                                                 <div
-                                                                    class="bank-chapter__item__text"
-                                                                    @click="openChapter(chapter)"
+                                                                    class="bank-section__item__text"
                                                                 >
-                                                                    <i
-                                                                    :class="{
-                                                                        'el-icon-caret-right':
-                                                                        !chapter.showList,
-                                                                        'el-icon-caret-bottom':
-                                                                        chapter.showList,
-                                                                    }"
-                                                                    ></i
-                                                                    >{{ chapter.name }}
+                                                                    {{ section.name }}
                                                                 </div>
-
                                                                 <div
-                                                                    class="bank-section"
-                                                                    v-if="chapter.showList"
+                                                                    v-if="section.tryListen"
+                                                                    @click="
+                                                                    toDo(section, item.courseId)
+                                                                    "
+                                                                    class="btn"
                                                                 >
-                                                                    <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>
+                                                        </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>
 
-                                                        <template v-if="item.type == 2">
-                                                            <div class="item__content">
-                                                            <div class="bank-chapter">
-                                                                <div class="bank-chapter__item">
+                                                            <div
+                                                                class="bank-section"
+                                                                v-if="item.showList"
+                                                            >
                                                                 <div
-                                                                    class="bank-chapter__item__text"
-                                                                    @click="openChapter(item)"
+                                                                class="bank-section__item"
+                                                                v-for="(
+                                                                    section, sectionIndex
+                                                                ) in item.list"
+                                                                :key="sectionIndex"
                                                                 >
-                                                                    <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"
+                                                                    class="bank-section__item__text"
                                                                 >
-                                                                    <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 }}
+                                                                    {{ section.name }}
                                                                 </div>
                                                                 <div
-                                                                    v-if="item.tryListen"
-                                                                    @click="toDo(item, item.courseId)"
+                                                                    v-if="section.tryListen"
+                                                                    @click="
+                                                                    toDo(section, item.courseId)
+                                                                    "
                                                                     class="btn"
                                                                 >
                                                                     试看
@@ -196,57 +173,82 @@
                                                                 </div>
                                                             </div>
                                                             </div>
-                                                        </template>
+                                                        </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 v-if="showAsk" class="down_bottons">
-                                            <div class="ask_manage" @click="toAskManage()">咨询管理</div>
-                                            <div class="ask_manage ask_buy" >立即购买</div>
-                                            <div 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 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>
-                                    </template>
-                                </el-tab-pane>
-                            </el-tabs>
-                        </div>
+                                    </div>
+                                </template>
+                            </el-tab-pane>
+                        </el-tabs>
                     </div>
                 </div>
-
             </div>
-
-            <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
         </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() {
@@ -285,12 +287,13 @@ export default {
             subIndex: 0,
             playCourseId: 0, // 播放课程id
             showAsk: false,
+            buyModal: false,
         }
     },
     watch: {
         async goodsId(newV, oldV) {
             if (newV) {
-                console.log('监听')
+                console.log('监听', this.topicId)
                 await this.getGoodsDetail()
                 this.goodsCourseList()
             }
@@ -301,10 +304,12 @@ export default {
             this.showAsk = !this.showAsk
         },
         toChangeCou(item, index) {
-            console.log('dfdf', item, index)
             this.subIndex = index
             this.s_courseList = this.courseList.filter(e => e.subjectId == item.subjectId)
         },
+        togoBuy() {
+            this.buyModal = true
+        },
         /**
          * 获取商品详情
          */
@@ -601,7 +606,7 @@ export default {
 
 <style lang="scss" scoped>
 .con_header {
-    width: 1106px;
+    width: 1104px;
     height: 44px;
     background: #3F4449;
     display: flex;

src/pages/goodsTopic/index.vue

@@ -10,12 +10,39 @@
                     </el-breadcrumb>
                 </div>
             </div>
-
+            <div class="course_btns">
+                <div class="meun_btns">
+                    <el-button type="primary" size="small" @click="changeCouMeun()">课程导航</el-button>
+                    <div v-if="showMeun" 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'></catalogue>
+                        <catalogue :goodsId='goodsId' :topicId="topicId"></catalogue>
                     </div> 
                 </div>
                 <div class="content_down">
@@ -175,14 +202,71 @@ export default {
             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}`,
@@ -220,6 +304,65 @@ export default {
             padding: 0 20px;
         }
     }
+    .course_btns {
+        padding: 10px 10px 10px 115px;
+        .meun_btns {
+            .slide-list {
+                // opacity: 1;
+                transition: all 0.3s;
+                width: 672px;
+                padding: 0;
+                background: rgba(255, 255, 255, 1);
+                position: absolute;
+                top: 178px;
+                left: 120px;
+                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;

src/pages/home/index.vue

@@ -1144,13 +1144,16 @@ export default {
     },
     goCourse(item) {
       console.log('sdsf', item)
-      this.$router.push({
-        path: "/goodsTopic",
-        query: {
-          topicId: item.topicId,
-        },
-      })
-      return
+      if (item.topicId) {
+        this.$router.push({
+          path: "/goodsTopic",
+          query: {
+            topicId: item.topicId,
+          },
+        })
+        return
+      }
+      
       this.$router.push({
         path: "/course-list",
         query: {