uk_front/pages/home/contactPromoCollection.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item> Contact PromoCollection</el-breadcrumb-item>
    </el-breadcrumb>
    <p class="title">Contact PromoCollection</p>
    <div class="line"></div>
    <p class="des">
      &nbsp;&nbsp;&nbsp;&nbsp; We distribute through distributors only. If you
      are a registered distributor, please
      <span @click="Login">login</span> , otherwise, please fill out
      contact <br />
      details below. One of our authorized distributors would contact you
      shortly.
      <span>If you have a preferred distributor, please specify</span>
    </p>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="0px"
      class="demo-ruleForm"
    >
      <el-form-item prop="company">
        <el-input
          v-model="ruleForm.company"
          placeholder="Company Name*"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="contacts">
        <el-input
          v-model="ruleForm.contacts"
          placeholder="Contact Person*"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          v-model="ruleForm.phone"
          placeholder="Phone*"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="address">
        <el-input
          v-model="ruleForm.address"
          placeholder="Address"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="state">
        <el-input
          v-model="ruleForm.state"
          placeholder="State"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="postcode">
        <el-input
          v-model="ruleForm.postcode"
          placeholder="Post Code"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="url">
        <el-input
          v-model="ruleForm.url"
          placeholder="Website"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input
          v-model="ruleForm.email"
          placeholder="E-mail"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="content">
        <el-input
          type="textarea"
          :rows="5"
          v-model="ruleForm.content"
          placeholder="Content"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm('ruleForm')" :disabled="disabledFlag">
          {{ butonContent }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      ruleForm: {
        company: "",
        contacts: "",
        phone: "",
        address: "",
        state: "",
        postcode: "",
        url: "",
        email: "",
        content: "",
      },
      rules: {
        company: [
          {
            required: true,
            message: "Please enter your Company Name",
            trigger: "blur",
          },
        ],
        contacts: [
          {
            required: true,
            message: "Please enter your Contact Person",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "Please enter your Phone Number",
            trigger: "blur",
          },
        ],
      },
      time: 60,
      timer: null,
      butonContent: "Submit",
      disabledFlag: false,
    };
  },
  watch: {
    time: {
      handler(newValue) {
        if (newValue == 0) {
          this.disabledFlag = false;
        } else {
          this.disabledFlag = true;
        }
      },
    },
  },
  methods: {
    ...mapMutations(["openDialog"]),
    Login(){
      this.openDialog();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.timer = setInterval(() => {
            if (this.time == 0) {
              this.butonContent = "Submit";
              clearInterval(this.timer);
            } else {
              this.butonContent = "Submit " + this.time + " s";
              this.time--;
            }
          }, 1000);
          this.$axios
            .post("/uk-api/others/visitor", this.ruleForm)
            .then((res) => {
              if (res.code == 1) {
                this.$notify({
                  title: "success",
                  message:
                    "Your request has been sent to your nominated e mail address.",
                  type: "success",
                });
                this.$router.push('/')
              }
            })
            .catch(() => {
            // this.$message.error(error.response.data.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 50px;
  font-size: 36px;
  font-family: Proxima Nova;
  font-weight: bold;
  color: #00213b;
  text-align: center;
  line-height: 50px;
}
.line {
  width: 99px;
  height: 4px;
  background: #e90000;
  margin: 15px auto;
}
.des {
  width: 1110px;
  font-size: 18px;
  font-family: Proxima Nova;
  font-weight: 400;
  color: #4a596c;
  line-height: 24px;
  margin: 57px auto 66px;
  span:nth-of-type(1) {
    color: #0071ff;
  }
  span:nth-of-type(2) {
    font-weight: 550;
  }
}
:deep(.el-form) {
  width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
  font-family: Proxima Nova;
  font-weight: 400;
  .el-input {
    width: 500px;
    color: #666666;
    background: #ffffff;
    border: 1px solid #bebebe;
    border-radius: 6px;
  }
  .el-textarea {
    width: 1040px;
    color: #666666;
    background: #ffffff;
    border: 1px solid #bebebe;
    border-radius: 6px;
  }
  .el-button {
    width: 1040px;
    font-size: 12px;
    font-family: Helvetica;
    font-weight: bold;
    color: #ffffff;
    background: #00213b;
    border-radius: 6px;
  }
}
</style>