uniapp-yzcj-zlfk/pages/menu/menu.vue

<template>
	<view>
		<view class="margin-top grid col-3 padding-sm">
			<view class="padding-sm" v-for="(item,index) in colorList" :key="index">
				<view class="padding radius text-center shadow-blur" :class="'bg-' + item.name" @click="onItemClick(item)">
					<view class="text-lg">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorList: [{
					title: '质量反馈',
					name: 'red',
					event: 'toList',
				}, {
					title: '退出登录',
					name: 'grey',
					event: 'logout',
				}]
			}
		},
		mounted() {
			//#ifdef MP-WEIXIN
			wx.hideHomeButton() //隐藏微信小程序的返回主页按钮
			//#endif
		},
		onLoad() {
			uni.getStorage({
				key: 'token',
				fail() {
					//从缓存中未获取到token失败时跳转登录界面
					uni.redirectTo({
						url: '../login/login'
					})
				}
			});
		},
		methods: {
			onItemClick(e) {
				if (e.event == undefined) {
					uni.showToast({
						title: '当前菜单项未设置点击事件！',
						icon: 'none'
					})
				} else {
					//触发菜单项的点击事件
					this[e.event]();
				}
			},
			toList() {
				//跳转值质量反馈列表页面
				uni.navigateTo({
					url: "../billlist/billlist"
				});
			},
			logout() {
				//图片已上传至服务器，询问用户是否确定删除
				uni.showModal({
					title: '提示',
					content: '是否确定要退出登录？',
					cancelText: '否',
					confirmText: '是',
					success: result => {
						if (result.confirm) {
							//清空token缓存
							uni.removeStorage({
								key: 'token',
								success: function(res) {
									//清空token缓存后，跳转至登录界面
									uni.redirectTo({
										url: '../login/login'
									})
								},
								fail() {
									//从清空token缓存失败时提示
									uni.showToast({
										title: '退出登录失败，原因是：未能清空token缓存！',
										icon: 'none'
									})
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>