feat: 完善留资表单

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
     ['import', {
       libraryName: 'vant',
       libraryDirectory: 'es',
-      style: true
+      style: (name) => `${name}/style/less`,
     }, 'vant']
   ]
-}
+}

client/common/styles/vant.theme.less

@@ -0,0 +1,63 @@
+// https://github.com/youzan/vant/blob/2.x/src/style/var.less
+
+/* theme */
+@blue: #2abed1;
+@red_deep: #ef3024;
+
+@gray-6: #9b9ca3;
+@gray-64: #646566;
+@gray-7: #5f5e64;
+@gray-8: #171826;
+
+// Border
+@border-color: rgba(0,0,0,.1);
+
+// button var reset
+@button-primary-background-color: @blue;
+@button-primary-border-color: @blue;
+@button-border-radius: 4px;
+@button-disabled-opacity: 0.5;
+@button-default-color: @gray-7;
+@button-large-height: 40px;
+@button-normal-font-size: 16px;
+
+// Cell
+@cell-font-size: @font-size-lg;
+@cell-right-icon-color: #c0c4cc;
+
+// Dialog var reset
+@dialog-border-radius: 8px;
+@dialog-confirm-button-text-color: @blue;
+
+// Overlay
+@overlay-z-index: 9;
+
+// Popup
+@popup-close-icon-z-index: 10;
+
+// IndexAnchor
+@index-anchor-text-color: @gray-7;
+@index-anchor-sticky-text-color: @gray-7;
+@index-anchor-line-height: 24px;
+
+// IndexBar
+@index-bar-index-active-color: @blue;
+
+// Tabs
+@tab-active-text-color: @blue;
+@tabs-default-color: @blue;
+@tab-text-color: @gray-64;
+
+// Tag
+@tag-padding: 2px 6px;
+@tag-danger-color: @red_deep;
+
+// DropdownMenu
+@dropdown-menu-box-shadow: none;
+@dropdown-menu-title-font-size: 14px;
+@dropdown-menu-title-text-color: @gray-7;
+@dropdown-menu-title-active-text-color: @blue;
+@dropdown-menu-option-active-color: @blue;
+
+// Loading
+@loading-spinner-color: @blue;

client/pages/editor/components/attr-configure/attr-props-components/props-attr/NoticeBar.vue

@@ -5,7 +5,7 @@
       v-model="styleTemp.color">
       </el-color-picker>
   </el-form-item>
-    <el-form-item label="背景颜色">
+  <el-form-item label="背景颜色">
      <el-color-picker size="mini"
       v-model="styleTemp.background">
       </el-color-picker>

client/pages/editor/components/attr-configure/attr-props-components/props-attr/SourceForm.vue

@@ -5,19 +5,37 @@
         placeholder="请输入留资 Source"
         v-model.trim="temp.source">
     </el-input>
+    <el-form-item label="背景颜色">
+      <el-color-picker
+        size="mini"
+        v-model="temp.background">
+      </el-color-picker>
+    </el-form-item>
   </el-form-item>
   <el-collapse v-model="activeNames">
     <el-collapse-item title="字段配置：" name="1">
       <div class="attr-item-edit-wrapper marginB15">
         <div class="sizeAndPosition-wrapper">
+          <el-form-item label="公司名称">
+            <el-switch v-model="temp.company"></el-switch>
+          </el-form-item>
           <el-form-item label="姓名">
             <el-switch v-model="temp.name"></el-switch>
           </el-form-item>
           <el-form-item label="手机号">
             <el-switch v-model="temp.phone"></el-switch>
           </el-form-item>
-          <el-form-item label="公司名称">
-            <el-switch v-model="temp.company"></el-switch>
+          <el-form-item label="行业报告">
+            <el-switch v-model="temp.source_desc"></el-switch>
+          </el-form-item>
+          <el-form-item label="行业报告">
+            <el-input
+                type="textarea"
+                :rows="5"
+                placeholder="请输入行业选项"
+                v-model="tempSourceOptions"
+                @change="changeOptions">
+            </el-input>
           </el-form-item>
         </div>
       </div>
@@ -41,11 +59,18 @@
         temp: {
           source: ''
         },
+        tempSourceOptions: ''
 			}
 		},
 		mounted() {
 			this.temp = this.sourceFormConfig;
+      this.tempSourceOptions = this.sourceOptions
 		},
+    computed: {
+      sourceOptions () {
+        return this.sourceFormConfig.sourceOptions.join('\n')
+      }
+    },
 		watch: {
 			noticeBarStyle(val) {
 				this.temp = val;
@@ -56,7 +81,12 @@
         },
         deep:true
 			}
-		}
+		},
+    methods: {
+      changeOptions (val) {
+        this.temp.sourceOptions = val.split('\n')
+      }
+    }
 	}
 </script>
 

client/pages/editor/ele-config.js

