cpdm_manage/src/views/login.vue

<template>
  <div class="login-wrapper">
    <!-- <div class="login-title">
            <img src="../assets/img/login/35.png" alt=""/>
        </div> -->

    <div class="login-main">
      <div class="main-left">
        <img src="../assets/img/login/36.png" alt="" />
      </div>
      <div class="main-right">
        <div class="login-content">
          <div v-if="isPhoneLogin" class="login-phone">
            <div class="login-phone-content">
              <div class="phone-content-left">
                <img src="../assets/img/login/37.png" alt="" />
              </div>
              <div class="phone-content-right">
                <input
                  v-model="phone"
                  type="number"
                  maxlength="11"
                  placeholder="请输入手机号"
                />
                <span
                  class="get-code"
                  :class="{ disable: disabled }"
                  @click="getVcode"
                  >{{ vText }}</span
                >
              </div>
            </div>
            <div class="login-phone-code">
              <div class="phone-code-left">
                <img src="../assets/img/login/40.png" alt="" />
              </div>
              <div class="phone-code-right">
                <input
                  v-model="vCode"
                  type="text"
                  maxlength="6"
                  placeholder="请输入6位验证码"
                />
              </div>
            </div>
          </div>

          <div v-else class="login-account">
            <div class="login-account-content">
              <div class="account-content-left">
                <img src="../assets/img/login/39.png" alt="" />
              </div>
              <div class="account-content-right">
                <input
                  v-model="account"
                  type="text"
                  maxlength="11"
                  placeholder="请输入用户名或手机号"
                />
              </div>
            </div>
            <div class="login-account-code">
              <div class="account-code-left">
                <img src="../assets/img/login/38.png" alt="" />
              </div>
              <div class="account-code-right">
                <input
                  v-model="password"
                  type="password"
                  placeholder="请输入登录密码"
                />
              </div>
            </div>
          </div>
          <el-radio class='login-radio' v-model="role" label="user">普通用户</el-radio>
          <el-radio class='login-radio' v-model="role" label="admin">管理员&nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
          <!-- <el-radio v-model="role" label="user">普通用户</el-radio>
          <el-radio v-model="role" label="admin">管理员</el-radio> -->
          <!-- <div class="switch-login" @click="switchLogin">
            <img :src="isPhoneLogin ? phoneIcon : accountIcon" alt="" />
          </div> -->

          <div class="login">
            <img @click="login()" src="../assets/img/login/50.png" alt="" />
          </div>

          <div class="register">
            <img
              @click.stop="showSignBox"
              src="../assets/img/login/51.png"
              alt=""
            />
            <img
              @click.stop="showForgetBox"
              v-if="!isPhoneLogin"
              src="../assets/img/login/52.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>

    <!--注册账号弹窗-->
    <van-dialog v-model="showSign" title="" :show-confirm-button="false">
      <img
        class="sign-box-close"
        @click="signBoxClose"
        src="../assets/img/login/44.png"
        alt=""
      />

      <div class="sign-box">
        <div class="sign-box-title">
          <img src="../assets/img/login/43.png" alt="" />
        </div>
        <div class="sign-box-account">
          <img src="../assets/img/login/45.png" alt="" />
          <input type="text" v-model="phone" placeholder="请设置您的账号" />
        </div>
        <div class="sign-box-password">
          <img src="../assets/img/login/41.png" alt="" />
          <input
            type="password"
            v-model="password"
            placeholder="请设置您的密码"
          />
        </div>
        <div class="sign-box-sure">
          <img src="../assets/img/login/41.png" alt="" />
          <input
            type="password"
            v-model="repeatPassword"
            placeholder="请确认您的密码"
          />
        </div>
        <div class="sign-submit" @click="register">
          <img src="../assets/img/login/42.png" alt="" />
        </div>
      </div>
    </van-dialog>

    <!--忘记密码弹窗-->
    <van-dialog v-model="showForget" title="" :show-confirm-button="false">
      <img
        class="forget-box-close"
        @click="forgetBoxClose"
        src="../assets/img/login/44.png"
        alt=""
      />

      <div class="forget-box">
        <div class="forget-box-title">
          <img src="../assets/img/login/54.png" alt="" />
        </div>
        <div class="forget-box-password">
          <img src="../assets/img/login/41.png" alt="" />
          <input type="text" placeholder="请设置您的密码" />
        </div>
        <div class="forget-box-sure">
          <img src="../assets/img/login/41.png" alt="" />
          <input type="text" placeholder="请确认您的密码" />
        </div>
        <div class="forget-box-code">
          <div class="forget-box-code-left">
            <img src="../assets/img/login/53.png" alt="" />
            <input type="text" placeholder="请输入您的手机号码" />
            <img class="get-code" src="../assets/img/login/55.png" alt="" />
          </div>
          <div class="forget-box-code-right">
            <input type="text" placeholder="请输入验证码" />
          </div>
        </div>
        <div class="forget-submit">
          <img src="../assets/img/login/56.png" alt="" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import mixinFun from "../mixin/mixinFun";
