VUE：通用表单（验证码倒计时、下拉选择器）

适用于vue开发，vant框架

代码：

<template>
  <div class="question-survey">
    <div class="container">
      <!-- 
        ---------------------表单---------------------------------------------
      -->
      <van-cell-group
        class="form-list"
        v-for="(item, index) in formList"
        :key="index"
        :border="false"
      >
        <span class="form-title">{{ item.title }}</span>
        <van-field
          :readonly="item.disabled"
          v-model="item.value"
          @click="toSelect(item, index)"
          :placeholder="item.placeholder"
          :right-icon="item.icon"
          class="form-wrap"
        >
          <!-- 
          ----------------------------发送验证码--------------------------
         -->
          <template #button>
            <van-button
              v-if="item.title == '联系电话'"
              @click="GetAuthCode"
              type="default"
              class="auth-code"
              size="mini"
              :disabled="issend"
              :class="{ IsAuthCode: issend }"
              >{{ content }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>

      <!-- 
        ----------------------提交-------------------------------------
       -->
      <van-button
        round
        color="#6a74ef"
        @click="submit"
        class="submit"
        type="primary"
        >确定</van-button
      >

      <!-- 
        --------------------------选择器-------------------------------------
       -->
      <van-popup
        v-model="show"
        position="bottom"
        round
        :style="{ height: '55%' }"
      >
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>

      <!--
        ----------------------------时间选择器---------------------------------
      -->
      <van-popup
        v-model="isShow"
        position="bottom"
        round
        :style="{ height: '55%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择出生年月日"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="dateConfirm"
          @cancel="dateCancel"
        />
      </van-popup>
      <!-- 
        --------------------------------加载状态-----------------------------------
       -->
      <van-loading
        v-if="isloading"
        class="loading"
        color="#1989fa"
        type="spinner"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { ApiModel } from "../../assets/js/request/api";
const apimodel = new ApiModel();
export default {
  data() {
    return {
      formList: [
        {
          title: "职业",
          placeholder: "请选择您的职业",
          value: "",
          icon: "arrow-down",
          disabled: true,
          columns: [
            "公务员",
            "事业单位",
            "企业或公司管理人员",
            "办事人员（秘书、勤杂人员、公司文员）",
            "工人",
            "服务行业工作人员",
            "个体经营者（户）或自由职业者",
            "学生",
          ],
        },
        {
          title: "出生年份",
          placeholder: "请选择您的出生年份",
          value: "",
          icon: "arrow-down",
          disabled: true,
          columns: ["占位"],
        },
        {
          title: "联系电话",
          placeholder: "请输入您的电话号码",
          value: "",
          icon: "",
          disabled: false,
          columns: [],
        },
        {
          title: "验证码",
          placeholder: "请输入验证码",
          value: "",
          icon: "",
          disabled: false,
          columns: [],
        },
      ],
      columns: [],
      show: false,
      isShow: false,
      index: "",
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(2021, 12, 0),
      currentDate: new Date(),
      issend: false,
      isloading: false,
      content: "发送验证码",
      totalTime: 30,
    };
  },
  methods: {
    /* 
     ------------------------打开picker选择器------------------------------------ 
        说明： 1、若formList中的colums长度为0，则表示该form表单不进行选择
              2、若长度为1，则表示为日期选择器
              3、若长度大于1，则表示为常规选择器
    */
    toSelect(item, index) {
      if (item.columns.length == 0) {
        return;
      }
      if (item.columns.length == 1) {
        this.isShow = true;
        this.index = index;
        return;
      }
      if (item.columns.length > 1) {
        this.show = true;
        this.columns = item.columns;
        this.index = index;
        return;
      }
    },
    /* 选择内容 */
    onConfirm(value) {
      this.show = false;
      this.formList[this.index].value = value;
    },
    onCancel() {
      this.show = false;
    },
    /*
      -------------------选择年月日-----------------------------------
    */
    dateConfirm(val) {
      this.isShow = false;
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (year >= 0 && year <= 9) {
        year = `0${year}`;
      }
      this.formList[this.index].value = `${year}-${month}-${day}`;
    },
    dateCancel() {
      this.isShow = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    /* 
     ---------------------------获取验证码-------------------------------
    */
    GetAuthCode() {
      if (this.formList[5].value == "") {
        Toast.fail("手机号不能为空！");
        return;
      } else {
        let data = {
          phone: this.formList[5].value,
        };
        apimodel.getSms(data).then((res) => {
          res;
        });
        this.issend = true;
        this.content = this.totalTime + "s秒后重新发送";
        let clock = window.setInterval(() => {
          this.totalTime--;
          this.content = this.totalTime + "s秒后重新发送";
          if (this.totalTime < 0) {
            window.clearInterval(clock);
            this.content = "发送验证码";
            this.issend = false;
            this.totalTime = 30;
          }
        }, 1000);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.question-survey {
  .container {
    padding: 0 15px;
    margin-top: 0 !important;
    .form-list {
      padding-top: 10px !important;
      .form-title {
        font-size: 15px;
        font-weight: bold;
        color: rgb(65, 64, 64);
      }
      .form-wrap {
        border-bottom: 1px solid rgb(218, 216, 216);
        padding: 5px 0 !important;
        margin-bottom: 5px;
        .auth-code {
          font-size: 13px;
          color: #6a74ef;
          border: none;
        }
      }
    }
    .submit {
      width: 100% !important;
      margin-top: 20px;
      font-size: 16px;
    }
    .loading {
      position: fixed;
      top: 45%;
      left: calc(50% - 20px);
    }
  }
}
</style>