feat: 设置页面增加个人信息和权限展示
- 删除用户协议和隐私政策菜单项 - 增加小程序获取的个人信息展示（昵称、头像、地区） - 增加小程序已获取权限展示（用户信息、位置信息、相机、相册） - 使用uni.getSetting获取权限状态
This commit is contained in:
H1d3rOne committed
1 parent
a6e5763ffc
commit
8b68b302e5
1 file changed
+170
-8
@@ -11,6 +11,51 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<text class="info-title">个人信息</text>
|
||||
<view class="info-item">
|
||||
<text class="info-label">昵称</text>
|
||||
<text class="info-value">{{ userInfo.nickName || '未授权' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">头像</text>
|
||||
<image v-if="userInfo.avatarUrl" class="info-avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
|
||||
<text v-else class="info-value">未授权</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">地区</text>
|
||||
<text class="info-value">{{ userInfo.city || '未授权' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="permission-card">
|
||||
<text class="permission-title">已获取权限</text>
|
||||
<view class="permission-item">
|
||||
<text class="permission-label">用户信息</text>
|
||||
<text class="permission-status" :class="{ granted: permissions.userInfo }">
|
||||
{{ permissions.userInfo ? '已授权' : '未授权' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="permission-item">
|
||||
<text class="permission-label">位置信息</text>
|
||||
<text class="permission-status" :class="{ granted: permissions.location }">
|
||||
{{ permissions.location ? '已授权' : '未授权' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="permission-item">
|
||||
<text class="permission-label">相机</text>
|
||||
<text class="permission-status" :class="{ granted: permissions.camera }">
|
||||
{{ permissions.camera ? '已授权' : '未授权' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="permission-item">
|
||||
<text class="permission-label">相册</text>
|
||||
<text class="permission-status" :class="{ granted: permissions.album }">
|
||||
{{ permissions.album ? '已授权' : '未授权' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -20,22 +65,47 @@ export default {
|
||||
return {
|
||||
menus: [
|
||||
{ name: '我的账号', icon: '👤', path: '/pages/mine/account' },
|
||||
{ name: '清理缓存', icon: '🗑️', action: 'clearCache' },
|
||||
{ name: '用户协议', icon: '📄', action: 'userAgreement' },
|
||||
{ name: '隐私政策', icon: '🔒', action: 'privacyPolicy' }
|
||||
]
|
||||
{ name: '清理缓存', icon: '🗑️', action: 'clearCache' }
|
||||
],
|
||||
userInfo: {
|
||||
nickName: '',
|
||||
avatarUrl: '',
|
||||
city: ''
|
||||
},
|
||||
permissions: {
|
||||
userInfo: false,
|
||||
location: false,
|
||||
camera: false,
|
||||
album: false
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.loadUserInfo()
|
||||
this.checkPermissions()
|
||||
},
|
||||
methods: {
|
||||
loadUserInfo() {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
if (userInfo) {
|
||||
this.userInfo = JSON.parse(userInfo)
|
||||
}
|
||||
},
|
||||
checkPermissions() {
|
||||
uni.getSetting({
|
||||
success: (res) => {
|
||||
this.permissions.userInfo = res.authSetting['scope.userInfo'] || false
|
||||
this.permissions.location = res.authSetting['scope.userLocation'] || false
|
||||
this.permissions.camera = res.authSetting['scope.camera'] || false
|
||||
this.permissions.album = res.authSetting['scope.writePhotosAlbum'] || false
|
||||
}
|
||||
})
|
||||
},
|
||||
openMenu(item) {
|
||||
if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
} else if (item.action === 'clearCache') {
|
||||
this.clearCache()
|
||||
} else if (item.action === 'userAgreement') {
|
||||
uni.navigateTo({ url: '/pages/mine/agreement?type=user' })
|
||||
} else if (item.action === 'privacyPolicy') {
|
||||
uni.navigateTo({ url: '/pages/mine/agreement?type=privacy' })
|
||||
}
|
||||
},
|
||||
clearCache() {
|
||||
@@ -75,6 +145,7 @@ page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -122,4 +193,95 @@ page {
|
||||
color: #6EE7B7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #065F46;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 2rpx solid #ECFDF5;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 28rpx;
|
||||
color: #065F46;
|
||||
}
|
||||
|
||||
.info-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.permission-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(16, 185, 129, 0.1);
|
||||
border: 2rpx solid rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.permission-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #065F46;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.permission-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 2rpx solid #ECFDF5;
|
||||
}
|
||||
|
||||
.permission-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.permission-label {
|
||||
font-size: 28rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.permission-status {
|
||||
font-size: 26rpx;
|
||||
color: #EF4444;
|
||||
padding: 4rpx 16rpx;
|
||||
background: #FEE2E2;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.permission-status.granted {
|
||||
color: #10B981;
|
||||
background: #D1FAE5;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user