user login state

Author: yafully

package-lock.json

@@ -22,7 +22,8 @@
     "vue-lazyload": "^1.2.6",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.1",
-    "vue2-touch-events": "^1.1.2"
+    "vue2-touch-events": "^1.1.2",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

package.json

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import store from './store'
 //  import fastClick from 'fastclick'
 import VueLazyLoad from 'vue-lazyload'
 import ElementUI from 'element-ui'
@@ -24,6 +25,7 @@ Vue.use(VueLazyLoad, {
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/main.js

@@ -0,0 +1,16 @@
+/**
+ * 
+ * @authors YafullyZhao ([email protected])
+ * @date    2019-02-10 12:24:55
+ */
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state,
+	mutations
+})

src/store/index.js

@@ -0,0 +1,15 @@
+/**
+ * 
+ * @authors YafullyZhao ([email protected])
+ * @date    2019-02-10 12:28:36
+ */
+ export default {
+	changeUser (state, user) {
+		state.user = user
+		try {
+			localStorage.user = user
+		} catch (e) {
+
+		}
+	}
+}

src/store/mutations.js

@@ -0,0 +1,17 @@
+/**
+ * 
+ * @authors YafullyZhao ([email protected])
+ * @date    2019-02-10 12:27:49
+ */
+let defaultUser = 'Guest'
+try {
+	if (localStorage.user) {
+		defaultUser = localStorage.user
+	}
+} catch (e) {
+
+}
+
+export default {
+	user: defaultUser
+}

src/store/state.js

@@ -24,8 +24,8 @@
 		                    	<em class="menuIcon icon_search"></em>
 		                    </a>
 		                </div>
-
-		                <el-dropdown class="menuItem mhide miniAccount">
+						
+		                <el-dropdown class="menuItem mhide miniAccount" v-if="user != 'Guest'">
 		                	<a href="#" class="menuLink"><em class="menuIcon icon_account"></em></a>
 		                	<el-dropdown-menu slot="dropdown">
 		                		<el-dropdown-item>
@@ -49,6 +49,13 @@
 		                	</el-dropdown-menu>	
 		                </el-dropdown>
 
+		                <a href="#" 
+		                class="menuLink" 
+		                v-if="user == 'Guest'" 
+		                 @click="dialogLoginVisible = true">
+		                	<em class="menuIcon icon_account"></em>
+		                </a>
+
 		                <mini-cart></mini-cart>
 
 		            </div>
@@ -145,6 +152,25 @@
 
 		<public-search :searchIn="searchIn" v-on:searchinit="searchToggle"></public-search>
 
+		<el-dialog title="SIGN IN" :visible.sync="dialogLoginVisible" center width="470px">
+		  <el-form :model="form" :rules="rules" :label-position="labelPosition" ref="loginForm">
+		    <el-form-item 
+		    label="Email Address:" 
+		    prop="email"
+		    >
+		      <el-input v-model="form.email" autocomplete="off"></el-input>
+		    </el-form-item>
+		    <el-form-item 
+		    label="Password:" 
+		    prop="password">
+		      <el-input v-model="form.password" autocomplete="off"></el-input>
+		    </el-form-item>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button type="primary" @click="submitForm('loginForm')">Sign In</el-button>
+		  </div>
+		</el-dialog>
+
 	</div>
 </template>
 
@@ -154,6 +180,7 @@ import axios from 'axios'
 import MainMenu from '../menu/MainMenu'
 import MiniCart from '../checkout/minicart/MiniCart'
 import PublicSearch from './Search'
+import { mapState } from 'vuex'
 export default {
   name: 'PublicHeader',
   components: {
@@ -165,11 +192,30 @@ export default {
   	return {
   		menuList: [],
   		menuStatus: null,
-  		searchIn: false
+  		searchIn: false,
+  		dialogLoginVisible: false,
+  		labelPosition: 'top',
+  		form: {
+  			email: '',
+  			password: ''
+  		},
+  		rules: {
+  			email: [
+			  { required: true, message: 'Please enter email address.', trigger: 'blur' },
+		      { type: 'email', message: 'Please enter a valid email address.', trigger: ['blur', 'change'] }
+  			],
+  			password: [
+  			  {required: true, message: 'This is a required filed.', trigger: 'blur'}
+  			]
+  		}
   	}
   },
+	computed: {
+		...mapState(['user'])
+	},
   mounted () {
     this.getMainMenuData()
+    console.log(this.user)
   },
   methods: {
     getMainMenuData () {
@@ -196,7 +242,19 @@ export default {
     	} else {
     		this.searchIn = status
     	}
-    }
+    },
+    //  login valid
+    submitForm (formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+          	this.dialogFormVisible = false
+            alert('submit!')
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+     }
   }
 }
 </script>