1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不...

zhaowei

2024-08-02 15792ad8baea4ab886dbfc58009847f26de45df8

 src/views/user/LoginPhone.vue

@@ -16,13 +16,14 @@
            </div>
          </a-form-model-item>
        </a-col>
        <a-col style="height: 55px;display: flex;justify-content: right;align-items: center;padding-left: 15px">
        <a-col class="code-col-container">
          <a-button
            class="getCaptcha"
            tabindex="-1"
            :disabled="state.smsSendBtn"
            @click.stop.prevent="getCaptcha"
            v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
            @click.stop.prevent="getCaptcha">
            {{!state.smsSendBtn && '获取验证码' || (state.time+' s')}}
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
@@ -35,18 +36,18 @@

  export default {
    name: 'LoginPhone',
    data(){
    data() {
      return {
        model:{
        model: {
          mobile: '',
          captcha: ''
        },
        //手机号登录用
        state: {
          time: 60,
          smsSendBtn: false,
          smsSendBtn: false
        },
        validatorRules:{
        validatorRules: {
          mobile: [
            { required: true, message: '请输入手机号码!' },
            { validator: this.validateMobile }
@@ -58,121 +59,131 @@

      }
    },
    methods:{
    methods: {
      ...mapActions(['PhoneLogin']),
      handleLogin(rememberMe){
        this.validateFields([ 'mobile', 'captcha' ], (err) => {
      handleLogin(rememberMe) {
        this.validateFields(['mobile', 'captcha'], (err) => {
          if (!err) {
            let loginParams = {
              mobile: this.model.mobile,
              captcha: this.model.captcha,
              remember_me: rememberMe
            }
            console.log("登录参数", loginParams)
            console.log('登录参数', loginParams)
            this.PhoneLogin(loginParams).then((res) => {
              this.$emit('success', res.result)
            }).catch((err) => {
              this.$emit('fail', err)
            });
          }else{
            })
          } else {
            this.$emit('validateFail')
          }
        })
      },
      // 校验手机号
      validateMobile(rule,value,callback){
        if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)){
          callback();
        }else{
          callback("您的手机号码格式不正确!");
      validateMobile(rule, value, callback) {
        if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
          callback()
        } else {
          callback('您的手机号码格式不正确!')
        }
      },
      //获取验证码
      getCaptcha (e) {
        e.preventDefault();
        let that = this;
        that.validateFields([ 'mobile' ], (err) => {
      getCaptcha(e) {
        e.preventDefault()
        let that = this
        that.validateFields(['mobile'], (err) => {
            if (!err) {
              that.state.smsSendBtn = true;
              that.state.smsSendBtn = true
              let interval = window.setInterval(() => {
                if (that.state.time-- <= 0) {
                  that.state.time = 60;
                  that.state.smsSendBtn = false;
                  window.clearInterval(interval);
                  that.state.time = 60
                  that.state.smsSendBtn = false
                  window.clearInterval(interval)
                }
              }, 1000);
              }, 1000)

              const hide = that.$message.loading('验证码发送中..', 0);
              let smsParams = {};
              smsParams.mobile=that.model.mobile;
              smsParams.smsmode="0";
              postAction("/sys/sms",smsParams)
              const hide = that.$message.loading('验证码发送中..', 0)
              let smsParams = {}
              smsParams.mobile = that.model.mobile
              smsParams.smsmode = '0'
              postAction('/sys/sms', smsParams)
                .then(res => {
                  if(!res.success){
                    setTimeout(hide, 0);
                    that.cmsFailed(res.message);
                  if (!res.success) {
                    setTimeout(hide, 0)
                    that.cmsFailed(res.message)
                  }
                  console.log(res);
                  setTimeout(hide, 500);
                  console.log(res)
                  setTimeout(hide, 500)
                })
                .catch(err => {
                  setTimeout(hide, 1);
                  clearInterval(interval);
                  that.state.time = 60;
                  that.state.smsSendBtn = false;
                  that.requestFailed(err);
                });
                  setTimeout(hide, 1)
                  clearInterval(interval)
                  that.state.time = 60
                  that.state.smsSendBtn = false
                  that.requestFailed(err)
                })
            }
          }
        );
        )
      },
      cmsFailed(err){
        this.$notification[ 'error' ]({
      cmsFailed(err) {
        this.$notification['error']({
          message: '获取验证码失败',
          description:err,
          duration: 4,
        });
          description: err,
          duration: 4
        })
      },
      /**
       * 验证字段
       * @param arr
       * @param callback
       */
      validateFields(arr, callback){
      validateFields(arr, callback) {
        let promiseArray = []
        for(let item of arr){
        for (let item of arr) {
          let p = new Promise((resolve, reject) => {
            this.$refs['form'].validateField(item, (err)=>{
              if(!err){
                resolve();
              }else{
                reject(err);
            this.$refs['form'].validateField(item, (err) => {
              if (!err) {
                resolve()
              } else {
                reject(err)
              }
            })
          });
          })
          promiseArray.push(p)
        }
        Promise.all(promiseArray).then(()=>{
        Promise.all(promiseArray).then(() => {
          callback()
        }).catch(err=>{
        }).catch(err => {
          callback(err)
        })
      },

      }

    }

  }
</script>

<style scoped>
.getCaptcha{
  display: block;
  width: 100%;
  height: 45px;
  border-radius: 15px;
  font-size: 17.9px;
  color: #000;
  border: none;
}
<style scoped lang="less">
  .code-col-container {
    height: 55px;
    display: flex;
    justify-content: right;
    align-items: center;
    padding-left: 15px;

    .getCaptcha {
      display: flex;
      width: 100%;
      height: 45px;
      border-radius: 15px;
      font-size: 17.9px;
      color: #000;
      border: none;
      justify-content: center;
      align-items: center;
    }
  }

</style>