完成活动详情页

config/index.js

@@ -19,7 +19,7 @@ module.exports = {
 
     host: 'test1.sgjyun.com',
     port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    host: 'test1.sgjyun.com',
+    // host: 'test1.sgjyun.com',
     autoOpenBrowser: true,
     errorOverlay: true,
     notifyOnErrors: false,

src/api/activity/activity.js

@@ -32,4 +32,26 @@ export function submitActivity(publish, activity) {
     },
     data: activity,
   })
+}
+
+export function fetchActivityDetailViewData(id) {
+  return request({
+    url: "/api/activity/detailview",
+    method: "get",
+    params: {
+      id: id,
+    }
+  })
+}
+
+export function fetchActivitySignupUsers(activity_id, keyword, page) {
+  return request({
+    url: "/api/activity/signups",
+    method: "get",
+    params: {
+      id: activity_id,
+      keyword: keyword,
+      page: page,
+    }
+  })
 }

src/lang/en.js

@@ -116,6 +116,9 @@ export default {
     activityPublish: "publish activity",
     activityModify: "edit activity",
     systemsetting:'Systemsetting',
+    activityDetail: "activity detail",
+    activityShare: "activity share",
+    activityPreview: "activity preview",
   },
   navbar: {
     logOut: 'Log Out',

src/lang/zh.js

@@ -165,6 +165,9 @@ export default {
     activityModify: "编辑活动",
     systemsetting:'系统设置',
     staffmanagement:'员工管理',
+    activityDetail: "活动详情",
+    activityShare: "活动分享",
+    activityPreview: "活动预览",
   },
   navbar: {
     logOut: '退出登录',

src/router/modules/marketing_tool.js

@@ -39,5 +39,38 @@ export default {
         noCache: true
       }
     },
+    {
+      path: "/activity",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_detail"),
+      name: "activityDetail",
+      meta: {
+        title: "activityDetail",
+        noCache: true,
+      }
+    },
+    {
+      path: "/activity/share",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_share"),
+      name: "activityShare",
+      meta: {
+        title: "activityShare",
+        noCache: true,
+      }
+    },
+    {
+      path: "/activity/preview",
+      hidden: true,
+      is_menu: false,
+      component: () => import("@/scrm_pages/marketing_tool/activity_preview"),
+      name: "activityPreview",
+      meta: {
+        title: "activityPreview",
+        noCache: true,
+      }
+    },
   ]
 }

