完善功能

src/views/form/PreView.vue

@@ -19,7 +19,7 @@
             <span slot="label"><i class="el-icon-monitor"></i>
                 电脑
             </span>
-                <project-form :projectConfig="projectConfig" />
+                <project-form :projectConfig="projectConfig"/>
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -32,19 +32,20 @@ import ProjectForm from './ProjectForm'
 export default {
     name: 'PreView',
     props: {
+        projectKey: ''
+    },
+    data() {
+        return {
             projectConfig: {
                 projectKey: '',
-            headImgUrl: '',
+                showBtns: false
-            color: ''
+            }
         }
-    },
-    data() {
-        return {}
     },
     mounted() {
         this.projectConfig = {
-            headImgUrl: 'http://cdn1.wenjuan.com/appear-PC-防疫13.png',
+            projectKey: 'afd5c3562c924d20b7da67b1f192ce25',
-            projectKey: 'afd5c3562c924d20b7da67b1f192ce25'
+            showBtns: false
         }
     },
     components: {

src/views/form/ProjectForm.vue

@@ -2,7 +2,8 @@
     <div class="project-form">
         <div class="">
             <el-image
-                :src="projectConfig.headImgUrl"
+                v-if="projectTheme.headImgUrl"
+                :src="projectTheme.headImgUrl"
                 fit="scale-down"></el-image>
             <el-row type="flex" justify="center" align="middle">
                 <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
@@ -44,8 +45,6 @@ export default {
     },
     props: {
         projectConfig: {
-            headImgUrl: '',
-            color: '',
             projectKey: '',
             showBtn: false
         }
@@ -54,6 +53,9 @@ export default {
         return {
             key2: +new Date(),
             projectKey: '',
+            projectTheme: {
+                headImgUrl:''
+            },
             formConf: {
                 fields: [],
                 __methods__: {},
@@ -76,20 +78,12 @@ export default {
     watch: {},
     created() {
         //不存去路由中尝试获取
-        if (!this.projectConfig) {
-            this.projectConfig = {
-                headImgUrl: '',
-                color: '',
-                projectKey: '',
-                showBtn: false
-            }
-        }
         if (this.projectConfig && this.projectConfig.projectKey) {
             this.projectKey = this.projectConfig.projectKey
         } else if (this.$route.query.key) {
             this.projectKey = this.$route.query.key
         }
-        this.formConf.formBtns = this.projectConfig.showBtn
+        this.formConf.formBtns = this.projectConfig.showBtns
         this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
     },
     mounted() {
@@ -100,6 +94,9 @@ export default {
                 })
                 this.formConf.fields = fields
                 this.formConf.title = res.data.project.name
+                if(res.data.userProjectTheme){
+                    this.projectTheme = res.data.userProjectTheme
+                }
                 this.formConf.description = res.data.project.describe
             }
         })

src/views/form/theme.vue

@@ -32,20 +32,26 @@
                             </el-col>
                         </el-row>
                         <el-row>
-                            <el-col :span="8" v-for="t in themeList">
+                            <el-col
+                                class="theme-img-view"
+                                :span="8" v-for="t in themeList"
+                                @click.native="activeThemeHandler(t)">
+                                <p :class="{'head-list-view-select':activeTheme.id==t.id}">
                                     <el-image
+                                        :class="{'head-list-img-active':activeTheme.id==t.id}"
                                         class="head-list-img"
                                         style="width: 100px; height: 100px"
                                         :src="t.headImgUrl"
                                         fit="cover"
                                     ></el-image>
+                                </p>
                             </el-col>
                         </el-row>
                     </div>
                 </el-scrollbar>
             </el-col>
             <el-col :offset="0" :span="12">
-                <pre-view :projectKey="projectKey"/>
+                <pre-view :project-key="projectKey"/>
             </el-col>
             <el-col :span="6">
                 <div class="right-container"></div>
@@ -64,6 +70,7 @@ export default {
     },
     data() {
         return {
+            projectKey: '',
             styleList: [
                 {'label': '全部', 'key': ''},
                 {'label': '节日', 'key': 'festival'},
@@ -88,12 +95,12 @@ export default {
             ],
             activeColor: '',
             activeStyle: '',
-            projectKey: '',
+            activeTheme: '',
             themeList: []
         }
     },
     mounted() {
-        this.projectKey = this.$route.query.key
+        this.projectConfig.projectKey = this.$route.query.key
         this.queryProjectTheme()
     },
     methods: {
@@ -101,6 +108,19 @@ export default {
             this.activeStyle = item.key
             this.queryProjectTheme()
         },
+        activeThemeHandler(item) {
+            if (item) {
+                this.$confirm('切换主题，系统将不会保存您在上一主题所做的修改，请知悉。', '切换主题提醒', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消操作',
+                    type: 'info'
+                }).then(() => {
+                    this.activeTheme = item
+                }).catch(() => {
+
+                })
+            }
+        },
         activeColorHandler(item) {
             this.activeColor = item
             this.queryProjectTheme()
@@ -199,6 +219,21 @@ export default {
     border: 2px solid rgba(11, 141, 213, 100);
 }
 
+.head-list-img-active {
+    border: 2px solid rgba(11, 141, 213, 100);
+}
+
+.theme-img-view .head-list-view-select ::after {
+    content: "";
+    background: url('~@/assets/images/mobile_theme_active.png');
+    background-size: 18px;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+}
+
 .right-container {
     width: 456px;
     height: 600px;