初始提交：一场soul的创业实验-永平 网站与小程序
Made-with: Cursor
This commit is contained in:
卡若
450
miniprogram/pages/settings/settings.js
Normal file
450
miniprogram/pages/settings/settings.js
Normal file
@@ -0,0 +1,450 @@
|
||||
/**
|
||||
* Soul创业派对 - 设置页
|
||||
* 账号绑定功能
|
||||
*/
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight: 44,
|
||||
isLoggedIn: false,
|
||||
userInfo: null,
|
||||
version: '1.0.0',
|
||||
|
||||
// 绑定信息
|
||||
phoneNumber: '',
|
||||
wechatId: '',
|
||||
alipayAccount: '',
|
||||
address: '',
|
||||
|
||||
// 自动提现（默认开启）
|
||||
autoWithdrawEnabled: true,
|
||||
|
||||
// 绑定弹窗
|
||||
showBindModal: false,
|
||||
bindType: '', // phone | wechat | alipay
|
||||
bindValue: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
wx.showShareMenu({ withShareTimeline: true })
|
||||
this.setData({
|
||||
statusBarHeight: app.globalData.statusBarHeight,
|
||||
isLoggedIn: app.globalData.isLoggedIn,
|
||||
userInfo: app.globalData.userInfo
|
||||
})
|
||||
this.loadBindingInfo()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.loadBindingInfo()
|
||||
},
|
||||
|
||||
// 加载绑定信息
|
||||
loadBindingInfo() {
|
||||
const { userInfo, isLoggedIn } = app.globalData
|
||||
if (isLoggedIn && userInfo) {
|
||||
// 从本地存储或用户信息中获取绑定数据
|
||||
const phoneNumber = wx.getStorageSync('user_phone') || userInfo.phone || ''
|
||||
const wechatId = wx.getStorageSync('user_wechat') || userInfo.wechat || ''
|
||||
const alipayAccount = wx.getStorageSync('user_alipay') || userInfo.alipay || ''
|
||||
const address = wx.getStorageSync('user_address') || userInfo.address || ''
|
||||
// 默认开启自动提现
|
||||
const autoWithdrawEnabled = wx.getStorageSync('auto_withdraw_enabled') !== false
|
||||
|
||||
this.setData({
|
||||
isLoggedIn: true,
|
||||
userInfo,
|
||||
phoneNumber,
|
||||
wechatId,
|
||||
alipayAccount,
|
||||
address,
|
||||
autoWithdrawEnabled
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 切换自动提现
|
||||
async toggleAutoWithdraw(e) {
|
||||
const enabled = e.detail.value
|
||||
|
||||
// 检查是否绑定了支付方式
|
||||
if (enabled && !this.data.wechatId && !this.data.alipayAccount) {
|
||||
wx.showToast({ title: '请先绑定微信号或支付宝', icon: 'none' })
|
||||
this.setData({ autoWithdrawEnabled: false })
|
||||
return
|
||||
}
|
||||
|
||||
// 开启时需要确认
|
||||
if (enabled) {
|
||||
wx.showModal({
|
||||
title: '开启自动提现',
|
||||
content: `收益将自动打款到您的${this.data.alipayAccount ? '支付宝' : '微信'}账户，确认开启吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
this.setData({ autoWithdrawEnabled: true })
|
||||
wx.setStorageSync('auto_withdraw_enabled', true)
|
||||
|
||||
// 同步到服务器
|
||||
try {
|
||||
await app.request('/api/miniprogram/user/update', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
userId: app.globalData.userInfo?.id,
|
||||
autoWithdraw: true,
|
||||
withdrawAccount: this.data.alipayAccount || this.data.wechatId
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
console.log('同步自动提现设置失败', e)
|
||||
}
|
||||
|
||||
wx.showToast({ title: '已开启自动提现', icon: 'success' })
|
||||
} else {
|
||||
this.setData({ autoWithdrawEnabled: false })
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.setData({ autoWithdrawEnabled: false })
|
||||
wx.setStorageSync('auto_withdraw_enabled', false)
|
||||
wx.showToast({ title: '已关闭自动提现', icon: 'success' })
|
||||
}
|
||||
},
|
||||
|
||||
// 绑定手机号
|
||||
bindPhone() {
|
||||
this.setData({
|
||||
showBindModal: true,
|
||||
bindType: 'phone',
|
||||
bindValue: ''
|
||||
})
|
||||
},
|
||||
|
||||
// 微信号输入
|
||||
onWechatInput(e) {
|
||||
this.setData({ wechatId: e.detail.value })
|
||||
},
|
||||
|
||||
// 保存微信号
|
||||
async saveWechat() {
|
||||
const { wechatId } = this.data
|
||||
if (!wechatId || wechatId.length < 6) return
|
||||
|
||||
wx.setStorageSync('user_wechat', wechatId)
|
||||
|
||||
// 更新用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.wechat = wechatId
|
||||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||||
}
|
||||
|
||||
// 同步到服务器
|
||||
try {
|
||||
await app.request('/api/miniprogram/user/update', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
userId: app.globalData.userInfo?.id,
|
||||
wechat: wechatId
|
||||
}
|
||||
})
|
||||
wx.showToast({ title: '微信号已保存', icon: 'success' })
|
||||
} catch (e) {
|
||||
console.log('保存微信号失败', e)
|
||||
}
|
||||
},
|
||||
|
||||
// 输入绑定值
|
||||
onBindInput(e) {
|
||||
let value = e.detail.value
|
||||
if (this.data.bindType === 'phone') {
|
||||
value = value.replace(/\D/g, '').slice(0, 11)
|
||||
}
|
||||
this.setData({ bindValue: value })
|
||||
},
|
||||
|
||||
// 确认绑定
|
||||
confirmBind() {
|
||||
const { bindType, bindValue } = this.data
|
||||
|
||||
if (!bindValue) {
|
||||
wx.showToast({ title: '请输入内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 验证
|
||||
if (bindType === 'phone' && !/^1[3-9]\d{9}$/.test(bindValue)) {
|
||||
wx.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
if (bindType === 'wechat' && bindValue.length < 6) {
|
||||
wx.showToast({ title: '微信号至少6位', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
if (bindType === 'alipay' && !bindValue.includes('@') && !/^1[3-9]\d{9}$/.test(bindValue)) {
|
||||
wx.showToast({ title: '请输入正确的支付宝账号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 保存绑定信息到本地
|
||||
if (bindType === 'phone') {
|
||||
wx.setStorageSync('user_phone', bindValue)
|
||||
this.setData({ phoneNumber: bindValue })
|
||||
} else if (bindType === 'wechat') {
|
||||
wx.setStorageSync('user_wechat', bindValue)
|
||||
this.setData({ wechatId: bindValue })
|
||||
} else if (bindType === 'alipay') {
|
||||
wx.setStorageSync('user_alipay', bindValue)
|
||||
this.setData({ alipayAccount: bindValue })
|
||||
}
|
||||
|
||||
// 同步到服务器
|
||||
this.syncProfileToServer()
|
||||
|
||||
this.setData({ showBindModal: false })
|
||||
wx.showToast({ title: '绑定成功', icon: 'success' })
|
||||
},
|
||||
|
||||
// 同步资料到服务器
|
||||
async syncProfileToServer() {
|
||||
try {
|
||||
const userId = app.globalData.userInfo?.id
|
||||
if (!userId) return
|
||||
|
||||
const res = await app.request('/api/miniprogram/user/profile', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
userId,
|
||||
phone: this.data.phoneNumber || undefined,
|
||||
wechatId: this.data.wechatId || undefined
|
||||
}
|
||||
})
|
||||
|
||||
if (res.success) {
|
||||
console.log('[Settings] 资料同步成功')
|
||||
// 更新本地用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.phone = this.data.phoneNumber
|
||||
app.globalData.userInfo.wechatId = this.data.wechatId
|
||||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[Settings] 资料同步失败:', e)
|
||||
}
|
||||
},
|
||||
|
||||
// 获取微信头像（新版授权）
|
||||
async getWechatAvatar() {
|
||||
try {
|
||||
const res = await wx.getUserProfile({
|
||||
desc: '用于完善会员资料'
|
||||
})
|
||||
|
||||
if (res.userInfo) {
|
||||
const { nickName, avatarUrl: tempAvatarUrl } = res.userInfo
|
||||
|
||||
wx.showLoading({ title: '上传中...', mask: true })
|
||||
|
||||
// 1. 先上传图片到服务器
|
||||
console.log('[Settings] 开始上传头像:', tempAvatarUrl)
|
||||
|
||||
const uploadRes = await new Promise((resolve, reject) => {
|
||||
wx.uploadFile({
|
||||
url: app.globalData.baseUrl + '/api/miniprogram/upload',
|
||||
filePath: tempAvatarUrl,
|
||||
name: 'file',
|
||||
formData: {
|
||||
folder: 'avatars'
|
||||
},
|
||||
success: (uploadResult) => {
|
||||
try {
|
||||
const data = JSON.parse(uploadResult.data)
|
||||
if (data.success) {
|
||||
resolve(data)
|
||||
} else {
|
||||
reject(new Error(data.error || '上传失败'))
|
||||
}
|
||||
} catch (err) {
|
||||
reject(new Error('解析响应失败'))
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 2. 获取上传后的完整URL
|
||||
const avatarUrl = app.globalData.baseUrl + uploadRes.data.url
|
||||
console.log('[Settings] 头像上传成功:', avatarUrl)
|
||||
|
||||
// 3. 更新本地
|
||||
this.setData({
|
||||
userInfo: {
|
||||
...this.data.userInfo,
|
||||
nickname: nickName,
|
||||
avatar: avatarUrl
|
||||
}
|
||||
})
|
||||
|
||||
// 4. 同步到服务器数据库
|
||||
const userId = app.globalData.userInfo?.id
|
||||
if (userId) {
|
||||
await app.request('/api/miniprogram/user/profile', {
|
||||
method: 'POST',
|
||||
data: { userId, nickname: nickName, avatar: avatarUrl }
|
||||
})
|
||||
}
|
||||
|
||||
// 5. 更新全局
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.nickname = nickName
|
||||
app.globalData.userInfo.avatar = avatarUrl
|
||||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||||
}
|
||||
|
||||
wx.hideLoading()
|
||||
wx.showToast({ title: '头像更新成功', icon: 'success' })
|
||||
}
|
||||
} catch (e) {
|
||||
wx.hideLoading()
|
||||
console.error('[Settings] 获取头像失败:', e)
|
||||
wx.showToast({
|
||||
title: e.message || '获取头像失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 一键获取微信手机号（button组件回调）
|
||||
async onGetPhoneNumber(e) {
|
||||
console.log('[Settings] 获取手机号回调:', e.detail)
|
||||
|
||||
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
||||
wx.showToast({ title: '授权失败', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 需要将code发送到服务器解密获取手机号
|
||||
const code = e.detail.code
|
||||
if (!code) {
|
||||
// 如果没有code，弹出手动输入
|
||||
this.bindPhone()
|
||||
return
|
||||
}
|
||||
|
||||
wx.showLoading({ title: '获取中...', mask: true })
|
||||
|
||||
// 调用服务器解密手机号（传入userId以便同步到数据库）
|
||||
const userId = app.globalData.userInfo?.id
|
||||
const res = await app.request('/api/miniprogram/phone', {
|
||||
method: 'POST',
|
||||
data: { code, userId }
|
||||
})
|
||||
|
||||
wx.hideLoading()
|
||||
|
||||
if (res.success && res.phoneNumber) {
|
||||
wx.setStorageSync('user_phone', res.phoneNumber)
|
||||
this.setData({ phoneNumber: res.phoneNumber })
|
||||
|
||||
// 更新用户信息
|
||||
if (app.globalData.userInfo) {
|
||||
app.globalData.userInfo.phone = res.phoneNumber
|
||||
wx.setStorageSync('userInfo', app.globalData.userInfo)
|
||||
}
|
||||
|
||||
// 同步到服务器
|
||||
this.syncProfileToServer()
|
||||
|
||||
wx.showToast({ title: '手机号绑定成功', icon: 'success' })
|
||||
} else {
|
||||
// 获取失败，弹出手动输入
|
||||
this.bindPhone()
|
||||
}
|
||||
} catch (e) {
|
||||
wx.hideLoading()
|
||||
console.log('[Settings] 获取手机号失败:', e)
|
||||
// 获取失败，弹出手动输入
|
||||
this.bindPhone()
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭绑定弹窗
|
||||
closeBindModal() {
|
||||
this.setData({ showBindModal: false })
|
||||
},
|
||||
|
||||
// 清除缓存
|
||||
clearCache() {
|
||||
wx.showModal({
|
||||
title: '清除缓存',
|
||||
content: '确定要清除本地缓存吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 保留登录信息，只清除其他缓存
|
||||
const token = wx.getStorageSync('token')
|
||||
const userInfo = wx.getStorageSync('userInfo')
|
||||
wx.clearStorageSync()
|
||||
if (token) wx.setStorageSync('token', token)
|
||||
if (userInfo) wx.setStorageSync('userInfo', userInfo)
|
||||
wx.showToast({ title: '缓存已清除', icon: 'success' })
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
handleLogout() {
|
||||
wx.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
app.logout()
|
||||
this.setData({
|
||||
isLoggedIn: false,
|
||||
userInfo: null,
|
||||
phoneNumber: '',
|
||||
wechatId: '',
|
||||
alipayAccount: ''
|
||||
})
|
||||
wx.showToast({ title: '已退出登录', icon: 'success' })
|
||||
setTimeout(() => getApp().goBackOrToHome(), 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 联系客服 - 跳转到Soul派对房
|
||||
contactService() {
|
||||
wx.showToast({ title: '请在Soul派对房联系客服', icon: 'none' })
|
||||
},
|
||||
|
||||
// 阻止冒泡
|
||||
stopPropagation() {},
|
||||
|
||||
goBack() { getApp().goBackOrToHome() },
|
||||
|
||||
// 跳转到地址管理页
|
||||
goToAddresses() {
|
||||
wx.navigateTo({ url: '/pages/addresses/addresses' })
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
const ref = app.getMyReferralCode()
|
||||
return {
|
||||
title: 'Soul创业派对 - 设置',
|
||||
path: ref ? `/pages/settings/settings?ref=${ref}` : '/pages/settings/settings'
|
||||
}
|
||||
},
|
||||
|
||||
onShareTimeline() {
|
||||
const ref = app.getMyReferralCode()
|
||||
return { title: 'Soul创业派对 - 设置', query: ref ? `ref=${ref}` : '' }
|
||||
}
|
||||
})
|
||||
4
miniprogram/pages/settings/settings.json
Normal file
4
miniprogram/pages/settings/settings.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
146
miniprogram/pages/settings/settings.wxml
Normal file
146
miniprogram/pages/settings/settings.wxml
Normal file
@@ -0,0 +1,146 @@
|
||||
<!--设置页 - 账号绑定功能-->
|
||||
<view class="page">
|
||||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="nav-back" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="nav-title">设置</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
<view style="height: {{statusBarHeight + 44}}px;"></view>
|
||||
|
||||
<view class="content">
|
||||
<!-- 账号绑定 -->
|
||||
<view class="bind-card" wx:if="{{isLoggedIn}}">
|
||||
<view class="card-header">
|
||||
<text class="card-icon">🛡️</text>
|
||||
<view class="card-title-wrap">
|
||||
<text class="card-title">账号绑定</text>
|
||||
<text class="card-desc">绑定后可用于提现和找伙伴功能</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bind-list">
|
||||
<!-- 手机号 - 使用微信一键获取 -->
|
||||
<view class="bind-item">
|
||||
<view class="bind-left">
|
||||
<view class="bind-icon phone-icon">📱</view>
|
||||
<view class="bind-info">
|
||||
<text class="bind-label">手机号</text>
|
||||
<text class="bind-value">{{phoneNumber || '未绑定'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bind-right">
|
||||
<text class="bind-check" wx:if="{{phoneNumber}}">✓</text>
|
||||
<button wx:else class="get-phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
|
||||
一键获取
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 微信号 - 简化输入 -->
|
||||
<view class="bind-item">
|
||||
<view class="bind-left">
|
||||
<view class="bind-icon wechat-icon">💬</view>
|
||||
<view class="bind-info">
|
||||
<text class="bind-label">微信号</text>
|
||||
<input
|
||||
class="bind-input"
|
||||
placeholder="输入微信号"
|
||||
value="{{wechatId}}"
|
||||
bindinput="onWechatInput"
|
||||
bindblur="saveWechat"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bind-right">
|
||||
<text class="bind-check" wx:if="{{wechatId}}">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 - 跳转到地址管理页 -->
|
||||
<view class="bind-item" bindtap="goToAddresses">
|
||||
<view class="bind-left">
|
||||
<view class="bind-icon address-icon">📍</view>
|
||||
<view class="bind-info">
|
||||
<text class="bind-label">收货地址</text>
|
||||
<text class="bind-value address-text">管理收货地址，用于发货与邮寄</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bind-right">
|
||||
<text class="bind-manage brand-color">管理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 自动提现设置 -->
|
||||
<view class="bind-card auto-withdraw-card" wx:if="{{isLoggedIn && wechatId}}">
|
||||
<view class="card-header">
|
||||
<text class="card-icon">💰</text>
|
||||
<view class="card-title-wrap">
|
||||
<text class="card-title">自动提现</text>
|
||||
<text class="card-desc">收益自动打款到微信零钱</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="auto-withdraw-content">
|
||||
<view class="withdraw-switch-row">
|
||||
<text class="switch-label">开启自动提现</text>
|
||||
<switch checked="{{autoWithdrawEnabled}}" bindchange="toggleAutoWithdraw" color="#00CED1"/>
|
||||
</view>
|
||||
|
||||
<view class="withdraw-info" wx:if="{{autoWithdrawEnabled}}">
|
||||
<view class="info-item">
|
||||
<text class="info-label">提现方式</text>
|
||||
<text class="info-value">微信零钱</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">提现账户</text>
|
||||
<text class="info-value">{{wechatId}}</text>
|
||||
</view>
|
||||
<text class="withdraw-tip">收益将在每笔订单完成后自动打款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提现提示 -->
|
||||
<view class="tip-banner" wx:if="{{isLoggedIn && !wechatId}}">
|
||||
<text class="tip-text">提示：绑定微信号才能使用提现功能</text>
|
||||
</view>
|
||||
|
||||
<view class="logout-btn" wx:if="{{isLoggedIn}}" bindtap="handleLogout">退出登录</view>
|
||||
</view>
|
||||
|
||||
<!-- 绑定弹窗 -->
|
||||
<view class="modal-overlay" wx:if="{{showBindModal}}" bindtap="closeBindModal">
|
||||
<view class="modal-content" catchtap="stopPropagation">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">绑定{{bindType === 'phone' ? '手机号' : bindType === 'wechat' ? '微信号' : '支付宝'}}</text>
|
||||
<view class="modal-close" bindtap="closeBindModal">✕</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
type="{{bindType === 'phone' ? 'number' : 'text'}}"
|
||||
class="form-input"
|
||||
placeholder="{{bindType === 'phone' ? '请输入11位手机号' : bindType === 'wechat' ? '请输入微信号' : '请输入支付宝账号'}}"
|
||||
placeholder-class="input-placeholder"
|
||||
value="{{bindValue}}"
|
||||
bindinput="onBindInput"
|
||||
maxlength="{{bindType === 'phone' ? 11 : 50}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<text class="bind-tip">
|
||||
{{bindType === 'phone' ? '绑定手机号后可用于找伙伴匹配' : bindType === 'wechat' ? '绑定微信号后可用于找伙伴匹配和好友添加' : '绑定支付宝后可用于提现收益'}}
|
||||
</text>
|
||||
|
||||
<view class="btn-primary {{!bindValue ? 'btn-disabled' : ''}}" bindtap="confirmBind">
|
||||
确认绑定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
114
miniprogram/pages/settings/settings.wxss
Normal file
114
miniprogram/pages/settings/settings.wxss
Normal file
@@ -0,0 +1,114 @@
|
||||
/* 设置页样式 */
|
||||
.page { min-height: 100vh; background: #000; padding-bottom: 64rpx; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0,0,0,0.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; }
|
||||
.nav-back { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.back-icon { font-size: 40rpx; color: rgba(255,255,255,0.6); font-weight: 300; }
|
||||
.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; }
|
||||
.nav-placeholder { width: 64rpx; }
|
||||
|
||||
.content { padding: 24rpx; }
|
||||
|
||||
/* 账号绑定卡片 */
|
||||
.bind-card { background: #1c1c1e; border-radius: 32rpx; padding: 32rpx; margin-bottom: 24rpx; border: 2rpx solid rgba(0,206,209,0.2); }
|
||||
.card-header { display: flex; align-items: flex-start; gap: 16rpx; margin-bottom: 24rpx; padding-bottom: 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.card-icon { font-size: 40rpx; }
|
||||
.card-title-wrap { flex: 1; }
|
||||
.card-title { font-size: 30rpx; font-weight: 600; color: #fff; display: block; }
|
||||
.card-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
|
||||
|
||||
.bind-list { display: flex; flex-direction: column; gap: 24rpx; }
|
||||
.bind-item { display: flex; align-items: center; justify-content: space-between; padding: 16rpx 0; }
|
||||
.bind-left { display: flex; align-items: center; gap: 20rpx; }
|
||||
.bind-icon { width: 72rpx; height: 72rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; }
|
||||
.bind-icon.phone-icon { background: rgba(0,206,209,0.2); }
|
||||
.bind-icon.wechat-icon { background: rgba(158,158,158,0.2); }
|
||||
.bind-icon.alipay-icon { background: rgba(158,158,158,0.2); }
|
||||
.bind-info { display: flex; flex-direction: column; gap: 4rpx; flex: 1; }
|
||||
.bind-label { font-size: 28rpx; color: #fff; font-weight: 500; }
|
||||
.bind-value { font-size: 24rpx; color: rgba(255,255,255,0.5); }
|
||||
.address-text { max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.bind-icon.address-icon { background: rgba(255,165,0,0.2); }
|
||||
.required { color: #FF6B6B; font-size: 24rpx; }
|
||||
.bind-input { font-size: 24rpx; color: #00CED1; background: transparent; padding: 8rpx 0; }
|
||||
.bind-right { display: flex; align-items: center; }
|
||||
.bind-check { color: #00CED1; font-size: 32rpx; }
|
||||
.bind-btn { color: #00CED1; font-size: 26rpx; }
|
||||
.bind-manage { color: #00CED1; font-size: 26rpx; }
|
||||
.brand-color { color: #00CED1; }
|
||||
|
||||
/* 一键获取手机号按钮 */
|
||||
.get-phone-btn {
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(0,206,209,0.2);
|
||||
border: 2rpx solid rgba(0,206,209,0.3);
|
||||
border-radius: 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #00CED1;
|
||||
line-height: normal;
|
||||
}
|
||||
.get-phone-btn::after { border: none; }
|
||||
|
||||
/* 自动提现卡片 */
|
||||
.auto-withdraw-card { margin-top: 24rpx; }
|
||||
.auto-withdraw-content { padding-top: 16rpx; }
|
||||
.withdraw-switch-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.switch-label { font-size: 28rpx; color: #fff; }
|
||||
.withdraw-info {
|
||||
background: rgba(0,206,209,0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8rpx 0;
|
||||
}
|
||||
.info-label { font-size: 26rpx; color: rgba(255,255,255,0.6); }
|
||||
.info-value { font-size: 26rpx; color: #00CED1; }
|
||||
.withdraw-tip {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin-top: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 提现提示 */
|
||||
.tip-banner { background: rgba(255,165,0,0.1); border: 2rpx solid rgba(255,165,0,0.3); border-radius: 20rpx; padding: 20rpx 24rpx; margin-bottom: 24rpx; }
|
||||
.tip-text { font-size: 24rpx; color: #FFA500; line-height: 1.5; }
|
||||
|
||||
/* 设置组 */
|
||||
.settings-group { background: #1c1c1e; border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; }
|
||||
.settings-item { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); }
|
||||
.settings-item:last-child { border-bottom: none; }
|
||||
.item-left { display: flex; align-items: center; gap: 16rpx; }
|
||||
.item-icon { font-size: 36rpx; }
|
||||
.item-title { font-size: 28rpx; color: #fff; }
|
||||
.item-arrow { font-size: 28rpx; color: rgba(255,255,255,0.3); }
|
||||
.item-value { font-size: 26rpx; color: rgba(255,255,255,0.5); }
|
||||
|
||||
/* 退出登录按钮 */
|
||||
.logout-btn { margin-top: 48rpx; padding: 28rpx; background: rgba(244,67,54,0.1); border: 2rpx solid rgba(244,67,54,0.3); border-radius: 24rpx; text-align: center; font-size: 28rpx; color: #F44336; }
|
||||
|
||||
/* 弹窗 - 简洁大气风格 */
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(20rpx); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 48rpx; }
|
||||
.modal-content { width: 100%; max-width: 640rpx; background: linear-gradient(180deg, #1c1c1e 0%, #0d0d0d 100%); border-radius: 40rpx; overflow: hidden; border: 2rpx solid rgba(255,255,255,0.08); }
|
||||
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 40rpx 40rpx 24rpx; }
|
||||
.modal-title { font-size: 36rpx; font-weight: 700; color: #fff; }
|
||||
.modal-close { width: 64rpx; height: 64rpx; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: rgba(255,255,255,0.5); }
|
||||
.modal-body { padding: 16rpx 40rpx 48rpx; }
|
||||
.input-wrapper { margin-bottom: 32rpx; }
|
||||
.form-input { width: 100%; padding: 32rpx 24rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; font-size: 32rpx; color: #fff; box-sizing: border-box; transition: all 0.2s; }
|
||||
.form-input:focus { border-color: rgba(0,206,209,0.5); background: rgba(0,206,209,0.05); }
|
||||
.input-placeholder { color: rgba(255,255,255,0.25); }
|
||||
.bind-tip { font-size: 24rpx; color: rgba(255,255,255,0.4); margin-bottom: 40rpx; display: block; line-height: 1.6; text-align: center; }
|
||||
.btn-primary { padding: 32rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #000; font-size: 32rpx; font-weight: 600; text-align: center; border-radius: 28rpx; }
|
||||
.btn-primary.btn-disabled { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); }
|
||||
Reference in New Issue
Block a user