From abe5d6fa8c82a5c3fd4ab3b7a985f969eed9e1a1 Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Wed, 25 Nov 2020 18:51:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/mobile_theme_active.png | Bin 0 -> 551 bytes
 src/views/form/PreView.vue                |  19 ++++----
 src/views/form/ProjectForm.vue            |  21 ++++-----
 src/views/form/theme.vue                  |  55 ++++++++++++++++++----
 4 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/images/mobile_theme_active.png

diff --git a/src/assets/images/mobile_theme_active.png b/src/assets/images/mobile_theme_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..15ed788f638572b853234299d0a94d2b63fb4e28
GIT binary patch
literal 551
zcmV+?0@(eDP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00004XF*Lt006O%
z3;baP0005rNkl<ZNDb|l&r4KM6vsc$nfz6msR)@HTWGpWTeVT#=t9U%AcoKnW?Y0q
zE=0jqv}h9uE_50R+KBikDB@b7P3b}yD3s7JOv|5*jOTP2^gXUlGx~(U3-{f3&i$VA
zJwM)k?>Ut{iDn=|f^u2UcQ`DI!;m8+OTG{!!xf?|UkQ{*DwLHZ^mDx=Nvpd5Pr2G3
z!0amsH`)_Cb0!b#V4xLl<iqm@A4uwJ;PoSL9OHa?J`EC0f3go+?%9o0TU!Bx9S{r{
z%xp|Dny}-8Hg#7M6iWJU+F)lNrarq-RkvXH8RT9u`UQDIb&kS*+>J|0)}G8sR5}8(
z`}Q&1zhh**mKQ-Z1O<6U_jOHr@ea23jxgRkD@pGdd|EQl9Enz=uD%V$*Wi5^N(;>1
z_f2>@0zZCx-MVF`@?|37RvGE$RTz5#6{SXA`vp4hmKk|-2ik{Vam8ls)>$)A$oiH<
z8G+ReV^DJah+y}RoQdea5vcWvB)a)+9iB)zer~H|M*IM}KfuQ?NlohYR1!6ht;(lO
z8oMDx`t<aV!^}cz$Hx&T_T)H7@AI=EPiCqnd+k)Vo)a5zTh5ElOh(FbW#ZIpb3r8L
px5Z0-e)8YH6?u5@i^%v59Rl=>ZRq>-i)sJ>002ovPDHLkV1jXb_#prQ

literal 0
HcmV?d00001

diff --git a/src/views/form/PreView.vue b/src/views/form/PreView.vue
index 34925f3..e572839 100644
--- a/src/views/form/PreView.vue
+++ b/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: {
-        projectConfig: {
-            projectKey: '',
-            headImgUrl: '',
-            color: ''
-        }
+        projectKey: ''
     },
     data() {
-        return {}
+        return {
+            projectConfig: {
+                projectKey: '',
+                showBtns: false
+            }
+        }
     },
     mounted() {
         this.projectConfig = {
-            headImgUrl: 'http://cdn1.wenjuan.com/appear-PC-防疫13.png',
-            projectKey: 'afd5c3562c924d20b7da67b1f192ce25'
+            projectKey: 'afd5c3562c924d20b7da67b1f192ce25',
+            showBtns: false
         }
     },
     components: {
diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue
index fbe024b..48565ce 100644
--- a/src/views/form/ProjectForm.vue
+++ b/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
             }
         })
diff --git a/src/views/form/theme.vue b/src/views/form/theme.vue
index b0dbb02..9d39735 100644
--- a/src/views/form/theme.vue
+++ b/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-image
-                                    class="head-list-img"
-                                    style="width: 100px; height: 100px"
-                                    :src="t.headImgUrl"
-                                    fit="cover"
-                                ></el-image>
+                            <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;