rongxin.dashboard/src/views/app/login.vue

<template>
    <div class="home_wrapper">
      <div class="focus_head">
        <div class="title">
          <p>Hello</p>
          <p>欢迎登录资源清查</p>
        </div>
      </div>

      <div style="position:relative;">
        <van-form @submit="handleLogin">
          <div class="login_from">
            <van-field
            v-model="formData.username"
            placeholder="请输入手机号/账号"
            left-icon="contact-o"
            :rules="[{ required: true, message:''  }]"
            />
            <van-field
              v-model="formData.password"
              type="password"
              left-icon="edit"
              style="margin-top: 20px"
              placeholder="请输入密码"
              :rules="[{ required: true, message:''  }]"
            />
            <div style="display: flex;width: 90%;margin: 20px auto 0;">
              <van-field
                v-model="formData.code"
                left-icon="shield-o"
                center
                clearable
                placeholder="图形验证码"
              />
              <div style="border-radius: 100vh;width: 120px;margin-left: 20px;overflow: hidden;flex-shrink: 0;">
                <img style="width: 120px;display: block;transform: scale(1.1);" :src="codeUrl" @click="getCode" />
              </div>
            </div>
            <div style="display: flex;width: 90%;margin: 20px auto 0;">
              <van-checkbox v-model="formData.rememberMe" shape="square">记住密码</van-checkbox>
            </div>
          </div>
          <div style="margin: 0px 16px 16px;border-radius: 100vh;overflow: hidden;">
              <van-button
                class="btn"
                color="linear-gradient(to right, #53E4A5, #24DBDB)"
                round
                block
                type="info"
                native-type="submit"
                :loading="loading"
              >登录</van-button>
          </div>

        </van-form>
      </div>

      <p class="copy">{{this.$store.getters.technicalSupport == "" ? "中农融信（北京）科技股份有限公司" : this.$store.getters.technicalSupport}}</p>
    </div>
</template>

<script>
  import { getCodeImg, getSmsCode } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from "../../utils/jsencrypt";
  //引用wx sdk
  // import wx from "weixin-js-sdk";
  export default {
    name: "appLogin",
    data() {
      return {
        formData: {
          username: "", //账号
          password: "", //密码
          // username:'',
          // password:'',
          code: null, //图片验证码
          uuid: null, //识别uuid
          mobile: null, //手机号
          smsCode: null, //短信验证码
          rememberMe:false
        },
        loading: false,
        codeUrl: "", //验证码
        isSmsLogin: false, //是否手机验证码
        computeTime: 0,
        height:0,
        show:true
      };
    },
    created() {
      this.getCode();
      this.height = document.body.clientHeight
      this.getCookie();
      //调用微信公众号方法
      // wx.config({
      //     debug: true, // 开启调试模式,
      //     appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
      //     timestamp: res.timestamp, // 必填，生成签名的时间戳
      //     nonceStr: res.nonceStr, // 必填，生成签名的随机串
      //     signature: res.signature,// 必填，签名，见附录1
      //     jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      //   });
      //分享要用encodeURIComponent()方法
    },
    methods: {
      showPassword(){
        this.show = !this.show;
      },
      getCode() {
        getCodeImg().then((res) => {
          this.formData.uuid = res.uuid;
          this.codeUrl = "data:image/gif;base64," + res.img;
        });
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get("rememberMe");
        this.formData = {
          username: username === undefined ? this.formData.username : username,
          password:
            password === undefined ? this.formData.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        };
      },
      getSmsCode() {
        if (!this.computeTime) {
          let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (!myreg.test(this.formData.mobile)) {
            this.$dialog.alert({
              message: '手机号格式不正确',
            });
            return false;
          }
          getSmsCode(this.formData.mobile).then((res) => {
            if (res.code === 200) {
              this.$dialog.alert({
                message: '验证码已发送',
              });
              this.loginForm.uuid = res.uuid;
              this.computeTime = 60;
              this.timer = setInterval(() => {
                this.computeTime--;
                if (this.computeTime <= 0) {
                  clearInterval(this.timer);
                }
              }, 1000);
            }
          });
        }
      },
      handleLogin(values) {
          if (this.formData.rememberMe) {
            Cookies.set("username", this.formData.username, { expires: 30 });
            Cookies.set("password", encrypt(this.formData.password), { expires: 30 });
            Cookies.set("rememberMe", this.formData.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          //账号密码登录
          if (this.formData.username == "") {
            this.$dialog.alert({
              message: '账号不能为空',
            });
            return false;
          } else if (this.formData.password == "") {
            this.$dialog.alert({
              message: '密码不能为空',
            });
            return false;
          } else if (!this.formData.code) {
            this.$dialog.alert({
              message: '图片验证码不能为空',
            });
            return false;
          }
          this.$store
            .dispatch("Login", this.formData)
            .then(() => {
              this.$router.push({ name: 'appIndex' || "/" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .van-checkbox__label{
    color: #24DBDB;
  }
.home_wrapper{
    width: 100vw;
    min-height: 100vh;
    background: #ffffff url('../../assets/images/app/login_bg.png') no-repeat center top;
    background-size: 100% auto;
    .focus_head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8vh 0 0 3vw;
      .title{
        color: #06101C;
        font-size: 4.5vh;
        p{
          margin-bottom: 1vh;
        }
        p:nth-child(1){
          font-weight: bold;
        }
        p:nth-child(2){
          font-size: 3vh;
        }
      }
    }
    .login_from{
        width: 94%;
        background: #ffffff;
        background-size: 100% 100%;
        margin: 30PX auto 0;
        padding:20px 0px 50px;
        border-radius: 20PX 20PX 0 0;
        ::v-deep.van-cell{
          background: #eaeef6;
          border-radius: 100vh;
          width: 90%;
          margin: 0 auto;
        }
    }
  .copy{
    text-align: center;
    color: #999999;
    margin-top: 20vh;
  }
}

</style>