活动编辑页面

package-lock.json

         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

src/components/Neditor/index.vue

       selectionchange() {
         this.ue.addListener('selectionchange', () => {
           this.content = this.ue.getContent()
+          this.$emit("content_changed", this.content)
         })
       },
 

src/scrm_pages/marketing_tool/activity_publish.vue

         <div class="app-container" style="padding: 0 20px; background-color: #f6f8f9;">
             <div class="edit-main">
                 <div class="preview-panel">
-                    <preview-form></preview-form>
+                    <preview-form :activity="activity" :paragraph="activity_paragraph"></preview-form>
                 </div>
                 <div class="edit-panel">
-                    <edit-form></edit-form>
+                    <edit-form :activity="activity" :paragraph="activity_paragraph"></edit-form>
                 </div>
             </div>
         </div>
                 { path: false, name: "营销工具" },
                 { path: false, name: "发布活动" }
             ],
+
+            activity: {
+                id: 0,
+                poster_photo: "",
+                title: "",
+                subtitle: "",
+                address: "",
+                limit_num: 0,
+                sign_up_deadline: 0,
+                start_time: 0,
+                phone_number: "",
+                sign_up_notice: "",
+            },
+            activity_paragraph: {
+                title: "",
+                content: "",
+            }
         }
     },
 }

src/scrm_pages/marketing_tool/components/edit_activity_edit_form.vue

 <template>
