feat: 工作桌面广告位完善

src/store/workspace/aside-others.js

@@ -8,9 +8,9 @@ export default {
     listMap: {}
   }),
   mutations: {
-    changeList (state, listMap = {}) {
+    changeListMap (state, listMap = {}) {
       if (listMap && Object.keys(listMap).length) {
-        Object.assign(state.listMap, listMap)
+        state.listMap = listMap
       }
     },
     changeLoading (state, f = false) {
@@ -27,28 +27,10 @@ export default {
         commit('changeLoaded', false)
         const { data = {}, error_code: code } = await getCommonAdList(payload)
         if (code === 0 && data) {
-          const { List = [] } = data
-          const list = List.map(v => {
-            // const visited = this.pathVisited(
-            //   this.createPathItem(
-            //     '/article/content/*.html',
-            //     `id=${v.sid}`
-            //   )
-            // )
-            return {
-              ...v,
-              // visited,
-              _id: v.sid,
-              title: v.title,
-              unread: false,
-              time: v.l_lastpushtime ? v.l_lastpushtime * 1000 : 0
-            }
-          })
-          commit('changeList', list)
+          commit('changeListMap', data)
         }
         commit('changeLoading', false)
         commit('changeLoaded', true)
-        return data || []
       } catch (error) {
         commit('changeLoading', false)
         commit('changeLoaded', true)

src/views/workspace/components/AdContainer.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="ad-container" v-show="carouselList.length">
+    <AdSwipe :list="carouselList" :height="height" :code="code" />
+  </div>
+</template>
+
+<script>
+import AdSwipe from '../ui/AdSwipe'
+import { getCommonAdList } from '@/api/modules'
+
+export default {
+  name: 'AdContainer',
+  components: {
+    AdSwipe
+  },
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default () {
+        return [
+          // {
+          //   link: '',
+          //   pic: '',
+          //   name: '内容区域广告',
+          //   extend: {
+          //     width: '',
+          //     height: '',
+          //     type: ''
+          //   }
+          // }
+        ]
+      }
+    }
+  },
+  computed: {
+    carouselList () {
+      if (Array.isArray(this.list) && this.list.length) {
+        return this.list.map(this.adConfigFormatter)
+      } else {
+        return this.adList
+      }
+    }
+  },
+  data () {
+    return {
+      adList: []
+    }
+  },
+  created () {
+    this.getAdList(this.code)
+  },
+  methods: {
+    async getAdList (params) {
+      if (!params) return
+      const codes = [params]
+      try {
+        const { data = {}, error_code: code } = await getCommonAdList({ codes })
+        const ad = data[params]
+        if (code === 0 && ad) {
+          if (Array.isArray(ad)) {
+            this.adList = ad.map(this.adConfigFormatter)
+          } else {
+            this.adList = [this.adConfigFormatter(ad)]
+          }
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    adConfigFormatter (config) {
+      return {
+        pic: config?.s_pic,
+        link: config?.s_link,
+        name: config?.s_remark,
+        type: config?.o_extend?.linktype,
+        title: config?.s_remark,
+        extend: {
+          width: config?.o_extend?.width,
+          height: config?.o_extend?.height,
+          type: config?.o_extend?.linktype
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workspace/components/AsideOthers.vue

@@ -1,42 +1,54 @@
 <template>
   <div class="aside-others-container">
-    <AdContainer />
-    <div class="production-list">
-      <AdContainer />
-      <AdContainer />
-    </div>
+    <AdContainer class="aside-item" :list="listMap[codes[0]]" />
+    <AdContainer class="aside-item production-card" :list="listMap[codes[1]]" />
+    <AdContainer class="aside-item production-card" :list="listMap[codes[2]]" />
   </div>
 </template>
 
 <script>
 import { mapActions, mapState } from 'vuex'
-import AdContainer from '../ui/AdContainer'
+import AdContainer from './AdContainer'
 
 export default {
   name: 'AsideOthers',
   components: {
     AdContainer
   },
+  data () {
+    return {
+      codes: [
+        'pc-workdesktop-left-firstlevel',
+        'pc-workdesktop-left-secondlevel',
+        'pc-workdesktop-left-thirdlevel'
+      ]
+    }
+  },
   computed: {
     ...mapState('workspace/asideOthers', [
-      'myLocationInEnt',
-      'overviewList'
+      'listMap'
     ])
   },
   created () {
-    this.getEntInfo()
+    this.getList({ codes: this.codes })
   },
   methods: {
-    ...mapActions('workspace/profile', [
-      'getEntInfo'
-    ]),
-    seeMore () {
-      window.open('/entpc/newBus/board?m1=3&m2=0')
-    }
+    ...mapActions('workspace/asideOthers', [
+      'getList'
+    ])
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.aside-item {
+  margin-bottom: 16px;
+}
+.production-card {
+  ::v-deep {
+    .el-carousel__container {
+      height: 166px;
+    }
+  }
+}
 </style>

src/views/workspace/ui/AdContainer.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="ad-container">
-    <el-carousel class="carousel-list" :autoplay="true" :interval="interval" :arrow="arrow" :height="height">
-      <el-carousel-item v-for="(item, index) in list" :key="index">
-        <h3>{{ item }}</h3>
-      </el-carousel-item>
-    </el-carousel>
-  </div>
-</template>
-
-<script>
-import { Carousel, CarouselItem } from 'element-ui'
-export default {
-  name: 'AdContainer',
-  components: {
-    [Carousel.name]: Carousel,
-    [CarouselItem.name]: CarouselItem
-  },
-  props: {
-    height: {
-      type: String,
-      default: ''
-    },
-    autoplay: {
-      type: Boolean,
-      default: true
-    },
-    interval: {
-      type: Number,
-      default: 5000
-    },
-    arrow: {
-      type: String,
-      default: 'never'
-    },
-    list: {
-      type: Array,
-      default () {
-        return [
-          {
-            // link: '',
-            // pic: '',
-            // remark: ''
-          }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep {
-  .el-carousel__button {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: rgba(255,255,255,.6);
-    border: 1px solid rgb(255,255,255,.6);
-  }
-  .is-active .el-carousel__button {
-    background-color: rgba(255,255,255,1);
-    border: 1px solid rgb(255,255,255,1);
-  }
-  .el-carousel__container {
-    height: 136px;
-  }
-}
-</style>

src/views/workspace/ui/AdSwipe.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-carousel
+    class="carousel-list"
+    :autoplay="autoplay"
+    :interval="interval"
+    :indicator-position="indicatorPosition"
+    :arrow="arrow"
+    :height="height">
+    <el-carousel-item v-for="(item, index) in list" :key="index">
+      <a
+        class="link-wrapper"
+        :href="item.link || 'javascript:;'"
+        target="_blank"
+        :id="[code, index].join('-')">
+        <img :src="item.pic" :alt="item.name">
+      </a>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script>
+import { Carousel, CarouselItem } from 'element-ui'
+export default {
+  name: 'AdSwipe',
+  components: {
+    [Carousel.name]: Carousel,
+    [CarouselItem.name]: CarouselItem
+  },
+  props: {
+    code: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    height: {
+      type: String,
+      default: ''
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    interval: {
+      type: Number,
+      default: 5000
+    },
+    arrow: {
+      type: String,
+      default: 'never'
+    },
+    list: {
+      type: Array,
+      default () {
+        return [
+          // {
+          //   link: '',
+          //   pic: '',
+          //   name: '内容区域广告',
+          //   extend: {
+          //     width: '',
+          //     height: '',
+          //     type: ''
+          //   }
+          // }
+        ]
+      }
+    }
+  },
+  computed: {
+    indicatorPosition () {
+      if (this.list.length <= 1) {
+        return 'none'
+      } else {
+        return ''
+      }
+    }
+  },
+  methods: {
+    calcStyle (extend) {
+      if (!extend) return ''
+      return {
+        width: extend.width || '',
+        height: extend.height || ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-carousel__button {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(255,255,255,.6);
+    border: 1px solid rgb(255,255,255,.6);
+  }
+  .is-active .el-carousel__button {
+    background-color: rgba(255,255,255,1);
+    border: 1px solid rgb(255,255,255,1);
+  }
+  .el-carousel__container {
+    height: 136px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+.link-wrapper {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+</style>