zhongde-website/components/common/form.vue

<template>
  <div class="submit-area">
    <div class="label">加盟申请</div>
    <div class="phone-num">
      <img
        src="http://res.training.luojigou.vip/FmUjRlN7yn8o8HkXV21yOAJt-2C0?imageView2/0/q/50|imageslim"
        alt="" />
      <div class="num">400-6807300</div>
    </div>
    <div class="form">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item prop="name">
          <el-input placeholder="姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input placeholder="手机号" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input placeholder="邮箱地址" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item prop="city">
          <el-input placeholder="加盟城市" v-model="form.city"></el-input>
        </el-form-item>
        <el-form-item prop="project">
          <el-select placeholder="合作项目" v-model="form.project">
            <el-option
              v-for="(item, index) in projectList"
              :key="index"
              :label="item.title"
              :value="item.title">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button class="submit" :loading="loading" :disabled="disabled" @click="handleSubmit('ruleForm')">提交申请</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {},
      loading: false,
      disabled: false,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
        project: [{ required: true, message: "请选择合作项目", trigger: "blur" }]
      },
      projectList: [
        {
          id: 1,
          title: '逻辑狗·探索小镇'
        },
        {
          id: 2,
          title: '逻辑狗专柜'
        },
        {
          id: 3,
          title: '逻辑狗思维体验Plus'
        },
        {
          id: 4,
          title: '逻辑狗思维体验Home'
        },
        {
          id: 5,
          title: '逻辑狗体验中心'
        }
      ]
    }
  },
  methods: {
    async handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          this.disabled = true;
          const { data } = await axios.post(`${this.$store.state.wordpressAPI}/official-api/joinIn`,{
            ...this.form
          });
          if(data.status == 200 ) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success'
            });
            this.$refs[formName].resetFields();
          } else {
              this.$notify({
                title: '失败',
                message: '提交失败',
                type: 'info'
              });
          }
          this.loading = false;
          this.disabled = false;
          // this.$message.success('提交成功');
        } else {
          this.loading = false;
          this.disabled = false;
          console.log('err');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.submit-area {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px 38px 32px;
  .label {
    text-align: left;
    font-size: 14px;
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    color: #000000;
    margin-bottom: 7px;
  }
  .phone-num {
    display: flex;
    align-items: center;
    img {
      width: 22px;
      height: 22px;
      display: block;
      margin-right: 15px;
    }
    .num {
      font-size: 26px;
      font-family: PingFangSC-Medium, sans-serif;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
  }
  .form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .el-input {
      width: 250px;
      height: 44px;
    }
    .el-form-item__error {
      color: #cd2026;
      // left: 124px;
    }
    .el-form-item {
      &.is-error {
        .el-input__inner {
          border-color: #dcdfe6;
        }
      }
    }
    .el-button {
      border: none;
    }
    .submit {
      margin: 0 auto;
      text-align: center;
      font-size: 14px;
      color: #fff;
      width: 148px;
      height: 34px;
      background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
      box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
      border-radius: 32px;
    }
    img {
      width: 176px;
      height: 55px;
    }
  }
}
</style>