-    <div></div>
+    <div class="edit-form-main">
+        <div class="form-title">
+            <img class="icon" src="@/assets/img/sa_7.png" />
+            <span>活动编辑</span>
+        </div>
+        <div class="form-content">
+            <div class="module-panel">
+                <p class="module-title">
+                    <img src="@/assets/img/sa_13.png" />
+                    基本信息
+                </p>
+                <div class="module-item">
+                    <label class="item-title">主图</label>
+                    <div class="poster-photo-panel">
+                        <el-input v-model="poster_photo_file_name" :readonly="true" class="input"></el-input>
+                        <el-upload 
+                        action="https://upload.qiniup.com" 
+                        :data="{ token: qntoken, key: poster_photo_file_key }"
+                        :show-file-list="false"
+                        :on-error="posterPhotoUploadFail"
+                        :on-success="posterPhotoUploadSuccess"
+                        :before-upload="beforePosterPhotoUpload"
+                        >
+                            <el-button type="primary" style="margin-left: 10px;" v-loading="uploading_poster_photo">上传图片</el-button>
+                        </el-upload>
+                    </div>
+                </div>
+                <div class="poster-photo-hint">图片建议尺寸828*430,大小不超过3M</div>
+                <div class="module-item">
+                    <label class="item-title">标题</label>
+                    <el-input v-model="activity.title" class="item-input"></el-input>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">名称</label>
+                    <el-input v-model="activity.subtitle" class="item-input"></el-input>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">商户简称</label>
+                    <el-input v-model="$store.getters.xt_user.org.org_name" class="item-input" readonly></el-input>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">报名时间</label>
+                    <el-date-picker v-model="sign_up_deadline" :picker-options="pickerOptions" value-format="timestamp" type="datetime" format="yyyy-MM-dd HH:mm" class="item-input"></el-date-picker>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">活动时间</label>
+                    <el-date-picker v-model="activity_time" :picker-options="pickerOptions" value-format="timestamp" type="datetime" format="yyyy-MM-dd HH:mm" class="item-input"></el-date-picker>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">活动地址</label>
+                    <el-input v-model="activity.address" class="item-input"></el-input>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">限定人数</label>
+                    <el-input v-model="limit_num" class="item-input" :maxlength="9" @keyup.native="limit_num=limit_num.replace(/\D/g,'')" @afterpaste.native="limit_num=limit_num.replace(/\D/g,'')"></el-input>
+                    <span class="limit-text">不填写默认为无限制</span>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">联系方式</label>
+                    <el-input v-model="activity.phone_number" class="item-input"></el-input>
+                </div>
+            </div>
+
+            <div class="module-panel" style="margin-top: 30px;">
+                <p class="module-title">
+                    <img src="@/assets/img/sa_13.png" />
+                    报名须知
+                </p>
+                <div class="module-item">
+                    <label class="item-title">报名须知</label>
+                    <el-input v-model="activity.sign_up_notice" class="item-input" type="textarea" :rows="4" resize="none"></el-input>
+                </div>
+            </div>
+
+            <div class="module-panel" style="margin-top: 30px;">
+                <p class="module-title">
+                    <img src="@/assets/img/sa_13.png" />
+                    详细说明
+                </p>
+                <div class="module-item">
+                    <label class="item-title">标题</label>
+                    <el-input v-model="paragraph.title" class="item-input"></el-input>
+                </div>
+                <div class="module-item">
+                    <label class="item-title">详情</label>
+                    <div class="item-input">
+                        <keep-alive>
+                            <neditor ref="neditor" id="editor" :r_content="paragraph_init_content" @content_changed="paragraphContentChanged"></neditor>
+                        </keep-alive>
+                    </div>
+                </div>
+            </div>
+
+            <div class="submit-button-panel">
+                <el-button style="padding: 10px 30px;" type="primary">发 布</el-button>
+                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;">保存草稿</el-button>
+                <el-button style="color: #409eff; border-color: #409eff; padding: 10px 30px;">预 览</el-button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import Neditor from '@/components/Neditor'
+import { getToken } from "@/api/qiniu"
+import { getFileExtension } from "@/utils/tools"
+
 export default {
     name: "EditActivityEditForm",
+    components: {
+        Neditor,
+    },
+    props: {
+        activity: {
+            type: Object,
+            required: true,
+        },
+        paragraph: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            uploading_poster_photo: false,
+            qntoken: "",
+            poster_photo_file_key: "",
+            poster_photo_file_name: "",
+
+            limit_num: "",
+            activity_time: 0,
+            sign_up_deadline: 0,
+            paragraph_init_content: "",
+
+            pickerOptions: {
+                disabledDate: (time) => {
+                    return time.getTime() < Date.now() - 8.64e7
+                }
+            }
+        }
+    },
+    created() {
+        this.activity_time = (new Date()).getTime()
+        this.sign_up_deadline = (new Date()).getTime()
+    },
+    watch: {
+        limit_num: function(new_val) {
+            if (/^[1-9]+[0-9]*]*$/.test(new_val)) {
+                this.activity.limit_num = parseInt(new_val)
+            } else {
+                this.activity.limit_num = 0
+            }
+        },
+        activity_time: function(new_val) {
+            this.activity.start_time = new_val
+        },
+        sign_up_deadline: function(new_val) {
+            this.activity.sign_up_deadline = new_val  
+        },
+    },
+    methods: {
+        initParagraphContent: function(content) {
+            this.paragraph_init_content = this.paragraph.content
+        },
+        paragraphContentChanged: function(content) {
+            this.paragraph.content = content
+        },
+
+        posterPhotoUploadFail: function(err, file, fileList) {
+            this.uploading_poster_photo = false
+            this.$message.error(err)
+        },
+        posterPhotoUploadSuccess: function(res, file) {
+            console.log(res)
+            console.log(file)
+            this.poster_photo_file_name = file.name
+            this.uploading_poster_photo = false
+            this.activity.poster_photo = "https://images.shengws.com/" + res.url
+        },
+        beforePosterPhotoUpload: function(file) {
+            console.log(file)
+            var is_image = file.type.indexOf("image") > -1
+            var mb = file.size / 1024 / 1024
+
+            if (!is_image) {
+                this.$message.error("请上传图片")
+                return false
+            }
+            if (mb > 3) {
+                this.$message.error("上传主图大小不能超过3MB")
+                return false
+            }
+
+            var rand = Math.floor(Math.random() * 1000000000)
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = "" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + "_activity_" + rand + "." + ext
+
+            this.uploading_poster_photo = true
+
+            return new Promise((resolve, reject) => {
+                getToken().then(rs => {
+                    var token = rs.data.data.uptoken
+                    this.qntoken = token
+                    this.poster_photo_file_key = key
+                    resolve(true)
+                }).catch(err => {
+                    this.uploading_poster_photo = false
+                    reject(false)
+                })
+            })
+        },
+    },
 }
 </script>
 
 <style lang="scss" scoped>
