dy-admin-live/src/pages/login/index.tsx

import { defineComponent } from "vue"
import { ElForm, ElFormItem, ElInput, ElMessage } from "element-plus";
import styles from './index.module.less'
import request from "/src/helpers/request";
import { setToken } from "/src/utils/auth";


export default defineComponent({
  data() {
    // const validateUsername = (rule: any, value: any, callback: () => void) => {
    //   if (!value) {
    //     // @ts-ignore
    //     callback(new Error("请输入手机号"));
    //   } else {
    //     callback();
    //   }
    // }
    const validatePassword = (rule: any, value: string | any[], callback: () => void) => {
      if (value.length < 6) {
        // @ts-ignore
        callback(new Error("密码必须大于六位"));
      } else {
        callback();
      }
    }
    return {
      loginForm: {
        username: null,
        password: null
      } as any,
      loginRules: {
        username: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      passwordType: "password",
      redirect: undefined as any,
      isSaveUserInfo: true
    }
  },
  mounted() {
    if (this.$route.query.redirect) {
      this.redirect = this.$route.query.redirect;
    }
    this.loginForm.username = localStorage.getItem('username');
    this.loginForm.password = localStorage.getItem('password');
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        (this as any).$refs.password.focus();
      });
    },
    handleLogin() {
      // 判断是否点击了记住密码 =>  存储密码
      const loginForm = this.loginForm;
      if (this.isSaveUserInfo) {
        localStorage.setItem('username', loginForm.username);
        localStorage.setItem('password', loginForm.password);
      } else {
        localStorage.setItem('username', '');
        localStorage.setItem('password', '');
      }
      (this as any).$refs.loginForm.validate(async (valid: any) => {
        if (valid) {
          try {
            // 根据手机号获取学生信息
            // export const checkStudentPhone = (data) => request2({
            //   url: '/api-web/studentManage/queryUserByPhone',
            //   method: 'get',
            //   params: data,
            //   hideLoading: true
            // })
            // /auth-server/user/queryUserByPhone
            const resPhone: any = await request('/api-auth/user/queryClient', {
              params: {
                phone: loginForm.username
              }
            })
            console.log(resPhone)
            // "SYSTEM,STUDENT,TEACHER"
            const authType = resPhone.data
            let clientType = 'SYSTEM'
            if (authType.includes('SYSTEM')) {
              clientType = 'SYSTEM'
            } else if(authType.includes('TEACHER')) {
              clientType = 'TEACHER'
            }
            const res: any = await request.post('/api-auth/usernameLogin', {
              data: {
                username: loginForm.username,
                password: loginForm.password,
                clientId: clientType,
                clientSecret: clientType
              }
            })
            let token: string = res?.data.authentication.token_type + ' ' + res?.data.authentication.access_token;
            console.log(token);
            setToken(token)

            const roomUid = sessionStorage.getItem('roomUid')
            const details:any =  await  request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
              params: {
                roomUid: roomUid
              }
            })
          
            sessionStorage.setItem('details',JSON.stringify(details.data))
            ElMessage.success('登录成功')
            this.$router.push(this.redirect || '/')
          } catch (error) {
            // console.log(error)
          }
        } else {
          return false;
        }
      });
    },
    saveUserInfo() {
      this.isSaveUserInfo = !this.isSaveUserInfo;
    }
  },
  render() {
    return (
      <div class={styles.loginContainer}>
        <div class={styles.loginHeader}>
          <div class={styles.logo}>
            <img src="/src/assets/home/logo.png" alt="" />
          </div>
          <i class={styles.line}></i>
          <div class={styles.logoName}>乐团管理系统</div>
        </div>


        <div>
          <div class={styles.loginSection}>
            <div class={styles.formBg}>
              <img src="/src/pages/login/images/from-bg.png" alt="" />
            </div>
            <ElForm ref="loginForm"
              model={this.loginForm}
              rules={this.loginRules}
              class={styles.loginForm}
              auto-complete="on"
              label-position="left">
              <div class={styles.titleContainer}>登录</div>
              <ElFormItem prop="username"
                class={styles.logitem}>
                <span class={styles.svgContainer}>
                  {/* <img class={styles.icon} src="/src/icons/svg/user.svg" alt="" /> */}
                  <SvgIcon class={styles.icon} name="svg-user" color="#fff" />
                </span>
                <ElInput ref="username"
                  class={styles.loginInput}
                  v-model={this.loginForm.username}
                  placeholder="请输入手机号"
                  maxlength="11"
                  type="tel"
                  tabindex="1"
                  auto-complete="off" />
              </ElFormItem>
              <ElFormItem prop="password"
                class={styles.logitem}>
                <span class={styles.svgContainer}>
                  {/* <img class={styles.icon} src="/src/icons/svg/password.svg" alt="" /> */}
                  <SvgIcon class={styles.icon} name="svg-password" color="#fff" />
                </span>
                <ElInput
                  ref="password"
                  class={styles.loginInput}
                  v-model={this.loginForm.password}
                  type={this.passwordType}
                  placeholder="请输入密码"
                  tabindex="2"
                  auto-complete="off" />
                <span class={styles.showPwd} onClick={this.showPwd}>
                  {this.passwordType === 'password' ? <SvgIcon class={styles.icon} name="svg-eye" color="#fff" /> : <SvgIcon class={styles.icon} name="svg-eye-open" color="#fff" />}
                </span>
              </ElFormItem>
              <div class={[!this.loginForm.username || !this.loginForm.password ? styles.disabled : '', styles.loginBtn]}
                onClick={this.handleLogin}>登录</div>
              <div class={styles.remberBox} onClick={() => { this.isSaveUserInfo = !this.isSaveUserInfo }}>
                <div class={[this.isSaveUserInfo ? styles.checked : '', styles.dotWrap]}></div>
                记住密码
              </div>
            </ElForm>
          </div>
          <div class={styles.footer}>
            Copyright © 2022 管乐迷, Inc.ALL Rights Reserved
          </div>
        </div>
      </div>
    )
  }
})