完善功能

5 years ago · a390cee72b
3 changed files with 97 additions and 20 deletions
--- a/src/views/form/PreView.vue
+++ b/src/views/form/PreView.vue
@ -8,9 +8,11 @@
                <div class="preview-layer">
                    <div class="preview-bg"/>
                    <div class="preview-phone">
-                        <iframe id="preview-html" name="preview-html" class="preview-html"
+                        <iframe id="preview-html"
+                                scrolling="auto"
+                                name="preview-html" class="preview-html"
                                frameborder="0"
-                                src="http://localhost:8888/#/project/view?key=ec4dfaab04a94608a972845a5a459d3e"
+                                :src="mobilePreviewUrl"
                        />
                    </div>
                </div>
@ -19,7 +21,9 @@
            <span slot="label"><i class="el-icon-monitor"></i>
                电脑
            </span>
-                <project-form :projectConfig="projectConfig"/>
+                <project-form
+                    :projectConfig="projectConfig"
+                    v-if="projectConfig.projectKey"/>
            </el-tab-pane>
        </el-tabs>
    </div>
@ -36,6 +40,7 @@ export default {
    },
    data() {
        return {
+            mobilePreviewUrl: '',
            projectConfig: {
                projectKey: '',
                showBtns: false
@ -43,10 +48,9 @@ export default {
        }
    },
    mounted() {
-        this.projectConfig = {
-            projectKey: 'afd5c3562c924d20b7da67b1f192ce25',
-            showBtns: false
-        }
+        let url = window.location.protocol + '//' + window.location.host
+        this.mobilePreviewUrl = `${url}/#/project/view?key=${this.projectKey}`
+        this.$set(this.projectConfig, 'projectKey', this.projectKey)
    },
    components: {
        ProjectForm
@ -60,6 +64,7 @@ export default {
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
+    overflow-y: hidden !important;
 }

 /deep/ .el-tabs__header {
@ -79,6 +84,7 @@ div.preview-layer {
    margin: 10px auto;
    right: 0;
    text-align: center;
+    overflow-y: hidden !important;
 }

 div.preview-layer .preview-bg {
@ -87,6 +93,7 @@ div.preview-layer .preview-bg {
    margin: 20px auto;
    z-index: 999;
    opacity: 0.7;
+    overflow-y: hidden !important;
 }

 div.preview-layer .preview-phone {
@ -95,14 +102,25 @@ div.preview-layer .preview-phone {
    background: url('~@/assets/images/appearset_bgc_big.png');
    background-size: 372px 744px;
    z-index: 1000;
+    overflow-y: hidden !important;
 }

 .preview-html {
-    width: 318px !important;
+    width: 345px !important;
    height: 568px !important;
+    overflow-y: hidden !important;
    margin: 74px 0 0;
    border-radius: 5px;
    outline: none;
    background-color: #fff;
+    border-width: 2px;
+    border-style: inset;
+    border-color: initial;
+    border-image: initial;
+    border-top-width: 0px;
+    border-right-width: 0px;
+    border-bottom-width: 0px;
+    border-left-width: 0px;
 }
+
 </style>
--- a/src/views/form/ProjectForm.vue
+++ b/src/views/form/ProjectForm.vue
@ -5,13 +5,13 @@
                v-if="projectTheme.headImgUrl"
                :src="projectTheme.headImgUrl"
                fit="scale-down"></el-image>
-            <el-row type="flex" justify="center" align="middle">
+            <el-row v-if="projectTheme.showTitle" type="flex" justify="center" align="middle">
                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
                    <h4 class="form-name-text">
                        {{formConf.title}}</h4>
                </el-col>
            </el-row>
-            <el-row type="flex" justify="center" align="middle">
+            <el-row v-if="projectTheme.showDescribe" type="flex" justify="center" align="middle">
                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
                    <p class="form-name-text">
                        {{formConf.description}}
@ -51,10 +51,11 @@ export default {
    },
    data() {
        return {
-            key2: +new Date(),
            projectKey: '',
            projectTheme: {
-                headImgUrl:''
+                headImgUrl: '',
+                showTitle: true,
+                showDescribe: true
            },
            formConf: {
                fields: [],
@ -76,14 +77,20 @@ export default {
    },
    computed: {},
    watch: {},
+    beforeCreate() {
+        console.log( document.querySelector('body'))
+        document.querySelector('body').className = 'project-body'
+    },
    created() {
-        //不存去路由中尝试获取
+
        if (this.projectConfig && this.projectConfig.projectKey) {
            this.projectKey = this.projectConfig.projectKey
+            this.formConf.formBtns = this.projectConfig.showBtns
+            //不存去路由中尝试获取 ifreme
        } else if (this.$route.query.key) {
            this.projectKey = this.$route.query.key
+            this.formConf.formBtns = false
        }
-        this.formConf.formBtns = this.projectConfig.showBtns
        this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
    },
    mounted() {
@ -114,13 +121,28 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss" >
+
 .project-form {
    margin: 15px auto;
    width: 800px;
    padding: 15px;
    background-repeat: repeat;
    background-color: rgba(229, 239, 247, 0.87);
+    overflow: hidden;
+}
+
+.project-body::-webkit-scrollbar {
+    width: 0 !important;
+    background: transparent;
+}
+
+.project-body {
+    -ms-overflow-style: none;
+}
+
+.project-body {
+    overflow: -moz-scrollbars-none;
 }

@media screen and (max-width: 750px) {
@ -129,5 +151,10 @@ export default {
        width: 93% !important;
        background-color: white;
    }
+
+    .project-form {
+        height: 100%;
+        width: 60vw;
+    }
 }
 </style>
--- a/src/views/form/theme.vue
+++ b/src/views/form/theme.vue
@ -51,10 +51,33 @@
                </el-scrollbar>
            </el-col>
            <el-col :offset="0" :span="12">
-                <pre-view :project-key="projectKey"/>
+                <pre-view :key="projectFormKey" :project-key="projectKey"/>
            </el-col>
            <el-col :span="6">
-                <div class="right-container"></div>
+                <div class="right-container">
+                    <el-menu
+                        default-active="2"
+                        class="el-menu-vertical-demo">
+                        <el-submenu index="1">
+                            <template slot="title">
+                                <i class="el-icon-location"></i>
+                                <span>背景</span>
+                            </template>
+                            <el-menu-item-group>
+                                <template slot="title">分组一</template>
+                                <el-menu-item index="1-1">选项1</el-menu-item>
+                                <el-menu-item index="1-2">选项2</el-menu-item>
+                            </el-menu-item-group>
+                            <el-menu-item-group title="分组2">
+                                <el-menu-item index="1-3">选项3</el-menu-item>
+                            </el-menu-item-group>
+                            <el-submenu index="1-4">
+                                <template slot="title">选项4</template>
+                                <el-menu-item index="1-4-1">选项1</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+                    </el-menu>
+                </div>
            </el-col>
        </el-row>
    </div>
@ -70,6 +93,7 @@ export default {
    },
    data() {
        return {
+            projectFormKey: +new Date(),
            projectKey: '',
            styleList: [
                {'label': '全部', 'key': ''},
@ -100,14 +124,21 @@ export default {
        }
    },
    mounted() {
-        this.projectConfig.projectKey = this.$route.query.key
+        this.projectKey = this.$route.query.key
        this.queryProjectTheme()
+        this.projectFormKey = +new Date()
    },
    methods: {
        activeStyleHandler(item) {
            this.activeStyle = item.key
            this.queryProjectTheme()
        },
+        saveUserTheme() {
+            let params = {'projectKey': this.projectKey, 'themeId': this.activeTheme.id}
+            this.$api.post('/user/project/theme/save', params).then(res => {
+                this.projectFormKey = +new Date()
+            })
+        },
        activeThemeHandler(item) {
            if (item) {
                this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', {
@ -116,6 +147,7 @@ export default {
                    type: 'info'
                }).then(() => {
                    this.activeTheme = item
+                    this.saveUserTheme()
                }).catch(() => {

                })
@ -235,7 +267,7 @@ export default {
 }

 .right-container {
-    width: 456px;
+    width: 256px;
    height: 600px;
    line-height: 20px;
    text-align: center;