详情页收藏按钮

2022-07-15 17:32:47 +08:00 · 2022-07-15 17:32:47 +08:00 · 3b10007619
parent 60e26e151c
commit 3b10007619
6 changed files with 442 additions and 282 deletions
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-05 11:41:52
+ * @LastEditTime: 2022-07-15 17:30:19
 * @Description: 算法详情页头部
 -->
 <template>
@ -58,7 +58,9 @@
          <template #icon><shopping-cart-outlined /></template>
          加入申购车
        </a-button>
-        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ scFlag ? '已' : '' }}收藏
+        </a-button>
      </div>
    </div>
    <div class="right"></div>
@ -67,7 +69,7 @@
 <script setup>
  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+  import { scInsert, scDel } from '@/api/personalCenter'
  import { sgcInsert } from '@/api/home'
  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
@ -75,6 +77,7 @@
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
+  // console.log('==================>', props.dataList.isCollect)
  const router = useRouter()
  const applicationArea = ref('')
  const deploymentLocation = ref('') //部署位置
@ -121,12 +124,38 @@
  }
  const componentType = ref('')
  // 收藏
+  const scFlag = ref(props.dataList.isCollect)
+  const scFlag2 = ref(true)
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (scFlag.value) {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            scFlag.value = false
+            scFlag2.value = true
+          }
        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            scFlag.value = 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(
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:31:12
+ * @LastEditTime: 2022-07-15 17:30:26
 * @Description: 算法详情页头部
 -->
 <template>
@ -53,13 +53,19 @@
          加入购物车
        </a-button> -->
        <!-- 融合服务 存在fuseResourceList -->
-        <a-button type="primary" @click="handleAKeyApplication()" v-if="dataList.fuseResourceList">
+        <a-button
+          type="primary"
+          @click="handleAKeyApplication()"
+          v-if="dataList.fuseResourceList"
+        >
          <template #icon>
            <form-outlined />
          </template>
          申请使用
        </a-button>
-        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ scFlag ? '已' : '' }}收藏
+        </a-button>
      </div>
    </div>
    <div class="right"></div>
@ -68,7 +74,7 @@
 <script setup>
  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
  import { defineProps, ref, watch } from 'vue'
-import { scInsert } from '@/api/personalCenter'
+  import { scInsert, scDel } from '@/api/personalCenter'
  // import { sgcInsert } from '@/api/home'
  // import { useRouter } from 'vue-router'
  // import mybus from '@/myplugins/mybus'
@ -81,7 +87,7 @@ const props = defineProps({
    dataList: { type: Object, default: null },
  })

-console.log('dataList------------>', props.dataList);
+  console.log('dataList------------>', props.dataList)

  // const router = useRouter()
  const applicationArea = ref('')
@ -111,8 +117,8 @@ const applicationArea = ref('')
  // }
  // 融合服务--一键申请
  const handleAKeyApplication = () => {
-  let _applyList = [];
-  (props.dataList.fuseResourceList || []).map(v => {
+    let _applyList = []
+    ;(props.dataList.fuseResourceList || []).map((v) => {
      let resource = v.resource || {}
      let obj = {
        arr: [
@ -131,22 +137,45 @@ const handleAKeyApplication = () => {
      _applyList.push(obj)
    })

-  localStorage.setItem(
-    'applyList',
-    JSON.stringify(_applyList)
-  )
+    localStorage.setItem('applyList', JSON.stringify(_applyList))
    router.push({
      path: '/apply',
    })
  }

  // 收藏
+  const scFlag = ref(props.dataList.isCollect)
+  const scFlag2 = ref(true)
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
-  scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-    console.log(res)
-    message.success('收藏成功')
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (scFlag.value) {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            scFlag.value = false
+            scFlag2.value = true
+          }
        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            scFlag.value = 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(
@ -157,7 +186,7 @@ watch(
    () => props.dataList,
    (val) => {
      if (val) {
-      console.log('props.dataList-----watch------->', val);
+        console.log('props.dataList-----watch------->', val)

        applicationArea.value = props.dataList.infoList.filter(
          (val) => val.attrType === '应用领域'
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-05 11:42:27
+ * @LastEditTime: 2022-07-15 17:31:32
 * @Description: 算法详情页头部
 -->
 <template>
@ -62,7 +62,9 @@
          </template>
          加入申购车
        </a-button>
-        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ scFlag ? '已' : '' }}收藏
+        </a-button>
      </div>
    </div>
    <div class="right"></div>
@ -71,7 +73,7 @@
 <script setup>
  import { ShoppingCartOutlined } from '@ant-design/icons-vue'
  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+  import { scInsert, scDel } from '@/api/personalCenter'
  import { sgcInsert } from '@/api/home'
  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
@ -125,12 +127,38 @@
    })
  }
  // 收藏
+  const scFlag = ref(props.dataList.isCollect)
+  const scFlag2 = ref(true)
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (scFlag.value) {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            scFlag.value = false
+            scFlag2.value = true
+          }
        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            scFlag.value = true
+            scFlag2.value = true
+          }
+        })
+      }
+    }
+    // scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    //   console.log(res)
+    //   message.success('收藏成功')
+    // })
  }
  if (props.dataList.infoList) {
    businessArea.value = props.dataList.infoList.filter(
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-05 11:42:59
+ * @LastEditTime: 2022-07-15 17:32:08
 * @Description: 开发组件详情页头部
 -->
 <template>
@ -58,7 +58,9 @@
          <template #icon><shopping-cart-outlined /></template>
          加入购物车
        </a-button>
-        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ scFlag ? '已' : '' }}收藏
+        </a-button>
      </div>
    </div>
    <div class="right"></div>
