详情页BUG修改，应用资源详情页开发

2022-06-14 14:49:38 +08:00 · 2022-06-14 14:49:38 +08:00 · 904aecc6da
parent 161eaddef3
commit 904aecc6da
4 changed files with 150 additions and 80 deletions
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:32:22
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 10:41:48
+ * @LastEditTime: 2022-06-14 14:47:39
 * @Description: 应用详情页
 -->
 <template>
@ -23,75 +23,36 @@
      id="application-presentation"
      class="scrollBox"
    ></application-presentation>
-    <!-- 算法优势 -->
-    <algorithm-advantage
-      :dataList="dataList.data"
-      id="algorithm-advantage"
-      class="scrollBox"
-    ></algorithm-advantage>
-    <!-- 应用场景和应用案例 -->
-    <!-- <application-scenarios-and-case
-      id="application-scenarios-and-case"
-      class="scrollBox"
-    ></application-scenarios-and-case> -->
-    <algorithm-application-scenarios
-      :dataList="dataList.data"
-      id="application-scenarios"
-      class="scrollBox"
-    ></algorithm-application-scenarios>
-    <algorithm-application-case
-      :dataList="dataList.data"
-      id="application-case"
-      class="scrollBox"
-    ></algorithm-application-case>
-    <!-- 算法试用 -->
-    <algorithm-on-trial
-      :dataList="dataList.data"
-      id="algorithm-on-trial"
-      class="scrollBox"
-    ></algorithm-on-trial>
-    <!-- 计费标准 -->
-    <algorithm-charging-standard
-      :dataList="dataList.data"
-      id="charging-standard"
-      class="scrollBox"
-    ></algorithm-charging-standard>
-    <!-- 使用方式 -->
-    <algorithm-usage-mode
-      :dataList="dataList.data"
-      id="usage-mode"
-      class="scrollBox"
-    ></algorithm-usage-mode>
    <!-- 功能介绍-->
    <application-function-intorduction
      :dataList="dataList.data"
-      id="subtool"
+      id="function-introduction"
      class="scrollBox"
    ></application-function-intorduction>
    <!-- 使用能力 -->
    <application-ability-toise
      :dataList="dataList.data"
-      id="ability-toise"
+      id="ability-to-use"
      class="scrollBox"
    ></application-ability-toise>
    <!-- 部署与安全-->
    <application-deployment-and-security
      :dataList="dataList.data"
-      id="application-deployment-and-security"
+      id="deployment-and-security"
      class="scrollBox"
    ></application-deployment-and-security>
    <!-- 归属部门与服务商-->
    <application-owning-department-and-service-provider
      :dataList="dataList.data"
-      id="application-owning-department-and-service-provider"
+      id="department-and-service-provider"
      class="scrollBox"
    ></application-owning-department-and-service-provider>
    <!-- 常见问题-->
-    <algorithm-common-problem
+    <application-common-problem
      :dataList="dataList.data"
      id="common-problem"
      class="scrollBox"
-    ></algorithm-common-problem>
+    ></application-common-problem>
  </div>
 </template>
 <script setup>
@ -102,13 +63,7 @@
  import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
  import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
  import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
-  import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
-  import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
-  import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
-  import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
-  import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
-  import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
-  import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { updateVisits, selectOne } from '@/api/home'
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 14:54:01
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-13 15:26:56
+ * @LastEditTime: 2022-06-14 14:27:15
 * @Description: 算法详情页导航
 -->
 <template>
@ -133,9 +133,11 @@
            item.show = true
          }
        })
+        if (list.value.length > 0) {
          select.value = navList.value.filter(
            (item) => item.name === list.value[0]
          )[0].key
+        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }
--- a/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
@ -0,0 +1,123 @@
+<template>
+  <!-- 常见问题 -->
+  <div class="cpmmon-problem" v-if="flag">
+    <div class="title">
+      <DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom" :key="index" class="content-son">
+        <div class="content-top">
+          <div class="top-img"></div>
+          <div>{{ item.title }}</div>
+        </div>
+        <div class="content-bottom">
+          <div class="bottom-img"></div>
+          <div>{{ item.answer }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '常见问题'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      obj.attrValue.map((item) => {
+        let params = {
+          title: item.question,
+          answer: item.answer,
+        }
+        dataFrom.value.push(params)
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          obj.attrValue.map((item) => {
+            let params = {
+              title: item.question,
+              answer: item.answer,
+            }
+            dataFrom.value.push(params)
+          })
+        }
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .cpmmon-problem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80px;
+    background: #f7f8fa;
+    .content {
+      width: 1300px;
+      margin: 20px 0px;
+      background: #ffffff;
+      padding: 40px;
+      .content-son {
+        font-size: 20px;
+        margin-bottom: 60px;
+        .content-top {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          line-height: 20px;
+        }
+        .content-bottom {
+          display: flex;
+          line-height: 34px;
+          color: #666666;
+        }
+        .content-top,
+        .content-bottom {
+          div:last-child {
+            width: calc(100% - 54px);
+          }
+        }
+        .top-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
+          background-position: center;
+          background-size: cover;
+          margin-right: 20px;
+        }
+        .bottom-img {
+          width: 34px;
+          height: 30px;
+          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
+          ackground-size: cover;
+          background-position: center;
+          margin-right: 20px;
+        }
+      }
+      .content-son:last-child {
+        margin-bottom: 0px;
+      }
+    }
+  }
+</style>
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 14:54:01
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:31:07
+ * @LastEditTime: 2022-06-14 14:45:44
 * @Description: 应用详情页导航
 -->
 <template>
@ -64,19 +64,12 @@
    props.dataList.infoList.map((item) => {
      if (
        item.attrType === '算法优势' ||
-        item.attrType === '应用场景' ||
-        item.attrType === '应用案例' ||
-        item.attrType === '常见问题'
+        item.attrType === '常见问题' ||
+        item.attrType === '使用能力'
      ) {
        list.value.push(item.attrType)
      } else if (item.attrType === '算法介绍视频') {
        list.value.push('算法展示')
-      } else if (item.attrType === '试用地址') {
-        list.value.push('算法试用')
-      } else if (item.attrType === '计费标准信息') {
-        list.value.push('计费标准')
-      } else if (item.attrType === '技术文档') {
-        list.value.push('使用方式')
      }
    })
    navList.value.forEach((item) => {
@ -103,31 +96,28 @@
        list.value = []
        val.infoList.map((item) => {
          if (
-            item.attrType === '算法优势' ||
-            item.attrType === '应用场景' ||
-            item.attrType === '应用案例' ||
-            item.attrType === '常见问题'
+            item.attrType === '功能介绍' ||
+            item.attrType === '常见问题' ||
+            item.attrType === '使用能力'
          ) {
            list.value.push(item.attrType)
          } else if (item.attrType === '应用展示视频') {
            list.value.push('应用展示')
-          } else if (item.attrType === '试用地址') {
-            list.value.push('算法试用')
-          } else if (item.attrType === '计费标准信息') {
-            list.value.push('计费标准')
-          } else if (item.attrType === '技术文档') {
-            list.value.push('使用方式')
          }
        })
+        list.value.push('部署与安全')
+        list.value.push('归属部门与服务商')
        navList.value.forEach((item) => {
          console.log(item)
          if (list.value.indexOf(item.name) > -1) {
            item.show = true
          }
        })
+        if (list.value.length > 0) {
          select.value = navList.value.filter(
            (item) => item.name === list.value[0]
          )[0].key
+        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }