广场模式添加默认选中应用领域

2022-11-29 14:49:34 +08:00 · 2022-11-29 14:49:34 +08:00 · d065f76217
parent 76a6edbe63
commit d065f76217
3 changed files with 314 additions and 274 deletions
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@ -22,7 +22,11 @@
        </div>
        <div class="bottom" v-show="selectFlag2">
          <span class="light"></span>
-          <div v-for="val in dictList" :key="val" @click="changeAreaFunction(val)">
+          <div
+            v-for="val in dictList"
+            :key="val"
+            @click="changeAreaFunction(val)"
+          >
            {{ val }}
          </div>
        </div>
@ -30,9 +34,18 @@
    </div>

    <div class="algorithm-class">
-      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        <a-image :src="algorithmCardPhoto(item)" :width="525" :height="275" :fallback="imgSrc" :preview="false">
-        </a-image>
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>

        <a-tooltip>
          <template #title>{{ item.name }}</template>
@ -46,75 +59,79 @@
  </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
-import { getGisByArea } from '@/api/home'
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-
-
-const deptType = ref(null)
-const typeName = ref('全市')
-const typeName2 = ref('全部')
-const dictList = ref([])
-const dataList = ref([])
-const selectFlag2 = ref(false)
-const selectFlag = ref(false)
-getCategoryTreePage({
+  import { getCategoryTreePage } from '@/api/personalCenter'
+  import { getGisByArea } from '@/api/home'
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const area = router.currentRoute.value.query.area
+  const deptType = ref(null)
+  const typeName = ref('全市')
+  const typeName2 = ref('全部')
+  if (area) {
+    typeName2.value = area
+  }
+  const dictList = ref([])
+  const dataList = ref([])
+  const selectFlag2 = ref(false)
+  const selectFlag = ref(false)
+  getCategoryTreePage({
    page: 1,
    limit: 99,
    dictTypeId: '1513712507692818433',
-}).then((res) => {
+  }).then((res) => {
    dictList.value = ['全部']
    res.data.data.list.map((val) => {
      // if (val.dictLabel !== '其他') {
      dictList.value.push(val.dictLabel)
      // }
    })
-})
-const params = {
+  })
+  const params = {
    pageNum: 1,
    type: '智能算法',
    area: typeName2.value == '全部' ? '' : typeName2.value,
-  pageSize: 9 // 固定9
-}
+    pageSize: 9, // 固定9
+  }

-// 切换领域
-const changeAreaFunction = (val) => {
-  params.pageNum = 1;
+  // 切换领域
+  const changeAreaFunction = (val) => {
+    params.pageNum = 1
    typeName2.value = val
-  params.area = typeName2.value == '全部' ? '' : typeName2.value;
+    params.area = typeName2.value == '全部' ? '' : typeName2.value
    selectFlag2.value = false
    pageWithAttrsFunction()
-}
-let algorithmclassDom = null
-const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
-const dataLength = ref(true)
-const isNoMore = ref(false)
-let url = ref('')
-const pageWithAttrsFunction = () => {
+  }
+  let algorithmclassDom = null
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  let url = ref('')
+  const pageWithAttrsFunction = () => {
    getGisByArea(params).then((res) => {
      dataList.value = res.data.data.list
      if (res.data.data.list.length < 9) {
        dataLength.value = false
      }
    })
-}
-pageWithAttrsFunction()
+  }
+  pageWithAttrsFunction()

