lcny-admin-mobile-vue/src/pages/login/login.vue

<template>
  <view class="login-page bg-page">
    <view class="img-a relative h-full">
      <view class="t-b"> 隆昌农业大数据监控平台 </view>
      <view class="absolute top-0 left-0 w-full h-full">
        <image class="w-full h-full" src="/static/head.png"></image>
      </view>
    </view>
    <view class="login-view" style="">
      <view class="t-login">
        <form class="cl">
          <view class="t-a">
            <text class="txt">账号</text>
            <input
              type="text"
              name="username"
              placeholder="请输入您的账号"
              v-model="username"
            />
          </view>
          <view class="t-a">
            <text class="txt">密码</text>
            <input
              type="password"
              name="password"
              maxlength="18"
              placeholder="请输入您的密码"
              v-model="password"
            />
          </view>
          <view class="t-a">
            <text class="txt">验证码</text>
            <view class="flex flex-1">
              <input
                name="identifyCode"
                class="flex-1"
                maxlength="18"
                placeholder="请输入验证码"
                v-model="identifyCode"
              />
              <Security
                @getCode="refreshCode"
                :securityCode="identify"
              ></Security>
            </view>
          </view>
          <u-button type="primary" shape="circle" @click="login">登 录</u-button>
          <!-- <view class="reg" @tap="reg()">注 册</view> -->
        </form>
      </view>
    </view>
  </view>
</template>
<script>
import {
  getStorageSync,
  setStorageSync,
  setStorage,
  toast,
} from '@/com/utils.js'
import jwt from '@/api/jwt.js'
import md5 from 'js-md5'
import Security from '@/components/jp-verification-literalness/jp-verification-literalness.vue'
export default {
  components: {
    Security,
  },
  data() {
    return {
      identify: '',
      username: '', //手机号码
      password: '', //密码
      identifyCode: '',
    }
  },
  onLoad() {
    this.makeCode()
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },

    refreshCode() {
      this.identifyCode = ''
      this.makeCode()
    },

    makeCode(l = 4) {
      const identifyCodes = '1234567890abcdef'
      let code = ''

      for (let i = 0; i < l; i++) {
        code += identifyCodes[this.randomNum(0, identifyCodes.length)]
      }
      this.identify = code
    },
    //当前登录按钮操作
    login() {
      if (!this.username) {
        uni.showToast({ title: '请输入您的账号', icon: 'none' })
        return
      }

      if (!this.password) {
        uni.showToast({ title: '请输入您的密码', icon: 'none' })
        return
      }
      if (!this.identifyCode) {
        uni.showToast({ title: '请输入验证码', icon: 'none' })
        return
      }
      if(this.identifyCode != this.identify){
        uni.showToast({ title: '验证码不正确', icon: 'none' })
        return
      }
      let params = {
        username: this.username,
        password: md5(this.password),
        identifyCode: this.identifyCode,
      }

      this.$http
        .post('/api/auth/login', params, {
          custom: {
            auth: false,
          },
        })
        .then(({ data }) => {
          console.log(data)
          if (data.code == 200) {
            let _data = data.data
            let _info = _data.info
            console.log(_data)
            jwt.setAccessToken(_data.token)
            this.$store.dispatch('getUserInfo')
            uni.switchTab({
              url: '/pages/index/index',
            })
            uni.showToast({ title: '登录成功！', icon: 'none' })
          }
        })
        .catch(() => {
          uni.showToast({ title: '登录失败！', icon: 'none' })
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.login-page {
  background-color: #fff;
  .txt {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
  }
  .img-a {
    width: 100%;
    height: 450rpx;
    // background-image: url(../../static/head.png);
    background-size: 100%;
  }
  .reg {
    font-size: 28rpx;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50rpx;
    font-weight: bold;
    background: #f5f6fa;
    color: #000000;
    text-align: center;
    margin-top: 30rpx;
  }

  .login-view {
    width: 100%;
    position: relative;
    margin-top: -120rpx;
    background-color: #ffffff;
    border-radius: 8% 8% 0% 0;
  }

  .t-login {
    width: 600rpx;
    margin: 0 auto;
    font-size: 28rpx;
    padding-top: 80rpx;
  }



  .t-login input {
    height: 90rpx;
    line-height: 90rpx;
    margin-bottom: 50rpx;
    border-bottom: 1px solid #e9e9e9;
    font-size: 28rpx;
  }

  .t-login .t-a {
    position: relative;
  }

  .t-b {
    text-align: left;
    font-size: 42rpx;
    color: #ffffff;
    padding: 130rpx 0 0 70rpx;
    font-weight: bold;
    line-height: 70rpx;
  }

  .t-login .t-c {
    position: absolute;
    right: 22rpx;
    top: 22rpx;
    background: #5677fc;
    color: #fff;
    font-size: 24rpx;
    border-radius: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    padding: 0 25rpx;
  }

  .t-login .t-d {
    text-align: center;
    color: #999;
    margin: 80rpx 0;
  }

  .t-login .t-e {
    text-align: center;
    width: 250rpx;
    margin: 80rpx auto 0;
  }

  .t-login .t-g {
    float: left;
    width: 50%;
  }

  .t-login .t-e image {
    width: 50rpx;
    height: 50rpx;
  }

  .t-login .t-f {
    text-align: center;
    margin: 150rpx 0 0 0;
    color: #666;
  }

  .t-login .t-f text {
    margin-left: 20rpx;
    color: #aaaaaa;
    font-size: 27rpx;
  }

  .t-login .uni-input-placeholder {
    color: #aeaeae;
  }

  .cl {
    zoom: 1;
  }

  .cl:after {
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    content: '\20';
  }
}
</style>