yuanchengpasc/index的副本.vue

<template>
<div class="zh_login">
	<div class="zh_login_logo"><img src="../../../static/img/logo-2.png" /><div>服务热线：010-53932350</div></div>
	<div class="zh_login_box">
		<div class="zh_login_in">
			<div class="zh_login_from" v-if="this.confirm == 1">
				<div class="zh_login_h">确认登陆</div>
				<el-form ref="loginForm" :model="loginForm"  auto-complete="on" label-position="left">
					<el-form-item class="zh_txt">
						<el-input
						  v-model="loginForm.iphoneNumber"
						  placeholder="请输入手机号"
						  name="iphoneNumber"
						  type="text"
						  auto-complete="on"
              :disabled="true"
						/>
      				</el-form-item>
	  				<div class="zh_tips"><span></span></div>
					<el-form-item prop="verificationCode" class="zh_txt">
						<el-input
						  :type="passwordType"
						  v-model="loginForm.verificationCode"
						  placeholder="请输入验证码"
						  name="verificationCode"
						  auto-complete="on"
						  @keyup.enter.native="handleLogin"
              style="width: 60%;float: left"
            />
            <el-button type="primary"  style="width: 40%;float: left" @click="getMessageAgain">{{innerText}}</el-button>
					</el-form-item>
					<div class="zh_tips"><span></span></div>
					<div class="zh_goPwd"></div>

					<el-button type="primary" class="zh_loginBtn" @click.native.prevent="getCheckCode('ruleForm')">确认</el-button>
					<div class="zh_tips"></div>
				</el-form>

				<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
					{{ $t('login.thirdpartyTips') }}
				<social-sign />
				</el-dialog>

			</div>

      <div class="zh_login_from" v-if="this.confirm != 1">
        <div class="zh_login_h">登录远程诊断平台</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="on" label-position="left">
          <el-form-item prop="username" class="zh_txt">
            <el-input
              v-model="loginForm.username"
              :placeholder="$t('请输入用户名')"
              name="username"
              type="text"
              auto-complete="on"
            />
          </el-form-item>
          <div class="zh_tips"><span></span></div>
          <el-form-item prop="password" class="zh_txt">
            <el-input
              :type="passwordType"
              v-model="loginForm.password"
              :placeholder="$t('请输入密码')"
              name="password"
              auto-complete="on"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <div class="zh_tips"><span></span></div>
          <div class="zh_goPwd">忘记密码请联系管理员</div>

          <el-button type="primary" class="zh_loginBtn" @click.native.prevent="handleLogin">登录</el-button>
          <div class="zh_tips"></div>
          <div class="zh_reg">随时随地远程诊断，<a href="####">申请试用</a></div>
        </el-form>

        <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
          {{ $t('login.thirdpartyTips') }}
          <social-sign />
        </el-dialog>

      </div>
		</div>
	</div>
	<div class="zh_login_footer">
		<!-- <p>北京中世康恺科技有限公司</p> -->
		<p>京ICP备 17059019号 &copy;2018-2019</p>
	</div>
</div>

</template>

