update: update

src/components/layout/index.vue

 <template>
-  <div class="layout-container">
+  <!-- <div class="layout-container">
     <vue-gic-header class="user-header-pop" style="z-index: 1999;" :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTagHandler" @toRouterView="toRouterView"></vue-gic-header>
     <div class="layout">
       <aside-menu class="layout-left" v-if="asideShow" :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag.sync="collapseFlag"></aside-menu>
@@ -22,10 +22,12 @@
             <router-view></router-view>
           </div>
         </div>
-        <!-- <vue-gic-footer></vue-gic-footer> -->
       </div>
     </div>
     <description :drawer.sync="drawer" :direction="direction" :contentTitle="contentTitle" />
+  </div> -->
+  <div>
+    <dm-layout projectName="integral-mall"> <router-view /></dm-layout>
   </div>
 </template>
 <script>

src/router/index.js

@@ -7,6 +7,7 @@ import axios from 'axios';
 Vue.use(Router);
 
 let router = new Router({
+  base: '/marketing/',
   routes,
   // scrollBehavior: () => ({ y: 0 })
   //使用keep-alive标签后部分安卓机返回缓存页位置不精确问题

src/router/routes.js

@@ -4,6 +4,7 @@ import page401 from '@/views/error/401';
 import page403 from '@/views/error/403';
 import page404 from '@/views/error/404';
 import page500 from '@/views/error/500';
+import activityCenter from '@/views/activityCenter';
 
 //微信营销
 import wechat from './modules/wechat';
@@ -43,6 +44,11 @@ export default [
     children: [card, ecm, scan, game, message, wechat, msg, calllog, recharge, evaluation, ewash, activity, cdKey, pop, signIn]
   },
   {
+    path: '/marketing-app-list',
+    name: '营销活动',
+    component: activityCenter
+  },
+  {
     path: '/401',
     name: '未授权',
     component: page401

src/service/api/activityCenterApi.js

+import { requests } from './index';
+const PREFIX = 'api-marketing/';
+
+import config from '@/config';
+export const url = config.api + PREFIX;
+
+// 营销中心活动列表
+export const activityList = params => requests(PREFIX + 'marketing/activity/getList', params);

src/views/activityCenter/components/ListItem.vue

+<template>
+  <div class="activity-center-list-item">
+    <header class="item-header">
+      <i class="column-line"></i><span class="item-header-title">{{ title }}</span>
+    </header>
+    <div class="flex-wrap">
+      <div class="card-item" v-for="card in list" :key="card" @click="jump(card.jumpUrl)">
+        <el-image style="width: 40px; height: 40px;margin-right:12px;" :src="card.activityImage" fit="cover" />
+        <div class="card-right">
+          <p class="card-right-title">{{ card.activityName }}</p>
+          <p class="card-right-explain">{{ card.activityExplain }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ListItem',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {
+          activityCategoryId: '',
+          categoryName: '',
+          childs: []
+        };
+      }
+    }
+  },
+  watch: {
+    item: {
+      handler: function(n, o) {
+        this.title = n.categoryName;
+        this.list = [...n.childs];
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      list: [],
+      title: ''
+    };
+  },
+  methods: {
+    jump(url = '') {
+      if (url) window.location.href = url;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.activity-center-list-item {
+  & + .activity-center-list-item {
+    margin-top: 40px;
+  }
+  .item-header {
+    display: flex;
+    align-items: center;
+    height: 22px;
+    margin-bottom: 20px;
+    cursor: default;
+    .column-line {
+      display: block;
+      width: 3px;
+      height: 16px;
+      margin-right: 8px;
+      background: #2f54eb;
+    }
+    &-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 22px;
+    }
+  }
+  .flex-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    .card-item {
+      display: flex;
+      align-items: center;
+      width: 280px;
+      height: 76px;
+      padding-left: 16px;
+      background: #f5f6f7;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.3s;
+      &:hover {
+        background: #ebecf0;
+        transform: translateY(-5px);
+      }
+      .card-right-title {
+        margin-bottom: 3px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #303133;
+        line-height: 20px;
+      }
+      .card-right-explain {
+        font-size: 12px;
+        color: #606266;
+        line-height: 17px;
+      }
+    }
+  }
+}
+</style>

src/views/activityCenter/index.vue

+<template>
+  <dm-layout projectName="integral-mall">
+    <div style="padding:20px;">
+      <list-item v-for="item in list" :key="item" :item="item" />
+    </div>
+  </dm-layout>
+</template>
+<script>
+import ListItem from './components/ListItem.vue';
+import { activityList } from '@/service/api/activityCenterApi.js';
+export default {
+  components: { ListItem },
+  data() {
+    return {
+      list: []
+    };
+  },
+  created() {
+    this.$store.commit('mutations_breadcrumb', [{ name: '营销管理' }, { name: '微信营销', path: '/wechat' }, { name: '素材库', path: '' }]);
+    this.$store.commit('aside_handler', false);
+    this.$nextTick(_ => {
+      this.$store.commit('aside_handler', true);
+    });
+  },
+  mounted() {
+    this.getLIst();
+  },
+  methods: {
+    async getLIst() {
+      const { result = [] } = await activityList({ orderBy: 'activity_sort ASC' });
+      console.log(result);
+      const map = {};
+      result.forEach(el => {
+        if (map[el.activityCategoryId]) {
+          map[el.activityCategoryId].childs.push({ ...el });
+        } else {
+          map[el.activityCategoryId] = {
+            activityCategoryId: el.activityCategoryId,
+            categoryName: el.categoryName,
+            childs: [{ ...el }]
+          };
+        }
+      });
+      this.list = Object.values(map);
+    }
+  }
+};
+</script>