活动列表

src/api/activity/activity.js

@@ -0,0 +1,14 @@
+import request from "@/utils/request"
+
+export function fetchActivities(page, keyword, status) {
+  const params = {
+    page: page,
+    keyword: keyword,
+    status: status,
+  }
+  return request({
+    url: '/api/activities',
+    method: 'get',
+    params: params,
+  })
+}

src/scrm_pages/marketing_tool/activity_list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-contain">
+  <div class="main-contain" v-loading="loading_activities">
     <div class="position">
       <bread-crumb :crumbs="crumbs"></bread-crumb>
       <el-button
@@ -15,7 +15,7 @@
     <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>
+        <el-button type="primary" icon="el-icon-search" @click="getActivities()">搜索</el-button>
       </div>
       <div class="cell clearfix">
         <label class="title">
@@ -23,21 +23,23 @@
         </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>
+            <li :class="{ active: selecting_status == 0 }" @click="changeSelectingStatus(0)">全部</li>
+            <li :class="{ active: selecting_status == 1 }" @click="changeSelectingStatus(1)">已发布</li>
+            <li :class="{ active: selecting_status == 2 }" @click="changeSelectingStatus(2)">待发布</li>
+            <li :class="{ active: selecting_status == 3 }" @click="changeSelectingStatus(3)">未通过</li>
+            <li :class="{ active: selecting_status == 4 }" @click="changeSelectingStatus(4)">已结束</li>
           </ul>
         </div>
       </div>
       <div>
-          <published-cell></published-cell>
-          <unapproved-cell></unapproved-cell>
-          <drafts-cell></drafts-cell>
+        <template v-for="(activity, index) in activities">
+          <published-cell v-if="activity.status == 1 || activity.status == 4" :key="index" :activity="activity"></published-cell>
+          <unapproved-cell v-else-if="activity.status == 3" :key="index" :activity="activity"></unapproved-cell>
+          <drafts-cell v-else-if="activity.status == 2" :key="index" :activity="activity"></drafts-cell>
+        </template>
       </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>
+          <el-pagination :total="activity_total" :current-page.sync="current_page" :page-size="10" layout="total, prev, pager, next" @current-change="getActivities()"></el-pagination>
       </div>
     </div>
   </div>
@@ -48,6 +50,7 @@ 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"
+import { fetchActivities } from "@/api/activity/activity"
 
 export default {
   name: "ActivityList",
@@ -65,16 +68,40 @@ export default {
       ],
       keyword: "",
       selecting_status: 0,
-      
       activity_total: 0,
       current_page: 1,
+
+      loading_activities: false,
+      activities: [],
     };
   },
   mounted() {
-      
+      this.getActivities()
   },
   methods: {
+    changeSelectingStatus(status) {
+      this.selecting_status = status
+      this.getActivities()
+    },
+
+    getActivities() {
+      this.loading_activities = true
+      fetchActivities(this.current_page, this.keyword, this.selecting_status).then(rs => {
+        this.loading_activities = false
+        var resp = rs.data
+        if (resp.state == 1) {
+          this.activities = resp.data.activities
+          this.activity_total = resp.data.total
+          console.log(this.activities)
 
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(err => {
+        this.loading_activities = false
+        this.$message.error(err)
+      })
+    },
   },
 };
 </script>
@@ -85,7 +112,4 @@ export default {
 }
 </style>
 
-<style scoped rel="stylesheet/scss" lang="scss">
-</style>
-
 

src/scrm_pages/marketing_tool/activity_publish.vue

@@ -1,13 +1,61 @@
 <template>
-    <div></div>    
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding: 0 20px; background-color: #f6f8f9;">
+            <div class="edit-main">
+                <div class="preview-panel">
+                    <preview-form></preview-form>
+                </div>
+                <div class="edit-panel">
+                    <edit-form></edit-form>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb";
+import PreviewForm from "@/scrm_pages/marketing_tool/components/edit_activity_preview_form"
+import EditForm from "@/scrm_pages/marketing_tool/components/edit_activity_edit_form"
+
 export default {
     name: "ActivityPublish",
+    components: {
+        BreadCrumb,
+        PreviewForm,
+        EditForm,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "营销工具" },
+                { path: false, name: "发布活动" }
+            ],
+        }
+    },
 }
 </script>
 
-<style scoped>
+<style scoped rel="stylesheet/scss" lang="scss">
+.edit-main {
+    width: 100%;
+    display: flex;
+    min-height: 600px;
+    height: auto;
+    box-sizing: border-box;
 
+    .preview-panel {
+        flex: 3;
+        margin-right: 1rem;
+        background-color: #fff;
+    }
+    .edit-panel {
+        flex: 4;
+        padding-bottom: 80px;
+        background-color: #fff;
+    }
+}
 </style>