import { oSessionStorage } from "../utils/utils";

import PhoneIcon from "@/assets/img/login/48.png";
import AccountIcon from "@/assets/img/login/49.png";
var md5 = require("md5");

export default {
  name: "login",
  components: {},
  mixins: [mixinFun],
  data() {
    return {
      role:'user',
      isPhoneLogin: false,
      phoneIcon: PhoneIcon,
      accountIcon: AccountIcon,
      showSign: false, //注册弹窗显示
      showForget: false, //忘记密码弹窗显示
      phone: "", //电话号码
      // checkCode: "",
      account: "", //账号
      password: "", //密码
      repeatPassword: "", //确认密码
      vCode: "", //验证码
      vText: "获取验证码", //倒计时文案
      disabled: false, //验证码按钮禁用
      timer: null,
    };
  },
  created() {},
  mounted() {
    window.screen.orientation.lock("landscape-primary");

    //获取路径上的参数 //注册的时候将参数传过去
    //如果不传则是undefined
    //注册的时候尽量使用一种方式，账号密码的方式，因为一个人同时用两种会当为俩客户。
    //注册信息需要哪些？
    //管理员在哪下载二维码
  },
  activated() {},
  methods: {
    switchLogin() {
      this.isPhoneLogin = !this.isPhoneLogin;
    },
    login() {
      if (this.isPhoneLogin) {
        // 手机号验证码登陆
        if (!this.phone) {
          this.$toast.fail("请输入手机号");
          return;
        } else if (!this.myPhoneReg.test(this.phone)) {
          this.$toast.fail("请输入正确的手机号");
          return;
        } else if (!this.vCode) {
          this.$toast.fail("请输入验证码");
          return;
        }

        //登陆接口调用
        this.$http.post(
          "v1/system/login",
          {
            phone: this.phone,
            password: this.password,
            type: 1,
            authCode: this.vCode,
          },
          (res) => {
            if (res && res.code == 200) {
              oSessionStorage.setItem(
                "userInfo",
                JSON.stringify(res.data.user)
              );
              oSessionStorage.setItem("token", res.data.token);
              this.$router.push({ path: "/home" });
            } else {
              this.$toast.fail(res.msg);
            }
          }
        );
      } else {
        // 账号密码登陆
        if (!this.account) {
          this.$toast.fail("请输入账号");
          return;
        } else if (!this.password) {
          this.$toast.fail("请输入密码");
          return;
        }
        this.goLogin();
      }
    },
    showSignBox() {
      this.showSign = true;
    },
    signBoxClose() {
      this.showSign = false;
    },
    showForgetBox() {
      this.showForget = true;
    },
    forgetBoxClose() {
      this.showForget = false;
    },
    goLogin() {
      this.$http.post(
        "/v1/system/login",
        {
          phone: this.account,
          password: md5(this.password),
          authCode: this.authCode,
          type: 0,
        },
        (res) => {
          if (res && res.code == 200) {
            oSessionStorage.setItem("userInfo", JSON.stringify(res.data.user));
            oSessionStorage.setItem("token", res.data.token);
            //如果类型返回的是0则为普通用户
            //如果类型返回的是1则为管理员用户

            if (res.data.user.roleType === "0") {
              this.$router.push({ path: "/home" });
              // this.$router.push({ path: "/manageMain" });
            } else {
              this.$router.push({ path: "/manageMain" });
            }
          } else {
            this.$toast.fail(res.msg);
          }
        }
      );
    },
    // 获取短信验证码
    getVcode() {
      if (!this.phone) {
        this.$toast("请输入手机号码");
        return;
      } else if (!this.myPhoneReg.test(this.phone)) {
        this.$toast.fail("请输入正确的手机号");
        return;
      }
      this.disabled = true;
      this.$http.get(`v1/system/verificationCode/${this.phone}`, {}, (res) => {
        // this.vCode = res.data;
        if (res && res.code == 200) {
          this.countDown();
          this.$toast("短信验证码已发送到您的手机");
        } else {
          this.disabled = false;
          this.$toast.fail(res.msg);
        }
      });
    },

    // 倒计时
    countDown() {
      let time = 60;
      this.disabled = true;
      this.vText = time + "s";
      this.timer = setInterval(() => {
        if (time <= 0) {
          clearInterval(this.timer);
          this.vText = "重新获取";
          this.disabled = false;
        } else {
          time--;
          this.vText = time + "s";
        }
      }, 1000);
    },

    register() {
      this.$http.post(
        "v1/system/registerUser",
        {
          phone: this.phone,
          password: md5(this.password),
          confirmPassword: md5(this.repeatPassword),
        },
        (res) => {
          if (res && res.code == 200) {
            this.$toast.success(res.msg);
            this.showSign = false;
            // this.$router.push({ path: "/" });
          } else {
            this.$toast.fail(res.msg);
          }
        }
      );
    },
  },
  // beforeRouteEnter(to, from, next){
  //     next(vm => {
  //         if(from.path != "" && from.path != ""){
  //             vm.phone = ""
  //             vm.sms = ""
  //         }
  //     })
  // },
};
</script>
<style scoped>
 .login-radio>>> .el-radio__label {
    font-size: 0.27333rem !important;
  }
