nsgk_mobile/src/views/homesteadLogin.vue

<template>
  <div class="app-container" style="overflow:auto;">
    <div style="width:100%;max-width:500px;margin:0 auto;">
      <div class="title">
        <img  width="150" height="150" style="display: block;margin-right: 10px;margin: 20px auto;" src="../assets/images/housesteadSurvey/logo.png" alt="">
        <p style="text-align:center;font-size:40px;">农村宅基地调查</p>
      </div>
          <van-form>
            <div style="width: 90%;
            max-widht:462px;
            border-radius: 45px;
            box-shadow: 2px 10px 10px 0px rgba(125,125,125,0.16);padding: 10px 30px; margin:40px 20px; ">
            <van-field
              v-model="formData.username"
              placeholder="请输入账号"
              left-icon="manager"
              color="#bfbfbf"
              input-align="center"
              :rules="[{ required: true, message:''  }]"
            />
            </div>
            <div style="width: 90%;
            max-widht:462px;
              border-radius: 45px;
              box-shadow: 2px 10px 10px 0px rgba(125,125,125,0.16);padding: 10px 30px; margin:40px 20px;  ">
            <van-field
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              left-icon="lock"
              color="#bfbfbf"
              input-align="center"
              :rules="[{ required: true, message:''  }]"
            />
            </div>
            <div style="width: 90%;
            max-widht:462px;
              border-radius: 45px;
              box-shadow: 2px 10px 10px 0px rgba(125,125,125,0.16);padding: 10px 30px; margin:40px 20px 10px; " class="codeDiv">
            <van-field
              v-model="formData.code"
              center
              clearable
              input-align="center"
              placeholder="图形验证码"
            >
              <template #label>
                <img style="width: 90px" :src="codeUrl" @click="getCode"  />
              </template>
            </van-field>
            </div>
            <van-checkbox style="margin-bottom: 10px;float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
            <div style="margin: 10px 5px 5px;padding:10px">
              <van-button block round size="large" :color="formData.username!=''&&formData.password!=''?'#7AC943':'#e2e2e2'" :disabled="formData.username==''||formData.password==''" native-type="submit" @click="handleLogin">登录</van-button>
            </div>
          </van-form>
    </div>
    <van-popup v-model="showKeyboard" :style="{ height: '100%',width:'100%' }" >
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="showPopup"
      />
      <div style="padding: 20px">
        <h1>输入短信验证码</h1>
        <h3 style="color: #878787">验证码已发送至{{(formData.mobile+"").substr(0,3) + "****" + (formData.mobile+"").substr(7)}}，请在下方输入框内输入4位数字验证码</h3>
      </div>
      <van-password-input
        :value="smsCodeValue"
        :length="4"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="smsCodeValue"
        :show="showKeyboard"
        theme="custom"
        close-button-text="完成"
      />
    </van-popup>
  </div>
</template>
<style scoped>
  .app-container{
    background: #fff;
    height: 100vh;
  }
  .title{
    padding-top: 20%;
    width: 88%;
    margin: 0 auto;
  }
  .van-tab--active{
    font-size: .6rem;
    font-weight: bold;
  }
  .van-tabs__line{
    background:#1D6FE9;
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 0.07rem;
    bottom: 0.3rem;
  }
  .van-tabs__nav{
    padding:0
  }
  .van-tab{
    display: inline-block;
    flex: inherit;
    margin-left: 30px;
    line-height: .8rem;
  }
  .van-tab__text--ellipsis {
    overflow: auto;
  }
  .van-password-input{
    width: 50%;
    margin: 0 auto;
  }
  [class*=van-hairline]::after{
    border:none;
  }
  .van-password-input__security li{
    margin: 0 10px;
    border-bottom: 3px solid black;
  }
  .registerSmsBtn{
    color: rgb(29, 111, 233);
    font-size: 0.34rem;

  }
</style>
<script>
import { getCodeImg, getSmsCode ,getRegisterSmsCode,registerCheck,registerOn} 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: "homesteadLogin",
  data() {
    return {
      showMessage:false,
      smsCodeValue:"",
      showKeyboard:false,
      formData: {
        username: "", //账号
        password: "", //密码
        code: null, //图片验证码
        uuid: null, //识别uuid
        mobile: null, //手机号
        smsCode: null, //短信验证码
        memberName:null, //身份信息
        idcard:null, //身份号码
        rememberMe:false
      },
      loading: false,
      codeUrl: "", //验证码
      isSmsLogin: false, //是否手机验证码
      computeTime: 0,
      active:1
    };
  },
  created() {
    this.getCode();
    this.getCookie();
    this.reset();
  },
  methods: {
    reset(){

    },
    showPopup(){
      this.showKeyboard = !this.showKeyboard
    },
    showMessagePop(){
      this.showMessage = !this.showMessage
    },
    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 : Cookies.get("username"),
        password:
          password === undefined ? this.formData.password : decrypt(Cookies.get("password")),
        rememberMe: rememberMe === undefined ? false : Boolean(Cookies.get("rememberMe")),
      };
    },
    getSmsCode() {
      if (this.formData.code == "") {
        this.$dialog.alert({
          message: '图片验证码不能为空',
        });
        return false;
      }
      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.showKeyboard = !this.showKeyboard;
            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.username == "") {
          this.$dialog.alert({
              message: '账号不能为空',
          });
          return false;
        } else if (this.formData.password == "") {
          this.$dialog.alert({
              message: '密码不能为空',
          });
          return false;
        }
        // 记住密码
      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");
      }
        this.$store
          .dispatch("Login", this.formData)
          .then(() => {
            this.$router.push({ path: "/homesteadSurvey/index" }).catch(() => {});
          })
          .catch((error) => {
            this.loading = false;
            this.getCode();
            this.formData.code = null
          });
    },
    getRegisterSmsCode(){
       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;
      }else if (this.formData.code == "") {
        this.$dialog.alert({
            message: '图片验证码不能为空',
        });
        return false;
      }
      if (this.active==2) {
        let formObj = {
          code :this.formData.code,
          mobile:this.formData.mobile,
          uuid:this.formData.uuid
        }
        getRegisterSmsCode(formObj).then((res) => {
          console.log(res)
          console.log(res.code == 200)
          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);
          }
        }).catch((res)=>{
          if(res=='Error: 验证码已失效'){
            this.getCode()
            this.formData.code = null
          }
        });
      }
      }
    },
    registerSubmit(){

      //注册
      if (this.formData.memberName == "") {
        this.$dialog.alert({
            message: '姓名不能为空',
        });
        return false;
      } else if (this.formData.idcard == "") {
        this.$dialog.alert({
            message: '身份证号不能为空',
        });
        return false;
      } else if (this.formData.mobile == "") {
        this.$dialog.alert({
            message: '手机号码不能为空',
        });
        return false;
      }else if (this.formData.smsCode == "") {
        this.$dialog.alert({
            message: '短信验证码不能为空',
        });
        return false;
      }
      //registerCheck,registerOn
      console.log(this.formData)
      registerCheck(this.formData).then((res)=>{
        if(res.code == 200){
          registerOn(this.formData).then((res)=>{
            if(res.code == 200){
              //
              this.$dialog.alert({
                  message: '您的初始密码：'+res.password,
              }).then(() => {
                  this.$router.push({ path: "/homesteadSurvey/index" }).catch(() => {});
              });
            }
          })
        }
      })

    }
  },
};
</script>
<style scoped lang="scss">
  /deep/  .codeDiv .van-field .van-cell__title{
    width: 3.0em!important;
  }
</style>