mtsd/sqxp-wx/pages/client/profile/profile.vue

<template>
  <view class="profile-page client-theme">
    <view v-if="profileLoading" class="profile-loading-wrap">
      <ClientSkeleton variant="hero-list" :rows="2" />
    </view>
    <scroll-view v-else scroll-y class="profile-scroll" :show-scrollbar="true">
      <!-- 对齐 sanqiang-client-profile-ui-demo.html .header -->
      <view class="profile-header sq-hero-header sq-hero-header--compact sq-hero-header--client">
        <view class="profile-header-content">
          <view class="user-row">
            <view class="avatar">
              <ClientImageLoader class="avatar-img" :src="avatarDisplayUrl" mode="aspectFill" radius="50%" />
            </view>
            <view class="user-text">
              <text class="user-name">{{ userStore.userInfo?.realName || '用户' }}</text>
              <text class="user-sub">
                叁强会员 · {{ userStore.userInfo?.regionName?.trim() || '客户' }}
              </text>
            </view>
          </view>
          <view class="user-stats">
            <view class="stat-item" hover-class="stat-item--pressed" :hover-stay-time="100" @click="goOrders">
              <text class="stat-value">{{ dashPending }}</text>
              <text class="stat-label">待支付</text>
            </view>
            <view class="stat-item" hover-class="stat-item--pressed" :hover-stay-time="100" @click="goOrders">
              <text class="stat-value">{{ dashDeliver }}</text>
              <text class="stat-label">配送中</text>
            </view>
            <view class="stat-item" hover-class="stat-item--pressed" :hover-stay-time="100" @click="goOrders">
              <text class="stat-value">{{ dashDone }}</text>
              <text class="stat-label">已完成</text>
            </view>
          </view>
        </view>
      </view>

      <view class="profile-section">
        <view class="menu-card">
          <view
            v-for="(item, index) in menuItems"
            :key="index"
            class="menu-row"
            hover-class="menu-row--pressed"
            :hover-stay-time="100"
            @click="goToMenu(item.path)"
          >
            <view class="menu-left">
              <view class="menu-ico-wrap" :class="{ 'menu-ico-wrap--bg': item.withBg }">
                <image class="menu-ico-img" :src="item.icon" mode="aspectFit" />
              </view>
              <text class="menu-text">{{ item.text }}</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-row" hover-class="menu-row--pressed" :hover-stay-time="100" @click="goToMenu('__service__')">
            <view class="menu-left">
              <view class="menu-ico-wrap menu-ico-wrap--bg">
                <image class="menu-ico-img" :src="ICON_SERVICE" mode="aspectFit" />
              </view>
              <text class="menu-text">联系客服</text>
            </view>
            <image class="menu-arrow-icon" :src="ICON_OUTGOING_CALL" mode="aspectFit" />
          </view>
        </view>

        <view class="logout-btn" hover-class="logout-btn--pressed" :hover-stay-time="120" @click="handleLogout">
          <text>退出登录</text>
        </view>
      </view>
    </scroll-view>
    <!-- #ifdef H5 -->
    <ClientTabBar active="profile" />
    <!-- #endif -->

    <view
      v-if="showLogoutDialog"
      class="logout-dialog-mask"
      @click="closeLogoutDialog"
      @touchmove.stop.prevent
    >
      <view class="logout-dialog" @click.stop>
        <view class="logout-dialog-title">退出登录</view>
        <view class="logout-dialog-content">退出后需要重新登录，确认要退出当前账号吗？</view>
        <view class="logout-dialog-actions">
          <view class="logout-action logout-action-cancel" @click="closeLogoutDialog">取消</view>
          <view class="logout-action logout-action-confirm" @click="confirmLogout">
            {{ logoutSubmitting ? '退出中...' : '退出登录' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>



<script setup>
import { computed, onMounted, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { request, parseResponseJson } from '@/utils/request'
import { API_URL } from '@/config/api'
import { resolveUserAvatarUrl } from '@/utils/avatar'
import { fetchServicePhone, dialServicePhone } from '@/utils/service-contact'
import { staticAssetUrl } from '@/utils/staticAsset'
import ClientTabBar from '@/components/client/client-tab-bar.vue'
import ClientSkeleton from '@/components/client/client-skeleton.vue'
import ClientImageLoader from '@/components/client/client-image-loader.vue'

// Store
const userStore = useUserStore()

const avatarDisplayUrl = computed(() =>
  resolveUserAvatarUrl(userStore.userInfo?.avatarUrl, userStore.userInfo?.role)
)

const dashPending = ref(0)
const dashDeliver = ref(0)
const dashDone = ref(0)
const servicePhone = ref('')
const profileLoading = ref(true)
const showLogoutDialog = ref(false)
const logoutSubmitting = ref(false)
const ICON_COORDINATE = staticAssetUrl('coordinate-1.svg')
const ICON_PASSWORD = staticAssetUrl('images/修改密码.svg')
const ICON_SERVICE = staticAssetUrl('images/客服.svg')
const ICON_OUTGOING_CALL = staticAssetUrl('Outgoing-call.svg')

// 由于 `tabBar` 页面不能使用 `uni.navigateTo`，这里对已配置的 tabbar 路由做个区分
const tabBarPageSet = new Set([
  '/pages/client/home/home',
  '/pages/client/order/order',
  '/pages/client/cart/cart',
  '/pages/client/profile/profile'
])

function goOrders() {
  uni.switchTab({ url: '/pages/client/order/order' })
}

async function loadServicePhone() {
  servicePhone.value = await fetchServicePhone()
}

async function onCallService() {
  const p = servicePhone.value || (await fetchServicePhone())
  servicePhone.value = p
  dialServicePhone(p)
}

async function loadDashboard() {
  try {
    const res = await request({ url: API_URL.CLIENT_DASHBOARD, method: 'GET' })
    const body = parseResponseJson(res)
    if (body.code === 200 && body.data) {
      dashPending.value = body.data.pendingPayment ?? 0
      dashDeliver.value = body.data.delivering ?? 0
      dashDone.value = body.data.completed ?? 0
    }
  } catch {
    // 忽略统计失败
  }
}

// 与 miniprogram/profile 对齐（功能路径不变）
const menuItems = [
  { text: '收货地址管理', path: '/pages/client/address/address', icon: ICON_COORDINATE, withBg: true },
  { text: '修改密码', path: '/pages/supplier/settings/password', icon: ICON_PASSWORD, withBg: true },
]

// 跳转到菜单
function goToMenu(path) {
  if (path === '__service__') {
    void onCallService()
    return
  }
  if (path) {
    if (tabBarPageSet.has(path)) {
      uni.switchTab({ url: path })
    } else {
      uni.navigateTo({ url: path })
    }
  } else {
    uni.showToast({ title: '功能开发中', icon: 'none' })
  }
}

// 退出登录
function handleLogout() {
  showLogoutDialog.value = true
}

function closeLogoutDialog() {
  if (logoutSubmitting.value) return
  showLogoutDialog.value = false
}

async function confirmLogout() {
  if (logoutSubmitting.value) return
  logoutSubmitting.value = true
  try {
    await userStore.logout()
    showLogoutDialog.value = false
  } finally {
    logoutSubmitting.value = false
  }
}

onMounted(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn) {
    uni.reLaunch({ url: '/pages/login/login' })
    return
  }
  if (!userStore.isClient) {
    uni.showToast({ title: '请使用客户账号登录', icon: 'none' })
    setTimeout(() => userStore.navigateToHome(), 1500)
    return
  }
  ;(async () => {
    try {
      await Promise.all([loadDashboard(), loadServicePhone()])
    } finally {
      profileLoading.value = false
    }
  })()
})

onShow(() => {
  userStore.checkLoginStatus()
  if (!userStore.isLoggedIn || !userStore.isClient) return
  loadDashboard()
})
</script>



<style lang="scss" scoped>
.profile-loading-wrap {
  flex: 1;
  min-height: 0;
}

.profile-page {
  height: 100%;
  min-height: 0;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.profile-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* 对齐 sanqiang-client-profile-ui-demo.html .header */
.profile-header {
  color: #ffffff;
  overflow: hidden;
}

.profile-header-content {
  padding: 8rpx 0 16rpx 0;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  flex-shrink: 0;

  .avatar-img {
    width: 100%;
    height: 100%;
  }
}

.user-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1.25;
}

.user-sub {
  font-size: 24rpx;
  opacity: 0.9;
  line-height: 1.35;
}

.user-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.stat-item {
  background: rgba(255, 255, 255, 0.14);
  border: 1rpx solid rgba(255, 255, 255, 0.22);
  border-radius: 24rpx;
  padding: 20rpx 16rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1.2;
}

.stat-label {
  display: block;
  margin-top: 6rpx;
  font-size: 22rpx;
  opacity: 0.95;
}

.stat-item--pressed {
  opacity: 0.9;
}

.profile-section {
  padding: 24rpx 32rpx calc(32rpx + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.menu-card {
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: 28rpx;
  padding: 8rpx 20rpx;
  box-sizing: border-box;
}

.menu-row {
  min-height: 92rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #edf5f1;
  box-sizing: border-box;

  &:last-child {
    border-bottom: none;
  }
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-width: 0;
}

.menu-ico-img {
  width: 36rpx;
  height: 36rpx;
  flex-shrink: 0;
}

.menu-ico-wrap {
  width: 52rpx;
  height: 52rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-ico-wrap--bg {
  background: #0a9f6d;
}

.menu-text {
  font-size: 28rpx;
  color: var(--c-text);
}

.menu-row--pressed {
  opacity: 0.88;
}

.menu-arrow {
  font-size: 28rpx;
  color: #9ba8a2;
  flex-shrink: 0;
}

.menu-arrow-icon {
  width: 34rpx;
  height: 34rpx;
  flex-shrink: 0;
}

.logout-btn {
  margin-top: 24rpx;
  min-height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(145deg, var(--c-brand-green), var(--c-brand-green-2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);

  text {
    font-size: 28rpx;
    color: #ffffff;
    font-weight: 600;
  }
}

.logout-btn--pressed {
  opacity: 0.9;
}

.logout-dialog-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48rpx;
  z-index: 1200;
}

.logout-dialog {
  width: 100%;
  max-width: 620rpx;
  border-radius: 28rpx;
  background: #ffffff;
  box-shadow: 0 16rpx 42rpx rgba(10, 159, 109, 0.18);
  padding: 34rpx 28rpx 24rpx;
  box-sizing: border-box;
}

.logout-dialog-title {
  font-size: 34rpx;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  line-height: 1.3;
}

.logout-dialog-content {
  margin-top: 14rpx;
  font-size: 26rpx;
  line-height: 1.6;
  color: var(--c-muted);
  text-align: center;
}

.logout-dialog-actions {
  margin-top: 28rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16rpx;
}

.logout-action {
  min-height: 76rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 600;
}

.logout-action-cancel {
  background: #f4f7f6;
  color: #5b6b64;
  border: 1rpx solid #ddebe5;
}

.logout-action-confirm {
  background: linear-gradient(145deg, var(--c-brand-green), var(--c-brand-green-2));
  color: #ffffff;
}
</style>

<style lang="scss">
page {
  height: 100%;
  background-color: #f5f8f7;
}
</style>