@ -67,7 +69,7 @@
 <script setup>
  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+  import { scInsert, scDel } from '@/api/personalCenter'
  import { sgcInsert } from '@/api/home'
  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
@ -120,12 +122,38 @@
    })
  }
  // 收藏
+  const scFlag = ref(props.dataList.isCollect)
+  const scFlag2 = ref(true)
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (scFlag.value) {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            scFlag.value = false
+            scFlag2.value = true
+          }
        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            scFlag.value = true
+            scFlag2.value = true
+          }
+        })
+      }
+    }
+    // scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    //   console.log(res)
+    //   message.success('收藏成功')
+    // })
  }
  const componentType = ref('')
  if (props.dataList.infoList) {
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-08 11:56:28
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-05 11:43:18
+ * @LastEditTime: 2022-07-15 17:32:31
 * @Description: 算法详情页头部
 -->
 <template>
@ -58,7 +58,9 @@
          <template #icon><shopping-cart-outlined /></template>
          加入申购车
        </a-button>
-        <a-button type="primary" @click="goTOCollection()">收藏</a-button>
+        <a-button type="primary" @click="goTOCollection()">
+          {{ scFlag ? '已' : '' }}收藏
+        </a-button>
      </div>
    </div>
    <div class="right"></div>
@ -67,7 +69,7 @@
 <script setup>
  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
  import { defineProps, ref, watch } from 'vue'
-  import { scInsert } from '@/api/personalCenter'
+  import { scInsert, scDel } from '@/api/personalCenter'
  import { sgcInsert } from '@/api/home'
  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
@ -120,12 +122,38 @@
    })
  }
  // 收藏
+  const scFlag = ref(props.dataList.isCollect)
+  const scFlag2 = ref(true)
  const goTOCollection = () => {
    console.log('收藏===================》', props.dataList)
-    scInsert([{ resourceId: props.dataList.id }]).then((res) => {
-      console.log(res)
-      message.success('收藏成功')
+    if (scFlag2.value) {
+      scFlag2.value = false
+      if (scFlag.value) {
+        scDel([props.dataList.id]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('取消成功')
+            scFlag.value = false
+            scFlag2.value = true
+          }
        })
+      } else {
+        scInsert([
+          {
+            resourceId: props.dataList.id,
+          },
+        ]).then((res) => {
+          if (res.data.msg === 'success') {
+            message.success('添加收藏成功！')
+            scFlag.value = true
+            scFlag2.value = true
+          }
+        })
+      }
+    }
+    // scInsert([{ resourceId: props.dataList.id }]).then((res) => {
+    //   console.log(res)
+    //   message.success('收藏成功')
+    // })
  }
  const componentType = ref('')
  if (props.dataList.infoList) {
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@ -136,7 +136,7 @@
            </div>
          </div>
          <div class="dec">
-            <div
+            <!-- <div
              v-if="
                selectCardsname !== '基础设施' &&
                selectCardsname !== '数据资源' &&
@ -144,17 +144,22 @@
              "
            >
              <span>{{ item.shareType || '--' }}</span>
-            </div>
+            </div> -->
            <div v-if="selectCardsname !== '融合服务'">
              <span>{{ item.deptName || '--' }}</span>
            </div>
-            <div v-if="selectCardsname !== '基础设施'">
+          </div>
+          <div
+            v-if="selectCardsname !== '基础设施'"
+            style="margin-top: 0.1rem"
+            class="description"
+          >
            <a-tooltip>
              <template #title>{{ item.description }}</template>
              {{ item.description || '--' }}
            </a-tooltip>
          </div>
-          </div>
+          <div class="btn">
            <div class="bottom" v-if="selectCardsname !== '基础设施'">
              <div>
                <div
@ -196,7 +201,6 @@
              </a-tooltip>
            </div> -->
            </div>
-          <div class="btn">
            <div class="right" v-if="selectCardsname !== '基础设施'">
              <div class="shopping" :key="shoppingKey">
                <template v-if="selectCardsname == '组件服务'">
@ -916,7 +920,7 @@
            padding-left: 10px;
            padding-right: 10px;
          }
-          div:nth-child(3) {
+          div:nth-child(2) {
            max-width: 200px;
            display: -webkit-box;
            /*设置为弹性盒子*/
@ -1049,4 +1053,18 @@
      }
    }
  }
+  .description {
+    max-width: 990px;
+    height: 52px;
+    font-size: 14px;
+    line-height: 18px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    /*最多显示3行*/
+    overflow: hidden;
+    /*超出隐藏*/
+    text-overflow: ellipsis;
+    /*超出显示为省略号*/
+    -webkit-box-orient: vertical;
+  }
 </style>