From 179f12a8a71eecc0906d926afa5714bb503e7927 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 18 Jun 2024 17:13:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E8=AF=BE=E7=A8=8B=E8=81=94?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |   3 +-
 src/components/breadcrumb/index.vue |  47 ++++---
 src/mixins/page/index.js            |   6 +-
 src/pages/course/index.vue          |  12 +-
 src/pages/index/list/index.vue      | 115 ++++++-----------
 src/pages/index/show/index.vue      | 185 ++++++++++++++++------------
 6 files changed, 182 insertions(+), 186 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index e3443af..c871b3d 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -28,7 +28,8 @@ export default {
   listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
   courseProduct: `/iasf/productDetails/courseProduct`,
   categoryList: `/iasf/categoryService/Category/list`,
-  productDetailsFind: `/iasf/productDetails/findById`,
+  foregroundPreview: `/iasf/productDetails/foregroundPreview`,
+  productDetailsPreview: `/iasf/productDetails/articlePreview`,
   courseDiscipline: `/iasf/subject/courseDiscipline`,
   courseProfessionalClass: `/iasf/subject/courseProfessionalClass`,
   courseProfessional: `/iasf/subject/courseProfessional`,
diff --git a/src/components/breadcrumb/index.vue b/src/components/breadcrumb/index.vue
index 95245d5..00d2b1e 100644
--- a/src/components/breadcrumb/index.vue
+++ b/src/components/breadcrumb/index.vue
@@ -3,15 +3,11 @@
   <div class="breadcrumb">
     <el-breadcrumb separator=">">
       <template v-for="(item, i) in data">
-        <el-breadcrumb-item
-          v-if="i != data.length - 1"
-          :key="i"
+        <el-breadcrumb-item v-if="i != data.length - 1" :key="i"
           :to="{ path: item.path || '/column', query: item.query }">
-          {{ item.name | i18nName($i18n)}}
+          {{ item.name | i18nName($i18n) }}
         </el-breadcrumb-item>
-        <el-breadcrumb-item
-          v-else
-          :key="i">
+        <el-breadcrumb-item v-else :key="i">
           {{ item.name }}
         </el-breadcrumb-item>
       </template>
@@ -21,42 +17,45 @@
 
 <script>
 export default {
-    props: ['data'],
-    data() {
-      return {
-        
-      };
-    },
-    methods: {
-      
-    },
-   filters: {
-    i18nName(name,type) {
+  props: ['data'],
+  data () {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+  filters: {
+    i18nName (name, type) {
       switch (name) {
         case '专利':
           return type.t('column.patent')
         case '专著':
           return type.t('column.monograph')
         case '论文':
-         return type.t('column.paper')
-         case '科学研究':
-         return type.t('column.scientificResearch')
-         
+          return type.t('column.paper')
+        case '科学研究':
+          return type.t('column.scientificResearch')
+
         default:
           return name
       }
     }
-   }
+  }
 };
 </script>
 <style lang="scss" scoped>
 .breadcrumb {
   margin: 4px 0 16px;
+
   /deep/.el-breadcrumb__item {
-    .is-link, .el-breadcrumb__separator {
+    .is-link,
+    .el-breadcrumb__separator {
       font-weight: 400;
       color: $main-color;
     }
+
     &:last-child {
       .is-link {
         color: #0B1D30;
diff --git a/src/mixins/page/index.js b/src/mixins/page/index.js
index a487066..e8db52d 100644
--- a/src/mixins/page/index.js
+++ b/src/mixins/page/index.js
@@ -109,8 +109,12 @@ export default {
           href = this.$router.resolve(href + '&siteId=' + site).href
         }
         this.toHref(item.isOpen, href)
+      } else if (item.listStyleId === 73) { // 长页模板为产品中心的，该栏目下的文章全部跳产品详情页
+        this.$router.push(`/index/show?id=${item.id}`)
       } else {
-        this.$router.push(`/article?articleId=${item.id}&siteId=${this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`)
+        let href = `/article?articleId=${item.id}&siteId=${this.site}&id=${this.id}`
+        if (form) href += `&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`
+        this.$router.push(href)
       }
     },
     // 关联栏目的查看全部跳转
diff --git a/src/pages/course/index.vue b/src/pages/course/index.vue
index e456250..8a76adb 100644
--- a/src/pages/course/index.vue
+++ b/src/pages/course/index.vue
@@ -43,7 +43,7 @@
             <!-- <div class="course-bg"></div> -->
             <template v-if="list.length">
               <ul>
-                <li v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
+                <li v-for="(item, index) in list" :key="index" @click="toDetail(item)">
                   <img :src="item.coverImageUrl" alt="" />
                   <div class="title">{{ item.name }}</div>
                   <div class="desc" v-html="item.introduction"></div>
@@ -81,11 +81,12 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import { Loading } from "element-ui";
 export default {
+  mixins: [mixins],
   data () {
     return {
-      id: +this.$route.query.id,
       info: {},
       columnBanner: '',
       columns: [],
@@ -237,8 +238,10 @@ export default {
       // 判断是否是课程页
       this.$router.replace(`/${(typeId === 1 || typeId === 4) && to.templateId === 12 ? 'course' : 'column'}?id=${to.id}&siteId=${this.site}`).catch(() => { })
     },
-    toDetail (id) {
-      this.$router.push(`/course/details?id=${id}`);
+    // 跳转详情
+    toDetail (item) {
+      item.listStyleId = 73 // 手动把产品中心长页的id赋进去，跳转文章的方法是公用的，产品中心要跳转到产品详情页，不是文章详情页
+      this.toArtice(item)
     }
   }
 };
@@ -405,6 +408,7 @@ export default {
 
     dl {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
       padding: 12px 0;
 
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index c99db19..daa0d75 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -124,7 +124,7 @@
         <div class="courses">
           <template v-if="list.length">
             <ul>
-              <li v-for="(item, i) in list" :key="i" @click="toDetail(item.id)">
+              <li v-for="(item, i) in list" :key="i" @click="toDetail(item)">
                 <img :src="item.coverImageUrl" alt="" />
                 <div class="texts">
                   <el-tooltip effect="dark" :visible-arrow="false" :content="item.name" placement="bottom">
@@ -132,18 +132,16 @@
                   </el-tooltip>
                   <div class="desc" v-html="item.introduction"></div>
                   <div class="tags">
-                    <el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false"
-                      :content="item.tagsName" placement="bottom">
+                    <el-tooltip v-if="item.tag" class="item" effect="dark" :visible-arrow="false" :content="item.tag"
+                      placement="bottom">
                       <div>
-                        <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
+                        <el-tag v-for="(tag, i) in item.tag.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
                       </div>
                     </el-tooltip>
                   </div>
-                  <div :class="['metas']">
-                    <el-tag v-if="item.typeName" effect="dark">
-                      {{ item.typeName }}
-                    </el-tag>
-                    <div v-if="item.isCourse" class="meta">{{ item.totalBrowsing }}人看过</div>
+                  <div class="metas">
+                    <el-tag v-if="item.isTop" effect="dark" size="small">官方精选</el-tag>
+                    <div class="meta">{{ item.totalBrowsing }}人看过</div>
                   </div>
                 </div>
               </li>
@@ -188,6 +186,7 @@ export default {
         },
       ],
       form: {
+        categoryId: '',
         subjectCategoryId: '',
         professionalCategoryId: '',
         majorId: '',
@@ -197,9 +196,6 @@ export default {
         timeOrdering: '',
         classificationTagId: '',
       },
-      categoryId: '',
-      professionalCategoryId: '',
-      professionalId: '',
       category: [],
       professionalClasses: [],
       professionals: [],
@@ -240,6 +236,11 @@ export default {
     };
   },
   watch: {
+    $route () {
+      this.id = this.$route.query.id
+      this.getBanner()
+      this.initData()
+    },
     'form.keyWord': function (val) {
       clearTimeout(this.searchTimer);
       this.searchTimer = setTimeout(() => {
@@ -254,7 +255,8 @@ export default {
     this.getClass()
     this.initData()
   },
-  methods: {// 初始化动画
+  methods: {
+    // 初始化动画
     initAnimate () {
       ScrollReveal().reveal('.animate', {
         reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
@@ -332,36 +334,39 @@ export default {
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
           this.$nextTick(this.initAnimate)
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
       }).catch(err => { })
     },
     // 获取列表
-    getData () {
-      this.loadIns = Loading.service()
-      this.$post(this.api.courseProduct, {
-        ...this.form,
-        siteId: this.site,
-        pageNum: this.page,
-        pageSize: this.pageSize,
-        columnId: +this.id,
-      }).then(({ data }) => {
-        this.list = data.records
+    async getData () {
+      try {
+        this.loadIns = Loading.service()
+        const { data } = await this.$post(this.api.courseProduct, {
+          ...this.form,
+          siteId: this.site,
+          pageNum: this.page,
+          pageSize: this.pageSize,
+          columnId: +this.id,
+        })
+        const list = data.records
+        list && list.forEach(e => {
+          // 没简介则取描述，描述要去掉标签图片
+          if (!e.introduction) {
+            const el = document.createElement('div')
+            el.innerHTML = e.detailedDescription
+            e.introduction = el.innerText
+          }
+        })
+        this.list = list
         this.total = +data.total
+      } finally {
         this.loadIns.close()
-      }).catch(res => {
-        this.loadIns.close()
-      })
+      }
     },
     initData () {
       this.page = 1;
       this.getData();
     },
-    // 简介点击定位锚点
-    toPart (i) {
-      this.active = i
-      // document.querySelector(`#part${i}`).scrollIntoView()
-    },
 
     // 获取产品标签
     async getLabel () {
@@ -407,47 +412,6 @@ export default {
       this.form.majorId = item.professionalId
       this.initData()
     },
-    // 获取学科类别
-    // async getSubject () {
-    //   // 学科类别
-    //   this.$get(this.api.subjectCategoryCited).then(({ list }) => {
-    //     list = list.filter(e => e.disciplineId != 1)
-    //     list.map((e, i) => {
-    //       e.id = e.disciplineId
-    //       e.name = e.disciplineName
-    //       // 专业类
-    //       e.professionalClasses.map(e => {
-    //         e.id = e.professionalClassId
-    //         e.name = e.professionalClassName
-
-    //         // 专业
-    //         e.professionals.map(e => {
-    //           e.id = e.professionalId
-    //           e.name = e.professionalName
-    //         })
-    //         e.children = e.professionals
-    //       })
-    //       e.children = e.professionalClasses
-    //     })
-    //     this.category = list
-    //   }).catch(err => { })
-    // },
-    // 学科点击回调
-    categoryClick (item, i) {
-      const { id, children } = item
-      this[i === 1 ? 'categoryId' : i === 2 ? 'professionalCategoryId' : 'professionalId'] = id
-      // 学科类别
-      if (i === 1) {
-        this.professionalCategoryId = ''
-        this.professionalId = ''
-        if (children) this.professionalClasses = children
-        this.professionals = []
-      } else if (i === 2) {  // 专业类
-        this.professionalId = ''
-        if (children) this.professionals = children
-      }
-      this.initData()
-    },
     // 获取产品类型
     async getClass () {
       const { data } = await this.$post(`${this.api.categoryList}?siteId=${this.site}&type=1`)
@@ -482,8 +446,9 @@ export default {
       this.getData();
     },
     // 跳转详情
-    toDetail (id) {
-      this.$router.push(`/index/show?id=${id}`);
+    toDetail (item) {
+      item.listStyleId = 73 // 手动把产品中心长页的id赋进去，跳转文章的方法是公用的，产品中心要跳转到产品详情页，不是文章详情页
+      this.toArtice(item)
     }
   }
 };
diff --git a/src/pages/index/show/index.vue b/src/pages/index/show/index.vue
index eaefe74..7e2c7ed 100644
--- a/src/pages/index/show/index.vue
+++ b/src/pages/index/show/index.vue
@@ -2,97 +2,98 @@
   <div class="wrap">
     <div class="inner">
       <Breadcrumb ref="breadcrumb" :data.sync="routes" />
-      <div class="top">
-        <el-image class="pic" :src="form.coverImageUrl" :preview-src-list="[form.coverImageUrl]" />
-        <div class="right fadeInRight" id="fields">
-          <h6>{{ form.name }}</h6>
-          <div class="meta">
-            已有 <span class="val">{{ form.totalBrowsing }}</span>人看过
-          </div>
-          <div class="des" v-html="form.introduction"></div>
-          <div class="fields">
-            <div class="field">
-              <img src="@/assets/images/product/1.png" alt=""> 适用专业：
-              <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.professionalName"
-                placement="bottom">
-                <div>
-                  {{ form.professionalName }}
+      <div v-loading="loading">
+        <!-- 非富文本详情页 -->
+        <template v-if="form.articleTemplate !== 72">
+          <div class="top">
+            <el-image class="pic" :src="form.coverImageUrl" :preview-src-list="[form.coverImageUrl]" />
+            <div class="right fadeInRight" id="fields">
+              <h6>{{ form.name }}</h6>
+              <div class="meta">
+                已有 <span class="val">{{ form.totalBrowsing }}</span>人看过
+              </div>
+              <div class="des" v-html="form.introduction"></div>
+              <div class="fields">
+                <div class="field">
+                  <img src="@/assets/images/product/1.png" alt=""> 适用专业：
+                  <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.professionalName"
+                    placement="bottom">
+                    <div>
+                      {{ form.professionalName }}
+                    </div>
+                  </el-tooltip>
                 </div>
-              </el-tooltip>
-            </div>
-            <div v-if="form.applicationScenario" class="field">
-              <img src="@/assets/images/product/2.png" alt=""> 适用场景：
-              <div class="text">{{ form.applicationScenario }}</div>
-            </div>
-            <div v-if="form.matchingCourse" class="field">
-              <img src="@/assets/images/product/3.png" alt=""> 匹配课程：
-              <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.matchingCourse"
-                placement="bottom">
-                <div class="text">
-                  {{ form.matchingCourse }}
+                <div v-if="form.applicableScenarios" class="field">
+                  <img src="@/assets/images/product/2.png" alt=""> 适用场景：
+                  <div class="text">{{ form.applicableScenarios }}</div>
+                </div>
+                <div v-if="form.matchingCourse" class="field">
+                  <img src="@/assets/images/product/3.png" alt=""> 匹配课程：
+                  <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.matchingCourse"
+                    placement="bottom">
+                    <div class="text">
+                      {{ form.matchingCourse }}
+                    </div>
+                  </el-tooltip>
                 </div>
-              </el-tooltip>
+                <div v-if="form.estimatedHours" class="field">
+                  <img src="@/assets/images/product/4.png" alt=""> 预计课时：
+                  <div class="text">{{ form.estimatedHours }}</div>
+                </div>
+                <div v-if="form.typeName" class="field">
+                  <img src="@/assets/images/product/5.png" alt=""> 产品类型：
+                  <div class="text">{{ form.typeName }}</div>
+                </div>
+              </div>
+              <button v-if="form.jumpButtonName" class="btn" @click="toLink">{{ form.jumpButtonName }}</button>
             </div>
-            <div v-if="form.courseHours" class="field">
-              <img src="@/assets/images/product/4.png" alt=""> 预计课时：
-              <div class="text">{{ form.courseHours }}</div>
+          </div>
+          <div class="course" id="part0">
+            <div class="detail">
+              <ul class="tab">
+                <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
+                  tab.name }}</li>
+              </ul>
+              <div class="courses">
+                <div class="des" v-html="form.detailedDescription"></div>
+              </div>
             </div>
-            <div v-if="form.typeName" class="field">
-              <img src="@/assets/images/product/5.png" alt=""> 产品类型：
-              <div class="text">{{ form.typeName }}</div>
+            <div class="products">
+              <h6 class="fadeInUp">热门产品推荐</h6>
+              <ul class="product fadeInDown">
+                <li v-for="(item, i) in hots" :key="i" @click="toDetail(item.id)">
+                  <img :src="item.coverImageUrl" alt="" />
+                  <div class="texts">
+                    <div class="title">{{ item.name }}</div>
+                    <div :class="['desc', { 'not-tag': !item.tag }]" v-html="item.introduction"></div>
+                    <div v-if="item.tag" class="tags">
+                      <el-tag v-for="(tag, i) in item.tag.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
+                    </div>
+                    <div class="metas">
+                      <div class="meta">{{ item.totalBrowsing }}人看过</div>
+                    </div>
+                  </div>
+                </li>
+              </ul>
             </div>
           </div>
-          <button v-if="form.jumpButtonName" class="btn" @click="toLink">{{ form.jumpButtonName }}</button>
-        </div>
-      </div>
-      <div class="course" id="part0">
-        <div class="detail">
-          <ul class="tab">
-            <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
-              tab.name }}</li>
-          </ul>
-          <div class="courses">
-            <div class="des" v-html="form.detailedDescription"></div>
-          </div>
-        </div>
-        <div class="products">
-          <h6 class="fadeInUp">热门产品推荐</h6>
-          <ul class="product fadeInDown">
-            <li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)">
-              <img :src="item.coverImageUrl" alt="" />
-              <div class="texts">
-                <div class="title">{{ item.name }}</div>
-                <div :class="['desc', { 'not-tag': !item.tagsName }]" v-html="item.productIntroduction"></div>
-                <div v-if="item.tagsName" class="tags">
-                  <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
-                </div>
-                <div class="metas">
-                  <div class="meta">{{ item.learningCount }}人看过</div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
+        </template>
+        <!-- 富文本详情只需展示详情字段 -->
+        <div v-else class="des" v-html="form.detailedDescription"></div>
       </div>
     </div>
 
-    <el-dialog title="" :visible.sync="qrcodeVisible" width="500px" center :top="qrcodeTop" custom-class="qrcode-dia">
-      <div>
-        <img width="100%" src="@/assets/images/occupationlab.png" alt="">
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import Util from "@/libs/util"
-import Setting from "@/setting"
 import Breadcrumb from '@/components/breadcrumb'
 import ScrollReveal from 'scrollreveal'
 export default {
   data () {
     return {
       id: this.$route.query.id,
+      loading: false,
       routes: {},
       curTab: 0,
       tabs: [
@@ -111,24 +112,43 @@ export default {
       },
       hots: [],
       height: '',
-      qrcodeVisible: false,
-      qrcodeTop: '100px'
     };
   },
+  computed: {
+    site () {
+      return this.$route.query.siteId || this.$store.state.content.site
+    }
+  },
   components: {
     Breadcrumb,
   },
   mounted () {
-    const height = (window.innerHeight - 758) / 2
-    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
     this.getData()
-    this.getHot()
   },
   methods: {
     // 产品详情
     async getData () {
-      const { data } = await this.$post(`${this.api.productDetailsFind}?id=${this.id}`)
-      this.form = data
+      this.loading = true
+      try {
+        const { data } = await this.$post(`${this.api.foregroundPreview}?id=${this.id}`)
+        this.form = data
+        this.routes = [
+          {
+            name: data.columnName,
+            path: '/column',
+            query: {
+              id: data.columnId,
+              siteId: data.siteId
+            }
+          },
+          {
+            name: data.name
+          }
+        ]
+        this.getHot()
+      } finally {
+        this.loading = false
+      }
     },
     // 初始化动画
     initAnimate () {
@@ -224,13 +244,16 @@ export default {
       const { data } = await this.$post(this.api.courseProduct, {
         pageNum: 1,
         pageSize: 2,
-        columnId: +this.id,
+        columnId: this.form.columnId,
+        sortFiltering: 2,
+        siteId: this.site,
+        keyWord: '',
       })
       this.hots = data.records
     },
     // 跳转详情
     toDetail (id) {
-      this.$router.push(`/index/show?id=${id}`)
+      this.$router.push(`/index/show?id=${id}`).catch(() => { })
       this.id = id
       this.getData()
     },