114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<!-- 我的页：引入 uview-plus 组件重构个人中心菜单 -->
|
||
<template>
|
||
<view class="page page-base">
|
||
<up-navbar title="我的" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
|
||
|
||
<view class="user-card" @click="goLogin">
|
||
<up-avatar size="58" text="U" bg-color="#35c48f" />
|
||
<view class="user-main">
|
||
<text class="user-name">{{ userName }}</text>
|
||
<text class="user-tip">{{ loginTip }}</text>
|
||
</view>
|
||
<up-icon name="arrow-right" size="14" color="#b5b9c0" />
|
||
</view>
|
||
|
||
<up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
|
||
<up-cell title="设备配置" is-link @click="goConfig" />
|
||
<up-cell title="分享的设备" is-link />
|
||
<up-cell title="场所管理" is-link />
|
||
<up-cell title="接警人管理" is-link />
|
||
<up-cell title="手机号" :value="phoneText" is-link />
|
||
<up-cell title="语音广播" is-link />
|
||
<up-cell title="当前版本" value="2.8.44" />
|
||
<up-cell title="退出登录" @click="logout" />
|
||
</up-cell-group>
|
||
</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 lang="scss" scoped>
|
||
@import '@/styles/common.css';
|
||
|
||
.page {
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
.user-card {
|
||
margin: 24rpx;
|
||
min-height: 180rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 28rpx;
|
||
}
|
||
|
||
.user-main {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.user-name {
|
||
display: block;
|
||
font-size: 42rpx;
|
||
color: #2a2d33;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.user-tip {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
color: #9ea1a6;
|
||
font-size: 28rpx;
|
||
}
|
||
</style>
|