nsgk_mobile/src/views/login.vue

<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="登录"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <div class="title">
      <p class="title_one">PROPERTY RIGHT</p>
      <p class="title_two">TRANSACTION</p>
      <p class="title_three">农村产权交易平台</p>
    </div>
    <div class="login-main">
      <ul class="head_nav clear">
        <li @click="isSmsLogin = false" :class="{ active: !isSmsLogin }">
          账号登录
        </li>
        <li @click="isSmsLogin = true" :class="{ active: isSmsLogin }">
          验证码登录
        </li>
      </ul>

      <div class="form_main">
        <van-form @submit="handleLogin">
          <div v-show="!isSmsLogin">
            <van-field
              v-model="formData.username"
              name="username"
              label="用户名"
              placeholder="用户名"
            />
            <van-field
              v-model="formData.password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
            />
            <van-field
              v-model="code"
              center
              clearable
              label="验证码"
              placeholder="图形验证码"

            >
              <template #button>
                <img class="code-img" :src="codeUrl" @click="getCode" />
              </template>
            </van-field>
            <van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
<!--            <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>-->
            <div class="clear"></div>
          </div>
          <div v-show="isSmsLogin">
            <van-field
              v-model="formData.mobile"
              label="手机号"
              placeholder="请输入手机号码"
            />
            <van-field
              v-model="mobileCode"
              center
              clearable
              label="验证码"
              placeholder="图形验证码"
            >
              <template #button>
                <img class="code-img" :src="codeUrlPhone" @click="getCodePhone" />
              </template>
            </van-field>
            <van-field
              v-model="formData.smsCode"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  native-type="button"
                  @click="getSmsCode"
                  >{{
                    computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
                  }}</van-button
                >
              </template>
            </van-field>
          </div>
          <div class="form-submit">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              :loading="loading"
              >登录</van-button
            >
          </div>
        </van-form>
      </div>
    </div>

    <div class="reveal-modal-con">
      <div class="dd_txt">
        <router-link to="register/index">注册账户</router-link>
      </div>
<!--      <div class="other-login">-->
<!--        <p class="desc">—— 更多登录方式 ——</p>-->
<!--        <p class="icon-other-logins">-->
<!--          <router-link class="wx" to="/"></router-link>-->
<!--          <router-link class="rlsb" to="/"></router-link>-->
<!--        </p>-->
<!--      </div>-->
    </div>
  </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: "login",
  data() {
    return {
      showMessage:false,
      formData: {
        // username: "admin", //账号
        // password: "admin123", //密码
        username:'',
        password:'',
        code: null, //图片验证码
        uuid: null, //识别uuid
        mobile: null, //手机号
        smsCode: null, //短信验证码
        rememberMe:false
      },
      loading: false,
      codeUrl: "", //验证码
      codeUrlPhone: "", //验证码
      mobileCode:null,
      code:null,
      isSmsLogin: false, //是否手机验证码
      computeTime: 0,
      height:0,
      uuid:'',
      uuidPhone:'',
    };
  },
  created() {
    this.getCode();
    this.getCodePhone();
    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: {
    getCode() {
      getCodeImg().then((res) => {
        this.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    getCodePhone() {
      getCodeImg().then((res) => {
        this.uuidPhone = res.uuid;
        this.codeUrlPhone = "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() {
      console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
      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,this.mobileCode,this.formData.uuid).then((res) => {
          if (res.code === 200) {
             this.$dialog.alert({
              message: '验证码已发送',
            });
            this.formData.uuid = res.uuid;
            this.computeTime = 60;
            this.timer = setInterval(() => {
              this.computeTime--;
              if (this.computeTime <= 0) {
                clearInterval(this.timer);
              }
            }, 1000);
          }
        });
      }
    },
    handleLogin(values) {
      console.log(this.isSmsLogin)
      if (this.isSmsLogin==true) {
        //短信登录
        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!myreg.test(this.formData.mobile)) {
          this.$dialog.alert({
              message: '手机号格式不正确',
            });
          return false;
        } else if (this.formData.smsCode == "") {
          this.$dialog.alert({
              message: '短信验证码不能为空',
            });
          return false;
        } else if (this.mobileCode == "") {
          this.$dialog.alert({
              message: '验证码不能为空',
            });
          return false;
        }
        this.loading = true;
        this.formData.code = this.mobileCode;
        this.formData.uuid = this.uuidPhone
        this.$store
          .dispatch("SmsLogin", this.formData)
          .then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        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.code == "") {
          this.$dialog.alert({
              message: '图片验证码不能为空',
          });
          return false;
        }
        this.formData.code = this.code;
        this.formData.uuid = this.uuid;
        this.$store
          .dispatch("Login", this.formData)
          .then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
          })
          .catch(() => {
            this.loading = false;
            this.getCode();
          });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.title{
  padding-top: 20%;
  width: 88%;
  margin: 0 auto;
}
.title_one{
  color: #666666;
  font-size: 0.4rem;
}
.title_two{
  color: #007e72;
  font-size: 0.6rem;
}
.title_three{
  color: #FFF;
  font-size: 0.8rem;
}
.app-container {
  background: url("../../static/images/index/registerBg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  .focus-logo {
    width: 310px;
    margin: 0 auto 40px;
    padding-top: 60px;
    img {
      width: 100%;
    }
    .describe{
      text-align: center;
      font-size: 34px;
      padding:10px 0 0;
      color: #666;
    }
  }

  .login-main{
    width: 95%;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #ddd;
    padding-bottom:40px;
    margin-top: 0.4rem;
  }
  .head_nav {
    li {
      width: 50%;
      float: left;
      height: 90px;
      line-height: 90px;
      text-align: center;
      font-size: 30px;
      border-bottom: 2px solid #ddd;
      &.active {
        background: #fff;
        border-bottom: 2px solid #fff;
        color: #2386ee;
      }
      &:last-child {
        border-left: 2px solid #ddd;
      }
    }
    background: #f5f5f5;
  }
  .form_main {
    padding-top: 20px;
    .form-submit {
      margin: 40px 40px 0;
    }
    .code-img {
      width: 220px;
    }
  }
  .reveal-modal-con {
    margin: 30px 40px 0;
    .dd_txt {
      text-align: center;
      font-size: 28px;
      a {
        color: #FFF;
      }
    }
    .other-login {
      text-align: center;
      .desc {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #666;
        letter-spacing: 0;
        line-height: 30px;
        height: 30px;
        margin-top: 40px;
        opacity: 0.7;
      }
      .icon-other-logins {
        margin-top: 26px;
        a {
          &.wx {
            background-image: url("~@/assets/images/icon/wx.svg");
          }
          &.rlsb {
            background-image: url("~@/assets/images/icon/rlsb.svg");
          }
          position: relative;
          display: inline-block;
          margin: 0 12px;
          width: 60px;
          height: 60px;
          // border-radius: 50%;
          text-indent: -9999px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: left top;
        }
      }
    }
  }
}
</style>