</style>
<style lang="less" scoped>
@import "../styles/theme.less";

.login-wrapper {
  max-width: 100%;
  height: 100%;
  background: url(../assets/img/login/46.png) no-repeat center top;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  .login-title {
    position: absolute;
    left: 5px;
    top: 0;
    /*width: 110px;*/
    width: 22vmax;
    img {
      width: 100%;
    }
  }
  .login-main {
    width: 100%;
    height: 100%;
    .flex();
    .flex-direction(row);
    .flex-wrap(nowrap);
    .justify-content(space-around);
    .align-items(center);

    .main-left {
      /*width: 40%;*/
      /*height: 90%;*/
      width: 42vmax;
      height: 90vmin;
      img {
        width: 100%;
      }
    }
    .main-right {
      /*width: 45%;*/
      /*height: 95%;*/
      width: 47vmax;
      height: 95vmin;
      background: url(../assets/img/login/47.png) no-repeat center top;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      position: relative;

      .login-content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 35vmin 10vmax 10vmin 8vmax;
        /*background: #00b5a9;*/
        /*opacity: .5;*/

        .login-phone {
          width: 100%;
          /*background: red;*/

          .login-phone-content,
          .login-phone-code {
            width: 100%;
            /*height: 30px;*/
            height: 10vmin;
            box-sizing: border-box;
            /*padding: 4px;*/
            padding: 1vmin;
            /*background: #2EB2F8;*/
            .flex();
            .flex-direction(row);
            .flex-wrap(nowrap);
            .justify-content(space-between);
            .align-items(center);

            .phone-content-left,
            .phone-code-left {
              width: 25%;
            }
            .phone-content-right,
            .phone-code-right {
              height: 100%;
              width: 74%;
              background: #fff;
              border-radius: 10px;
              box-sizing: border-box;
              padding: 5px;

              input {
                width: 100%;
                height: 100%;
                background: none;
                font-size: 11px;
              }
              input::placeholder {
                font-size: 11px;
              }
              input::-webkit-input-placeholder {
                // chrome、safari私有属性
                font-size: 11px;
              }
              input::-moz-input-placeholder {
                // firefox浏览器私有属性
                font-size: 11px;
              }
              input::-ms-input-placeholder {
                // IE浏览器私有属性
                font-size: 11px;
              }
            }
            .phone-content-right {
              position: relative;
              .get-code {
                display: inline-block;
                width: 45%;
                position: absolute;
                font-size: 8px;
                color: #ff9d5b;
                /*top: 5px;*/
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                background: #fff;
                z-index: 100;
                cursor: pointer;
                border-radius: 5px;
              }
              .disable {
                pointer-events: none;
                /*background: #666;*/
              }
            }
          }
          .login-phone-content {
          }
          .login-phone-code {
          }
        }
        .login-account {
          width: 100%;

          .login-account-content,
          .login-account-code {
            width: 100%;
            /*height: 30px;*/
            height: 10vmin;
            box-sizing: border-box;
            /*padding: 4px;*/
            padding: 1vmin;

            .flex();
            .flex-direction(row);
            .flex-wrap(nowrap);
            .justify-content(space-between);
            .align-items(center);

            .account-content-left,
            .account-code-left {
              width: 25%;
              img {
                width: 70%;
              }
            }
            .account-content-right,
            .account-code-right {
              height: 100%;
              width: 74%;
              background: #fff;
              border-radius: 10px;
              box-sizing: border-box;
              padding: 5px;

              input {
                width: 100%;
                height: 100%;
                background: none;
                font-size: 11px;
              }
              input::placeholder {
                font-size: 11px;
              }
              input::-webkit-input-placeholder {
                // chrome、safari私有属性
                font-size: 11px;
              }
              input::-moz-input-placeholder {
                // firefox浏览器私有属性
                font-size: 11px;
              }
              input::-ms-input-placeholder {
                // IE浏览器私有属性
                font-size: 11px;
              }
            }
          }
        }
        .login-radio{
          margin-top:8px;
          margin-bottom:8px;
        }
        .switch-login {
          .flex();
          .flex-direction(row);
          .flex-wrap(nowrap);
          .justify-content(flex-end);
          .align-items(center);
          box-sizing: border-box;
          padding: 3px;
          img {
            width: 45%;
          }
        }
        .login {
          .flex();
          .flex-direction(row);
          .flex-wrap(nowrap);
          .justify-content(center);
          .align-items(center);
          box-sizing: border-box;
          padding: 4px 0;
          img {
            width: 50%;
          }
        }
        .register {
          .flex();
          .flex-direction(row);
          .flex-wrap(nowrap);
          .justify-content(space-around);
          .align-items(center);
          padding: 2px 0;
          /*box-sizing: border-box;*/
          /*padding: 4px 0;*/
          img {
            width: 25%;
          }
        }
      }
    }
  }
  /*弹窗样式*/
  .van-dialog {
    top: 50%;
    width: 60%;
    height: 85%;
    background: #ffecaf;
    border: 8px solid #ffa920;
    -webkit-border-radius: 30px;
    overflow: unset;
    /deep/.van-dialog__content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
  .sign-box-close {
    position: absolute;
    width: 20px;
    top: -15px;
    right: -30px;
    z-index: 10000;
  }
  .sign-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /*background: #ffecaf;*/
    /*border: 8px solid #ffa920;*/
    /*-webkit-border-radius: 30px;*/
    /*border-radius: 30px;*/
    padding: 3vh 8vh;

    .sign-box-title,
    .sign-box-account,
    .sign-box-password,
    .sign-box-sure,
    .sign-submit {
      .flex();
      .flex-direction(row);
      .flex-wrap(nowrap);
      .align-items(center);
    }
    .sign-box-title {
      .justify-content(center);
      margin-bottom: 5px;
      img {
        width: 15%;
      }
    }
    .sign-box-account,
    .sign-box-password,
    .sign-box-sure {
      .justify-content(space-between);
      box-sizing: border-box;
      height: 10vmin;
      /*padding: 1.6vh 3vh 1.6vh 3vh;*/
      padding: 0 5px;
      background-color: #fff;
      -webkit-border-radius: 30px;
      border-radius: 60px;
      margin-bottom: 10px;
      line-height: 30px;
      box-shadow: 0 4px #ff9758;

      img {
        width: 9%;
      }
      input {
        width: 80%;
        height: 100%;
        background: none;
        font-size: 12px;
      }
      input::placeholder {
        font-size: 12px;
        color: #f7db86;
      }
      input::-webkit-input-placeholder {
        // chrome、safari私有属性
        font-size: 12px;
        color: #f7db86;
      }
      input::-moz-input-placeholder {
        // firefox浏览器私有属性
        font-size: 12px;
        color: #f7db86;
      }
      input::-ms-input-placeholder {
        // IE浏览器私有属性
        font-size: 12px;
        color: #f7db86;
      }
    }
  }

  .forget-box-close {
    position: absolute;
    width: 20px;
    top: -15px;
    right: -30px;
    z-index: 10000;
  }
  .forget-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /*background: #ffecaf;*/
    /*border: 8px solid #ffa920;*/
    /*-webkit-border-radius: 30px;*/
    /*border-radius: 30px;*/
    padding: 3vh 8vh;

    .forget-box-title,
    .forget-box-password,
    .forget-box-sure,
    .forget-submit,
    .forget-box-code {
      .flex();
      .flex-direction(row);
      .flex-wrap(nowrap);
      .align-items(center);
    }
    .forget-box-title {
      .justify-content(center);
      margin-bottom: 5px;
      img {
        width: 30%;
      }
    }
    .forget-box-password,
    .forget-box-sure {
      .justify-content(space-between);
      box-sizing: border-box;
      height: 10vmin;
      /*padding: 1.6vh 3vh 1.6vh 3vh;*/
      padding: 0 5px;
      background-color: #fff;
      -webkit-border-radius: 30px;
      border-radius: 60px;
      margin-bottom: 10px;
      line-height: 30px;
      box-shadow: 0 4px #ff9758;

      img {
        width: 9%;
      }
      input {
        width: 80%;
        height: 100%;
        background: none;
        font-size: 12px;
      }
      input::placeholder {
        font-size: 12px;
        color: #f7db86;
      }
      input::-webkit-input-placeholder {
        // chrome、safari私有属性
        font-size: 12px;
        color: #f7db86;
      }
      input::-moz-input-placeholder {
        // firefox浏览器私有属性
        font-size: 12px;
        color: #f7db86;
      }
      input::-ms-input-placeholder {
        // IE浏览器私有属性
        font-size: 12px;
        color: #f7db86;
      }
    }
    .forget-box-code {
      .justify-content(space-between);

      .forget-box-code-left {
        .flex();
        .flex-direction(row);
        .flex-wrap(nowrap);
        .justify-content(space-between);
        .align-items(center);
        position: relative;
        box-sizing: border-box;
        width: 65%;
        height: 10vmin;
        /*padding: 1.6vh 3vh 1.6vh 3vh;*/
        padding: 0 5px;
        background-color: #fff;
        -webkit-border-radius: 30px;
        border-radius: 60px;
        margin-bottom: 10px;
        line-height: 30px;
        box-shadow: 0 4px #ff9758;

        img {
          width: 12%;
        }
        input {
          width: 80%;
          background: none;
          font-size: 12px;
        }
        input::placeholder {
          font-size: 12px;
          color: #f7db86;
        }
        input::-webkit-input-placeholder {
          // chrome、safari私有属性
          font-size: 12px;
          color: #f7db86;
        }
        input::-moz-input-placeholder {
          // firefox浏览器私有属性
          font-size: 12px;
          color: #f7db86;
        }
        input::-ms-input-placeholder {
          // IE浏览器私有属性
          font-size: 12px;
          color: #f7db86;
        }

        .get-code {
          width: 30%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 5px;
          background: #fff;
          z-index: 10000;
          border-radius: 5px;
        }
      }
      .forget-box-code-right {
        box-sizing: border-box;
        width: 30%;
        height: 10vmin;
        padding: 0 2px;
        background-color: #fff;
        -webkit-border-radius: 30px;
        border-radius: 60px;
        margin-bottom: 10px;
        line-height: 30px;
        box-shadow: 0 4px #ff9758;
        input {
          width: 90%;
          background: none;
          font-size: 12px;
        }
        input::placeholder {
          font-size: 12px;
          color: #f7db86;
        }
        input::-webkit-input-placeholder {
          // chrome、safari私有属性
          font-size: 12px;
          color: #f7db86;
        }
        input::-moz-input-placeholder {
          // firefox浏览器私有属性
          font-size: 12px;
          color: #f7db86;
        }
        input::-ms-input-placeholder {
          // IE浏览器私有属性
          font-size: 12px;
          color: #f7db86;
        }
      }
    }
  }
}
</style>