ZhiFuBao/src/views/Recruiting.vue

<template>
  <div class="Recruiting">
    <div class="box1">
      <img src="../assets/img/5.gif" alt="" />
    </div>
    <!-- 表单 -->
    <div class="box2">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <div class="row">您的姓名 <span>（已加密，请放心填写）</span></div>
        <el-form-item prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="10"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <div class="row">您的电话 <span>（已加密，请放心填写）</span></div>
        <el-form-item prop="phone">
          <el-input
            v-model="ruleForm.phone"
            maxlength="11"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <div class="row">所在城市 <span>（已加密，请放心填写）</span></div>
        <el-form-item prop="city">
          <el-input
            v-model="ruleForm.city"
            maxlength="50"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div class="btnn" @click="submit">提 交 申 请</div>
    </div>
  </div>
</template>

<script>
import { alipaySave } from "../api/api";
export default {
  name: "Recruiting",
  components: {},
  data() {
    //这里存放数据
    return {
      ruleForm: {
        name: "",
        phone: "",
        city: "",
        type: "edu",
      },
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入合法手机号",
            trigger: "blur",
          },
        ],
        city: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击提交
    async submit() {
      try {
        await this.$refs.ruleForm.validate();
        let res = await alipaySave(this.ruleForm);
        if (res.data.code === 0) {
          this.$message.success("提交成功");
          this.ruleForm = {
            name: "",
            phone: "",
            city: "",
            type: "edu",
          };
        } else this.$message.error(res.data.msg);
      } catch (error) {
        console.log(error);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document.title = "元宇宙建模师火热招募";
    // chrome
    document.body.scrollTop = 0;
    // firefox
    document.documentElement.scrollTop = 0;
    // safari
    window.pageYOffset = 0;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}
.Recruiting {
  padding-top: 800px;
  background: url("../assets/img/bg2.png");
  background-size: 100% 100%;
  width: 100vw;
  max-width: 420px;
  height: 2850px;
  margin: 0 auto;
  .box1 {
    width: 100%;
    height: 228px;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .box2 {
    width: 325px;
    height: 370px;
    background-color: #fff;
    border-radius: 5px;
    margin: 1400px auto 0;
    padding: 10px 20px 0;
    .row {
      margin-top: 15px;
      font-size: 14px;
      color: #606266;
      & > span {
        color: #999;
        font-size: 12px;
        position: relative;
        &::after {
          content: "*";
          color: #f56c6c;
          position: absolute;
          right: -1px;
          top: 0px;
          font-size: 14px;
        }
      }
    }
    /deep/.el-form-item {
      padding-bottom: 20px;
    }
    .btnn {
      width: 202px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      background-color: #5b91fd;
      margin: 30px auto 0;
      color: #fff;
      font-weight: 700;
      text-align: center;
    }
  }
}
</style>