应用广场开发

front/public/static/config/location.js

@@ -1,11 +1,11 @@
 /*
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
- * @LastEditors: hisense.wuhongjian
+ * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-06 10:43:53
+ * @LastEditTime: 2022-08-09 15:29:14
  * @Description: 数据资源参数配置
  */
-const newLocation = 'xihaian'
+const newLocation = 'qingdao'
 // const newLocation = 'baotou'
 // const newLocation = 'xihaian'
 

front/src/api/home.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 19:19:40
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-18 16:24:44
+ * @LastEditTime: 2022-08-09 10:37:31
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -370,3 +370,11 @@ export function getDevelopDocTree(params) {
     params,
   })
 }
+// 能力广场 应用资源
+export function selectAppList(params) {
+  return request({
+    url: '/resource/selectAppList',
+    method: 'get',
+    params,
+  })
+}

front/src/views/capacitySquare/components/application.vue

@@ -2,22 +2,26 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-08-09 09:31:25
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 15:43:34
+ * @LastEditTime: 2022-08-09 16:35:48
  * @Description: 应用资源
 -->
 <template>
   <div class="application">
     <div class="select">
-      <div class="top">全 市</div>
+      <div class="top" @click="selectFlag = true">
+        {{ typeName }}
+        <div class="light"></div>
+      </div>
       <div class="bottom" v-show="selectFlag">
-        <div>全市</div>
+        <span class="light"></span>
-        <div>市级</div>
+        <div @click="getList('全市')">全市</div>
-        <div>区级</div>
+        <div @click="getList('市级')">市级</div>
-        <div>企业</div>
+        <div @click="getList('区级')">区级</div>
+        <div @click="getList('企业')">企业</div>
       </div>
     </div>
     <div class="item-box">
-      <div class="item" v-for="item in list" :key="item.id">
+      <div class="item" v-for="item in data.list" :key="item.id">
         <a-image :width="527" :height="270" :preview="false" :src="item.pic" />
         <div class="name">{{ item.name }}</div>
       </div>
@@ -30,10 +34,34 @@
   const pageNum = ref(1)
   const flag = ref(true)
   const type = ref(null)
-  const list = reactive([])
+  const typeName = ref('全市')
+  const data = reactive({ list: [] })
   const selectFlag = ref(false)
   let dom = null
-  const getList = () => {
+  const getList = (str) => {
+    if (str) {
+      dom.scrollTop = 0
+      switch (str) {
+        case '全市':
+          type.value = null
+          typeName.value = '全 市'
+          break
+        case '市级':
+          type.value = 2
+          typeName.value = '市 级'
+          break
+        case '区级':
+          type.value = 3
+          typeName.value = '区 级'
+          break
+        case '企业':
+          type.value = 4
+          typeName.value = '企 业'
+          break
+      }
+      pageNum.value = 1
+      data.list = []
+    }
     selectAppList({ pageNum: pageNum.value, type: type.value }).then((res) => {
       if (res.data.data.length < 9) {
         dom.removeEventListener('scroll', viewMonitor, true)
@@ -43,10 +71,15 @@
           val.pic = require('@/assets/capacitySquare/yyzy.jpg')
         }
       })
-      list.push(...res.data.data)
+      data.list.push(...res.data.data)
+      selectFlag.value = false
       nextTick(() => {
         dom = document.querySelector('.item-box')
         flag.value = true
+        if (str) {
+          dom.removeEventListener('scroll', viewMonitor, true)
+          dom.addEventListener('scroll', viewMonitor, true)
+        }
       })
     })
   }
@@ -55,7 +88,7 @@
     const clientHeight = dom.clientHeight
     const scrollTop = dom.scrollTop
     const scrollHeight = dom.scrollHeight
-    console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
+    // console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
     if (clientHeight + scrollTop === scrollHeight) {
       console.log('竖向滚动条已经滚动到底部')
       if (flag.value) {
@@ -86,7 +119,9 @@
       color: #fff;
       font-size: 0.2rem;
       font-family: webfont;
+      position: relative;
       .top {
+        cursor: pointer;
         width: 3.61rem;
         height: 0.85rem;
         font-weight: 600;
@@ -94,6 +129,47 @@
         padding-top: 0.1rem;
         background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
         background-size: 100%;
+        position: relative;
+        .light {
+          width: 0.56rem;
+          height: 3px;
+          position: absolute;
+          top: 0.4rem;
+          left: 1.52rem;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
+          background-size: 100%;
+        }
+      }
+      .bottom {
+        cursor: pointer;
+        position: absolute;
+        top: 0.5rem;
+        left: 0.9rem;
+        z-index: 1000;
+        background: rgba(57, 134, 239, 0.68);
+        border: 1px solid #aed5ff;
+        .light {
+          display: inline-block;
+          width: 2.39rem;
+          height: 5px;
+          position: absolute;
+          top: -0.08rem;
+          left: -0.3rem;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
+          background-size: 100%;
+        }
+        & > div {
+          width: 1.8rem;
+          height: 0.4rem;
+          line-height: 0.4rem;
+          text-align: center;
+          border-top: 1px solid #aed5ff;
+        }
+        & > div:nth-of-type(1) {
+          border: none;
+        }
       }
     }
     .item-box {
@@ -109,7 +185,6 @@
         height: 2.75rem;
         margin-bottom: 0.3rem;
         position: relative;
-        z-index: 3000;
         background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
         background-size: 100%;
         background-position: center;
@@ -143,4 +218,17 @@
       }
     }
   }
+  .item-box::-webkit-scrollbar-track-piece {
+    background: #a5bcdb;
+    border-radius: 0.08rem;
+  }
+  .item-box::-webkit-scrollbar-thumb {
+    height: 3.2rem;
+    background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
+  }
+  .item-box::-webkit-scrollbar {
+    height: 8.8rem;
+    width: 0.08rem;
+    border-radius: 0.08rem;
+  }
 </style>