change: 联系我们增加enquiry表单.

pages/home/contactus.vue

@@ -1,9 +1,82 @@
 <template>
   <div class="com-main com-width-1400 com-margin-auto">
     <div
-      class="content"
+      style="padding-left: 20px; font-size: 16px"
       v-html="info"></div>
-    <div></div>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div class="site-enquiry-form">
+      <el-form
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        ref="form"
+        label-position="top">
+        <el-form-item
+          v-for="item in config"
+          :class="{
+            'long-form-item': item.long,
+            'short-form-item': !item.long,
+          }"
+          :prop="item.prop"
+          :label="item.placeholder"
+          :key="item.label">
+          <el-input
+            :type="item.type"
+            size="small"
+            :name="item.prop"
+            :id="item.prop"
+            v-model="formData[item.prop]"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <div
+            class="flex center"
+            style="width: 100%">
+            <el-button
+              :loading="submitLoading"
+              @click="submit"
+              >SUBMIT</el-button
+            >
+          </div>
+        </el-form-item>
+      </el-form>
+      <div
+        class=""
+        style="position: absolute; left: -100vw">
+        <div
+          class="preview-area"
+          ref="previewArea">
+          <div style="margin-bottom: 4px; font-weight: bold; font-size: 18px">
+            Name
+          </div>
+          <div style="padding-left: 20px; font-size: 16px; margin-bottom: 8px">
+            {{ formData.name }}
+          </div>
+          <div style="margin-bottom: 4px; font-weight: bold; font-size: 18px">
+            Phone
+          </div>
+          <div style="padding-left: 20px; font-size: 16px; margin-bottom: 8px">
+            {{ formData.phone }}
+          </div>
+          <div style="margin-bottom: 4px; font-weight: bold; font-size: 18px">
+            Email
+          </div>
+          <div style="padding-left: 20px; font-size: 16px; margin-bottom: 8px">
+            {{ formData.email }}
+          </div>
+          <div style="margin-bottom: 4px; font-weight: bold; font-size: 18px">
+            Enquiry Details
+          </div>
+          <div style="padding-left: 20px; font-size: 16px; margin-bottom: 8px">
+            {{ formData.enquiry }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,13 +84,133 @@
 export default {
   data() {
     return {
+      siteID: '',
       info: '',
+      submitLoading: false,
+      config: [
+        {
+          long: true,
+          autoInput: true,
+          prop: 'name',
+          type: 'input',
+          placeholder: 'Name',
+        },
+        {
+          long: true,
+          prop: 'phone',
+          type: 'input',
+          placeholder: 'Phone',
+        },
+        {
+          long: true,
+          prop: 'email',
+          type: 'input',
+          placeholder: 'Email',
+        },
+        {
+          long: true,
+          prop: 'enquiry',
+          type: 'textarea',
+          placeholder: 'Enquiry',
+        },
+      ],
+      rules: {
+        email: [
+          {
+            required: true,
+            message: 'Please input',
+            trigger: 'blur',
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: 'Please input',
+            trigger: 'blur',
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: 'Please input',
+            trigger: 'blur',
+          },
+        ],
+        enquiry: [
+          {
+            required: true,
+            message: 'Please input',
+            trigger: 'blur',
+          },
+        ],
+      },
+      formData: {
+        // name: 'name',
+        // email: 'peter@gmail.com',
+        // phone: 'phone',
+        // enquiry: 'enquiry',
+        name: '',
+        email: '',
+        phone: '',
+        enquiry: '',
+      },
     }
   },
   async fetch() {
     await this.$store.dispatch('getShopInfo').then(res => {
       this.info = res.contactus
+      this.siteID = res.id
     })
   },
+  methods: {
+    submit() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+
+        const f = JSON.parse(JSON.stringify(this.formData))
+        f.site_id = this.siteID
+        this.submitLoading = true
+        this.$axios
+          .post('/c-api/quote/sendenquiry', f)
+          .then(() => {
+            this.$message.success('submit success')
+            this.formData = {
+              name: '',
+              email: '',
+              phone: '',
+              enquiry: '',
+            }
+          })
+          .finally(() => {
+            this.submitLoading = false
+          })
+      })
+    },
+  },
 }
 </script>
+<style lang="scss">
+.site-enquiry-form {
+  max-width: 700px;
+
+  .el-form-item__label {
+    line-height: 28px;
+  }
+  .el-form-item__error {
+    line-height: 6px !important;
+    text-align: left;
+    padding-top: 0;
+  }
+  .long-form-item {
+    width: 96%;
+  }
+  .short-form-item {
+    width: 47%;
+  }
+  .el-button {
+    color: #fff;
+    background-color: #e90000;
+  }
+}
+</style>
+<style lang="scss" scoped></style>