179 lines
3.8 KiB
Vue
179 lines
3.8 KiB
Vue
<!-- 我的页：展示用户信息、账号入口与设备配置等个人中心菜单 -->
|
||
<template>
|
||
<view class="page page-base">
|
||
<view class="top-nav top-nav-base">
|
||
<view class="title top-nav-title-base">我的</view>
|
||
</view>
|
||
|
||
<view class="user-card" @click="goLogin">
|
||
<view class="avatar"></view>
|
||
<view>
|
||
<text class="user-name">{{ userName }}</text>
|
||
<text class="user-tip">{{ loginTip }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-card">
|
||
<view class="item" @click="goConfig">
|
||
<text class="left">设备配置</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">分享的设备</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">场所管理</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">接警人管理</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">手机号</text>
|
||
<text class="mid">{{ phoneText }}</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">语音广播</text>
|
||
<text class="right">›</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="left">当前版本</text>
|
||
<text class="mid">2.8.44</text>
|
||
</view>
|
||
<view class="item" @click="logout">
|
||
<text class="left">退出登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ROUTES } from '@/constants/routes'
|
||
import { clearAuth, getUser, isLoggedIn, LOGIN_PAGE, redirectToLogin } from '@/utils/auth'
|
||
import { navigateTo } from '@/utils/navigation'
|
||
import { showToast } from '@/utils/toast'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: null
|
||
}
|
||
},
|
||
computed: {
|
||
userName() {
|
||
return this.userInfo?.name || '微信用户'
|
||
},
|
||
phoneText() {
|
||
return this.userInfo?.mobile || '未绑定'
|
||
},
|
||
// 根据登录类型展示不同文案。
|
||
loginTip() {
|
||
return this.userInfo?.loginType === 'mobile' ? '手机号验证码登录' : '微信登录'
|
||
}
|
||
},
|
||
onShow() {
|
||
// 每次回到页面时刷新一次本地缓存用户信息。
|
||
this.userInfo = getUser()
|
||
},
|
||
methods: {
|
||
goConfig() {
|
||
navigateTo(ROUTES.DEVICE_CONFIG)
|
||
},
|
||
// 已登录时不再重复跳转登录页。
|
||
goLogin() {
|
||
if (isLoggedIn()) {
|
||
return
|
||
}
|
||
|
||
navigateTo(LOGIN_PAGE)
|
||
},
|
||
// 退出时清理本地登录态并回到首页。
|
||
logout() {
|
||
clearAuth()
|
||
showToast('已退出登录')
|
||
redirectToLogin(ROUTES.HOME)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '@/styles/common.css';
|
||
|
||
.page {
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.user-card {
|
||
margin: 24rpx;
|
||
min-height: 200rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 34rpx;
|
||
}
|
||
|
||
.avatar {
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
border-radius: 66rpx;
|
||
background: radial-gradient(circle at 35% 35%, #95d347 0 32%, #6ba83a 33% 100%);
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.user-name {
|
||
display: block;
|
||
font-size: 46rpx;
|
||
color: #2a2d33;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.user-tip {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
color: #9ea1a6;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.menu-card {
|
||
margin: 24rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item {
|
||
min-height: 94rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
border-bottom: 1rpx solid #efefef;
|
||
}
|
||
|
||
.item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.left {
|
||
flex: 1;
|
||
font-size: 48rpx;
|
||
color: #2f3135;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mid {
|
||
margin-right: 16rpx;
|
||
color: #9ea1a6;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.right {
|
||
color: #9ea1a6;
|
||
font-size: 54rpx;
|
||
}
|
||
</style>
|