cloundPc/src/components/minForm.vue

<template>
  <div>
    <p class="errorP">&nbsp{{ errorMsg }}</p>

    <div class="imputWrap">
      <input
        class="minINput"
        type="text"
        v-model="form.name"
        placeholder="机构名称"
      />
    </div>
    <div class="imputWrap">
      <input
        class="minINput"
        type="text"
        v-model="form.city"
        placeholder="所在城市"
      />
    </div>
    <div class="imputWrap">
      <input
        class="minINput"
        type="text"
        v-model="form.linkman"
        placeholder="联系人姓名"
      />
    </div>
    <div class="halfBox">
      <div class="imputWrap">
        <input
          class="minINput halfe"
          type="text"
          v-model="form.mobileNo"
          placeholder="手机号码"
        />
      </div>
      <div class="imputWrap">
        <input class="minINput halfe" type="text" v-model="form.smsCode" placeholder="验证码" />
        <div class="line"></div>
        <div class="codeBox" @click="getCode">
          {{ time > 0 ? `${time}秒` : "发送验证码" }}
        </div>
      </div>
    </div>
    <div class="submitBtn" @click="submitInfo">申请免费试用</div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      errorMsg: "",
      form: {
        name: "",
        city: "",
        linkman: "",
        mobileNo: "",
        smsCode: "",
      },
      time: 0,
      url: "https://kj.colexiu.com/",
      maskRules: {
        name: [{ required: true, message: "请输入机构名称" }],
        city: [{ required: true, message: "请输入所在城市" }],
        linkman: [{ required: true, message: "请输入联系人姓名" }],
        mobileNo: [
          { required: true, message: "请输入手机号" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        smsCode: [{ required: true, message: "请输入验证码" }],
      },
    };
  },
  methods: {
    submitInfo() {
      // let url = "https://test.kj.colexiu.com/";
      // if (location.hostname == "colexiu.com") {
      //   url = "https://kj.colexiu.com/";
      // }
      if (!this.validate()) {
        return;
      }
      axios({
        url: this.url + "api-user/tenantApply/add",
        method: "post",
        data: qs.stringify(this.form),
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          "Access-Control-Allow-Origin": "*",
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.$toast("提交成功");
          this.$emit('close')
        } else {
          this.$toast(res.data.msg);
        }
      });
    },

    getCode() {
      console.log("获取验证码");
      if (this.time > 0) {
        return;
      }

      if (!this.form.mobileNo) {
        this.errorMsg = "请输入手机号";
        return false;
      } else if (!this.form.mobileNo.match(/^1[3456789]\d{9}$/)) {
        this.errorMsg = "请输入正确的手机号";
        return false;
      } else {
        this.errorMsg = "";
      }

      axios({
        url: this.url + "api-auth/code/sendSms",
        method: "post",
        data: qs.stringify({ mobile: this.form.mobileNo }),
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          "Access-Control-Allow-Origin": "*",
        },
      }).then((res) => {
        if (res.data.code == 200) {
           this.time = 60
          this.$toast("发送成功");
          const timer = setInterval(() => {
            if (this.time > 0) {
              this.time--;
            } else {
              this.time = 0;
              clearInterval(timer);
            }
          }, 1000);
        } else {
          this.$toast("发送失败");
        }
      });
    },
    validate() {
      if (!this.form.name) {
        this.errorMsg = "请输入机构名称";
        return false;
      } else if (!this.form.city) {
        this.errorMsg = "请输入所在城市";
        return false;
      } else if (!this.form.linkman) {
        this.errorMsg = "请输入联系人姓名";
        return false;
      } else if (!this.form.mobileNo) {
        this.errorMsg = "请输入手机号";
        return false;
      } else if (!this.form.mobileNo.match(/^1[3456789]\d{9}$/)) {
        this.errorMsg = "请输入正确的手机号";
        return false;
      } else if (!this.form.smsCode) {
        this.errorMsg = "请输入验证码";
        return false;
      } else {
        this.errorMsg = "";
        return true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
/deep/input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #808080;
}
/deep/input:-moz-placeholder,
textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #808080;
}
/deep/input::-moz-placeholder,
textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #808080;
}
/deep/input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #808080;
}

.errorP {
  font-size: 0.26rem;
  color: red;
  text-align: center;
}
.halfBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.imputWrap {
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  margin-bottom: 0.18rem;
  // height: 0.78rem;
  input {
    display: block;
    border: none;
    -webkit-appearance: none;
  }
  .halfe.minINput {
    width: 3.3rem;
  }
  .minINput {
    background-color: #fbfaff;
    width: 6.7rem;
    height: 0.77rem;
    border: 1px solid #e5e5e5;
    font-size: 0.26rem;
    box-sizing: border-box;
    padding-left: 0.25rem;
    border-radius: 0.07rem;
  }
}
.line {
  position: absolute;
  width: 1px;
  height: 0.21rem;
  background: #e5e5e5;
  right: 1.82rem;
  top: 0.25rem;
  z-index: 10;
}
.codeBox {
  width: 1.7rem;
  height: 0.72rem;
  background-color: #fbfaff;
  line-height: 0.72rem;
  position: absolute;
  right: 1px;
  top: 1px;
  cursor: pointer;
  color: #808080;
  text-align: center;
  font-size: 0.24rem;
  padding: 0 0.1rem;
}
.submitBtn {
  width: 5.82rem;
  height: 0.84rem;
  border-radius: 0.42rem;
  text-align: center;
  color: #fff;
  font-size: 0.28rem;
  font-weight: bold;
  background-color: #2dc7aa;
  line-height: 0.84rem;
  margin: 0.45rem auto 0;
}
</style>