@@ -293,7 +293,7 @@ export default [{
           img: require('@/common/images/elementIcon/form.png'),
           valueType: 'input',
           defaultStyle: {
-            height: 200,
+            height: 590,
             width: $config.canvasH5Width,
           }
         },

client/plugins/SourceForm/src/index.vue

@@ -1,36 +1,69 @@
 <!--test.vue-->
 <template>
-  <van-form @submit="onSubmit">
-    <van-field
-        v-if="sourceFormConfig.name"
-        v-model.trim="form.name"
-        name="姓名"
-        label="姓名"
-        placeholder="请输入姓名"
-    />
-    <van-field
-        v-if="sourceFormConfig.phone"
-        v-model.trim="form.phone"
-        name="手机号"
-        label="手机号"
-        placeholder="请输入准确的手机号"
-    />
-    <van-field
-        v-if="sourceFormConfig.company"
-        v-model.trim="form.company"
-        name="公司名称"
-        label="公司名称"
-        placeholder="请输入准确的公司名称"
-    />
+  <div>
+    <van-form
+        class="source-form"
+        @submit="onSubmit"
+        :style="{
+        'background-color': sourceFormConfig.background
+      }"
+    >
+      <van-field
+          v-if="sourceFormConfig.company"
+          v-model.trim="form.company"
+          name="公司名称"
+          label="公司名称"
+          placeholder="请输入准确的公司名称"
+      />
+      <van-field
+          v-if="sourceFormConfig.name"
+          v-model.trim="form.name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+      />
+      <van-field
+          v-if="sourceFormConfig.phone"
+          v-model.trim="form.phone"
+          name="手机号"
+          label="手机号"
+          placeholder="请输入准确的手机号"
+      />
+      <van-field name="radio" label="你希望获得哪个行业的报告" v-if="sourceFormConfig.source_desc">
+        <template #input>
+          <div class="custom-radio-type">
+            <van-radio-group
+                v-model="form.source_desc"
+            >
+              <van-radio
+                  v-for="item in sourceFormConfig.sourceOptions"
+                  :name="item"
+                  :key="item"
+              >
+                <div class="other-input-box" v-if="form.source_desc === '其他' && item === '其他'">
+                  <span>{{item}}</span>
+                  <van-field
+                      v-model.trim="form.source_desc_temp"
+                      placeholder="请输入行业"
+                  />
+                </div>
+                <span v-else>{{item}}</span>
+              </van-radio>
+            </van-radio-group>
 
-    <div style="margin: 16px;">
-      <van-button round block :type="btnType" :size="size" native-type="submit">{{text}}</van-button>
-    </div>
-  </van-form>
+          </div>
+        </template>
+      </van-field>
+
+      <div style="margin: 16px;">
+        <van-button round block :type="btnType" :size="size" native-type="submit">{{text}}</van-button>
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-import { Form, Field, Button } from 'vant';
+import { Form, Field, Button, Radio, RadioGroup } from 'vant';
 import $axios from "@/service/httpServer";
 
 	export default {
@@ -38,6 +71,8 @@ import $axios from "@/service/httpServer";
     components: {
         [Form.name]: Form,
         [Field.name]: Field,
+        [Radio.name]: Radio,
+        [RadioGroup.name]: RadioGroup,
         [Button.name]: Button
     },
     data() {
@@ -45,7 +80,9 @@ import $axios from "@/service/httpServer";
         form: {
           name: '',
           phone: '',
-          company: ''
+          company: '',
+          source_desc: '',
+          source_desc_temp: ''
         }
       }
     },
@@ -69,10 +106,20 @@ import $axios from "@/service/httpServer";
       sourceFormConfig: {
         type:Object,
         default: ()=>({
+          background: 'transparent',
           source: 'default-source-h5',
           name: true,
           phone: true,
-          company: true
+          company: true,
+          source_desc: true,
+          sourceOptions: [
+              '建筑工程',
+              '信息技术',
+              '弱电安防',
+              '医疗卫生',
+              '服务采购',
+              '其他'
+          ]
         })
       }
 		},
@@ -84,7 +131,8 @@ import $axios from "@/service/httpServer";
           forbidClick: true
         });
         const params = Object.assign({
-          source: this.sourceFormConfig.source
+          source: this.form.source_desc === '其他' ? this.form.source_desc_temp : this.form.source_desc,
+          origin: location.href
         }, this.form)
 
         console.log('source-params', params)
@@ -95,7 +143,7 @@ import $axios from "@/service/httpServer";
         }).then(res => {
           console.log('res', res)
           this.$toast.clear()
-          this.$toast('提交成功')
+          this.$toast('提交成功，我们会尽快联系您~')
         }).catch(() => {
           this.$toast.clear()
           this.$toast('太火爆了，请稍后重试')
@@ -106,5 +154,34 @@ import $axios from "@/service/httpServer";
 </script>
 
 <style lang="scss" scoped>
+.other-input-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  span {
+    flex-shrink: 0;
+  }
+}
+.custom-radio-type {
+  display: flex;
+  flex-direction: column;
+}
+.source-form {
+
+  width: 100%;
+  height: 100%;
 
+  ::v-deep {
+    .van-cell {
+      flex-direction: column;
+      background-color: inherit;
+    }
+    .van-field__label {
+      width: 100%;
+    }
+    .van-radio {
+      height: 44px;
+    }
+  }
+}
 </style>