详情页收藏按钮

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,66 +53,72 @@
          加入购物车
        </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>
  </div>
 </template>
 <script setup>
-// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
-import { defineProps, ref, watch } from 'vue'
-import { scInsert } from '@/api/personalCenter'
-// import { sgcInsert } from '@/api/home'
-// import { useRouter } from 'vue-router'
-// import mybus from '@/myplugins/mybus'
-import { message } from 'ant-design-vue'
-import { useRouter } from 'vue-router'
-// 获取当前路由地址
-const router = useRouter()
+  // 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'
+  import { useRouter } from 'vue-router'
+  // 获取当前路由地址
+  const router = useRouter()

-const props = defineProps({
+  const props = defineProps({
    dataList: { type: Object, default: null },
-})
+  })

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

-// const router = useRouter()
-const applicationArea = ref('')
-// // 加入申购车
-// const addShoppingCart = () => {
-//   console.log('加入申购车==================>', props.dataList)
-//   sgcInsert({
-//     delFlag: '0',
-//     resourceId: props.dataList.id,
-//     // userId: userId.value,
-//   }).then((res) => {
-//     console.log(res)
-//     message.success('添加申购车成功！')
-//     mybus.emit('getSgcNum')
-//   })
-// }
-// // 立即申请
-// function toView() {
-//   // window.open(newpage.href, '_blank')
-//   router.push({
-//     path: '/apply',
-//     query: {
-//       name: props.dataList.name,
-//       resourceId: [props.dataList.id],
-//     },
-//   })
-// }
-// 融合服务--一键申请
-const handleAKeyApplication = () => {
-  let _applyList = [];
-  (props.dataList.fuseResourceList || []).map(v => {
+  // const router = useRouter()
+  const applicationArea = ref('')
+  // // 加入申购车
+  // const addShoppingCart = () => {
+  //   console.log('加入申购车==================>', props.dataList)
+  //   sgcInsert({
+  //     delFlag: '0',
+  //     resourceId: props.dataList.id,
+  //     // userId: userId.value,
+  //   }).then((res) => {
+  //     console.log(res)
+  //     message.success('添加申购车成功！')
+  //     mybus.emit('getSgcNum')
+  //   })
+  // }
+  // // 立即申请
+  // function toView() {
+  //   // window.open(newpage.href, '_blank')
+  //   router.push({
+  //     path: '/apply',
+  //     query: {
+  //       name: props.dataList.name,
+  //       resourceId: [props.dataList.id],
+  //     },
+  //   })
+  // }
+  // 融合服务--一键申请
+  const handleAKeyApplication = () => {
+    let _applyList = []
+    ;(props.dataList.fuseResourceList || []).map((v) => {
      let resource = v.resource || {}
      let obj = {
        arr: [
@ -131,43 +137,66 @@ const handleAKeyApplication = () => {
      _applyList.push(obj)
    })

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

-// 收藏
-const goTOCollection = () => {
+  // 收藏
+  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
+          }
        })
-}
-if (props.dataList.infoList) {
+      } 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(
      (val) => val.attrType === '应用领域'
    )[0].attrValue
-}
-watch(
+  }
+  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 === '应用领域'
        )[0].attrValue
      }
    }
-)
+  )
 </script>
 <style lang="less" scoped>
-.algorithm-top-details {
+  .algorithm-top-details {
    height: 6rem;
    padding: 1.8rem 0 0;
    background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
@ -230,13 +259,13 @@ watch(
        font-size: 0.18rem;
        line-height: 0.34rem;

-      &>div:nth-of-type(1) {
+        & > div:nth-of-type(1) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

-      &>div:nth-of-type(2) {
+        & > div:nth-of-type(2) {
          max-height: 1rem;
          overflow: hidden;
          text-overflow: ellipsis;
@ -284,5 +313,5 @@ watch(
      background-size: 100%;
      margin-top: -0.4rem;
    }
-}
+  }
 </style>
--- 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>