qncV4uni-app/src/pages/mine.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>