vue mintui手机淘宝登录页面

路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import login from '../components/PoP.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta:{
      needLogin: true
     }
  },
  {
    path: '/',
    name: 'c',
    component: login,
    meta:{
      needLogin: false
     }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})
//路由守卫
router.beforeEach((to, from, next)=>{
  //路由中设置的needLogin字段就在to当中 
  if(window.sessionStorage.data){
   console.log(window.sessionStorage);
   // console.log(to.path) //每次跳转的路径
   if(to.path === '/'){
    //登录状态下 访问login.vue页面 会跳到index.vue
    next({path: '/home'});
   }else{
    next();
   }
  }else{
   // 如果没有session ,访问任何页面。都会进入到 登录页
   if (to.path === '/') { // 如果是登录页面的话，直接next() -->解决注销后的循环执行bug
    next();
   } else { // 否则 跳转到登录页面
    next({ path: '/' });
   }
  }
})
export default router

登录界面PoP.vue

<template>
  <div id="mydiv">
    <!-- 提醒栏 -->
    <br>
    <br>
    <br>
    <div class="imgDiv">
      <img
        src="../assets/tblogo.png"
        alt=""
        class="logo"
      >
    </div>
    <!-- 操作区域 -->
    <div class="operateDiv">
      <!-- 账号 -->
      <mt-field
        :placeholder="accountPlaceholder"
        v-model="uname"
        class="myinput"
      ></mt-field>
      <!-- 密码 -->
      <mt-field
        v-show="isUserAccount"
        placeholder="密码"
        type="password"
        v-model="upass"
        class="myinput"
      ></mt-field>
      <!-- 短信验证码 -->
      <mt-field
        v-show="!isUserAccount"
        placeholder="校验码"
        v-model="getCode"
        class="myinput"
      >
        <span class="getCode">获取短信验证码</span>
      </mt-field>
      <!-- 免费注册块 -->
      <div class="registerDiv">
        <span>免费注册</span>
        <span v-show="forgetPassShowroNot">忘记密码</span>
      </div>
      <!-- 登录和切换登录方式块 -->
      <div>
        <mt-button
          size="large"
          class="mybutton"
          @click.native="login"
        >登录</mt-button>
        <mt-button
          size="large"
          type="primary"
          class="mybutton"
          @click.native="changeLoginMethod"
        >{{defaultAccountText}}</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-badge",
  data() {
    return {
      // 默认的用户名
      uname: "",
      // 默认的用户密码
      upass: "",
      // 是否显示忘记密码
      forgetPassShowroNot: true,
      // 默认的用户名默认值
      accountPlaceholder: "账号",
      // 是否是用户账户登录，默认是 true
      isUserAccount: true,
      // 默认短信验证码的值
      getCode: "",
      // 切换登录方式按钮默认显示的文本
      defaultAccountText: "短信验证码登录"
    };
  },
  methods: {

    // 登录显示模态框 调用 mint-ui 的 messagebox
    login(){
   const self = this;
   var res =[{
   "id": '1',
   "usertitle": "管理员",
   "username": "admin",
   "password": "123456",
   "token": "@date(T)",
  },
  {
   "id": '2',
   "usertitle": "超级管理员",
   "username": "root",
   "password": "root",
   "token": "@date(T)",
  }
 ],
      len = res.length,
      userNameArr= [],
      passWordArr= [],
      ses= window.sessionStorage; 
    // 拿到所有的username
    for(var i=0; i<len; i++){
     userNameArr.push(res[i].username);
     passWordArr.push(res[i].password);
    }
    console.log(userNameArr, passWordArr);
    if(userNameArr.indexOf(this.uname) === -1){
      alert('账号不存在！');
    }else{
     var index = userNameArr.indexOf(this.uname);
     if(passWordArr[index] === this.upass){
      // 把token放在sessionStorage中
      ses.setItem('data', res[index].token);
      this.$parent.$data.userTitle = res[index].usertitle;
      //验证成功进入首页
      console.log(this.$parent);
      
      alert('登录成功！');
      //跳转到首页
      this.$router.push('/home');
      // console.log(this.$router);
     }else{
      alert('密码错误！')
     }
    }
  }
    ,
    // 切换登录方式
    changeLoginMethod() {
      if (this.isUserAccount) {
        this.defaultAccountText = "账户密码登录";
        this.accountPlaceholder = "请输入手机号码";
        this.forgetPassShowroNot = false;
      } else {
        this.defaultAccountText = "短信验证码登录";
        this.accountPlaceholder = "账号";
        this.forgetPassShowroNot = true;
      }
      this.isUserAccount = !this.isUserAccount;
    }
  }
};
</script>

