登录注册模块...

assets/modules/account/login.vue

@@ -8,7 +8,7 @@
  el-input( placeholder="输入密码", type="password" v-model="password" )
  template(slot="prepend")
  i.fa.fa-lock
- a.account-submit(href="javascript:void(0);") 登录
+ a.account-submit(href="javascript:void(0);", @click="doLogin") 登录
  div.account-dec
  router-link(:to="{ path: 'register'}") 注册账号
  a(href="javascript:void(0);") 忘记密码
@@ -17,7 +17,7 @@
 <script>
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-import { Input } from 'element-ui'
+import { Input, Message } from 'element-ui'
 
 // 引入组件
 Vue.use(Input)
@@ -48,7 +48,16 @@ export default {
  },
  ...mapActions([
  'getJournalList'
- ])
+ ]),
+ doLogin(){
+ if(this.email === ''){
+ return Message({ message: "邮箱不为空！", type: 'error', duration: 2000 });
+ }
+ if(!/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(this.email)){
+ return Message({ message: "邮箱格式错误了！", type: 'error', duration: 2000 });
+ }
+ //异步请求
+ }
  },
  components: {
  }

assets/modules/account/register.vue

@@ -16,14 +16,14 @@
  el-input( placeholder="再次输入登录密码", type="password" v-model="repassword" )
  template(slot="prepend")
  i.fa.fa-lock
-
- a.account-submit(href="javascript:void(0);") 注册
+ a.account-submit(href="javascript:void(0);", @click="doRegister") 注册
+ p.agreement-tip 注册即代表您同意吾记的<a href="javascript:void(0);">用户条款</a>
 </template>
 
 <script>
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-import { Input } from 'element-ui'
+import { Input, Message} from 'element-ui'
 
 // 引入组件
 Vue.use(Input)
@@ -56,7 +56,22 @@ export default {
  },
  ...mapActions([
  'getJournalList'
- ])
+ ]),
+ doRegister(){
+ if(this.email === ''){
+ return Message({ message: "邮箱不为空！", type: 'error', duration: 2000 });
+ }
+ if(!/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(this.email)){
+ return Message({ message: "邮箱格式错误了！", type: 'error', duration: 2000 });
+ } 
+ if(this.password === ''){
+ return Message({ message: "密码不为空！", type: 'error', duration: 2000 });
+ } 
+ if(this.password !== this.repassword){
+ return Message({ message: "前后密码不一致！", type: 'error', duration: 2000 });
+ } 
+ //异步请求
+ }
  },
  components: {
  }
@@ -73,5 +88,11 @@ export default {
  width: 14px;
  text-align: center;
  }
+ .agreement-tip{
+ margin-top: 20px;
+ font-size: 13px;
+ color: #999;
+ text-align: center;
+ }
  }
 </style>

assets/page/account/index/index.vue

@@ -11,32 +11,54 @@
  span.navs-slider-bar(:class="{active: !isLogin}")
  transition(name="fade", mode="out-in")
  router-view
+ div.download-app-container
+ a.download-app(href="javascript:;;", @click="showQR", v-text="text")
 </template>
 
 <script>
 import particlesJS from 'particlesJS'
 import particles from '../particles.json'
+const title = {
+ register : '吾记 - 吾记网页版在线写日记 － 注册',
+ login: '吾记 - 吾记网页版在线写日记 － 登录'
+}
 export default {
  name: 'account',
  data () {
  return {
- isLogin: true
+ isLogin: true,
+ text: '下载吾记',
+ isShowQR: false
  }
  },
  mounted(){
  particlesJS('particles-js', particles);
  },
+ methods:{
+ showQR(){
+ this.isShowQR = !this.isShowQR;
+ }
+ },
  components: {
  },
  watch: {
- '$route' (to, from) {
- if(to.name === "register"){
- this.isLogin = false;
- }
- if(to.name === "login"){
- this.isLogin = true;
+ '$route' (to, from) {
+ if(to.name === "register"){
+ this.isLogin = false;
+ }
+ if(to.name === "login"){
+ this.isLogin = true;
+ }
+ document.title = title[to.name];
+ this.isShowQR = false;
+ },
+ 'isShowQR' (bol){
+ if(bol){
+ this.text = '关闭二维码';
+ }else{
+ this.text = '下载吾记';
+ }
  }
- }
  }
 }
 </script>