+.edit-form-main {
+    .form-title {
+        width: 100%;
+        height: 60px;
+        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 14px 30px;
+
+        .module-panel {
+            // padding: 0 30px;
+
+            .module-title {
+                font-size: 18px;
+                color: #a8b3ba;
+
+                img {
+                    float: left;
+                    display: block;
+                    padding: 2px 19px 0 0;
+                }
+            }
+
+            .module-item {
+                margin-top: 20px;
+                display: flex;
+                // padding: 0 30px;
+
+                .item-title {
+                    width: 115px;
+                    height: 40px;
+                    line-height: 40px;
+                    color: #485b6d;
+                    font-size: 13px;
+                    // font-weight: 100;
+                    text-align: right;
+                    padding-right: 22px;
+                    float: left;
+                }
+
+                .item-input {
+                    flex: 1;
+                    color: #485b6d;
+                }
+
+                .limit-text {
+                    line-height: 40px;
+                    color: #a8b3ba;
+                    font-size: 13px;
+                    // font-weight: 100;
+                    text-align: left;
+                    padding-left: 10px;
+                }
+
+                .poster-photo-panel {
+                    display: flex;
+                    flex: 1;
+                    align-items: center;
+
+                    .input {
+                        flex: 1;
+                        color: #485b6d;
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .poster-photo-hint {
+                font-size: 12px;
+                line-height: 16px;
+                color: #a8b3ba;
+                margin-left: 115px;
+            }
+        }
+
+        .submit-button-panel {
+            padding: 0 0 0 115px;
+            margin-top: 30px;
+        }
+    }
+}
 </style>
 

src/scrm_pages/marketing_tool/components/edit_activity_preview_form.vue

 <template>
-    <div class="preview-main">
+    <div class="preview-form-main">
         <div class="form-title">
             <img class="icon" src="@/assets/img/sa_06.png" />
             <span>预览</span>
             </div>
             <div class="org-info-cell border">
                 <div class="logo">
-                    <img :src="poster_photo" />
+                    <img :src="$store.getters.xt_user.org.org_logo" />
                 </div>
                 <div class="text-info">
-                    <p class="name">测试机构</p>
-                    <p class="address">地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址</p>
+                    <p class="name">{{ $store.getters.xt_user.org.org_name }}</p>
+                    <p class="address">{{ address }}</p>
                 </div>
                 <div class="arrow-panel">
                     <img src="@/assets/img/sa_52.png" />
                     <img src="@/assets/img/sa_21.png" />
                 </div>
                 <div class="text">
-                    <p>2019-01-01</p>
+                    <p>{{ activity_time }}</p>
                 </div>
                 <div class="arrow-panel">
                     <img src="@/assets/img/sa_52.png" />
                     <img src="@/assets/img/sa_24.png" />
                 </div>
                 <div class="text">
-                    <p>0755-86879866</p>
+                    <p>{{ phone_number }}</p>
                 </div>
                 <div class="arrow-panel">
                     <img src="@/assets/img/sa_52.png" />
                 </div>
             </div>
+            <div class="simple-cell border">
+                <div class="title">
+                    <p>活动名额</p>
+                </div>
+                <div class="detail">
+                    <p>{{ limit_num }}</p>
+                </div>
+            </div>
+            <div class="large-text-cell border">
+                <div class="title">
+                    <img src="@/assets/img/sa_25.png" />
+                    <span>报名须知</span>
+                </div>
+                <p class="content" v-html="sign_up_notice">
+                </p>
+            </div>
+            <div class="large-text-cell border">
+                <div class="title">
+                    <img src="@/assets/img/sa_26.png" />
+                    <span>{{ paragraph_title }}</span>
+                </div>
+                <p class="content" v-html="paragraph_content">
+                </p>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
+import { parseTime } from "@/utils"
+
 export default {
     name: "EditActivityPreviewForm",
+    props: {
+        activity: {
+            type: Object,
+            required: true,
+        },
+        paragraph: {
+            type: Object,
+            required: true,
+        },
+    },
     data() {
         return {
             
     },
     computed: {
         poster_photo: function() {
-            return require("@/assets/img/activity_poster_photo_default.png")
+            return this.activity.poster_photo.length > 0 ? this.activity.poster_photo : require("@/assets/img/activity_poster_photo_default.png")
         },
         title: function() {
-            return "与孩子一起挑选采摘新鲜有机马陆葡萄，体验采摘乐趣"
+            return this.activity.title.length > 0 ? this.activity.title : "与孩子一起挑选采摘新鲜有机马陆葡萄，体验采摘乐趣"
         },
         subtitle: function() {
-            return "亲子采摘活动"
+            return this.activity.subtitle.length > 0 ? this.activity.subtitle : "亲子采摘活动"
+        },
+        address: function() {
+            return this.activity.address.length > 0 ? this.activity.address : "深圳市南山区高新园"
+        },
+        activity_time: function() {
+            if (this.activity.start_time > 0) {
+                return parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
+            } else {
+                return "2019-01-01 09:00:00"
+            }
+        },
+        phone_number: function() {
+            return this.activity.phone_number.length > 0 ? this.activity.phone_number : "0755-86879866"
+        },
+        limit_num: function() {
+            return this.activity.limit_num > 0 ? (this.activity.limit_num + "人") : "无限制"
+        },
+        sign_up_notice: function() {
+            var notice = this.activity.sign_up_notice.length > 0 ? this.activity.sign_up_notice : "1.活动费用88元（2斤葡萄 1只手绘风筝 车费 包含1个大人 1个小孩）。\n2.多加1个大人另收30元/人。\n3.葡萄采摘时在园内可以适当品尝。"
+            return notice.replace(/\n/g, "<br/>")
+        },
+
+        paragraph_title: function() {
+            return this.paragraph.title.length > 0 ? this.paragraph.title : "商家介绍"
+        },
+        paragraph_content: function() {
+            var content = this.paragraph.content.length > 0 ? this.paragraph.content : "1.活动费用88元（2斤葡萄 1只手绘风筝 车费 包含1个大人 1个小孩）。<br/>2.多加1个大人另收30元/人。<br/>3.葡萄采摘时在园内可以适当品尝。"
+            return content
         },
     },
 }
 </script>
 
 <style lang="scss" scoped>
-.preview-main {
+.preview-form-main {
     .form-title {
         width: 100%;
+        height: 60px;
         padding: 20px 0 20px 30px;
         border-bottom: 1px #dee2e5 solid;
 
 
     .form-content {
         width: 100%;
-        padding: 14px 30px 0 30px;
+        padding: 14px 30px 14px 30px;
 
         .preview-cell-poster-photo {
             .poster-photo {
             .icon {
                 img {
                     width: 20px;
-                    height: 20px;
+                    height: auto;//20px;
                     vertical-align: middle;
                 }
             }
                     vertical-align: middle;
                 }
             }
+
+            .title {
+                p {
+                    color: #485b6d;
+                }
+            }
+            .detail {
+                flex: 1;
+                padding-left: 23px;
+                color: #485b6d;
+
+                p {
+                    color: #485b6d;
+                    float: right;
+                    text-align: right;
+                }
+            }
+        }
+
+        .large-text-cell {
+            padding: 20px 20px;
+            position: relative;
+            -webkit-box-align: center;
+            align-items: center;
+            margin-top: 15px;
+
+            .title {
+                color: #485b6d;
+                line-height: 18px;
+                height: 18px;
+
+                img {
+                    // width: 18px;
+                    // height: auto;
+                    margin-right: 11px;
+                    float: left;
+                }
+            }
+            .content {
+                color: #a8b3ba;
+                margin: 10px 0 0 0;
+                font-size: 14px;
+                line-height: 20px;
+            }
         }
     }
 }