-//图片显示
-const algorithmCardPhoto = (item) => {
+  //图片显示
+  const algorithmCardPhoto = (item) => {
    let _arr = []
-  if(item.pic && typeof item.pic == 'string') {
+    if (item.pic && typeof item.pic == 'string') {
      _arr = JSON.parse(item.pic)
    }
-  let _img = _arr[0] && _arr[0].img || imgSrc.value;
-  console.log('_img------------>', _img);
+    let _img = (_arr[0] && _arr[0].img) || imgSrc.value
+    console.log('_img------------>', _img)
    return _img
-}
-//跳转详情页
-const detailFunction = (id) => {
+  }
+  //跳转详情页
+  const detailFunction = (id) => {
    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-}
-const algorithmFunction = (e) => {
+  }
+  const algorithmFunction = (e) => {
    var scrollTop = e.currentTarget.scrollTop
    var windowHeight = e.currentTarget.clientHeight
    var scrollHeight = e.currentTarget.scrollHeight
@ -135,13 +152,13 @@ const algorithmFunction = (e) => {
    } else {
      isNoMore.value = false
    }
-}
+  }

-// 切换区市
-const changeDeptType = (str) => {
+  // 切换区市
+  const changeDeptType = (str) => {
    if (str) {
      if (algorithmclassDom) {
-      algorithmclassDom.scrollTop = 0;
+        algorithmclassDom.scrollTop = 0
      }
      switch (str) {
        case '全市':
@ -161,50 +178,58 @@ const changeDeptType = (str) => {
          typeName.value = '企 业'
          break
      }
-    params.pageNum = 1;
-    if(deptType.value !== null && deptType.value !== undefined) {
-      params.deptType = deptType.value;
-    }else {
-      if(Object.keys(params).includes('deptType')) {
+      params.pageNum = 1
+      if (deptType.value !== null && deptType.value !== undefined) {
+        params.deptType = deptType.value
+      } else {
+        if (Object.keys(params).includes('deptType')) {
          delete params.deptType
        }
      }
    }
    selectFlag.value = false
    getData(str)
-}
+  }

-const getData = (str) => {
+  const getData = (str) => {
    getGisByArea(params).then((res) => {
      const resData = res.data.data || {}
-    if (resData.list.length > 0 && resData.list.length < 9 && algorithmclassDom) {
+      if (
+        resData.list.length > 0 &&
+        resData.list.length < 9 &&
+        algorithmclassDom
+      ) {
        algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
      }
      dataList.value = resData.list || []
      nextTick(() => {
        algorithmclassDom = document.querySelector('.algorithm-box')
        if (str && algorithmclassDom) {
-        algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
+          algorithmclassDom.removeEventListener(
+            'scroll',
+            algorithmFunction,
+            true
+          )
          algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
        }
      })
    })
-}
+  }

-onMounted(() => {
+  onMounted(() => {
    algorithmclassDom = document.querySelector('.algorithm-class')
    if (dataLength.value) {
      //监听滚动事件
      algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
    }
-})
-onBeforeUnmount(() => {
+  })
+  onBeforeUnmount(() => {
    algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
-})
+  })
 </script>

 <style lang="less" scoped>
-.algorithm {
+  .algorithm {
    .select {
      margin: 0.1rem 0 0.1rem 0.2rem;
      color: #fff;
@ -229,7 +254,8 @@ onBeforeUnmount(() => {
          position: absolute;
          top: 0.4rem;
          left: 1.52rem;
-        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
          background-size: 100%;
        }
      }
@ -250,11 +276,12 @@ onBeforeUnmount(() => {
          position: absolute;
          top: -0.08rem;
          left: -0.3rem;
-        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
          background-size: 100%;
        }

-      &>div {
+        & > div {
          width: 1.8rem;
          height: 0.4rem;
          line-height: 0.4rem;
@ -262,7 +289,7 @@ onBeforeUnmount(() => {
          border-top: 1px solid #aed5ff;
        }

-      &>div:nth-of-type(1) {
+        & > div:nth-of-type(1) {
          border: none;
        }
      }
@ -299,7 +326,8 @@ onBeforeUnmount(() => {
        .algorithm-card-photo {
          height: 100%;
          width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
          background-size: 100%;
        }

@ -313,7 +341,8 @@ onBeforeUnmount(() => {
          font-family: alibaba;
          bottom: 0.15rem;
          padding-left: 0.22rem;
-        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
          background-size: 100%;
          display: flex;
          flex-direction: column;
@ -349,5 +378,5 @@ onBeforeUnmount(() => {
      width: 0.08rem;
      border-radius: 0.08rem;
    }
-}
+  }
 </style>
--- a/front/src/views/capacitySquare/components/application.vue
+++ b/front/src/views/capacitySquare/components/application.vue
@ -1,8 +1,8 @@
 <!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-08-09 09:31:25
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-24 10:44:50
+ * @LastEditors: Light
+ * @LastEditTime: 2022-11-29 14:41:49
 * @Description: 应用资源
 -->
 <template>
@ -57,12 +57,17 @@
  import { selectAppList } from '@/api/home'
  import { useRouter } from 'vue-router'
  const router = useRouter()
+  const selectArea = router.currentRoute.value.query.area
  const pageNum = ref(1)
  const flag = ref(true)
  const type = ref(null)
  const area = ref(null)
  const typeName = ref('全市')
  const typeName2 = ref('全部')
+  if (selectArea && selectArea !== '全部') {
+    typeName2.value = selectArea
+    area.value = selectArea
+  }
  const dictList = ref([])
  const data = reactive({ list: [] })
  const selectFlag = ref(false)
@ -121,7 +126,7 @@
      type: type.value,
      area: area.value,
    }).then((res) => {
-      console.log('res---应用广场--------->', res);
+      console.log('res---应用广场--------->', res)

      if (res.data.data.total.length < 9) {
        dom.removeEventListener('scroll', viewMonitor, true)
--- a/front/src/views/capacitySquare/components/layer.vue
+++ b/front/src/views/capacitySquare/components/layer.vue
@ -60,9 +60,15 @@
  import { getCategoryTreePage } from '@/api/personalCenter'
  import { getGisByArea } from '@/api/home'
  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const area = router.currentRoute.value.query.area
  const deptType = ref(null)
  const typeName = ref('全市')
  const typeName2 = ref('全部')
+  if (area) {
+    typeName2.value = area
+  }
  const dictList = ref([])
  const dataList = ref([])
  const selectFlag2 = ref(false)