qa-regulatory-gwj-app/pages/login/login.vue

<template>
  <view class="wui_login">
	  <view class="bg_img">
		  <image src="/static/bg-login.png" mode=""></image>

	  </view>
    <view class="login-title">
      <text @click="updateToolPath()" ><button style=" opacity:0;height: 50rpx; width: 50rpx;"></button></text>
    </view>
    <view class="form">
      <u--form labelPosition="top" :model="form" labelWidth="140rpx" >
        <u-form-item label="账号" borderBottom>
          <u--input v-model="form.userName" border="none" placeholder="请输入账号..." ></u--input>
        </u-form-item>
        <u-form-item label="密码" borderBottom>
          <u--input v-model="form.userPwd" type="password" border="none" placeholder="请输入密码..." ></u--input>
        </u-form-item>
		<u-form-item >
		 <u-button type="primary" text="登 录" @click="$u.debounce(fnLogin, 1000,true)"></u-button>
		</u-form-item>
      </u--form>

    </view>
    <u-modal :show="updateVersion.modalShow" title="温馨提示" :showConfirmButton="updateVersion.showConfirmButton"
             :showCancelButton="updateVersion.showCancelButton" :confirmText="updateVersion.confirmText" :cancelText="updateVersion.cancelText"
             @cancel="modalCancel" @confirm="modalConfirm">
      <view style="text-align: center;color:#606266">
        <rich-text :nodes="updateVersion.modalContent"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {submitLogin} from '../../api/index'
import updateVersion from '../../utils/updateVersion'
import JSEncrypt from '../../static/js/jsencrypt.min.js'

export default {
  mixins:[updateVersion],
  data() {
    return {
      timeCount:0,
      noClick:true,
      publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC2zCyUYSD0pNrbtaYdvGfHfWoRV+fo/2N9O2PLLz/jZvMkigkq4eAq4JO+Ek0wDHI9WxP6iTSLYCHhIOs9CQTPvyldJFm8riZtQZlBTD8Plkb3rjrgwTqbBi3w3+HKYdkSvGFXJIdSOPbpXnj5BzN8vlVaybs24R/vpUzG9178lwIDAQAB',
      form: {
        userName: '',
        userPwd: ''
      }
    }
  },
  onLoad() {
    this.fnUpdateVersion(false)
  },
  methods: {
    updateToolPath(){
      var that = this
      that.timeCount ++;
      setTimeout(function () {
        that.timeCount = 0;
      }, 2000)
      if(that.timeCount == 10){
        uni.navigateTo({
          url: '/pages/login/updateTool/forget',
        });
      }
    },
    async fnLogin() {

    if (!this.form.userName) {
      uni.showToast({
        icon: 'none',
        title: '请输入用户名',
        duration: 2000
      });
      return;
    }
    // if(!uni.$u.test.mobile(this.form.userName)){
    //   uni.showToast({
    //     icon: 'none',
    //     title: '手机号格式不正确',
    //     duration: 2000
    //   });
    //   return;
    // }
    if (!this.form.userPwd) {
      uni.showToast({
        title: '密码不能为空',
        icon: 'none',
        duration: 2000
      });
      return;
    }
    var jsencrypt = new JSEncrypt()
    jsencrypt.setPublicKey(this.publicKey)
    const keydataVal = jsencrypt.encrypt('qdkjchina' + this.form.userName + ',qd,' + this.form.userPwd)
    let resData = await submitLogin({'KEYDATA':keydataVal});
    await this.$store.dispatch('setUserInfo', resData);
    await this.$store.dispatch('setfilePath', '');
    uni.$u.route({
      url: '/pages/index/index',
      type: 'reLaunch'
    })
    },
  }
}
</script>

<style lang="scss" scoped>
.wui_login {
  background-image: url(/static/bg-login.png);
  background-repeat: no-repeat;
  background-size:100% 100%;
  height:100vh;
  background-color: #058cf5;
  position: relative;
  overflow: hidden;
  .bg_img{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .title{
    color: #fff;
    font-size: 44rpx;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    padding-top: 106rpx;
    padding-left: 46rpx;
    line-height: 1.6;
  }
  .form{
    width: 70%;
    position: absolute;
    top: 49%;
    left: 50%;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx 9%;
    transform: translate(-50%, -50%);
  }
  button{
    margin-top: 40rpx;
	margin-bottom: 60rpx;
    background-color: #0b80e7;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 10rpx;
  }
  ::v-deep{
    .u-button__text{
      font-size: 32rpx !important;
    }
  }
}
</style>