From 9b448c0fcc28edbff2acb2387408701993e1e003 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Thu, 25 Aug 2022 19:56:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B5=8B=E8=83=BD=E5=9C=BA=E6=99=AF=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/ApplicationTopDetails.vue | 352 ++++++++++++++++++
 .../views/home/integrationServicesDetails.vue |  59 ++-
 2 files changed, 397 insertions(+), 14 deletions(-)
 create mode 100644 front/src/views/home/components/ApplicationTopDetails.vue

diff --git a/front/src/views/home/components/ApplicationTopDetails.vue b/front/src/views/home/components/ApplicationTopDetails.vue
new file mode 100644
index 00000000..c9c1a015
--- /dev/null
+++ b/front/src/views/home/components/ApplicationTopDetails.vue
@@ -0,0 +1,352 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 11:56:28
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-08-25 19:32:02
+ * @Description: 算法详情页头部
+-->
+<template>
+  <div class="algorithm-top-details">
+    <div class="left">
+      <div class="top">
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label" v-if="props.dataList.type">
+              {{ props.dataList.type }}
+            </span>
+            <span class="label" v-if="props.dataList.shareType">
+              {{ props.dataList.shareType }}
+            </span>
+            <span class="label" v-if="props.dataList.shareCondition">
+              {{ props.dataList.shareCondition }}
+            </span>
+          </p>
+        </div>
+        <!-- <span class="label">免费</span> -->
+      </div>
+      <div class="main">
+        <!-- <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip> -->
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
+      </div>
+      <div class="bottom" v-if="props.dataList.id">
+        <!-- 融合服务 存在fuseResourceList -->
+        <a-button
+          type="primary"
+          @click="handleAKeyApplication()"
+          v-if="dataList.fuseResourceList"
+        >
+          <template #icon>
+            <form-outlined />
+          </template>
+          申请使用
+        </a-button>
+        <a-button v-else type="primary" @click="toView()">
+          <template #icon><form-outlined /></template>
+          申请使用
+        </a-button>
+        <a-button
+          v-if="!dataList.fuseResourceList"
+          type="primary"
+          @click="addShoppingCart()"
+        >
+          <template #icon><shopping-cart-outlined /></template>
+          加入购物车
+        </a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏
+        </a-button>
+      </div>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+<script setup>
+  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
+  import { defineProps, ref, watch } from 'vue'
+  import { scInsert, scDel } from '@/api/personalCenter'
+  import { sgcInsert } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  // 获取当前路由地址
+  const router = useRouter()
+
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+
+  console.log('dataList------------>', props.dataList)
+  const applicationArea = ref('')
+  // // 加入申购车
+  const addShoppingCart = () => {
+    if (props.dataList.isInShoppingCart) {
+      message.error('已经加入申购车了')
+    } else {
+      console.log('加入申购车==================>', props.dataList)
+      sgcInsert({
+        delFlag: '0',
+        resourceId: props.dataList.id,
+        // userId: userId.value,
+      }).then((res) => {
+        console.log(res)
+        message.success('添加申购车成功！')
+        mybus.emit('getSgcNum')
+        props.dataList.isInShoppingCart = true
+        console.log(
+          props.dataList.isInShoppingCart,
+          'props.dataList.isInShoppingCart'
+        )
+      })
+    }
+  }
+  // // 立即申请
+  function toView() {
+    // window.open(newpage.href, '_blank')
+    // router.push({
+    //   path: '/apply',
+    //   query: {
+    //     name: props.dataList.name,
+    //     resourceId: [props.dataList.id],
+    //   },
+    // })
+    console.log('一键申请===================>', props.dataList)
+    localStorage.setItem(
+      'applyList',
+      JSON.stringify([
+        {
+          arr: [
+            {
+              delFlag: props.dataList.delFlag,
+              description: props.dataList.description,
+              resourceId: props.dataList.id,
+              resourceName: props.dataList.name,
+              time: props.dataList.createDate,
+              type: props.dataList.type,
+              // componentType: '智能算法',
+            },
+          ],
+          deptId: props.dataList.deptId,
+          deptName: props.dataList.deptName,
+        },
+      ])
+    )
+    router.push({
+      path: '/apply',
+    })
+  }
+  // 融合服务--一键申请
+  const handleAKeyApplication = () => {
+    let _applyList = []
+    ;(props.dataList.fuseResourceList || []).map((v) => {
+      let resource = v.resource || {}
+      let obj = {
+        arr: [
+          {
+            delFlag: resource.delFlag,
+            description: resource.description,
+            resourceId: resource.id,
+            resourceName: resource.name,
+            time: resource.createDate,
+            type: resource.type,
+          },
+        ],
+        deptId: resource.deptId,
+        deptName: resource.deptName,
+      }
+      _applyList.push(obj)
+    })
+
+    localStorage.setItem('applyList', JSON.stringify(_applyList))
+    router.push({
+      path: '/apply',
+    })
+  }
+
+  // 收藏
+  const scFlag2 = ref(true)
+  const goTOCollection = () => {
+    console.log('收藏===================》', props.dataList)
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (props.dataList.isCollect == 'true') {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            // eslint-disable-next-line vue/no-mutating-props
+            props.dataList.isCollect = 'false'
+            scFlag2.value = true
+          }
+        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            // eslint-disable-next-line vue/no-mutating-props
+            props.dataList.isCollect = 'true'
+            scFlag2.value = true
+          }
+        })
+      }
+    }
+    // scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    //   console.log(res)
+    //   message.success('收藏成功')
+    // })
+  }
+  if (props.dataList.infoList) {
+    applicationArea.value = props.dataList.infoList.filter(
+      (val) => val.attrType === '应用领域'
+    )[0].attrValue
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        console.log('props.dataList-----watch------->', val)
+
+        applicationArea.value = props.dataList.infoList.filter(
+          (val) => val.attrType === '应用领域'
+        )[0].attrValue
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-top-details {
+    height: 6rem;
+    padding: 1.8rem 0 0;
+    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    justify-content: center;
+
+    .left {
+      max-width: 7.2rem;
+      color: #fff;
+      margin-right: 0.8rem;
+
+      .top {
+        display: flex;
+        align-items: center;
+
+        span {
+          font-size: 0.14rem;
+        }
+
+        .name {
+          // max-width: 3.3rem;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // white-space: nowrap;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 6rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+
+        .label-content {
+          position: relative;
+        }
+
+        .lable-father {
+          position: absolute;
+          min-width: 3.5rem;
+          right: -3.5rem;
+          top: 0;
+        }
+
+        .label {
+          padding: 0.01rem 0.1rem;
+          margin-right: 0.1rem;
+          border-radius: 0.13rem;
+          background: rgba(255, 255, 255, 0.4);
+        }
+      }
+
+      .main {
+        margin-top: 0.2rem;
+        font-size: 0.18rem;
+        line-height: 0.34rem;
+
+        // & > div:nth-of-type(1) {
+        //   overflow: hidden;
+        //   text-overflow: ellipsis;
+        //   white-space: nowrap;
+        // }
+
+        & > div:nth-of-type(1) {
+          max-height: 1rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+      }
+
+      .bottom {
+        margin-top: 0.4rem;
+        display: flex;
+
+        .ant-btn {
+          height: 0.5rem;
+          margin-right: 0.2rem;
+          background: #ff8b55;
+          border-radius: 0.06rem;
+          font-size: 0.2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ant-btn:nth-of-type(1) {
+          width: 1.8rem;
+        }
+
+        .ant-btn:nth-of-type(2) {
+          width: 2.2rem;
+        }
+
+        .ant-btn:nth-of-type(3) {
+          width: 1.45rem;
+        }
+      }
+    }
+
+    .right {
+      width: 5.8rem;
+      height: 4rem;
+      background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
+      background-size: 100%;
+      margin-top: -0.4rem;
+    }
+  }
+</style>
diff --git a/front/src/views/home/integrationServicesDetails.vue b/front/src/views/home/integrationServicesDetails.vue
index 3f0f132f..fb51f267 100644
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/front/src/views/home/integrationServicesDetails.vue
@@ -31,23 +31,45 @@
       </div>
       <div class="flex-row-center">
         <div class="bg"></div>
-        <div class="content">
-          <div class="content-item" v-for="(item, i) in painPoint" :key="i">
-            {{ i + 1 }}.{{ item.description }}
+        <div class="content" style="margin-left: 0.5rem">
+          <div
+            class="content-item"
+            v-for="(item, i) in painPoint"
+            :key="i"
+            style="
+              margin-bottom: 0.2rem;
+              font-size: 0.18rem;
+              line-height: 0.3rem;
+            "
+          >
+            {{ i + 1 + '、' + item.description }}
           </div>
         </div>
       </div>
     </div>
 
     <!-- 解决方案 -->
-    <div id="integration-solution" class="solution scrollBox">
+    <div
+      id="integration-solution"
+      class="solution scrollBox"
+      style="background: #eee"
+    >
       <div class="title-1">
         <DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
       </div>
       <div class="flex-row-center">
-        <div class="content">
-          <div class="content-item" v-for="(item, i) in solution" :key="i">
-            {{ i + 1 }}.{{ item.description }}
+        <div class="content" style="background: #fff; margin-top: 0.2rem">
+          <div
+            class="content-item"
+            v-for="(item, i) in solution"
+            :key="i"
+            style="
+              margin-bottom: 0.2rem;
+              font-size: 0.18rem;
+              line-height: 0.3rem;
+            "
+          >
+            {{ i + 1 + '、' + item.description }}
           </div>
         </div>
       </div>
@@ -98,7 +120,7 @@
     </div>
 
     <!-- 构建步骤 -->
-    <div id="integration-step" class="step scrollBox">
+    <div id="integration-step" class="step scrollBox" style="background: #eee">
       <div class="title-1">
         <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
       </div>
@@ -118,7 +140,7 @@
 </template>
 
 <script setup>
-  import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
+  import ApplicationTopDetails from './components/ApplicationTopDetails.vue'
   import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
   import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
   import HomeFooter from '@/views/newHome/components/Footer'
@@ -492,7 +514,7 @@
     .content {
       overflow: auto;
       height: 3rem;
-      width: 6rem;
+      width: 7rem;
       margin-top: 0.3rem;
       .content-item {
         font-size: 16px;
@@ -505,7 +527,7 @@
     padding: 0.8rem 0;
     background: rgb(247, 248, 250);
     .content {
-      width: 9rem;
+      width: 11rem;
       .content-item {
         font-size: 16px;
         margin: 0.3rem;
@@ -517,9 +539,16 @@
     padding: 0.8rem 0;
     background: rgb(247, 248, 250);
     .step-content {
-      margin-top: 0.3rem;
+      margin: 0.3rem 4.5rem;
+      padding: 0.3rem;
+      background: #fff;
+      :deep(.el-step__description.is-finish) {
+        color: #333;
+        line-height: 0.24rem;
+        margin-top: 0.05rem;
+      }
       /deep/ .el-step__title {
-        font-size: 16px;
+        font-size: 18px;
       }
       /deep/ .el-step__description {
         font-size: 14px;
@@ -538,6 +567,9 @@
     .combine-content {
       margin-top: 0.3rem;
       align-items: flex-start;
+      border-bottom: 1px solid #ccc;
+      margin: 0.2rem 4.8rem;
+      padding: 0.2rem 0;
       .title {
         height: 3rem;
         width: 3rem;
@@ -550,7 +582,6 @@
         font-size: 16px;
       }
     }
-
     .name-box {
       display: flex;
       flex-direction: row;