演示

pages/sys/user/mine.vue

@@ -26,7 +26,7 @@
 					<image v-if="!item.extra" class="mine-list-arrow" src="/static/ic_arrow_gray.webp" />
 				</view>
 			</view>
-			<button class="logout-btn">退出登录</button>
+			<button class="logout-btn" @click="logout">退出登录</button>
 		</view>
 	</view>
 </template>
@@ -35,10 +35,10 @@
 	export default {
 		name: 'Mine',
 		data() {
-			return {
-				userInfo:{
-					nickname: '',
-					phone:''
+			return {
+				userInfo:{
+					nickname: '',
+					phone:''
 				},
 				list: [{
 						icon: '/static/ic_mine_info.png',
@@ -76,8 +76,8 @@
 				]
 			}
 		},
-		onLoad() {
-			this.userInfo.nickname =this.vuex_user.nickName
+		onLoad() {
+			this.userInfo.nickname =this.vuex_user.nickName
 			this.userInfo.phone = this.vuex_user.phonenumber
 		},
 		methods: {
@@ -111,6 +111,14 @@
 						url: '/pages/sys/user/myRecord/myRecord'
 					});
 				}
+			},
+			logout() {
+				// 清除用户信息并返回登录页
+				this.$u.vuex('vuex_user', {});
+				this.$u.vuex('vuex_token', '');
+				uni.redirectTo({
+					url: '/pages/sys/login/login'
+				});
 			}
 		}
 	}