chore: 新增留资提交

components/FormSubmit.vue

+<template>
+  <div class="form-submit">
+    <h2>{{ title }}</h2>
+    <div class="desc">
+      <ul>
+        <li>免联考</li>
+        <li>在职读</li>
+        <li>申请制入学</li>
+        <li>双语授课</li>
+      </ul>
+      <p>学制1-2年 <span>|</span> 海外正规院校 <span>|</span> 全球精英校友</p>
+    </div>
+    <el-form inline :model="form" :rules="rules" ref="form">
+      <el-form-item prop="name">
+        <el-input type="text" v-model="form.name" placeholder="请输入您的名字"></el-input>
+      </el-form-item>
+      <el-form-item prop="phone">
+        <el-input type="text" v-model="form.phone" placeholder="请输入您的手机号"></el-input>
+      </el-form-item>
+      <el-form-item prop="project_id">
+        <el-select v-model="form.project_id" placeholder="请选择项目">
+          <el-option v-for="item in projects" v-bind="item" :key="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">立即报名</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { postNes } from '@/api/index'
+
+export default {
+  props: { type: { type: Number, default: 1 } },
+  data() {
+    return {
+      form: {
+        name: '',
+        phone: '',
+        project_id: '',
+        channel: this.$route.query.channel_num || 19962
+      },
+      rules: {
+        name: [{ required: true, message: '请输入您的名字', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '请输入您的手机号', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+        ],
+        project_id: [{ required: true, message: '请选择项目', trigger: 'change' }]
+      }
+    }
+  },
+  computed: {
+    title() {
+      return this.type === 1 ? '选择清控紫荆教育，助您考取国际硕士学位' : '选择清控紫荆教育，助您考取国际学位'
+    },
+    projects() {
+      if (this.type === 1) {
+        return [
+          { label: this.$t('aside.project4'), value: '1001' },
+          { label: this.$t('aside.project5'), value: '1006' },
+          { label: this.$t('aside.project6'), value: '1005' },
+          { label: this.$t('aside.project1'), value: '1012' },
+          { label: this.$t('aside.project3'), value: '1008' },
+          { label: '餐饮管理方向MBA', value: '1015' }
+        ]
+      } else {
+        return [
+          { label: '工商管理博士项目加州浸会大学', value: '1017' },
+          { label: '国际硕士1+1项目玛丽伍德大学', value: '1016' },
+          { label: '国际硕士1+1项目纽约州立大学石溪分校', value: '1018' }
+        ]
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.form.validate().then(() => {
+        postNes(this.form)
+          .then(res => {
+            if (res && res.status === 200 && res.error === 0) {
+              this.$message.success('报名提交成功')
+            } else {
+              this.$message.error('报名提交失败')
+            }
+          })
+          .catch(() => {
+            this.$message.error('报名提交失败')
+          })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.form-submit {
+  height: 356px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: url(https://webapp-pub.ezijing.com/www/pc/form/form_bg.png) no-repeat center top;
+  background-size: cover;
+  h2 {
+    font-size: 40px;
+    font-weight: 400;
+    line-height: 1;
+    color: #010101;
+  }
+  .desc {
+    padding: 28px 0 50px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    line-height: 28px;
+    color: #010101;
+    span {
+      padding: 0 5px;
+      color: #a81840;
+    }
+    p {
+      padding-left: 50px;
+    }
+  }
+  ul {
+    display: flex;
+    li {
+      padding-left: 20px;
+      padding-right: 30px;
+      background: url(https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png) no-repeat left center;
+      background-size: 16px;
+    }
+  }
+  .el-input,
+  .el-button {
+    width: 280px;
+    height: 48px;
+    border-radius: 0;
+  }
+  .el-input__inner {
+    height: 48px;
+    border-radius: 0;
+  }
+}
+</style>