937 lines
22 KiB
Vue
937 lines
22 KiB
Vue
<script setup lang="ts">
|
||
import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
|
||
import { ref } from 'vue'
|
||
import { getUserDetail } from '@/api'
|
||
import { hasToken } from '@/utils/session'
|
||
import { useBindMobile } from '@/composables/useBindMobile'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '我的',
|
||
navigationStyle: 'default',
|
||
navigationBarBackgroundColor: '#ffffff',
|
||
navigationBarTextStyle: 'black',
|
||
// 微信小程序：允许使用 open-type="share" 与右上角转发
|
||
enableShareAppMessage: true,
|
||
enableShareTimeline: true,
|
||
},
|
||
})
|
||
|
||
/** 商务合作弹窗中的二维码图：将图片放到 `src/static/` 后改为 `/static/xxx.png` 或填网络地址 */
|
||
const BUSINESS_COOP_QR_SRC = ''
|
||
|
||
const SHARE_TITLE = '全能查 — 买车先查车况，更安心'
|
||
const SHARE_PATH = '/pages/index'
|
||
|
||
const WX_NICK_KEY = 'wx_display_name'
|
||
|
||
const isLogin = ref(false)
|
||
const nickname = ref('')
|
||
const userDesc = ref('')
|
||
const hasBoundMobile = ref(false)
|
||
const wxNickStorage = ref('')
|
||
|
||
const {
|
||
bindVisible: bindModalOpen,
|
||
bindPhone,
|
||
bindCode,
|
||
bindSending,
|
||
bindSubmitting,
|
||
bindCountingDown,
|
||
bindCountdown,
|
||
isBindPhoneValid,
|
||
openBindModal,
|
||
closeBindModal,
|
||
onBindPhoneInput,
|
||
onBindCodeInput,
|
||
sendBindSms,
|
||
submitBindMobile,
|
||
} = useBindMobile(refreshUserCard)
|
||
|
||
const coopModalOpen = ref(false)
|
||
|
||
onShareAppMessage(() => ({
|
||
title: SHARE_TITLE,
|
||
path: SHARE_PATH,
|
||
}))
|
||
|
||
onShareTimeline(() => ({
|
||
title: SHARE_TITLE,
|
||
query: '',
|
||
}))
|
||
|
||
function maskMobile(plain: string) {
|
||
const s = (plain || '').trim()
|
||
if (s.length >= 11)
|
||
return `${s.slice(0, 3)}****${s.slice(-4)}`
|
||
return s || ''
|
||
}
|
||
|
||
function loadWxNickFromStorage() {
|
||
try {
|
||
const n = uni.getStorageSync(WX_NICK_KEY)
|
||
wxNickStorage.value = typeof n === 'string' && n ? n : ''
|
||
}
|
||
catch {
|
||
wxNickStorage.value = ''
|
||
}
|
||
}
|
||
|
||
function openBindModalFromProfile() {
|
||
openBindModal()
|
||
}
|
||
|
||
async function refreshUserCard() {
|
||
isLogin.value = hasToken()
|
||
if (!isLogin.value) {
|
||
nickname.value = ''
|
||
userDesc.value = ''
|
||
hasBoundMobile.value = false
|
||
return
|
||
}
|
||
loadWxNickFromStorage()
|
||
try {
|
||
const res = await getUserDetail() as {
|
||
code?: number
|
||
data?: { userInfo?: { mobile?: string, nickName?: string } }
|
||
}
|
||
if (res && res.code === 200 && res.data?.userInfo) {
|
||
const u = res.data.userInfo
|
||
const mobile = (u.mobile || '').trim()
|
||
const apiNick = (u.nickName || '').trim()
|
||
hasBoundMobile.value = /^1[3-9]\d{9}$/.test(mobile)
|
||
if (hasBoundMobile.value) {
|
||
nickname.value = maskMobile(mobile)
|
||
userDesc.value = '已绑定手机号，可同步历史报告与收藏'
|
||
}
|
||
else {
|
||
nickname.value = wxNickStorage.value || apiNick || '微信用户'
|
||
userDesc.value = '绑定手机号后，可同步历史报告与收藏'
|
||
}
|
||
}
|
||
else {
|
||
nickname.value = wxNickStorage.value || '已登录'
|
||
userDesc.value = '获取资料失败，请稍后下拉刷新'
|
||
}
|
||
}
|
||
catch {
|
||
nickname.value = wxNickStorage.value || '已登录'
|
||
userDesc.value = '网络异常，请稍后重试'
|
||
}
|
||
}
|
||
|
||
onShow(() => {
|
||
void refreshUserCard()
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline'],
|
||
})
|
||
}
|
||
catch {
|
||
/* ignore */
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
function handleUserTap() {
|
||
if (isLogin.value) {
|
||
return
|
||
}
|
||
uni.navigateTo({ url: '/pages/login' })
|
||
}
|
||
|
||
/** 微信小程序：用户主动触发才可调 getUserProfile */
|
||
async function syncWxNickname() {
|
||
// #ifdef MP-WEIXIN
|
||
try {
|
||
const res = await new Promise<{ userInfo?: { nickName?: string } }>((resolve, reject) => {
|
||
uni.getUserProfile({
|
||
desc: '用于在本页展示昵称',
|
||
lang: 'zh_CN',
|
||
success: resolve,
|
||
fail: reject,
|
||
})
|
||
})
|
||
const name = res.userInfo?.nickName?.trim()
|
||
if (name) {
|
||
uni.setStorageSync(WX_NICK_KEY, name)
|
||
wxNickStorage.value = name
|
||
if (!hasBoundMobile.value)
|
||
nickname.value = name
|
||
uni.showToast({ title: '昵称已更新', icon: 'none' })
|
||
}
|
||
}
|
||
catch {
|
||
uni.showToast({ title: '需要您确认授权', icon: 'none' })
|
||
}
|
||
// #endif
|
||
}
|
||
|
||
function goHistoryReport() {
|
||
uni.navigateTo({ url: '/pages/report' })
|
||
}
|
||
|
||
function goFreeValuation() {
|
||
uni.showToast({ title: '敬请期待', icon: 'none' })
|
||
}
|
||
|
||
/** 非微信小程序：无 open-type=share，仅提示 */
|
||
function goShareFallback() {
|
||
uni.showToast({ title: '请在微信小程序内使用分享', icon: 'none' })
|
||
}
|
||
|
||
function openCoopModal() {
|
||
coopModalOpen.value = true
|
||
}
|
||
|
||
function closeCoopModal() {
|
||
coopModalOpen.value = false
|
||
}
|
||
|
||
function goLegalUserAgreement() {
|
||
uni.navigateTo({ url: '/pages/legal/user-agreement' })
|
||
}
|
||
|
||
function goLegalPrivacyPolicy() {
|
||
uni.navigateTo({ url: '/pages/legal/privacy-policy' })
|
||
}
|
||
|
||
function goLegalAuthorization() {
|
||
uni.navigateTo({ url: '/pages/legal/authorization' })
|
||
}
|
||
|
||
function goIllegalCode() {
|
||
uni.navigateTo({ url: '/pages/toolbox/query?key=jtwfcode' })
|
||
}
|
||
|
||
function goOilPrice() {
|
||
uni.navigateTo({ url: '/pages/toolbox/query?key=oilprice' })
|
||
}
|
||
|
||
function goHelp() {
|
||
uni.showToast({ title: '敬请期待', icon: 'none' })
|
||
}
|
||
|
||
function goAbout() {
|
||
uni.showToast({ title: '敬请期待', icon: 'none' })
|
||
}
|
||
|
||
function goSettings() {
|
||
uni.showToast({ title: '敬请期待', icon: 'none' })
|
||
}
|
||
|
||
/** 非微信小程序：无 open-type=contact */
|
||
function goServiceFallback() {
|
||
uni.showToast({ title: '请在微信小程序内使用在线客服', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="page-root">
|
||
<scroll-view scroll-y class="scrollarea">
|
||
<view class="page">
|
||
|
||
<!-- ═══ 区块1: 个人信息栏 ═══ -->
|
||
<view class="profile-card">
|
||
<view class="profile-bg" />
|
||
<view class="profile-content" @tap="handleUserTap">
|
||
<view class="profile-avatar">
|
||
<view class="avatar-inner">
|
||
<view class="avatar-icon i-carbon-user" />
|
||
</view>
|
||
</view>
|
||
<view class="profile-info">
|
||
<text class="profile-name">{{ isLogin ? nickname : '点击登录' }}</text>
|
||
<text class="profile-desc">{{ isLogin ? userDesc : '登录后可同步历史报告与收藏' }}</text>
|
||
</view>
|
||
<view class="profile-arrow">
|
||
<view class="i-carbon-chevron-right" />
|
||
</view>
|
||
</view>
|
||
<!-- 已登录未绑定手机 -->
|
||
<view v-if="isLogin && !hasBoundMobile" class="profile-actions">
|
||
<view class="action-btn" @tap.stop="openBindModalFromProfile">
|
||
<view class="action-icon i-carbon-phone" />
|
||
<text class="action-text">绑定手机号</text>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="action-btn" @tap.stop="syncWxNickname">
|
||
<view class="action-icon i-carbon-edit" />
|
||
<text class="action-text">同步昵称</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ═══ 区块2: 快捷功能（4宫格） ═══ -->
|
||
<view class="section">
|
||
<view class="section-title">快捷功能</view>
|
||
<view class="quick-grid">
|
||
<view class="quick-item" @tap="goHistoryReport">
|
||
<view class="quick-icon-wrap" style="background: rgba(23,104,255,0.08)">
|
||
<view class="quick-icon i-carbon-document" style="color: #1768ff" />
|
||
</view>
|
||
<text class="quick-name">历史报告</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goFreeValuation">
|
||
<view class="quick-icon-wrap" style="background: rgba(250,140,22,0.08)">
|
||
<view class="quick-icon i-carbon-chart-line" style="color: #fa8c16" />
|
||
</view>
|
||
<text class="quick-name">免费估值</text>
|
||
</view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="quick-item quick-item-btn" open-type="share" hover-class="quick-item-hover">
|
||
<view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
|
||
<view class="quick-icon i-carbon-share" style="color: #13c25e" />
|
||
</view>
|
||
<text class="quick-name">分享好友</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="quick-item" @tap="goShareFallback">
|
||
<view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
|
||
<view class="quick-icon i-carbon-share" style="color: #13c25e" />
|
||
</view>
|
||
<text class="quick-name">分享好友</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="quick-item" @tap="openCoopModal">
|
||
<view class="quick-icon-wrap" style="background: rgba(114,46,209,0.08)">
|
||
<view class="quick-icon i-carbon-enterprise" style="color: #722ed1" />
|
||
</view>
|
||
<text class="quick-name">商务合作</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ═══ 区块3: 常用工具 ═══ -->
|
||
<view class="section">
|
||
<view class="section-title">常用工具</view>
|
||
<view class="quick-grid">
|
||
<view class="quick-item" @tap="goOilPrice">
|
||
<view class="quick-icon-wrap" style="background: rgba(23,104,255,0.08)">
|
||
<view class="quick-icon i-carbon-gas-station" style="color: #1768ff" />
|
||
</view>
|
||
<text class="quick-name">实时油价查询</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goIllegalCode">
|
||
<view class="quick-icon-wrap" style="background: rgba(250,140,22,0.08)">
|
||
<view class="quick-icon i-carbon-search" style="color: #fa8c16" />
|
||
</view>
|
||
<text class="quick-name">违章代码查询</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ═══ 区块4: 服务与支持 ═══ -->
|
||
<view class="section">
|
||
<view class="section-title">服务与支持</view>
|
||
<view class="quick-grid">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="quick-item quick-item-btn" open-type="contact" hover-class="quick-item-hover">
|
||
<view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
|
||
<view class="quick-icon i-carbon-chat" style="color: #13c25e" />
|
||
</view>
|
||
<text class="quick-name">在线客服</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="quick-item" @tap="goServiceFallback">
|
||
<view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
|
||
<view class="quick-icon i-carbon-chat" style="color: #13c25e" />
|
||
</view>
|
||
<text class="quick-name">在线客服</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="quick-item" @tap="goHelp">
|
||
<view class="quick-icon-wrap" style="background: rgba(114,46,209,0.08)">
|
||
<view class="quick-icon i-carbon-help" style="color: #722ed1" />
|
||
</view>
|
||
<text class="quick-name">帮助中心</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goAbout">
|
||
<view class="quick-icon-wrap" style="background: rgba(78,89,105,0.08)">
|
||
<view class="quick-icon i-carbon-information" style="color: #4e5969" />
|
||
</view>
|
||
<text class="quick-name">关于我们</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goLegalUserAgreement">
|
||
<view class="quick-icon-wrap" style="background: rgba(78,89,105,0.06)">
|
||
<view class="quick-icon i-carbon-document-blank" style="color: #86909c" />
|
||
</view>
|
||
<text class="quick-name">用户协议</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goLegalPrivacyPolicy">
|
||
<view class="quick-icon-wrap" style="background: rgba(78,89,105,0.06)">
|
||
<view class="quick-icon i-carbon-security" style="color: #86909c" />
|
||
</view>
|
||
<text class="quick-name">隐私政策</text>
|
||
</view>
|
||
<view class="quick-item" @tap="goLegalAuthorization">
|
||
<view class="quick-icon-wrap" style="background: rgba(78,89,105,0.06)">
|
||
<view class="quick-icon i-carbon-certificate" style="color: #86909c" />
|
||
</view>
|
||
<text class="quick-name">授权书</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height: 40rpx" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view v-if="coopModalOpen" class="coop-mask" @tap.self="closeCoopModal">
|
||
<view class="coop-dialog" @tap.stop>
|
||
<view class="coop-title">
|
||
商务合作
|
||
</view>
|
||
<view class="coop-hint">
|
||
扫码添加商务微信（图片路径可在代码中配置）
|
||
</view>
|
||
<image
|
||
v-if="BUSINESS_COOP_QR_SRC"
|
||
class="coop-qr"
|
||
:src="BUSINESS_COOP_QR_SRC"
|
||
mode="aspectFit"
|
||
show-menu-by-longpress
|
||
/>
|
||
<view v-else class="coop-qr-placeholder">
|
||
<text class="coop-qr-placeholder-text">二维码图片路径待定</text>
|
||
<text class="coop-qr-placeholder-text coop-qr-placeholder-sub">请将图片放入 static 目录，并在 mine.vue 中为 BUSINESS_COOP_QR_SRC 赋值</text>
|
||
</view>
|
||
<view class="coop-close" @tap="closeCoopModal">
|
||
知道了
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="bindModalOpen" class="bind-mask" @tap.self="closeBindModal">
|
||
<view class="bind-sheet" @tap.stop>
|
||
<view class="bind-sheet-title">
|
||
绑定手机号
|
||
</view>
|
||
<view class="bind-field">
|
||
<text class="bind-label">手机号</text>
|
||
<input
|
||
class="bind-input"
|
||
type="digit"
|
||
:value="bindPhone"
|
||
:maxlength="11"
|
||
placeholder="请输入手机号"
|
||
placeholder-class="bind-ph"
|
||
confirm-type="done"
|
||
@input="onBindPhoneInput"
|
||
>
|
||
</view>
|
||
<view class="bind-field bind-field-row">
|
||
<view class="bind-field-grow">
|
||
<text class="bind-label">验证码</text>
|
||
<input
|
||
class="bind-input"
|
||
type="digit"
|
||
:value="bindCode"
|
||
:maxlength="6"
|
||
placeholder="6 位短信码"
|
||
placeholder-class="bind-ph"
|
||
confirm-type="done"
|
||
@input="onBindCodeInput"
|
||
>
|
||
</view>
|
||
<view
|
||
class="bind-sms"
|
||
:class="{ disabled: bindSending || bindCountingDown || !isBindPhoneValid() }"
|
||
@tap="sendBindSms"
|
||
>
|
||
{{ bindCountingDown ? `${bindCountdown}s` : '获取验证码' }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="bind-submit"
|
||
:class="{ disabled: bindSubmitting || !isBindPhoneValid() || bindCode.length < 6 }"
|
||
@tap="submitBindMobile"
|
||
>
|
||
确认绑定
|
||
</view>
|
||
<view class="bind-cancel" @tap="closeBindModal">
|
||
取消
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.page-root {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: linear-gradient(180deg, #f0f5ff 0%, #f5f7fa 30%, #f3f5fb 100%);
|
||
}
|
||
|
||
.scrollarea {
|
||
flex: 1;
|
||
min-height: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.page {
|
||
padding: 0 24rpx 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ═══ 区块1: 个人信息栏 ═══ */
|
||
.profile-card {
|
||
position: relative;
|
||
border-radius: 0 0 32rpx 32rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.profile-bg {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, #1768ff 0%, #4d94ff 60%, #7bb8ff 100%);
|
||
}
|
||
|
||
.profile-content {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 48rpx 32rpx 32rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.profile-avatar {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar-inner {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3rpx solid rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.avatar-icon {
|
||
font-size: 44rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.profile-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.profile-name {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.profile-desc {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.profile-arrow {
|
||
flex-shrink: 0;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.profile-actions {
|
||
position: relative;
|
||
display: flex;
|
||
gap: 24rpx;
|
||
padding: 0 32rpx 28rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 10rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
|
||
.action-icon {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.action-text {
|
||
font-size: 22rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
/* ═══ 区块通用 ═══ */
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx 24rpx 8rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(15, 35, 52, 0.03);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 4rpx;
|
||
}
|
||
|
||
/* ═══ 区块2: 快捷功能（4宫格） ═══ */
|
||
.quick-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
.quick-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.quick-item-btn {
|
||
margin: 0;
|
||
padding: 12rpx 0;
|
||
border: none;
|
||
background: transparent;
|
||
line-height: normal;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.quick-item-btn::after {
|
||
display: none;
|
||
}
|
||
|
||
.quick-item-hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.quick-icon-wrap {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.quick-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.quick-name {
|
||
font-size: 22rpx;
|
||
color: #4e5969;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ═══ 区块3/4/5: 列表行 ═══ */
|
||
.tool-list {
|
||
padding-bottom: 8rpx;
|
||
}
|
||
|
||
.tool-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 4rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.tool-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.tool-row:active {
|
||
background: #fafbfc;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.tool-row-btn {
|
||
margin: 0;
|
||
padding: 20rpx 4rpx;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
text-align: left;
|
||
line-height: inherit;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.tool-row-btn::after {
|
||
display: none;
|
||
}
|
||
|
||
.tool-row-hover {
|
||
background: rgba(23, 104, 255, 0.04);
|
||
}
|
||
|
||
.tool-row-icon-wrap {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tool-row-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tool-row-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.tool-row-name {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.tool-row-sub {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
color: #ffb020;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.tool-row-arrow {
|
||
font-size: 28rpx;
|
||
color: #c9cdd4;
|
||
flex-shrink: 0;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.no-border {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
/* ═══ 弹窗样式 ═══ */
|
||
.coop-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1001;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 48rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.coop-dialog {
|
||
width: 100%;
|
||
max-width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 36rpx 32rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.coop-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
text-align: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.coop-hint {
|
||
font-size: 24rpx;
|
||
color: #86909c;
|
||
text-align: center;
|
||
margin-bottom: 28rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.coop-qr {
|
||
display: block;
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
margin: 0 auto 28rpx;
|
||
border-radius: 12rpx;
|
||
background: #f7f8fa;
|
||
}
|
||
|
||
.coop-qr-placeholder {
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
margin: 0 auto 28rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx dashed #dcdfe6;
|
||
background: #fafbfc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.coop-qr-placeholder-text {
|
||
font-size: 22rpx;
|
||
color: #86909c;
|
||
line-height: 1.6;
|
||
text-align: center;
|
||
}
|
||
|
||
.coop-qr-placeholder-sub {
|
||
font-size: 20rpx;
|
||
color: #c9cdd4;
|
||
}
|
||
|
||
.coop-close {
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
/* ═══ 绑定手机弹窗 ═══ */
|
||
.bind-mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.bind-sheet {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 28rpx 28rpx calc(28rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bind-sheet-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin-bottom: 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bind-field {
|
||
margin-bottom: 20rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.bind-field-row {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.bind-field-grow {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.bind-label {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #86909c;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.bind-input {
|
||
width: 100%;
|
||
height: 72rpx;
|
||
font-size: 30rpx;
|
||
color: #1d2129;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.bind-ph {
|
||
color: #c9cdd4;
|
||
}
|
||
|
||
.bind-sms {
|
||
flex-shrink: 0;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 24rpx;
|
||
color: #1768ff;
|
||
background: #f0f5ff;
|
||
border-radius: 12rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bind-sms.disabled {
|
||
color: #c9cdd4;
|
||
background: #f7f8fa;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bind-submit {
|
||
margin-top: 12rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
border-radius: 44rpx;
|
||
}
|
||
|
||
.bind-submit.disabled {
|
||
opacity: 0.45;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bind-cancel {
|
||
margin-top: 20rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #86909c;
|
||
padding: 12rpx;
|
||
}
|
||
</style>
|