dvcp_v2_webapp/ui/packages/common/AiSign/AiSign.vue

<template>
  <section class="ai-sign" v-if="visible">
    <el-row type="flex">
      <el-card :class="{'sign-in-hidden':!signInState}">
        <ai-sign-in
            v-if="!sassLogin"
            ref="signIn"
            @signIn="SignIn"
            :showPhoneLogin="showPhoneLogin"
            :showScanLogin="showScanLogin"
            :instance="instance"
            @qrlogin="onQRlogin"
            @sendMessage="sendMsg"
            @resetPwd="signInState=false"/>
        <h2 class="scan-title sassLogin" v-else>手机扫码，安全登录</h2>
        <template v-if="tpLoginList.length>0">
          <div class="divider" v-text="`第三方账号登录`"/>
          <el-row class="tpLogin" type="flex" align="middle">
            <el-tooltip v-for="(tp,i) in tpLoginList" :key="i" :content="tp.label" placement="top">
              <ai-icon class="item" v-bind="tp" @click.native.stop="tp.click"/>
            </el-tooltip>
          </el-row>
        </template>
      </el-card>
      <el-card class="change-password" :class="{'change-password-hidden':signInState}">
        <ai-change-pwd @signUp="ChangePwd" :instance="instance" @toLogin="signInState=true"/>
      </el-card>
    </el-row>
  </section>
</template>

<script>
import AiSignIn from "./signIn";
import AiChangePwd from "./changePwd";

export default {
  name: "AiSign",
  components: {AiChangePwd, AiSignIn},
  props: {
    /**
     * 是否展示
     */
    visible: Boolean,
    /**
     * 显示手机号登陆模块
     */
    showPhoneLogin: {default: true},
    /**
     * 显示扫码登录
     */
    showScanLogin: {default: true},
    /**
     * 接口工具类
     */
    instance: {required: true, type: Function},
    /**
     * 请求接口类
     * login :手机密码登录;mobile:手机验证码登录;
     * qr:手机扫码登录 qrStatus:扫码状态
     * changePwd:更换密码 verification:验证码验证
     */
    action: Object,
    /**
     * 第三方登录列表: wxwork:企业微信
     */
    tps: {default: () => []},
    /**
     * 是否是sass版本登录
     */
    sassLogin: Boolean
  },
  provide() {
    return {
      actions: this.actions,
      sassLogin: this.sassLogin
    }
  },
  computed: {
    actions() {
      let action = {
        login: "/auth/oauth/token",
        mobile: "/auth/mobile/token",
        qr: "/auth/qr-con/token",
        qrStatus: "/admin/user/getQrStatus",
        qrKey: "/admin/user/getQrKey",
        code: "/auth/token/code",
        failTimes: "/admin/user/getloginFailNum",
        changePwd: "/admin/user/update-pwd",
        verification: "/admin/user/checkPhone"
      }
      return {...action, ...this.action}
    },
    tpLoginList() {
      let list = [
        {
          label: "企微登录", icon: "iconqiwei", key: 'wxwork', type: 'svg', click: () => {
            location.href = `https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=ww596787bb70f08288&redirect_uri=${encodeURIComponent(location.href)}&usertype=member`
          }
        }
      ]
      return list.filter(e => this.tps.includes(e.key)) || []
    }
  },
  data() {
    return {
      signInState: true
    }
  },
  methods: {
    ChangePwd(params) {
      this.instance.post(this.actions.changePwd, null, {
        params: {
          phone: params.account,
          code: params.verifictCode,
          newPwd: params.password
        }
      }).then(res => {
        if (res) {
          this.$message.success("修改成功!")
          this.signInState = true
        }
      })
    },
    SignIn(params, url) {
      let password = this.$encryption(params)
      this.instance.post(url, null, {
        auth: {
          username: 'villcloud',
          password: "villcloud"
        },
        params: {
          grant_type: 'password',
          scope: 'server',
          ...params,
          password
        }
      }).then(data => {
        if (!data) {
          this.$refs.signIn.handleInput()
        } else {
          this.$emit("login", data)
        }
      }).catch(() => {
        this.$refs.signIn.handleInput()
      })
    },
    getNowDate() {
      const date = new Date()
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    sendMsg(phone) {
      this.instance.post(this.actions.verification, null, {
        auth: {},
        params: {phone}
      }).then(() => this.$message.success("发送成功!"))
    },
    onQRlogin(data) {
      this.$emit('login', data)
    }
  }
}
</script>
<style lang="scss" scoped>
.ai-sign {
  width: 400px;
  display: inline-block;
  transition: 2s;

  .el-row {
    width: 200%;
  }

  .sign-in-hidden {
    transform: translateX(-100%);
    opacity: 0;
  }

  .change-password {
    transform: translateX(-100%);
  }

  .change-password-hidden {
    transform: translateX(100%);
    opacity: 0;
  }

  .el-card {
    width: 400px;
    border-radius: 8px;
  }

  .divider {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin: 12px 0;

    &:before, &:after {
      content: "——";
      margin: 0 11px;
      color: #ddd;
    }
  }

  .tpLogin {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      margin: 8px;
      height: 48px;
      width: 48px;
      font-size: 28px;
      border-radius: 50%;
      line-height: 48px;
      text-align: center;
    }
  }

  :deep(.scan-title ){
    color: #333333;
    font-size: 16px;

    &.sassLogin {
      margin-bottom: 150px;
    }
  }
}
</style>