vist_go_uniApp/pages/tabbar/my.vue

<template>

	<!-- 个人信息 -->
	<view class="page-container">
		<!-- 背景图片 -->

		<image class="bg-image " src="@/static/images/bg.png" mode="aspectFill"></image>
		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 访客信息表单 -->
			<view class="visitor-form" @tap="goLogin">
				<view v-if="isLogin">
					<view class="form-item">
						<text class="label">姓名</text>
						<text class="value">{{user.nickName || '-'}}</text>
					</view>
					<view class="form-item">
						<text class="label">手机号</text>
						<text class="value">{{user.phonenumber || '-'}}</text>
					</view>
					<view class="form-item">
						<text class="label">公司名称</text>
						<text class="value">{{user.dept && user.dept.deptName || '-'}}</text>
					</view>
					<view class="form-item">
						<text class="label">部门</text>
						<text class="value">{{user.dept && user.dept.deptName || '-'}}</text>
					</view>
				</view>
				<view v-else class="login-container">
					<view class="login-prompt">
						<text class="login-title">欢迎使用知己访客</text>
						<text class="login-subtitle">登录后可使用更多功能</text>
					</view>
					<view class="login-button" @tap="goLogin">
						<text class="login-text">点击登录</text>
						<text class="login-arrow">></text>
					</view>
				</view>
			</view>
			<view v-if="isLogin" class="edit-button" @tap="goUserDetail">
				<text class="edit-text">编辑</text>
			</view>

			<!-- 退出登录按钮 -->
			<view v-if="isLogin" class="logout-button" @tap="handlerLogout">
				<text class="logout-text">退出登录</text>
			</view>

			<!-- 功能菜单 -->

		</view>

		<uni-popup ref="checkLoginDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="继续浏览" confirmText="确认" title="提示" content="体验更多功能,请先登录"
				@confirm="goLogin()"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUserInfo,
	} from '../../config/api';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import store from '@/store';
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue'
	import {
		shareImg
	} from '@/common/config.js'
	export default {
		data() {
			return {
				user: {}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'access_token', 'refresh_token'])
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
		},
		// 微信小程序分享配置
		onShareAppMessage() {
			return {
				title: `邀请您加入知己访客`,
				path: `/pages/index/index`,
				imageUrl: shareImg // 分享图片，需要添加
			}
		},
		onShareTimeline(res) {
			let that = this;
			let shareInfo = store.state.vuex_shareInfo;
			let query = shareInfo.query;
			//携带当前页面资源ID参数
			let currentPage = getCurrentPages()[getCurrentPages().length - 1];
			let options = currentPage.options;
			if (JSON.stringify(options) != '{}' && options.id) {
				query += `&id=${options.id}`;
			}

			return {
				title: shareInfo.title,
				query: query,
				imageUrl: shareImg,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},
		methods: {
			...mapActions(['logout', 'setToken', 'setUserInfo']),

			// async detail() {
			// 	const data = await memberDetail()
			// 	if (data.code == 200) {
			// 		this.user = data.data
			// 		uni.setStorageSync('user', this.user)
			// 	}
			// },

			async getUserInfo() {
				const user = uni.getStorageSync('user');
				if (user) {
					this.user = user;
				}
			},



			// 登录处理
			goLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pagesA/public/login'
					});
				} else {
					this.$route('/pagesA/public/login');
				}
			},
			// 跳转用户信息
			goUserDetail() {
				uni.navigateTo({
					url: '/pagesA/user/index'
				});
			},





			// 退出登录
			handlerLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除缓存
							uni.removeStorageSync('access_token');
							uni.removeStorageSync('user');
							// 调用vuex的logout方法
							this.logout();
							uni.showToast({
								title: '退出成功',
								icon: 'success'
							});
							// 刷新当前页面
							this.user = {};
						}
					}
				});
			}

		},
	}
</script>

<style>
	/* 页面容器 */
	.page-container {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	/* 背景图片 */
	.bg-image {
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		z-index: 0;
	}

	/* 内容区域 */
	.content-area {
		position: relative;
		z-index: 1;
		padding: 32rpx;
	}

	/* 访客信息表单 */
	.visitor-form {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		display: flex;
		align-items: center;
		min-height: 120rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		width: 140rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	/* 未登录状态样式 */
	.login-container {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40rpx;
	}

	.login-prompt {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
	}

	.login-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.login-subtitle {
		font-size: 28rpx;
		color: #999999;
	}

	.login-button {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, #FF5B05 0%, #FF8E3C 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 91, 5, 0.2);
	}

	.login-text {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}

	.login-arrow {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 8rpx;
	}

	.edit-button {
		margin: 80rpx 32rpx 0;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #FF5B05;
		border-radius: 44rpx;
	}

	.edit-text {
		color: #FF5B05;
		font-size: 32rpx;
	}

	.logout-button {
		margin: 30rpx 32rpx 0;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FF4748;
		border-radius: 44rpx;
	}

	.logout-text {
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>