Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
115
pages/settings/account-security/account-security.js
Normal file
115
pages/settings/account-security/account-security.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
// 账号与安全页面逻辑
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
phone: '+86 18500006666',
|
||||
wechatStatus: '已绑定',
|
||||
email: 'annabk666@gmail.com',
|
||||
// 初始化默认值，避免null导致的错误
|
||||
menuButtonInfo: {
|
||||
height: 32, // 默认高度
|
||||
width: 32, // 默认宽度
|
||||
top: 0
|
||||
},
|
||||
statusBarHeight: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
console.log('账号与安全页面加载');
|
||||
try {
|
||||
// 获取系统信息，用于导航栏定位
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
|
||||
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight,
|
||||
menuButtonInfo: menuButtonInfo,
|
||||
// 计算导航栏高度 = 胶囊按钮底部距离 - 状态栏高度
|
||||
navbarHeight: menuButtonInfo.bottom - systemInfo.statusBarHeight
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取系统信息失败:', error);
|
||||
// 如果获取失败，使用默认值
|
||||
this.setData({
|
||||
statusBarHeight: 20,
|
||||
navbarHeight: 44
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回上一页
|
||||
*/
|
||||
navigateBack: function() {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看手机号码
|
||||
*/
|
||||
viewPhone: function() {
|
||||
wx.showModal({
|
||||
title: '手机号码',
|
||||
content: this.data.phone,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看微信绑定
|
||||
*/
|
||||
viewWechat: function() {
|
||||
wx.showModal({
|
||||
title: '微信绑定',
|
||||
content: '您的账号已绑定微信',
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看邮箱
|
||||
*/
|
||||
viewEmail: function() {
|
||||
wx.showModal({
|
||||
title: '邮箱',
|
||||
content: this.data.email,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 推荐给好友
|
||||
*/
|
||||
recommendToFriend: function() {
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查看已屏蔽账户
|
||||
*/
|
||||
viewBlockedAccounts: function() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/settings/account-security/blocked-accounts'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {
|
||||
return {
|
||||
title: 'FindMe - 账号与安全',
|
||||
path: '/pages/settings/account-security/account-security'
|
||||
};
|
||||
}
|
||||
});
|
||||
8
pages/settings/account-security/account-security.json
Normal file
8
pages/settings/account-security/account-security.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"navigationBarTitleText": "账户与安全",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#000000",
|
||||
"disableScroll": false
|
||||
}
|
||||
63
pages/settings/account-security/account-security.wxml
Normal file
63
pages/settings/account-security/account-security.wxml
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!-- 账号与安全页面 -->
|
||||
<view class="container">
|
||||
<!-- 顶部导航栏 - 使用动态高度 -->
|
||||
<view class="navbar" style="height: {{navbarHeight}}px; padding-top: {{statusBarHeight}}px;">
|
||||
<view class="back-btn" bindtap="navigateBack">
|
||||
<text class="icon">←</text>
|
||||
</view>
|
||||
<view class="title">账户与安全</view>
|
||||
<view class="back-btn"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<scroll-view class="content" scroll-y style="padding-top: {{statusBarHeight + navbarHeight}}px;">
|
||||
<!-- 隐私部分 -->
|
||||
<view class="section">
|
||||
<text class="section-title">隐私</text>
|
||||
<view class="item" bindtap="viewPhone">
|
||||
<view class="item-icon phone">📞</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">电话</text>
|
||||
<text class="item-value">{{phone}}</text>
|
||||
</view>
|
||||
<view class="item-arrow">›</view>
|
||||
</view>
|
||||
<view class="item" bindtap="viewWechat">
|
||||
<view class="item-icon wechat">📱</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">微信</text>
|
||||
<text class="item-value">{{wechatStatus}}</text>
|
||||
</view>
|
||||
<view class="item-arrow">›</view>
|
||||
</view>
|
||||
<view class="item" bindtap="viewEmail">
|
||||
<view class="item-icon email">📧</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">邮箱</text>
|
||||
<text class="item-value">{{email}}</text>
|
||||
</view>
|
||||
<view class="item-arrow">›</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 社交账户部分 -->
|
||||
<view class="section">
|
||||
<text class="section-title">社交账户</text>
|
||||
<view class="item" bindtap="recommendToFriend">
|
||||
<view class="item-icon recommend">👥</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">推荐给好友</text>
|
||||
</view>
|
||||
<view class="item-arrow">›</view>
|
||||
</view>
|
||||
<view class="item" bindtap="viewBlockedAccounts">
|
||||
<view class="item-icon blocked">🚫</view>
|
||||
<view class="item-content">
|
||||
<text class="item-title">已屏蔽账户</text>
|
||||
</view>
|
||||
<view class="item-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
159
pages/settings/account-security/account-security.wxss
Normal file
159
pages/settings/account-security/account-security.wxss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/* 账号与安全页面样式 - 深色主题 */
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 导航栏样式 - 移除固定高度设置，由JS动态控制 */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1a1a1a;
|
||||
padding: 0 16px;
|
||||
z-index: 10;
|
||||
box-sizing: content-box; /* 确保padding不会影响总高度计算 */
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 主内容区 */
|
||||
.content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
padding-top: calc(44px + env(safe-area-inset-top) + 16px);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 分区样式 */
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
color: #888888;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
/* 列表项样式 */
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #333333;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 14px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.item-arrow {
|
||||
font-size: 16px;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* 开关样式 */
|
||||
.switch-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 图标颜色 */
|
||||
.phone {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.wechat {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.email {
|
||||
color: #1aad19;
|
||||
}
|
||||
|
||||
.password {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.twofactor {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.recommend {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.blocked {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
/* 安全区域适配 */
|
||||
@media screen and (device-width: 375px) and (device-height: 812px) {
|
||||
.navbar {
|
||||
padding-top: 44px;
|
||||
height: 88px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-top: 104px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue