添加活动列表页

src/lang/en.js

@@ -109,7 +109,11 @@ export default {
     RescueRecord: 'Rescue Record',
     special_permission_manage: 'Special Permission Manage',
     schedule_print: 'Print Schudule',
-    dialysis_batch_print: 'Batch Print Order'
+    dialysis_batch_print: 'Batch Print Order',
+
+    marketingTool: "marketing tools",
+    activityList: "activity list",
+    activityPublish: "publish activity",
   },
   navbar: {
     logOut: 'Log Out',

src/lang/zh.js

@@ -157,8 +157,11 @@ export default {
     salesReturnDetail: '退货单详情',
     stockOutDetail: '出库单详情',
     cancelStockDetail: '退库单详情',
-    stockDetail: '出入库明细查询'
+    stockDetail: '出入库明细查询',
 
+    marketingTool: "营销工具",
+    activityList: "活动列表",
+    activityPublish: "发布活动",
   },
   navbar: {
     logOut: '退出登录',

src/router/index.js

@@ -10,6 +10,7 @@ import role from './modules/role'
 import article from './modules/article'
 import member from './modules/member'
 import org from './modules/org'
+import marketing_tool from './modules/marketing_tool'
 
 /** note: submenu only apppear when children.length>=1
  *   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -72,6 +73,7 @@ var _constant_router_map = [{
 var _asy_router_map = [
   member,
   article,
+  marketing_tool,
   org,
   role
 ]

src/router/modules/marketing_tool.js

@@ -0,0 +1,32 @@
+import Layout from '@/views/layout/Layout'
+
+export default {
+  alwaysShow: true,
+  path: '/activity',
+  component: Layout,
+  redirect: 'noredirect',
+  name: 'marketingTool',
+  meta: {
+    title: 'marketingTool',
+    icon: 'component'
+  },
+  children: [{
+      path: '/activity/publish',
+      component: () => import('@/scrm_pages/marketing_tool/activity_publish'),
+      name: 'activityPublish',
+      meta: {
+        title: 'activityPublish',
+        noCache: true
+      }
+    },
+    {
+      path: '/activity/list',
+      component: () => import('@/scrm_pages/marketing_tool/activity_list'),
+      name: 'activityList',
+      meta: {
+        title: 'activityList',
+        noCache: true
+      }
+    },
+  ]
+}

src/scrm_pages/marketing_tool/activity_list.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+      <el-button
+        :disabled="$store.getters.xt_user.subscibe.state==3?true:false"
+        @click="$router.push({path:'/activity/publish'})"
+        class="filter-item"
+        style="float:right;"
+        type="primary"
+        icon="el-icon-circle-plus-outline"
+        size="small"
+      >创建活动</el-button>
+    </div>
+    <div class="app-container">
+      <div class="cell clearfix">
+        <el-input v-model="keyword" placeholder="请输入您要搜索的活动" class="keyword_input"></el-input>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+      </div>
+      <div class="cell clearfix">
+        <label class="title">
+          <span class="name">状态</span> :
+        </label>
+        <div class="time">
+          <ul>
+            <li :class="{ active: selecting_status == 0 }">全部</li>
+            <li :class="{ active: selecting_status == 1 }">已发布</li>
+            <li :class="{ active: selecting_status == 2 }">待发布</li>
+            <li :class="{ active: selecting_status == 3 }">未通过</li>
+            <li :class="{ active: selecting_status == 4 }">已结束</li>
+          </ul>
+        </div>
+      </div>
+      <div>
+          <published-cell></published-cell>
+          <unapproved-cell></unapproved-cell>
+          <drafts-cell></drafts-cell>
+      </div>
+      <div class="cell clearfix" style="padding-top: 15px;">
+          <el-pagination :total="activity_total" :current-page.sync="current_page" :page-size="10" layout="total, prev, pager, next"></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb";
+import PublishedCell from "@/scrm_pages/marketing_tool/components/published_cell"
+import UnapprovedCell from "@/scrm_pages/marketing_tool/components/unapproved_cell"
+import DraftsCell from "@/scrm_pages/marketing_tool/components/drafts_cell"
+
+export default {
+  name: "ActivityList",
+  components: {
+    BreadCrumb,
+    PublishedCell,
+    UnapprovedCell,
+    DraftsCell,
+  },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "营销工具" },
+        { path: false, name: "活动列表" }
+      ],
+      keyword: "",
+      selecting_status: 0,
+      
+      activity_total: 0,
+      current_page: 1,
+    };
+  },
+  mounted() {
+      
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped>
+.keyword_input {
+  width: 330px;
+}
+</style>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+</style>
+
+

src/scrm_pages/marketing_tool/activity_publish.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>    
+</template>
+
+<script>
+export default {
+    name: "ActivityPublish",
+}
+</script>
+
+<style scoped>
+
+</style>

src/scrm_pages/marketing_tool/components/drafts_cell.vue

@@ -0,0 +1,117 @@
+<template>
+<div class="clearfix">
+    <div class="drafts-cell">
+        <div class="activity-image-panel">
+            <span class="status-text">待发布</span>
+            <img src="https://images.shengws.com/2019/6/12/activity_223718617.png" />
+        </div>
+        <div class="activity-info-panel">
+            <h3 class="title">
+                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+            </h3>
+            <div class="operation">
+                <el-button type="primary" size="small" icon="el-icon-edit-outline">编辑</el-button>
+                <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: "DraftsActivityCell",
+    data() {
+        return {
+            
+        }
+    },
+}
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+.drafts-cell {
+    padding: 20px 15px;
+    border: none;
+    border-bottom: 1px solid #e5e8ea;
+    float: left;
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+    position: relative;
+
+    .activity-image-panel {
+        width: 155px;
+        height: 122px;
+        border: 1px #dee2e5 solid;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        overflow: hidden;
+        float: left;
+
+        .status-text {
+            position: absolute;
+            font-size: 12px;
+            color: #fff;
+            top: 14px;
+            left: 3px;
+            -webkit-transform: rotate(316deg);
+            transform: rotate(316deg);
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .activity-image-panel::before {
+        border-top: 28px solid #65d3e3;
+        border-right: 28px solid transparent;
+        border-bottom: 28px solid transparent;
+        border-left: 28px solid #65d3e3;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        display: block;
+        content: "";
+    }
+
+    .activity-info-panel {
+        padding: 7px 20px;
+        width: 60%;
+        float: left;
+
+        .title {
+            padding-bottom: 5px;
+
+            a {
+                color: #495060;
+                font-size: 19px;
+                max-width: 100%;
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: inline-block;
+            }
+        }
+
+        .operation {
+            padding: 10px 0 0;
+        }
+    }
+}
+</style>
+
+
+
+
+

src/scrm_pages/marketing_tool/components/published_cell.vue

@@ -0,0 +1,153 @@
+<template>
+<div class="clearfix">
+    <div class="published-cell">
+        <div class="activity-image-panel">
+            <span class="status-text">{{ status_text }}</span>
+            <img src="https://images.shengws.com/2019/6/12/activity_223718617.png" />
+        </div>
+        <div class="activity-info-panel">
+            <h3 class="title">
+                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+            </h3>
+            <div class="statistics">
+                阅读：0 丨 评论：0 丨 点赞：0
+            </div>
+            <div class="progress">
+                <div class="progress-bar">
+                    <el-progress :percentage="80" :stroke-width="5" color="#409eff" :show-text="false" ></el-progress>
+                </div>
+                <span class="progress-text">0 / 10</span>
+            </div>
+        </div>
+        <div class="activity-time-panel">
+            <span class="time">2019-01-01</span>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: "PublishedActivityCell",
+    data() {
+        return {
+            
+        }
+    },
+    computed: {
+        status_text: function() {
+            return "已发布"
+        }
+    },
+}
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+.published-cell {
+    padding: 20px 15px;
+    border: none;
+    border-bottom: 1px solid #e5e8ea;
+    float: left;
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+    position: relative;
+
+    .activity-image-panel {
+        width: 155px;
+        height: 122px;
+        border: 1px #dee2e5 solid;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        overflow: hidden;
+        float: left;
+
+        .status-text {
+            position: absolute;
+            font-size: 12px;
+            color: #fff;
+            top: 14px;
+            left: 3px;
+            -webkit-transform: rotate(316deg);
+            transform: rotate(316deg);
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .activity-image-panel::before {
+        border-top: 28px solid #5bd18b;
+        border-right: 28px solid transparent;
+        border-bottom: 28px solid transparent;
+        border-left: 28px solid #5bd18b;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        display: block;
+        content: "";
+    }
+
+    .activity-info-panel {
+        padding: 7px 20px;
+        width: 60%;
+        float: left;
+
+        .title {
+            padding-bottom: 5px;
+
+            a {
+                color: #495060;
+                font-size: 19px;
+                max-width: 100%;
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: inline-block;
+            }
+        }
+
+        .statistics {
+            color: #a8b3ba;
+            font-size: 15px;
+            justify-content: space-between;
+            line-height: 30px;
+        }
+
+        .progress {
+            padding: 5px 0;
+
+            .progress-bar {
+                width: 60%;
+                display: inline-block;
+            }
+            .progress-text {
+                margin-left: 10px;
+                font-size: 15px;
+                color: #409eff;
+            }
+        }
+    }
+
+    .activity-time-panel {
+        float: right;
+        padding: 7px 0;
+
+        .time {
+            font-size: 15px;
+            color: #a8b3ba;
+        }
+    }
+}
+</style>
+

src/scrm_pages/marketing_tool/components/unapproved_cell.vue

@@ -0,0 +1,138 @@
+<template>
+<div class="clearfix">
+    <div class="unapproved-cell">
+        <div class="activity-image-panel">
+            <span class="status-text">未通过</span>
+            <img src="https://images.shengws.com/2019/6/12/activity_223718617.png" />
+        </div>
+        <div class="activity-info-panel">
+            <h3 class="title">
+                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+            </h3>
+            <div class="reason">
+                审核未通过：不给过
+            </div>
+            <div class="operation">
+                <el-button type="primary" size="small" icon="el-icon-edit-outline">编辑</el-button>
+                <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
+            </div>
+        </div>
+        <div class="activity-time-panel">
+            <span class="time">2019-01-01</span>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: "UnapprovedActivityCell",
+    data() {
+        return {
+            
+        }
+    },
+}
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+.unapproved-cell {
+    padding: 20px 15px;
+    border: none;
+    border-bottom: 1px solid #e5e8ea;
+    float: left;
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+    position: relative;
+
+    .activity-image-panel {
+        width: 155px;
+        height: 122px;
+        border: 1px #dee2e5 solid;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        overflow: hidden;
+        float: left;
+
+        .status-text {
+            position: absolute;
+            font-size: 12px;
+            color: #fff;
+            top: 14px;
+            left: 3px;
+            -webkit-transform: rotate(316deg);
+            transform: rotate(316deg);
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .activity-image-panel::before {
+        border-top: 28px solid #ff7979;
+        border-right: 28px solid transparent;
+        border-bottom: 28px solid transparent;
+        border-left: 28px solid #ff7979;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        display: block;
+        content: "";
+    }
+
+    .activity-info-panel {
+        padding: 7px 20px;
+        width: 60%;
+        float: left;
+
+        .title {
+            padding-bottom: 5px;
+
+            a {
+                color: #495060;
+                font-size: 19px;
+                max-width: 100%;
+                font-weight: 500;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: inline-block;
+            }
+        }
+
+        .reason {
+            color: #ff7979;
+            font-size: 14px;
+            justify-content: space-between;
+            line-height: 30px;
+        }
+
+        .operation {
+            padding: 10px 0 0;
+        }
+    }
+
+    .activity-time-panel {
+        float: right;
+        padding: 7px 0;
+
+        .time {
+            font-size: 15px;
+            color: #a8b3ba;
+        }
+    }
+}
+</style>
+
+
+