319 lines
6.4 KiB
Vue
319 lines
6.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 个人信息标题模块 -->
|
|
<view class="header-module">
|
|
<text class="header-title">个人信息</text>
|
|
</view>
|
|
|
|
<view class="one-module">
|
|
<view class="touXiang">
|
|
<view class="gearOne"><uni-icons type="camera-filled" size="20"></uni-icons></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 账户信息模块 -->
|
|
<view class="info-module">
|
|
<view class="module-item">
|
|
<text class="item-label">昵称</text>
|
|
<text class="item-value">名称</text>
|
|
</view>
|
|
<view class="module-item">
|
|
<text class="item-label">绑定微信号</text>
|
|
<text class="item-value">名称</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 账户安全模块 -->
|
|
<view class="security-module">
|
|
<view class="module-title">账户安全</view>
|
|
<view class="module-item clickable" @tap="handleChangePhone">
|
|
<text class="item-label">修改手机号</text>
|
|
<view class="item-right">
|
|
<text class="arrow">></text>
|
|
</view>
|
|
</view>
|
|
<view class="module-item clickable" @tap="handleChangePassword">
|
|
<text class="item-label">修改密码</text>
|
|
<view class="item-right">
|
|
<text class="arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 设备管理模块 -->
|
|
<view class="device-module">
|
|
<view class="module-title">设备管理</view>
|
|
<view class="module-item clickable" @tap="handleDeviceManage">
|
|
<text class="item-label">设备管理</text>
|
|
<view class="item-right">
|
|
<text class="arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 账号管理模块 -->
|
|
<view class="account-module">
|
|
<view class="module-title">账号管理</view>
|
|
<view class="module-item clickable last-item" @tap="handleCancelAccount">
|
|
<text class="item-label">注销账号</text>
|
|
<view class="item-right">
|
|
<text class="arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 退出登录模块 -->
|
|
<view class="logout-module">
|
|
<view class="logout-btn" @tap="handleLogout">
|
|
<text class="logout-text">退出登录</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部提示模块 -->
|
|
<view class="footer-module">
|
|
<text class="footer-text">这不是我的账号</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
// 修改手机号
|
|
handleChangePhone() {
|
|
uni.showToast({
|
|
title: '跳转到修改手机号页面',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
// 修改密码
|
|
handleChangePassword() {
|
|
uni.showToast({
|
|
title: '跳转到修改密码页面',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
// 设备管理
|
|
handleDeviceManage() {
|
|
uni.showToast({
|
|
title: '跳转到设备管理页面',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
// 注销账号
|
|
handleCancelAccount() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要注销账号吗？此操作不可恢复。',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '账号注销申请已提交',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 退出登录
|
|
handleLogout() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '退出登录成功',
|
|
icon: 'success',
|
|
duration: 1500,
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.reLaunch({ url: '/pages/login/login' })
|
|
}, 1500)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.touXiang{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
background-color: #ffffff;
|
|
background-image: url('http://193.112.94.36:8099/static/images/687b6f95b14eff60f4b77147b3726ab2.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 40rpx auto;
|
|
position: relative;
|
|
}
|
|
|
|
.gearOne{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
/* ========== 状态栏模块 ========== */
|
|
.status-bar {
|
|
background-color: #ffffff;
|
|
padding: 40rpx 0 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.time {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
|
|
/* ========== 标题模块 ========== */
|
|
.header-module {
|
|
background-color: cornflowerblue;
|
|
padding: 40rpx 40rpx 60rpx;
|
|
border-bottom: 2rpx solid #f5f5f5;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 30rpx;
|
|
/* font-weight: bold; */
|
|
|
|
color: #000000;
|
|
}
|
|
|
|
/* ========== 通用模块样式 ========== */
|
|
.info-module,
|
|
.security-module,
|
|
.device-module,
|
|
.account-module {
|
|
background-color: #ffffff;
|
|
margin-top: 20rpx;
|
|
padding: 0 40rpx;
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
|
|
}
|
|
|
|
/* 模块标题 */
|
|
.module-title {
|
|
font-size: 30rpx;
|
|
color: #999999;
|
|
padding: 30rpx 0 20rpx;
|
|
}
|
|
|
|
/* 模块项 */
|
|
.module-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 36rpx 0;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
|
|
/* 最后一项去掉底部边框 */
|
|
.last-item {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 点击效果 */
|
|
.clickable:active {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
/* 标签样式 */
|
|
.item-label {
|
|
font-size: 34rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
/* 值样式 */
|
|
.item-value {
|
|
font-size: 34rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
/* 右侧内容 */
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 箭头样式 */
|
|
.arrow {
|
|
font-size: 36rpx;
|
|
color: #cccccc;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
/* ========== 账户信息模块 ========== */
|
|
.info-module {
|
|
margin-top: 0;
|
|
border-top: 2rpx solid #f5f5f5;
|
|
}
|
|
|
|
/* ========== 退出登录模块 ========== */
|
|
.logout-module {
|
|
margin-top: 40rpx;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.logout-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logout-btn:active {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.logout-text {
|
|
font-size: 34rpx;
|
|
color: red;
|
|
}
|
|
|
|
/* ========== 底部提示模块 ========== */
|
|
.footer-module {
|
|
margin-top: 40rpx;
|
|
padding: 0 40rpx 60rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 20rpx;
|
|
color: limegreen;
|
|
}
|
|
</style> |