983 lines
22 KiB
Vue
983 lines
22 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
|
|||
|
|
import { onUnmounted, ref } from 'vue'
|
|||
|
|
import { clearAuthStorage, getUserDetail, postAuthSendSmsBindMobile, postUserBindMobile } from '@/api'
|
|||
|
|
import { hasToken, saveAuthSession } from '@/utils/session'
|
|||
|
|
|
|||
|
|
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 bindModalOpen = ref(false)
|
|||
|
|
const bindPhone = ref('')
|
|||
|
|
const bindCode = ref('')
|
|||
|
|
const bindSending = ref(false)
|
|||
|
|
const bindSubmitting = ref(false)
|
|||
|
|
const bindCountingDown = ref(false)
|
|||
|
|
const bindCountdown = ref(60)
|
|||
|
|
let bindSmsTimer: ReturnType<typeof setInterval> | null = null
|
|||
|
|
|
|||
|
|
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 clearBindSmsTimer() {
|
|||
|
|
if (bindSmsTimer) {
|
|||
|
|
clearInterval(bindSmsTimer)
|
|||
|
|
bindSmsTimer = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function startBindCountdown() {
|
|||
|
|
clearBindSmsTimer()
|
|||
|
|
bindCountingDown.value = true
|
|||
|
|
bindCountdown.value = 60
|
|||
|
|
bindSmsTimer = setInterval(() => {
|
|||
|
|
if (bindCountdown.value > 0) {
|
|||
|
|
bindCountdown.value--
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
clearBindSmsTimer()
|
|||
|
|
bindCountingDown.value = false
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const isBindPhoneValid = () => /^1[3-9]\d{9}$/.test(bindPhone.value)
|
|||
|
|
|
|||
|
|
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) {
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList: ['退出登录'],
|
|||
|
|
success(res) {
|
|||
|
|
if (res.tapIndex === 0) {
|
|||
|
|
clearAuthStorage()
|
|||
|
|
isLogin.value = false
|
|||
|
|
nickname.value = ''
|
|||
|
|
userDesc.value = ''
|
|||
|
|
hasBoundMobile.value = false
|
|||
|
|
uni.showToast({ title: '已退出', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
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 openBindModal() {
|
|||
|
|
bindPhone.value = ''
|
|||
|
|
bindCode.value = ''
|
|||
|
|
bindModalOpen.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closeBindModal() {
|
|||
|
|
bindModalOpen.value = false
|
|||
|
|
clearBindSmsTimer()
|
|||
|
|
bindCountingDown.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onBindPhoneInput(e: { detail?: { value?: string } }) {
|
|||
|
|
const raw = e.detail?.value ?? ''
|
|||
|
|
bindPhone.value = String(raw).replace(/\D/g, '').slice(0, 11)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onBindCodeInput(e: { detail?: { value?: string } }) {
|
|||
|
|
const raw = e.detail?.value ?? ''
|
|||
|
|
bindCode.value = String(raw).replace(/\D/g, '').slice(0, 6)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function sendBindSms() {
|
|||
|
|
if (bindSending.value || bindCountingDown.value)
|
|||
|
|
return
|
|||
|
|
if (!isBindPhoneValid()) {
|
|||
|
|
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
bindSending.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await postAuthSendSmsBindMobile({ mobile: bindPhone.value }) as { code?: number }
|
|||
|
|
if (res && res.code === 200) {
|
|||
|
|
uni.showToast({ title: '验证码已发送', icon: 'none' })
|
|||
|
|
startBindCountdown()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
finally {
|
|||
|
|
bindSending.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submitBindMobile() {
|
|||
|
|
if (!isBindPhoneValid()) {
|
|||
|
|
uni.showToast({ title: '请输入正确手机号', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (bindCode.value.length < 6) {
|
|||
|
|
uni.showToast({ title: '请输入 6 位验证码', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
bindSubmitting.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await postUserBindMobile({
|
|||
|
|
mobile: bindPhone.value,
|
|||
|
|
code: bindCode.value,
|
|||
|
|
}) as { code?: number, data?: { accessToken: string, refreshAfter: number | string, accessExpire: number | string } }
|
|||
|
|
if (res && res.code === 200 && res.data) {
|
|||
|
|
saveAuthSession(res.data)
|
|||
|
|
uni.showToast({ title: '绑定成功', icon: 'success' })
|
|||
|
|
closeBindModal()
|
|||
|
|
await refreshUserCard()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
finally {
|
|||
|
|
bindSubmitting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goHistoryReport() {
|
|||
|
|
uni.switchTab({ 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.showToast({ title: '敬请期待', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goOilPrice() {
|
|||
|
|
uni.showToast({ title: '敬请期待', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
clearBindSmsTimer()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="page-root">
|
|||
|
|
<scroll-view scroll-y class="scrollarea">
|
|||
|
|
<view class="page">
|
|||
|
|
<view class="banner mine-banner">
|
|||
|
|
<view class="banner-text">
|
|||
|
|
<view class="banner-title">
|
|||
|
|
买车先查车况，更安心
|
|||
|
|
</view>
|
|||
|
|
<view class="banner-sub">
|
|||
|
|
减少隐蔽事故车、泡水车、调表车风险
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="banner-illustration">
|
|||
|
|
<view class="car-illus" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card mine-user">
|
|||
|
|
<view class="mine-user-main" @tap="handleUserTap">
|
|||
|
|
<view class="mine-avatar-placeholder" />
|
|||
|
|
<view class="mine-user-text">
|
|||
|
|
<view class="mine-user-name">
|
|||
|
|
{{ isLogin ? nickname : '您还没有登录，立即登录' }}
|
|||
|
|
</view>
|
|||
|
|
<view class="mine-user-desc">
|
|||
|
|
{{ isLogin ? userDesc : '登录后可同步历史报告与收藏' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<view v-if="isLogin && !hasBoundMobile" class="mine-user-extra">
|
|||
|
|
<text class="extra-link" @tap.stop="syncWxNickname">同步微信昵称</text>
|
|||
|
|
<text class="extra-dot">·</text>
|
|||
|
|
<text class="extra-hint">绑定手机后优先显示手机号</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view
|
|||
|
|
v-if="isLogin && !hasBoundMobile"
|
|||
|
|
class="mine-bind-row"
|
|||
|
|
@tap.stop="openBindModal"
|
|||
|
|
>
|
|||
|
|
<text class="mine-bind-text">绑定手机号</text>
|
|||
|
|
<text class="mine-bind-arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card">
|
|||
|
|
<view class="grid-4">
|
|||
|
|
<view class="grid-item" @tap="goHistoryReport">
|
|||
|
|
<view class="icon-tool i-carbon-document" />
|
|||
|
|
<view class="grid-text">
|
|||
|
|
历史报告
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="grid-item" @tap="goFreeValuation">
|
|||
|
|
<view class="icon-tool i-carbon-chart-line" />
|
|||
|
|
<view class="grid-text">
|
|||
|
|
免费估值
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<button class="grid-item grid-item-btn" open-type="share" hover-class="grid-item-hover">
|
|||
|
|
<view class="icon-tool i-carbon-share" />
|
|||
|
|
<view class="grid-text">
|
|||
|
|
分享好友
|
|||
|
|
</view>
|
|||
|
|
</button>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<view class="grid-item" @tap="goShareFallback">
|
|||
|
|
<view class="icon-tool i-carbon-share" />
|
|||
|
|
<view class="grid-text">
|
|||
|
|
分享好友
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="grid-item" @tap="openCoopModal">
|
|||
|
|
<view class="icon-tool i-carbon-enterprise" />
|
|||
|
|
<view class="grid-text">
|
|||
|
|
商务合作
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card list-card">
|
|||
|
|
<view class="list-item" @tap="goLegalUserAgreement">
|
|||
|
|
<view class="list-icon i-carbon-document-blank" />
|
|||
|
|
<text class="list-text">用户协议</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" @tap="goLegalPrivacyPolicy">
|
|||
|
|
<view class="list-icon i-carbon-security" />
|
|||
|
|
<text class="list-text">隐私政策</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" @tap="goLegalAuthorization">
|
|||
|
|
<view class="list-icon i-carbon-certificate" />
|
|||
|
|
<text class="list-text">授权书</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" @tap="goHelp">
|
|||
|
|
<view class="list-icon i-carbon-help" />
|
|||
|
|
<text class="list-text">帮助中心</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="list-item list-item-contact no-border"
|
|||
|
|
open-type="contact"
|
|||
|
|
hover-class="list-item-contact-hover"
|
|||
|
|
>
|
|||
|
|
<view class="list-icon i-carbon-chat" />
|
|||
|
|
<view class="service-row">
|
|||
|
|
<text class="list-text">在线客服</text>
|
|||
|
|
<text class="service-time">人工客服 周一至周日 9:00-20:00</text>
|
|||
|
|
</view>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</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, #f8faff 0%, #f3f5fb 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scrollarea {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
padding: 24rpx 24rpx 40rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 32rpx 28rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
background: linear-gradient(135deg, #fff7f0 0%, #ffffff 100%);
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
box-shadow:
|
|||
|
|
0 18rpx 40rpx rgba(15, 35, 52, 0.05),
|
|||
|
|
0 0 0 1rpx rgba(226, 229, 239, 0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-text {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1d2129;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-sub {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #4e5969;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-illustration {
|
|||
|
|
width: 180rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.car-illus {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background: linear-gradient(145deg, #ffe8dc 0%, #ffc9a8 100%);
|
|||
|
|
opacity: 0.95;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 24rpx 24rpx 20rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
border: 1rpx solid #e5e6f0;
|
|||
|
|
box-shadow:
|
|||
|
|
0 16rpx 40rpx rgba(15, 35, 52, 0.04),
|
|||
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user-main {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-avatar-placeholder {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #f2f3f5;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user-text {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1d2129;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user-desc {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #86909c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-user-extra {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
padding-top: 16rpx;
|
|||
|
|
border-top: 1rpx solid #f0f0f0;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #86909c;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.extra-link {
|
|||
|
|
color: #1768ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.extra-dot {
|
|||
|
|
margin: 0 8rpx;
|
|||
|
|
color: #c9cdd4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.extra-hint {
|
|||
|
|
color: #86909c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-bind-row {
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
padding: 16rpx 0 4rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-bind-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #1768ff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mine-bind-arrow {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #1768ff;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-4 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-item {
|
|||
|
|
width: 25%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-item-btn {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 8rpx 0 0;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
line-height: normal;
|
|||
|
|
font-size: inherit;
|
|||
|
|
color: inherit;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-item-btn::after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-item-hover {
|
|||
|
|
opacity: 0.88;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-tool {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
color: #1768ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #4e5969;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-card {
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-item {
|
|||
|
|
height: 96rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-item-contact {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
text-align: left;
|
|||
|
|
line-height: inherit;
|
|||
|
|
font-size: inherit;
|
|||
|
|
color: inherit;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-item-contact::after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-item-contact-hover {
|
|||
|
|
background: rgba(23, 104, 255, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-icon {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
color: #1768ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-border {
|
|||
|
|
border-bottom-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #1d2129;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-row {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-time {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #ffb020;
|
|||
|
|
}
|
|||
|
|
</style>
|