qa-prevention-xgf-app/pages/login/login.vue

<template>
  <view class="wui_login">
    <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>
      <u-button type="primary" text="登 录" custom-style="margin:40rpx 0 20rpx 0"
                @click="$u.debounce(fnLogin, 1000,true)"></u-button>
      <view class="tip">
        <view @click="fnForgotPassword">忘记密码</view>
        <view @click="fnRegister">新用户注册</view>
      </view>
    </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 {
      publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC2zCyUYSD0pNrbtaYdvGfHfWoRV+fo/2N9O2PLLz/jZvMkigkq4eAq4JO+Ek0wDHI9WxP6iTSLYCHhIOs9CQTPvyldJFm8riZtQZlBTD8Plkb3rjrgwTqbBi3w3+HKYdkSvGFXJIdSOPbpXnj5BzN8vlVaybs24R/vpUzG9178lwIDAQAB',
      form: {
        userName: '',
        userPwd: ''
      }
    }
  },
  onLoad() {
    this.fnUpdateVersion(false)
  },
  methods: {
    fnRegister() {
      uni.$u.route({
        url: '/pages/login/register',
      })
    },
    fnForgotPassword() {
      uni.$u.route({
        url: '/pages/login/forgot_password',
      })
    },
    async fnLogin() {
      if (!this.form.userName) {
        uni.$u.toast('请输入用户名')
        return;
      }
      // if(!uni.$u.test.mobile(this.form.userName)){
      //   uni.$u.toast('手机号格式不正确')
      //   return;
      // }
      if (!this.form.userPwd) {
        uni.$u.toast('密码不能为空')
        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});
      // console.log(resData)
      if (resData.PHOTO != '') {
        resData.PHOTO = this.$filePath + resData.PHOTO
      }
      await this.$store.dispatch('setUserInfo', resData);
      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;

  .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%);

    .tip {
      font-size: 24rpx;
      margin-bottom: 40rpx;
      color: #0b80e7;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>