验证码发送组件

mock/user.js

@@ -1,11 +1,7 @@
 
 const tokens = {
-  admin: {
-    token: 'admin-token'
-  },
-  editor: {
-    token: 'editor-token'
-  }
+  '13216698987': 'admin-token',
+  '123456': 'editor-token'
 }
 
 const users = {
@@ -29,8 +25,8 @@ export default [
     url: '/user/login',
     type: 'post',
     response: config => {
-      const { username } = config.body
-      const token = tokens[username]
+      const { phoneNumber } = config.body
+      const token = tokens[phoneNumber]
 
       // mock error
       if (!token) {
@@ -39,10 +35,13 @@ export default [
           message: 'Account and password are incorrect.'
         }
       }
-
+      const info = users[token]
       return {
         code: 200,
-        data: token
+        data: {
+          ...info,
+          token
+        }
       }
     }
   },

src/App.vue

@@ -37,11 +37,10 @@ export default {
   overflow: hidden !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch;
-  background: #f0f0f0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: #f2f2f2;
+  background-color: #fff;
 }
 </style>

src/api/user.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function login (data) {
+  return request({
+    url: '/user/login',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo (token) {
+  return request({
+    url: '/user/info',
+    method: 'get',
+    params: { token }
+  })
+}
+
+export function logout () {
+  return request({
+    url: '/user/logout',
+    method: 'post'
+  })
+}

src/components/VerifyCodeBtn.vue

@@ -0,0 +1,52 @@
+<template>
+  <van-button class="verify-btn"
+              @click="btnClick"
+              size="mini"
+              type="primary"
+              :disabled="!!codeRestTime">
+    {{codeRestTime ? `${codeRestTime}S` : '发送验证码'}}
+  </van-button>
+</template>
+<script>
+import { Button } from 'vant'
+export default {
+  name: 'VerifyCodeBtn',
+  components: {
+    [Button.name]: Button
+  },
+  props: {
+    btnMsg: {
+      type: String,
+      default: '发送验证码'
+    },
+    restTime: {
+      type: Number,
+      default: 30
+    }
+  },
+  data () {
+    return {
+      codeRestTime: 0
+    }
+  },
+  methods: {
+    btnClick () {
+      this.codeRestTime = this.restTime
+      let timer = setInterval(() => {
+        --this.codeRestTime
+        if (!this.codeRestTime) {
+          clearInterval(timer)
+          timer = null
+        }
+      }, 1000)
+      this.$emit('sendVerifyCode')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.verify-btn{
+    padding: 0 5px;
+    min-width: 6.5em;
+  }
+</style>

src/router/user.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import(/* webpackChunkName: "login" */ 'views/user/Login.vue'),
+    meta: {
+      title: '登录'
+      // auth: true,
+      // keepAlive: true
+    }
+  },
+  {
+    path: '/register',
+    name: 'register',
+    component: () => import(/* webpackChunkName: "register" */ 'views/user/Register.vue'),
+    meta: {
+      title: '注册'
+      // auth: true,
+      // keepAlive: true
+    }
+  }
+]

src/store/index.js

@@ -1,9 +1,21 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import test from './modules/test'
+// import test from './modules/test'
+// import user from './modules/user'
 
 Vue.use(Vuex)
 
+const files = require.context('./modules', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+// const store = new Vuex.Store({
+//   modules
+// })
+
 export default new Vuex.Store({
   state: {
     msg: 'hello vuex',
@@ -29,9 +41,7 @@ export default new Vuex.Store({
   actions: {
 
   },
-  modules: {
-    test
-  }
+  modules
 })
 
 /*

src/store/modules/user.js

@@ -0,0 +1,55 @@
+import { login } from 'api/user'
+import { Toast } from 'vant'
+
+const LOGIN = 'LOGIN'// 获取用户信息
+
+export default {
+  namespaced: true,
+  state: {
+    token: localStorage.getItem('token') || '',
+    user: JSON.parse(localStorage.getItem('userDate')) || {}
+  },
+  mutations: {
+
+    [LOGIN] (state, data) {
+      let userDate = data.data
+      state.token = userDate.token
+      state.user = userDate
+      localStorage.setItem('token', userDate.token)
+      localStorage.setItem('userDate', JSON.stringify(userDate))
+    }
+
+  },
+  actions: {
+    async login (state, data) {
+      try {
+        let res = await login({
+          phoneNumber: data.phoneNumber,
+          password: data.password
+        })
+        state.commit(LOGIN, res)
+        Toast({
+          message: '登录成功',
+          position: 'middle',
+          duration: 2000
+        })
+        setTimeout(() => {
+          const redirect = data.$route.query.redirect || '/'
+          data.$router.replace({
+            path: redirect
+          })
+        }, 3000)
+      } catch (error) {
+      }
+    }
+  },
+  getters: {
+    token (state) {
+      return state.token
+    },
+    user (state) {
+      console.log('state', state)
+      return state.user
+    }
+  }
+}

src/utils/validate.js

@@ -0,0 +1,87 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal (path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername (str) {
+  const validMap = ['admin', 'editor']
+  return validMap.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL (url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase (str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase (str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets (str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail (email) {
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString (str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray (arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}