<script>
  import { isvalidUsername } from '@/utils/validate'
  import { setMenuData } from '@/utils/index'
  import LangSelect from '@/components/LangSelect'
  import SocialSign from './socialsignin'
  import Axios from 'axios'
  import qs from 'qs'
  import {loginRequest,checkCode,messageAgain} from '@/api/request'
  export default {
    components: { LangSelect, SocialSign, Axios, qs },
    name: 'login',
    data() {
      // 设置默认显示中文
      this.$store.dispatch('setLanguage', 'zh')
      const validateUsername = (rule, value, callback) => {
        // if (!isvalidUsername(value)) {
        //   callback(new Error('请输入您的用户名'))
        // } else {
        //   callback()
        // }
        if (!isvalidUsername) {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('请输入您的密码'))
        } else {
          callback()
        }
      }
      const validateiphoneNumberd = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('请输入您的手机号'))
        } else {
          callback()
        }
      }
      const validateverificationCode = (rule, value, callback) => {
        if (value.length < 3) {
          callback(new Error('请输入您的验证码'))
        } else {
          callback()
        }
      }
      return {
        isShow: true,
        confirm: 0,
        innerText:'获取验证码',
        loginForm: {
          username: '',
          password: '',
          iphoneNumber:'',
          verificationCode:''
        },
        loginRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername,type: 'string' }],
          password: [{ required: true, trigger: 'blur', validator: validatePassword,type: 'string' }],
          iphoneNumber: [{ required: true, trigger: 'blur', validator: validateiphoneNumberd,type: 'string' }],
          verificationCode: [{ required: true, trigger: 'blur', validator: validateverificationCode,type: 'string' }],
        },
        passwordType: 'password',
        loading: false,
        showDialog: false,
        rulse: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur',type: 'string' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur',type: 'string' }
          ],
          iphoneNumber:[
            { required: true, message: '请输入手机号', trigger: 'blur',type: 'string' }
          ],
          verificationCode:[
            { required: true, message: '请输入验证码', trigger: 'blur',type: 'string' }
          ]
        },
        showLogin: false,
        phone:'',
        handleId:''
      }
    },
    methods: {
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        var v = document.getElementById('ps')

        if (this.isShow) {
          v.type = 'text'
          this.isShow = false
        } else {
          v.type = 'password'
          this.isShow = true
        }
      },
      //重新发送验证码
      getMessageAgain(){
        messageAgain({
          handle_id: this.handleId
        }).then(data => {
          if (data.code == '0000'){
            this.handleId = data.handle_id
            let timer=null;
            clearInterval(timer);//这句话至关重要
            let time=60;
            let that=this;//习惯
            timer=setInterval(function(){
              if(time<=0){
                that.innerText="";
                that.innerText="点击重新发送";
                that.disabled=false;
                clearInterval(timer)
                console.log(timer)
              }else {
                that.disabled=true;
                that.innerText="";
                that.innerText="剩余时间"+(time)+"秒";
                time--;
              }
            },1000);
          }
        }).catch(err =>{
          this.$message.error(err.message);
        })
      },
      _needChangePassword(data) {
        if(data && data['pregPwd'] == 0) {
          this.$message({
            message: '密码复杂度过低，请修改密码！最低8位并且包含大小写字母、数字与特殊字符',
            type: 'error'
          })
          this.$router.push({ path: '/my/setpassword' })
          return true
        }
        return false
      },
      //验证码·
      getCheckCode(){
        var that = this
        this.$refs.loginForm.validate(valid => {
          var formObj = this
          if (valid) {
            console.log(this.handleId)
            checkCode(
              {
                handle_id: this.handleId,
              code: this.loginForm.verificationCode
            }
            ).then(data => {
              if (data.code === '0000') {
                var loginUser = data.info
                  loginUser.avatar = ''
                  loginUser.sessionid = data.sessionid
                  loginUser.isAdmin = data.info.is_admin
                  setMenuData('loginUser', JSON.stringify(loginUser))
                  console.log(33333)
                // 登录成功·
                // 登录成功后，将远程、本地、患者菜单分开
                var localSysPlatMenuArr = []
                var remoteSysPlatMenuArr = []
                var patientSysPlatMenuArr = []
                if (loginUser.permission && loginUser.permission != null) {
                  // 64022a6a4b32abae(本地)  814dc08e8183952d(远程)
                  for (var i = 0; i < loginUser.permission.length; i++) {
                    var upns = loginUser.permission[i]
                    //本院报告
                    if (upns.id === '80ddb7d09ebc44b4') {
                      localSysPlatMenuArr.push(upns)
                    }
                    //远程诊断
                    if (upns.id === '0aa9d7b2fdf7268e') {
                      remoteSysPlatMenuArr.push(upns)
                    }
                    //患者登记
                    if (upns.id === '0eac42ef01de23ff'){
                      patientSysPlatMenuArr.push(upns)
                    }
                  }
                }
                // 将本地菜单或远程菜单或患者登记，放入缓存
                setMenuData('localSysPlatMenuArr', JSON.stringify(localSysPlatMenuArr))
                setMenuData('remoteSysPlatMenuArr', JSON.stringify(remoteSysPlatMenuArr))
                setMenuData('patientSysPlatMenuArr', JSON.stringify(patientSysPlatMenuArr))
                console.log('测试缓存',remoteSysPlatMenuArr)
                // 默认显示本地系统
                var locSign = null
                if ((typeof locSign === 'undefined') || locSign == null) {
                  if (localSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'local')
                    console.log('router local --> ' + localSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: localSysPlatMenuArr[0].url })
                  } else if (remoteSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'remote')
                    console.log('router remote --> ' + remoteSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: remoteSysPlatMenuArr[0].url })
                  } else if (patientSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'patient')
                    console.log('router patient --> ' + patientSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: patientSysPlatMenuArr[0].url })
                  } else {
                    // 无菜单权限
                    that.$message.error('该用户暂无可用权限')
                  }
                }
              } else {
                // 登录失败
                // alert("登录失败");
                console.log('login fail!')
                formObj.loading = false
                formObj.$message({
                  message: '验证码输入错误',
                  type: 'error'
                })
              }
              return true
            }).catch(error => {
              this.$message.error(error.message);
            })
          }else{
            console.log('error submit!!')
            return false
          }
        })
      },
      getTime(){

      },
      handleLogin() {
        var that = this
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            var formObj = this
            loginRequest(
              {
                userName: this.loginForm.username,
                pwd: this.loginForm.password
              }
            ).then(data => {
              if (data.code === '0000') {
                var loginUser = data.info
                if (data.phone !='') {
                  this.confirm = 1
                  this.loginForm.iphoneNumber = data.phone
                  this.handleId = data.handle_id
                  let timer=null;
                  clearInterval(timer);//这句话至关重要
                  let time=60;
                  let that=this;//习惯
                  timer=setInterval(function(){
                    if(time<=0){
                      that.innerText="";
                      that.innerText="点击重新发送";
                      that.disabled=false;
                      clearInterval(timer)
                      console.log(timer)
                    }else {
                      that.disabled=true;
                      that.innerText="";
                      that.innerText="剩余时间"+(time)+"秒";
                      time--;
                    }
                  },1000);
                  that.$message({
                    message: '请输入用户登录验证码 ',
                    type: 'warn'
                  })
                  return
                }
                if (data.sessionid) {
                  loginUser.avatar = ''
                  loginUser.sessionid = data.sessionid
                  loginUser.isAdmin = data.info.is_admin
                  setMenuData('loginUser', JSON.stringify(loginUser))
                  console.log(33333)
                }
                // 登录成功
                // 登录成功后，将远程、本地、患者菜单分开
                var localSysPlatMenuArr = []
                var remoteSysPlatMenuArr = []
                var patientSysPlatMenuArr = []
                if (loginUser.permission && loginUser.permission != null) {
                  // 64022a6a4b32abae(本地)  814dc08e8183952d(远程)
                  for (var i = 0; i < loginUser.permission.length; i++) {
                    var upns = loginUser.permission[i]
                    //本院报告
                    if (upns.id === '80ddb7d09ebc44b4') {
                      localSysPlatMenuArr.push(upns)
                    }
                    //远程诊断
                    if (upns.id === '0aa9d7b2fdf7268e') {
                      remoteSysPlatMenuArr.push(upns)
                    }
                    //患者登记
                    if (upns.id === '0eac42ef01de23ff'){
                      patientSysPlatMenuArr.push(upns)
                    }
                  }
                }
                // 将本地菜单或远程菜单或患者登记，放入缓存
                setMenuData('localSysPlatMenuArr', JSON.stringify(localSysPlatMenuArr))
                setMenuData('remoteSysPlatMenuArr', JSON.stringify(remoteSysPlatMenuArr))
                setMenuData('patientSysPlatMenuArr', JSON.stringify(patientSysPlatMenuArr))
                console.log('测试缓存',remoteSysPlatMenuArr)
                // 默认显示本地系统
                var locSign = null
                if ((typeof locSign === 'undefined') || locSign == null) {
                  if (localSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'local')
                    console.log('router local --> ' + localSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: localSysPlatMenuArr[0].url })
                  } else if (remoteSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'remote')
                    console.log('router remote --> ' + remoteSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: remoteSysPlatMenuArr[0].url })
                  } else if (patientSysPlatMenuArr.length > 0) {
                    setMenuData('sys_plat_sign', 'patient')
                    console.log('router patient --> ' + patientSysPlatMenuArr[0].url)
                    if(!that._needChangePassword(data))
                      that.$router.push({ path: patientSysPlatMenuArr[0].url })
                  } else {
                    // 无菜单权限
                    that.$message.error('该用户暂无可用权限')
                  }
                }
              } else {
                // 登录失败
                // alert("登录失败");
                console.log('login fail!')
                if (this.handleId != ''){
                  formObj.loading = false
                }else{
                  formObj.loading = true
                }
                formObj.$message({
                  message: '登录失败，用户名或密码不正确 ',
                  type: 'error'
                })
              }
              return true
            })
              .catch(function(error) {
                that.$message.error(error.message);
              })
            if (this.handleId != ''){
              this.loading = false
              return false
            }else{
              this.loading = true
              return true
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      afterQRScan() {
        // const hash = window.location.hash.slice(1)
        // const hashObj = getQueryObject(hash)
        // const originUrl = window.location.origin
        // history.replaceState({}, '', originUrl)
        // const codeMap = {
        //   wechat: 'code',
        //   tencent: 'code'
        // }
        // const codeName = hashObj[codeMap[this.auth_type]]
        // if (!codeName) {
        //   alert('第三方登录失败')
        // } else {
        //   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
        //     this.$router.push({ path: '/' })
        //   })
        // }
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg:#283443;
  $light_gray:#eee;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input{
      color: $cursor;
      &::first-line {
        color: $light_gray;
      }
    }
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;
      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
        &:-webkit-autofill {
          -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .set-language {
      color: #fff;
      position: absolute;
      top: 5px;
      right: 0px;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
}

.zh_login{ width:100%; height:710px; position:fixed; left:0; top:50%; margin-top:-365px; }
.zh_login_logo{ max-width:960px; height:36px; padding:18px 20px 16px; margin:auto; }
.zh_login_logo img{ height:36px; float:left; }
.zh_login_logo div{ float:right; line-height:36px; font-size:1rem; color:#999; }
.zh_login_box{ width:100%; height:370px; padding:100px 0; background:url(../../../static/img/banner.png) no-repeat center #D6E3E9; }
.zh_login_in{ max-width:960px; padding:0 20px; margin:auto; }
.zh_login_in .zh_login_from{ width:280px; float:right; padding:30px; background-color:#FFF; box-shadow:0 0 4px #BBB; border-radius:3px; }
.zh_login_in .zh_login_from .zh_login_h{ margin-bottom:25px; font-size:1.2rem; color:#666; }
.zh_login_in .zh_login_from .zh_txt{ height:36px; font-size:1rem; box-shadow:0 0 3px #EEE; border-radius:0px; margin-bottom:0; margin-top:5px; }
.zh_login_in .zh_login_from .zh_txt input{ width:90%; height:34px; margin-top:1px; line-height:36px; padding:0 5%; box-shadow: none; border:none; font-size:1rem; -webkit-appearance:none; outline:none; }
.zh_login_in .zh_login_from .zh_txt input::placeholder{ color:#BBB; }
.zh_login_in .zh_login_from .zh_tips{ height:15px; line-height:20px; }
.zh_login_in .zh_login_from .zh_tips span{ font-size:.8rem; color:#F00; }
.zh_login_in .zh_login_from .zh_goPwd{ text-align:right; height:30px; text-align:right; font-size:.8rem; color:#AAA; }
.zh_login_in .zh_login_from .zh_loginBtn{ width:100%; height:40px; background-color:#334154; border:none; color:#FFF; font-size:1rem; box-shadow:0 0 4px #334154; border-radius:3px; cursor:pointer; }
.zh_login_in .zh_login_from .zh_reg{ height:40px; line-height:40px; text-align:center; font-size:.9rem; color:#999; background:linear-gradient(#FDFDFD, #F0F0F0) #CCC; border:1px solid #DDD; box-shadow:0 0 3px #EEE; border-radius:3px; }
.zh_login_in .zh_login_from .zh_reg a{ color:#0BD0D8; text-decoration:none; }
.zh_login_in .zh_login_from .zh_reg a:hover{ text-decoration:underline; }
.zh_login_footer{ max-width:960px; margin:15px auto; }
.zh_login_footer p{ font-size:.8rem; color:#999; text-align:center; line-height:180%; }

</style>