完善功能

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 = {
+        let url = window.location.protocol + '//' + window.location.host
-            projectKey: 'afd5c3562c924d20b7da67b1f192ce25',
+        this.mobilePreviewUrl = `${url}/#/project/view?key=${this.projectKey}`
-            showBtns: false
+        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>

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() {
@@ -94,7 +101,7 @@ export default {
                 })
                 this.formConf.fields = fields
                 this.formConf.title = res.data.project.name
-                if(res.data.userProjectTheme){
+                if (res.data.userProjectTheme) {
                     this.projectTheme = res.data.userProjectTheme
                 }
                 this.formConf.description = res.data.project.describe
@@ -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>

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;