精简代码&优化逻辑

nxTemp/store/modules/user.js

@@ -14,20 +14,17 @@ export const state = {
 }
 
 export const actions = {
-	async setUserData({
-		state,
-		commit
-	}, data) {
+	async setUserData({state,commit}, data) {
 		commit('setStateAttr', {
 			key: 'userInfo',
 			val: data
 		})
-		uni.setStorageSync('userInfo', data);
+		uni.setStorageSync('userInfo', data);
+		state.token = data.token
+		uni.setStorageSync('token', data.token);
 	},
 	// 登录过期 重新登录
-	reLogin({
-		commit
-	}, info) {
+	reLogin({commit}, info) {
 		commit('setStateAttr', {
 			key: 'token',
 			val: ''
@@ -37,7 +34,27 @@ export const actions = {
 		router.push({
 			path: '/pages/login/login'
 		});
-	}
+	},
+	//预留,已将token更新整合到setUserData,后面可能有单独更新token的必要
+	setUserToken({commit},token){
+		commit('setStateAttr', {
+			key: 'token',
+			val: token
+		})
+		uni.setStorageSync("token", token);
+	},
+	//清空登录信息
+	logoutUser({commit}){
+		commit('setStateAttr', {
+			key: 'token',
+			val: ''
+		})
+		uni.setStorageSync("token", '');
+		uni.setStorageSync("userInfo", '');
+		// router.push({
+		// 	path: '/pages/index/index'
+		// });
+	},
 }
 
 export const mutations = {

nxTemp/utils/tools.js

@@ -31,6 +31,30 @@ export default {
 	},
 	
 	/**
+	* @description: 封装弹窗交互
+	* @param {String} msg 提示信息
+	* @param {Function} succ 点确认执行函数
+	* @return {Promise} 
+	*/
+	showModal(msg,succ){
+		let that = this
+		return new Promise((rs,rj)=>{
+			uni.showModal({
+			    title: '温馨提示',
+			    content: msg,
+			    success: function (res) {
+			        if (res.confirm) {
+						succ()
+						rs(true)
+			        } else if (res.cancel) {
+						that.showNone("已取消")
+						rj(false)
+			        }
+			    }
+			});
+		})
+	},
+	/**
 	* @description: 弹窗封装
 	* @param {String} msg
 	* @return: {*}

pages/index/index.vue

@@ -4,7 +4,7 @@
 		<view class="login-box flex_col flex_start">
 			<image class="bg" src="../../static/images/index/index_bg.png" mode="aspectFit"></image>
 			
-			<view class="login-info flex_col" v-if="login">
+			<view class="login-info flex_col" v-if="hasLogin">
 				<text>{{userInfo.mobile||"-"}}</text>
 				<text>您好!</text>
 			</view>
@@ -20,11 +20,11 @@
 		
 		<view class="item flex_row flex_start bg-white padding solid-bottom" @click="clickEvent">
 			<image src="../../static/images/index/index_cup.png" mode=""></image>
-			<view class="text-m text-left">活动赛事{{hasLogin}}+{{userInfo.mobile}}</view>
+			<view class="text-m text-left">活动赛事</view>
 			<image src="../../static/images/index/arrow_right.png" mode=""></image>
 		</view>
 		
-		<view class="item flex_row flex_start bg-white padding solid-bottom" v-if="login" @click="login=!login">
+		<view class="item flex_row flex_start bg-white padding solid-bottom" v-if="hasLogin" @click="logout">
 			<image src="../../static/images/index/index_logout.png" mode=""></image>
 			<view class="text-m text-left" >退出登录</view>
 			<image src="../../static/images/index/arrow_right.png" mode=""></image>
@@ -43,9 +43,6 @@
 		computed:{
 			...mapState(['userInfo']),
 			...mapGetters(['hasLogin']),
-			// hasLogin(){
-			// 	return this.$store.getters.hasLogin
-			// }
 		},
 		onLoad(parms) {
 			
@@ -54,26 +51,16 @@
 			
 		},
 		methods: {
-			...mapActions(['getUserInfo']),
+			...mapActions(['getUserInfo','logoutUser']),
 			jumpPage(name){
 				this.$Router.push({name:name})
-				// this.$Router.pushTab('/pages/login/login')
 			},
-			clickEvent(){
-				let that = this
-				if(this.login)this.jumpPage('eventList');
-				else {
-					uni.showModal({
-					    title: '提示',
-					    content: '需要登录后才能查看,是否跳转去登录界面?',
-					    success: function (res) {
-					        if (res.confirm) {
-								that.jumpPage('login');
-					        } else if (res.cancel) {
-					        }
-					    }
-					});
-				}
+			async clickEvent(){
+				if(this.hasLogin)this.jumpPage('eventList');
+				else await this.$tools.showModal("该功能需要登录后才能查看,是否跳转去登录界面?",()=>{this.jumpPage('login')})
+			},
+			async logout(){
+				await this.$tools.showModal("真的要退出登录?",this.logoutUser)
 			},
 		}
 	}

pages/login/login.vue

@@ -50,7 +50,8 @@
 	//没有挂载全局而按需引用接口,可以更清楚知道当前page所用接口
 	import {
 		postLogin,postSendSMS,wechatGetPhoneNumber
-	} from "@/nxTemp/apis/userAPI.js"
+	} from "@/nxTemp/apis/userAPI.js"
+	import {mapActions} from 'vuex'
 	export default {
 		data() {
 			return {
@@ -71,7 +72,8 @@
 
 			};
 		},
-		methods: {
+		methods: {
+			...mapActions(["setUserData"]),
 			bindLogin() {
 				if (this.login.mobile.length != 11) {
 					return this.$tools.showNone("请输入正确的手机号");}
@@ -79,7 +81,7 @@
 					return this.$tools.showNone("请输入正确的验证码");}
 				postLogin(this.login).then(res => {
 					this.$tools.showNone("登录成功");
-					this.$store.dispatch('setUserData', res);
+					this.setUserData(res)
 					this.$Router.replace({name:"index"})
 				});
 			},