src/scrm_pages/marketing_tool/activity_detail.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs="crumbs"></bread-crumb>
+        </div>
+        <div class="app-container" style="padding-top: 0; background-color: #f6f8f9;">
+            <div class="base-info">
+                <div class="poster-photo">
+                    <img :src="poster_photo" />
+                </div>
+                <div class="title-panel">
+                    <p class="title">
+                        <router-link :to="activity_url">{{ title }}</router-link>
+                    </p>
+                    <p class="date">活动日期：{{ activity_time }}</p>
+                </div>
+                <div class="action-panel">
+                    <el-button type="primary" v-if="show_share_btn" @click="$router.push({ path: '/activity/share', query: { id: activity_id } })">再次分享</el-button>
+                    <el-button type="primary" v-if="show_publish_btn">发布</el-button>
+                </div>
+            </div>
+            <div class="times-statistics">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <div class="item">
+                            <span class="count">{{ read_times }}</span>
+                            <p class="desc">展示次数</p>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div class="item">
+                            <span class="count">{{ join_count }}</span>
+                            <p class="desc">参与人数</p>
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="signup-header">
+                <div class="input">
+                    <el-input v-model="signup_keyword" placeholder="搜索报名人" style="width: 330px;"></el-input>
+                    <el-button type="primary" icon="el-icon-search" :loading="loading_search" @click="fetchSignupUsers">搜索</el-button>
+                </div>
+                <div class="all-btn">
+                    <router-link to="/">
+                        <el-button type="primary">查看全部</el-button>
+                    </router-link>
+                </div>
+            </div>
+            <div class="signup-table-panel">
+                <el-table :data="signup_users" empty-text="暂无人报名">
+                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
+                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
+                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
+                    <el-table-column label="报名时间" align="center">
+                        <template slot-scope="scope">
+                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BreadCrumb from "@/scrm_pages/components/bread-crumb"
+import { fetchActivityDetailViewData, fetchActivitySignupUsers } from "@/api/activity/activity"
+import { parseTime } from "@/utils"
+
+export default {
+    name: "ActivityDetail",
+    components: {
+        BreadCrumb,
+    },
+    data() {
+        return {
+            crumbs: [
+                { path: false, name: "营销工具" },
+                { path: false, name: "活动详情" },
+            ],
+
+            activity_id: 0,
+            activity: null,
+
+            signup_keyword: "",
+            signup_users: [],
+
+            loading_search: false,
+        }
+    },
+    computed: {
+        title: function() {
+            return this.activity == null ? "" : this.activity.title
+        },
+        poster_photo: function() {
+            return this.activity == null ? "/" : this.activity.poster_photo
+        },
+        activity_url: function() {
+            if (this.activity != null) {
+                return "/activity/preview?id=" + this.activity_id
+            }
+            return ""
+        },
+        activity_time: function() {
+            return this.activity == null ? "" : parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
+        },
+        show_share_btn: function() {
+            return this.activity == null ? false : (this.activity.status == 1)
+        },
+        show_publish_btn: function() {
+            return this.activity == null ? false : (this.activity.status == 4)
+        },
+        read_times: function() {
+            return this.activity == null ? 0 : this.activity.read_num
+        },
+        join_count: function() {
+            return this.activity == null ? 0 : this.activity.join_num
+        }
+    },
+    mounted() {
+        this.activity_id = this.$route.query.id
+
+        fetchActivityDetailViewData(this.activity_id).then(rs => {
+            var resp = rs.data
+            if (resp.state == 1) {
+                this.activity = resp.data.activity
+                this.signup_users = resp.data.users
+            } else {
+                this.$message.error(resp.msg)
+            }
+
+        }).catch(err => {
+            this.$message.error(err)
+        })
+    },
+    methods: {
+        parseTime,
+        fetchSignupUsers: function() {
+            this.loading_search = true
+            fetchActivitySignupUsers(this.activity_id, this.signup_keyword, 1).then(rs => {
+                this.loading_search = false
+                var resp = rs.data
+                if (resp.state == 1) {
+                    this.signup_users = resp.data.users
+                } else {
+                    this.$message.error(resp.msg)
+                }
+            }).catch(err => {
+                this.loading_search = false
+                this.$message.error(err)
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info {
+    padding: 20px 25px;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    align-items: center;
+    background-color: white;
+    box-shadow: 0 0 1px #dee2e5;
+
+    .poster-photo {
+        width: 120px;
+        height: 96px;
+        display: flex;
+        justify-content: center;
+        margin-right: 22px;
+
+        img {
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+            object-fit: cover;
+            object-position: center;
+        }
+    }
+    .title-panel {
+        flex: 3;
+        padding-right: 20px;
+
+        .title {
+            font-size: 18px;
+            color: #485b6d;
+            font-weight: 700;
+            word-break: break-all;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            height: 70px;
+            line-height: 34px;
+        }
+        .date {
+            color: #7b8a97;
+            line-height: 20px;
+            font-size: 14px;
+        }
+    }
+    .action-panel {
+        flex: 1;
+        text-align: right;
+    }
+}
+.times-statistics {
+    margin-top: 20px;
+
+    .item {
+        padding: 40px 0 30px 0;
+        box-shadow: 0 0 1px #dee2e5;
+        background-color: white;
+        text-align: center;
+
+        .count {
+            font-size: 36px;
+            color: #58a2ec;
+        }
+        .desc {
+            margin-top: 5px;
+            font-size: 14px;
+            color: #485b6d;
+        }
+    }
+}
+.signup-header {
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    .input {
+        width: 500px;
+        display: block;
+    }
+    .all-btn {
+        display: block;
+    }
+}
+.signup-table-panel {
+    margin-top: 10px;
+}
+</style>
+
+

src/scrm_pages/marketing_tool/activity_list.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import BreadCrumb from "@/scrm_pages/components/bread-crumb";
+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"

src/scrm_pages/marketing_tool/activity_preview.vue

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

src/scrm_pages/marketing_tool/activity_share.vue

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

src/scrm_pages/marketing_tool/components/drafts_cell.vue

@@ -7,7 +7,9 @@
         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="/">{{ activity.title }}</a>
+                <router-link :to="activityUrl">
+                    <a>{{ activity.title }}</a>
+                </router-link>
             </h3>
             <div class="operation">
                 <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="$router.push({ path: '/activity/modify', query: {id: activity.id} })">编辑</el-button>
@@ -32,6 +34,11 @@ export default {
             
         }
     },
+    computed: {
+        activityUrl: function() {
+            return "/activity?id=" + this.activity.id
+        }
+    },
 }
 </script>
 

src/scrm_pages/marketing_tool/components/edit_activity_edit_form.vue

@@ -222,18 +222,20 @@ export default {
 
         saveAction: function() {
             this.saving_activity = true
-            this.submitActivity(false)
+            this.submitActivity(false, function() {
+                // 弹框 => 再发一条/前往列表
+            })
         },
         publishAction: function() {
             this.publishing_activity = true
             this.submitActivity(true, function() {
-                // 前往活动详情页
+                this.$router.push({ path: "/activity", query: { id: this.activity.id } })
             })
         },
         previewAction: function() {
             this.saving_before_preview_activity = true
             this.submitActivity(false, function() {
-                // 前往活动预览页
+                this.$router.push({ path: "/activity/preview", query: { id: this.activity.id } })
             })
         },
         submitActivity: function(is_publish, successCallBack) {
@@ -290,16 +292,22 @@ export default {
             return new Promise((resolve, reject) => {
                 if (this.activity.poster_photo.length == 0) {
                     reject("海报不能为空")
+                    return
                 } else if (this.activity.title.length == 0) {
                     reject("标题不能为空")
+                    return
                 } else if (this.activity.subtitle.length == 0) {
                     reject("副标题不能为空")
+                    return
                 } else if (this.activity.address.length == 0) {
                     reject("活动地址不能为空")
+                    return
                 } else if (this.activity.sign_up_deadline == 0) {
                     reject("活动报名时间不能为空")
+                    return
                 } else if (this.activity.start == 0) {
                     reject("活动时间不能为空")
+                    return
                 } else {
                     if (this.activity.phone_number.length > 0) {
                         if (/^1\d{10}$/.test(this.activity.phone_number) == false && /^(0\d{2,3}-?\d{7,8}$)/.test(this.activity.phone_number) == false) {

src/scrm_pages/marketing_tool/components/published_cell.vue

@@ -7,7 +7,9 @@
         </div>
         <div class="activity-info-panel">
             <h3 class="title">
-                <a href="">{{ activity.title }}</a>
+                <router-link :to="activityUrl">
+                    <a>{{ activity.title }}</a>
+                </router-link>
             </h3>
             <div class="statistics">
                 阅读：{{ activity.read_num }} 丨 评论：{{ activity.comment_num }} 丨 点赞：{{ activity.star_num }}
@@ -52,6 +54,9 @@ export default {
                 return "已发布"
             }
         },
+        activityUrl: function() {
+            return "/activity?id=" + this.activity.id
+        },
         progress_percent: function() {
             if (this.activity.limit_num > 0) {
                 return (this.activity.join_num / this.activity.limit_num) * 100
@@ -71,7 +76,7 @@ export default {
             }
         },
         start_time: function() {
-            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+            return parseTime(this.activity.start_time, "{y}-{m}-{d} {h}-{i}")
         },
     },
 }

src/scrm_pages/marketing_tool/components/unapproved_cell.vue

@@ -42,7 +42,7 @@ export default {
     },
     computed: {
         start_time: function() {
-            return parseTime(this.activity.start_time, "{y}-{m}-{d}")
+            return parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
         },
     },
 }