<style lang="css">
.page-badge-container {
  padding: 0 10px;
}

/* 你需要登录才能继续仿问的布局样式 */
.tipslogin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  background: rgb(238, 238, 238);
  padding-left: 20px;
  padding-right: 20px;
}
/* 半闭样式 */
.closeSpan {
  color: rgb(153, 153, 153);
}
/* 图片 logo 根样式 */
.imgDiv {
  display: flex;
  justify-content: center;
}
/* 图片样式 */
.logo {
  width: 80px;
  height: 80px;
}
/* 上面的线隐藏 */
.mint-cell-wrapper {
  background-image: linear-gradient(180deg, #fff, #fff 0%, transparent 0%);
}
/* 输入框底边框样式 */
.mint-cell-wrapper {
  border: 1px solid #495949;
}

/* 修改按钮按钮下的默认颜色 */
.mint-button::after {
  background-color: transparent;
}
/* 操作区域的样式*/
.operateDiv {
  padding-left: 20px;
  padding-right: 20px;
}
/* 输入框边距 */
.myinput {
  margin-top: 30px;
}
/* 获取短信验证码字体颜色 */
.getCode {
  color: #ff5000;
  font-size: 17px;
  border-left: 1px solid #b5b5b5;
  padding-left: 7px;
}
/* 免费注册根样式 */
.registerDiv {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 免费注册字体样式*/
.registerDiv span {
  color: #555;
}
/* 登录短信验证按钮边距 */
.mybutton {
  margin-top: 20px;
}
/* 修改默认 butoon 的样式 达到和淘宝登录一样 */
.mint-button--default {
  background: linear-gradient(to right, #2dbcfe, 5%, #1e2822);
  border-radius: 25px;
  color: #fff !important;
  height: 48px;
}
/* 同上 */
.mint-button--primary {
  border-radius: 25px;
  height: 48px;
  background: linear-gradient(to right, #2dbcfe, 5%, #6e7b55);
  border: 1px solid #ff5000;
  color: #ff5000;
}
/* 修改默认弹框的样式，达到基本和淘宝的效果一样 */
.mint-msgbox {
  border-radius: 8px;
  width: 70%;
}
/* 弹出框内容样式 */
.mint-msgbox-content {
  min-height: 50px;
  font-size: 18px;
}
/* 弹出内容居中 */
.mint-msgbox-message {
  line-height: 50px;
}
/* 弹出框确定按钮样式 */
.mint-msgbox-btns {
  height: 60px;
}
/* 弹出框确定按钮字体 */
.mint-msgbox-confirm {
  color: #f40;
}
</style>

主页面Home.vue

<template>
  <div>
    <h1>home</h1>
    <mt-button
      type="danger"
      @click="loginOut"
    >注销登录</mt-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import pop from "@/components/PoP.vue";
import { MessageBox } from "mint-ui";

export default {
  name: "Home",
  components: {
    HelloWorld,
    pop
  },
  data() {
    return {
      list: [],
      loading: false
    };
  },
  methods: {
    loginOut() {
      // 注销后 清除session信息 ，并返回登录页
      window.sessionStorage.removeItem("data");
      MessageBox("", "注销登录成功");
      this.$router.push("/");
    },
    openToast() {
      MessageBox.prompt(" hello", "请输入姓名").then(({ value }) => {
        if (value) {
          MessageBox.alert(`你的名字是 ${value}`, "输入成功");
        }
      });
    }
  }
};
</script>