scrm-vue/src/scrm_pages/marketing_tool/activity_publish.vue

<template>
    <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 :activity="activity" :paragraph="activity_paragraph"></preview-form>
                </div>
                <div class="edit-panel">
                    <edit-form ref="edit_form" :activity="activity" :paragraph="activity_paragraph"></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"
import { fetchActivity } from "@/api/activity/activity"

export default {
    name: "ActivityPublish",
    components: {
        BreadCrumb,
        PreviewForm,
        EditForm,
    },
    data() {
        return {
            crumbs: [
                { 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: {
                id: 0,
                title: "",
                content: "",
            }
        }
    },
    created() {
        var id = this.$route.query.id
        if (id != undefined) {
            fetchActivity(id).then(rs => {
                var resp = rs.data
                if (resp.state == 1) {
                    // console.log(resp.data)
                    var activity = resp.data.activity
                    this.activity.id = activity.id
                    this.activity.poster_photo = activity.poster_photo
                    this.activity.title = activity.title
                    this.activity.subtitle = activity.subtitle
                    this.activity.address = activity.address
                    this.activity.limit_num = activity.limit_num
                    this.activity.sign_up_deadline = activity.sign_up_deadline * 1000
                    this.activity.start_time = activity.start_time * 1000
                    this.activity.phone_number = activity.phone_number
                    this.activity.sign_up_notice = activity.sign_up_notice

                    var paragraph = resp.data.paragraph
                    this.activity_paragraph.id = paragraph.id
                    this.activity_paragraph.title = paragraph.title
                    this.activity_paragraph.content = paragraph.content

                    this.$refs.edit_form.initForms()

                } else {
                    this.$message.error(resp.msg)
                }

            }).catch(err => {
                this.$message.error(err)
            })
        }
    },
}
</script>

<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>