src/scrm_pages/marketing_tool/components/drafts_cell.vue

@@ -3,11 +3,11 @@
     <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" />
+            <img :src="activity.poster_photo" />
         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+                <a href="/">{{ activity.title }}</a>
             </h3>
             <div class="operation">
                 <el-button type="primary" size="small" icon="el-icon-edit-outline">编辑</el-button>
@@ -21,6 +21,12 @@
 <script>
 export default {
     name: "DraftsActivityCell",
+    props: {
+        activity: {
+            type: Object,
+            required: true,
+        }
+    },
     data() {
         return {
             
@@ -94,7 +100,7 @@ export default {
 
             a {
                 color: #495060;
-                font-size: 19px;
+                font-size: 20px;
                 max-width: 100%;
                 font-weight: 500;
                 overflow: hidden;

src/scrm_pages/marketing_tool/components/edit_activity_edit_form.vue

@@ -0,0 +1,14 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    name: "EditActivityEditForm",
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/scrm_pages/marketing_tool/components/edit_activity_preview_form.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="preview-main">
+        <div class="form-title">
+            <img class="icon" src="@/assets/img/sa_06.png" />
+            <span>预览</span>
+        </div>
+        <div class="form-content">
+            <div class="preview-cell-poster-photo border">
+                <img class="poster-photo" :src="poster_photo" />
+                <div class="title-panel">
+                    <p class="title">{{ title }}</p>
+                    <p class="subtitle">{{ subtitle }}</p>
+                </div>
+            </div>
+            <div class="org-info-cell border">
+                <div class="logo">
+                    <img :src="poster_photo" />
+                </div>
+                <div class="text-info">
+                    <p class="name">测试机构</p>
+                    <p class="address">地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址</p>
+                </div>
+                <div class="arrow-panel">
+                    <img src="@/assets/img/sa_52.png" />
+                </div>
+            </div>
+            <div class="simple-cell border">
+                <div class="icon">
+                    <img src="@/assets/img/sa_21.png" />
+                </div>
+                <div class="text">
+                    <p>2019-01-01</p>
+                </div>
+                <div class="arrow-panel">
+                    <img src="@/assets/img/sa_52.png" />
+                </div>
+            </div>
+            <div class="simple-cell border">
+                <div class="icon">
+                    <img src="@/assets/img/sa_24.png" />
+                </div>
+                <div class="text">
+                    <p>0755-86879866</p>
+                </div>
+                <div class="arrow-panel">
+                    <img src="@/assets/img/sa_52.png" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EditActivityPreviewForm",
+    data() {
+        return {
+            
+        }
+    },
+    computed: {
+        poster_photo: function() {
+            return require("@/assets/img/activity_poster_photo_default.png")
+        },
+        title: function() {
+            return "与孩子一起挑选采摘新鲜有机马陆葡萄，体验采摘乐趣"
+        },
+        subtitle: function() {
+            return "亲子采摘活动"
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.preview-main {
+    .form-title {
+        width: 100%;
+        padding: 20px 0 20px 30px;
+        border-bottom: 1px #dee2e5 solid;
+
+        .icon {
+            margin-top: -4px;
+            vertical-align: middle;
+        }
+
+        span {
+            font-size: 18px;
+            font-weight: 500;
+            color: #485b6d;
+            margin-left: 10px;
+        }
+    }
+
+    .form-content {
+        width: 100%;
+        padding: 14px 30px 0 30px;
+
+        .preview-cell-poster-photo {
+            .poster-photo {
+                width: 100%;
+            }
+
+            .title-panel {
+                padding: 15px 15px 16px 20px;
+
+                .title {
+                    font-size: 18px;
+                    color: #485b6d;
+                    font-weight: bold;
+                    line-height: 28px;
+                }
+
+                .subtitle {
+                    margin-top: 6px;
+                    color: #a6a6a6;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .org-info-cell {
+            padding: 20px 20px;
+            margin-top: 15px;
+            position: relative;
+            display: flex;
+            -webkit-box-align: center;
+            align-items: center;
+
+            .logo {
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 20px;
+                }
+            }
+            .text-info {
+                flex: 1;
+                padding-left: 17px;
+                color: #485b6d;
+
+                .name {
+                    font-size: 16px;
+                    line-height: 22px;
+                    font-weight: 500;
+                }
+                .address {
+                    font-size: 14px;
+                    line-height: 20px;
+                    margin-top: 5px;
+                }
+            }
+            .arrow-panel {
+                width: 20px;
+                position: relative;
+
+                img {
+                    width: 8px;
+                    float: right;
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        .simple-cell {
+            padding: 20px 20px;
+            margin-top: 15px;
+            position: relative;
+            display: flex;
+            -webkit-box-align: center;
+            align-items: center;
+
+            .icon {
+                img {
+                    width: 20px;
+                    height: 20px;
+                    vertical-align: middle;
+                }
+            }
+            .text {
+                flex: 1;
+                padding-left: 17px;
+                color: #485b6d;
+                line-height: 20px;
+            }
+            .arrow-panel {
+                width: 20px;
+                position: relative;
+
+                img {
+                    width: 8px;
+                    float: right;
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+}
+</style>
+
+<style scoped>
+.border {
+    border: solid 1px #dee2e5;
+    border-radius: 4px;
+}
+</style>

src/scrm_pages/marketing_tool/components/published_cell.vue

@@ -3,32 +3,40 @@
     <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" />
+            <img :src="activity.poster_photo" />
         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+                <a href="">{{ activity.title }}</a>
             </h3>
             <div class="statistics">
-                阅读：0 丨 评论：0 丨 点赞：0
+                阅读：{{ activity.read_num }} 丨 评论：{{ activity.comment_num }} 丨 点赞：{{ activity.star_num }}
             </div>
             <div class="progress">
                 <div class="progress-bar">
-                    <el-progress :percentage="80" :stroke-width="5" color="#409eff" :show-text="false" ></el-progress>
+                    <el-progress :percentage="progress_percent" :stroke-width="5" color="#409eff" :show-text="false" ></el-progress>
                 </div>
-                <span class="progress-text">0 / 10</span>
+                <span class="progress-text">{{ progress_text }}</span>
             </div>
         </div>
         <div class="activity-time-panel">
-            <span class="time">2019-01-01</span>
+            <span class="time">{{ start_time }}</span>
         </div>
     </div>
 </div>
 </template>
 
 <script>
+import { parseTime } from "@/utils"
+
 export default {
     name: "PublishedActivityCell",
+    props: {
+        activity: {
+            type: Object,
+            required: true,
+        }
+    },
     data() {
         return {
             
@@ -36,8 +44,35 @@ export default {
     },
     computed: {
         status_text: function() {
-            return "已发布"
-        }
+            if (this.activity.status == 4) {
+                return "已结束"
+            } else if (this.activity.is_recommend == true) {
+                return "已推荐"
+            } else {
+                return "已发布"
+            }
+        },
+        progress_percent: function() {
+            if (this.activity.limit_num > 0) {
+                return (this.activity.join_num / this.activity.limit_num) * 100
+            } else {
+                return 100
+            }
+        },
+        progress_text: function() {
+            if (this.activity.limit_num > 0) {
+                if (this.activity.join_num >= this.activity.limit_num) {
+                    return "已报满"
+                } else {
+                    return this.activity.join_num + " / " + this.activity.limit_num
+                }
+            } else {
+                return "无限制"
+            }
+        },
+        start_time: function() {
+            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+        },
     },
 }
 </script>
@@ -107,7 +142,7 @@ export default {
 
             a {
                 color: #495060;
-                font-size: 19px;
+                font-size: 20px;
                 max-width: 100%;
                 font-weight: 500;
                 overflow: hidden;

src/scrm_pages/marketing_tool/components/unapproved_cell.vue

@@ -3,14 +3,14 @@
     <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" />
+            <img :src="activity.poster_photo" />
         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="http://www.baidu.com">哈哈哈哈哈哈哈</a>
+                <a href="/">{{ activity.title }}</a>
             </h3>
             <div class="reason">
-                审核未通过：不给过
+                审核未通过：{{ activity.reason }}
             </div>
             <div class="operation">
                 <el-button type="primary" size="small" icon="el-icon-edit-outline">编辑</el-button>
@@ -18,20 +18,33 @@
             </div>
         </div>
         <div class="activity-time-panel">
-            <span class="time">2019-01-01</span>
+            <span class="time">{{ start_time }}</span>
         </div>
     </div>
 </div>
 </template>
 
 <script>
+import { parseTime } from "@/utils"
+
 export default {
     name: "UnapprovedActivityCell",
+    props: {
+        activity: {
+            type: Object,
+            required: true,
+        }
+    },
     data() {
         return {
             
         }
     },
+    computed: {
+        start_time: function() {
+            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+        },
+    },
 }
 </script>
 
@@ -100,7 +113,7 @@ export default {
 
             a {
                 color: #495060;
-                font-size: 19px;
+                font-size: 20px;
                 max-width: 100%;
                 font-weight: 500;
                 overflow: hidden;