ebiz-ai-knowledge-manage/src/generatedComponents/send-phone-code.vue

<template>
  <r-dialog
    :visible.sync="visible"
    title="发送短信验证码"
    width="550px"
    append-to-body
    class="send-chat-phone-dialog"
  >
    <el-form
      label-width="100px"
      :model="phoneForm"
      :rules="phoneRules"
      class="phone-form"
      ref="phoneForm"
    >
      <!--        <el-form-item label="手机号" prop="phone">-->
      <!--          <div class="flex">-->
      <!--            <el-input-->
      <!--              v-model="phoneForm.phone"-->
      <!--              placeholder="请输入手机号"-->
      <!--              style="color:#000"-->
      <!--            ></el-input>-->
      <!--            <el-button-->
      <!--              class="ml10 render-button pv5 ph10"-->
      <!--              type="primary"-->
      <!--              size="medium"-->
      <!--              @click="sendPhoneCode"-->
      <!--              :disabled="!sendCode"-->
      <!--              >{{ !sendCode ? minute + '秒后重新发送' : '发送验证码' }}-->
      <!--            </el-button>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <el-form-item label="短信验证码" prop="code" class="mr30">
        <div class="flex">
          <el-input
            v-model="phoneForm.code"
            placeholder="请输入短信验证码"
            style="color:#000"
            size="medium"
          >
            <template slot="append">
              <el-button
                class="ml10"
                type="primary"
                size="medium"
                @click="sendPhoneCode"
                :disabled="!sendCode"
                >{{ !sendCode ? minute + '秒后重新发送' : '发送短信验证码' }}
              </el-button>
            </template>
          </el-input>
        </div>
        <!--          <el-input-->
        <!--            v-model="phoneForm.code"-->
        <!--            placeholder="请输入验证码"-->
        <!--          ></el-input>-->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" size="medium">取消</el-button>
      <el-button type="primary" @click="handleSubmit" size="medium"
        >确定</el-button
      >
    </div>
  </r-dialog>
</template>
<script>
import { sendPhoneCodeLogin, send_sms } from '@/api/app/user'
import { setToken } from '@/assets/js/utils/auth'

export default {
  name: 'send-phone-code',
  data() {
    const validatePhone = (rule, value, callback) => {
      //  手机号正则
      const validPhone = phone => {
        return /^1[3456789]\d{9}$/.test(phone)
      }
      if (!validPhone(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }

    return {
      sendCode: true,
      phoneRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { validator: validatePhone, trigger: 'change' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'change' }]
      },
      phoneForm: {
        phone: '',
        code: ''
      },
      minute: 120 // 默认120秒 发送间隔
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userName: {
      type: String,
      default: ''
    },
    resetPassword: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(newVal) {
      if (!newVal) {
        // 重置表单
        this.phoneForm = {
          phone: '',
          code: ''
        }
        // this.sendCode = true
        // clearInterval(this.timer)
      }
    }
  },
  components: {},
  filters: {},
  methods: {
    sendCodeText() {
      //   倒计时 60S
      this.minute = 120

      this.timer = setInterval(() => {
        this.minute--
        if (this.minute <= 0) {
          this.sendCode = true
          clearInterval(this.timer)
        }
      }, 1000)

      return this.minute
    },

    sendPhoneCode() {
      let api = this.resetPassword ? send_sms : sendPhoneCodeLogin

      api({
        userName: !this.resetPassword ? this.userName : undefined
      }).then(res => {
        if (Number(res.code) === 0) {
          this.sendCode = false
          this.sendCodeText()
        }
      })
    },

    handleSubmit() {
      this.$refs.phoneForm.validate(valid => {
        if (valid) {
          this.$emit('handleSubmit', this.phoneForm.code)
        }
      })
    },

    cancel() {
      this.$emit('update:visible', false)
    }
  },
  created() {},
  mounted() {},
  computed: {}
}
</script>
<style lang="scss">
@import '../assets/sass/renderSass/theme.scss';
.send-chat-phone-dialog {
  .phone-form {
    & .el-input-group__append {
      background: $--color-primary;
      color: #fff;
      border-color: $--color-primary;
      & .el-button {
        &.is-disabled {
          & ~ .el-input-group__append {
            background: $--color-primary-disabled;
          }
        }
      }
    }
  }
}
</style>