houserent-front/pages/user/index.vue

<template>
	<view class="u-page">
		<!-- 已登录状态 -->
		<view v-if="isLoggedIn" class="se-pt-30 se-pb-60 se-px-40 se-bgc-green se-c-white se-pos">
			<view class="se-flex">
				<image @click="onHead" :src="userInfo.headImage" class="se-br-p-50 se-bgc-f9 se-w-120 se-h-120" mode="">
				</image>
				<view class="se-ml-20 se-flex se-flex-v-sa se-flex-ai-fs">
					<view class="se-flex" style="align-items: center;">
						<text class="se-fw-6 se-fs-30">{{userInfo.nickName?userInfo.nickName:'暂无昵称'}}</text>

						<!-- 会员状态 -->
						<view class="" v-if="vipInfo.title" style="display: flex;background-color: #fff;
						color: #0f0;
						font-size: 24rpx;
						align-items: center;
						border-radius: 20rpx;
						padding: 4rpx 10rpx;">
							{{vipInfo.title}}
						</view>
					</view>
					<view class="se-fs-24 se-display-ib" v-if="userInfo.phone">
						<text>手机号:</text>
						<text class="se-ml-20">{{userInfo.phone}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 未登录状态 -->
		<view v-else class="se-pt-30 se-pb-60 se-px-40 se-bgc-green se-c-white se-pos">
			<view class="se-flex se-flex-v-c se-flex-h-c se-py-60">
				<view class="se-ta-c">
					<image class="se-w-120 se-h-120 se-br-p-50 se-bgc-f9" src="@/static/image/header.png" mode=""></image>
					<view class="se-mt-20 se-fs-30 se-fw-6">未登录</view>
					<view class="se-mt-10 se-fs-24">登录后享受更多服务</view>
					<view @click="goToLogin" class="se-mt-30 se-br-40 se-bgc-white se-c-green se-py-15 se-px-40 se-fs-28 se-fw-6">
						立即登录
					</view>
				</view>
			</view>
		</view>
			<!-- <view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-82 se-br-10 se-bgc-white se-py-30 se-px-20"
				style="bottom: -90rpx;">
				<view class="se-flex se-flex-v-c  se-flex-1">
					<image src="@/static/image/46892@2x.png" class="se-a-80" mode=""></image>
					<view @click="onNavigateTo()" class=" se-ta-c se-fw-6 se-br-30 se-mt-10 se-py-5 se-px-22 se-c-black se-fs-22 ">
						我的钱包
					</view>
				</view>
				<view class="se-flex se-flex-v-c se-flex-1 ">
					<image src="@/static/image/47077@2x.png" class="se-a-80" mode=""></image>
					<view @click="onNavigateTo()" class=" se-ta-c se-fw-6 se-br-30 se-mt-10 se-py-5 se-px-22 se-c-black se-fs-22 ">
						我的预约
					</view>
				</view>
				<view class="se-flex se-flex-v-c se-flex-1 ">
					<image src="@/static/image/47065@2x.png" class="se-a-80" mode=""></image>
					<view @click="onNavigateTo()" class=" se-ta-c se-fw-6 se-br-30 se-mt-10 se-py-5 se-px-22 se-c-black se-fs-22 ">
						我的收藏
					</view>
				</view>
				<view class="se-flex se-flex-v-c se-flex-1 ">
					<image src="@/static/image/46896@2x.png" class="se-a-80" mode=""></image>
					<view @click="onNavigateTo()" class=" se-ta-c se-fw-6 se-br-30 se-mt-10 se-py-5 se-px-22 se-c-black se-fs-22 ">
						需求发布
					</view>
				</view>
			</view> -->

		<view class="se-m-30 se-mt-30 se-pl-30 se-pr-20 se-br-20 se-bgc-white">
			<!-- 需要登录的功能 -->
			<template v-if="isLoggedIn">
				<!-- <view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerAccount">
					<view class="se-flex se-flex-ai-c">
						<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
						<text class="se-ml-20 se-fs-24 se-fw-5">经纪人账号</text>
					</view>
					<view class="se-flex se-flex-ai-c">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onLandlord">
					<view class="se-flex se-flex-ai-c">
						<image class="se-a-30" src="@/static/image/home4734.png" mode=""></image>
						<text class="se-ml-20 se-fs-24 se-fw-5">房东中心</text>
					</view>
					<view class="se-flex se-flex-ai-c">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onBrokerCenter">
					<view class="se-flex se-flex-ai-c">
						<image class="se-a-30" src="@/static/image/47100.png" mode=""></image>
						<text class="se-ml-20 se-fs-24 se-fw-5">经纪人中心</text>
					</view>
					<view class="se-flex se-flex-ai-c">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view> -->
			</template>
			
			<!-- 通用功能 -->
			<view class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-b" @click="onCustomerService">
				<view class="se-flex se-flex-ai-c">
					<image class="se-a-30" src="@/static/image/user49384.png" mode=""></image>
					<text class="se-ml-20 se-fs-24 se-fw-5">在线客服</text>
				</view>
				<view class="se-flex se-flex-ai-c">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="se-py-30 se-px-20 se-flex se-flex-h-sb" @click="onVersion">
				<view class="se-flex se-flex-ai-c">
					<image class="se-a-30" src="@/static/image/47186.png" mode=""></image>
					<text class="se-ml-20 se-fs-24 se-fw-5">关于我们</text>
				</view>
				<view class="se-flex se-flex-ai-c">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			
			<!-- 退出登录按钮 - 仅登录时显示 -->
			<view v-if="isLoggedIn" class="se-py-30 se-px-20 se-flex se-flex-h-sb se-b-t" @click="onLogOut">
				<view class="se-flex se-flex-ai-c">
					<text class="se-fs-24 se-fw-5">退出登录</text>
				</view>
				<view class="se-flex se-flex-ai-c">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configList from '@/mixins/configList.js'
	export default {
		mixins: [configList],
		data() {
			return {
				token: '',
			}
		},
		computed: {
			// 检查是否已登录
			isLoggedIn() {
				return this.token && this.token.length > 0
			}
		},
		onLoad() {
			this.checkLoginStatus()
		},
		onShow() {
			this.checkLoginStatus()
			if (this.isLoggedIn) {
				this.$store.commit('getUserInfo')
			}
		},
		methods: {
			// 检查登录状态
			checkLoginStatus() {
				this.token = uni.getStorageSync('token') || ''
			},
			// 去登录页面
			goToLogin() {
				uni.navigateTo({
					url: "/pages/auth/index"
				})
			},
			// 点击头像
			onHead() {
				if (!this.isLoggedIn) {
					this.goToLogin()
					return
				}
				uni.navigateTo({
					url: "/pages/login/index?back=" + 1
				})
			},
			// 需要登录验证的方法
			checkLoginAndNavigate(url, title = '该功能') {
				if (!this.isLoggedIn) {
					uni.showToast({
						title: title + '需要登录',
						icon: 'none'
					})
					setTimeout(() => {
						this.goToLogin()
					}, 1500)
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			openMemberPage() {
				this.checkLoginAndNavigate("/pages_subpack/member/index", "会员中心")
			},
			onLandlord() {
				this.checkLoginAndNavigate("/pages_subpack/landlord-center/index", "房东中心")
			},
			onBrokerCenter() {
				this.checkLoginAndNavigate("/pages_subpack/broker-center/index", "经纪人中心")
			},
			onVersion() {
				uni.navigateTo({
					url: "/pages_subpack/version/index"
				})
			},
			onBrokerAccount() {
				this.checkLoginAndNavigate("/pages_subpack/broker-account/index", "经纪人账号")
			},
			onLogOut() {
				if (!this.isLoggedIn) {
					uni.showToast({
						title: '您还未登录',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: "温馨提示",
					content: "确定退出当前登录",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						console.info(res)
						if (res.confirm == true) {
							uni.removeStorageSync("userInfo")
							uni.removeStorageSync("token")
							uni.removeStorageSync("sessionKey")
							uni.removeStorageSync("vipInfo")
							// 清除本地状态
							this.token = ''
							this.userInfo = {}
							this.vipInfo = {}
							uni.showToast({
								title: '退出成功',
								icon: 'success'
							})
							// 可以选择跳转到登录页或刷新当前页
							// uni.navigateTo({
							// 	url: "/pages/auth/index"
							// })
						}
					}
				})
			},
			onCustomerService() {
				let that = this
				let obj = that.$utils.getkeyContent('phone')
				if (uni.canIUse('makePhoneCall')) {
					uni.makePhoneCall({
						phoneNumber: this.configList.phone, // 电话号码
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
				} else {
					console.log('你的设备不支持拨打电话功能');
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5 !important;
	}

	.se-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 10rpx;
		padding-bottom: 4rpx;
	}
</style>