haha/haha-mp/src/pages/my/my.vue

<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-avatar">
        <view class="avatar-icon-modern"></view>
      </view>
      <view class="user-details">
        <view class="user-phone">{{ displayPhone }}</view>
      </view>
    </view>

    <!-- 菜单分组 -->
    <view class="menu-section">
      <view class="section-title">订单与服务</view>
      <view class="menu-card">
        <view class="menu-item" @click="goToOrders">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/orders.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">我的订单</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="menu-item" @click="goToCoupons">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/coupon.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">我的优惠券</view>
          <view v-if="availableCouponCount > 0" class="menu-badge">{{ availableCouponCount }}</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="menu-item" @click="goToCouponCenter">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/coupon.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">领券中心</view>
          <view class="menu-arrow"></view>
        </view>
      </view>
    </view>

    <view class="menu-section">
      <view class="section-title">个人中心</view>
      <view class="menu-card">
        <view class="menu-item" @click="goToMembership">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/membership.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">我的会员卡</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="menu-item" @click="goToCards">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/wallet.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">我的卡片</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="menu-item" @click="goToInvoice">
          <view class="menu-icon">
            <image class="menu-svg-icon" src="/static/icons/invoice.svg" mode="aspectFit"></image>
          </view>
          <view class="menu-text">发票管理</view>
          <view class="menu-arrow"></view>
        </view>
      </view>
    </view>

    <view class="menu-section">
        <view class="section-title">帮助与支持</view>
        <view class="menu-card">
          <view class="menu-item" @click="goToFAQ">
            <view class="menu-icon">
              <image class="menu-svg-icon" src="/static/icons/faq.svg" mode="aspectFit"></image>
            </view>
            <view class="menu-text">常见问题</view>
            <view class="menu-arrow"></view>
          </view>
          <CustomerServiceButton
            mode="menu-item"
            title="个人中心-联系客服"
            :path="'/pages/my/my'"
          >
            <view class="menu-icon">
              <image class="menu-svg-icon" src="/static/icons/service.svg" mode="aspectFit"></image>
            </view>
            <view class="menu-text">联系客服</view>
            <view class="service-phone">在线咨询</view>
            <view class="menu-arrow"></view>
          </CustomerServiceButton>
          <view class="menu-item" @click="goToOfficialAccount">
            <view class="menu-icon">
              <image class="menu-svg-icon" src="/static/icons/official.svg" mode="aspectFit"></image>
            </view>
            <view class="menu-text">公众号信息</view>
            <view class="menu-arrow"></view>
          </view>
        </view>
      </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      {{ appVersion }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { logout as logoutApi } from '../../api/user';
import { getCouponCount } from '../../api/coupon';
import { clearAuth, getUserInfo as getStoredUserInfo } from '../../utils/auth';
import { logger } from '../../utils/logger';
import { APP_VERSION } from '../../utils/config';
import type { UserInfo } from '../../api/user';

const userInfo = ref<UserInfo | null>(null);
const availableCouponCount = ref(0);
const appVersion = APP_VERSION;

// 显示手机号（脱敏）
const displayPhone = computed(() => {
  const phone = userInfo.value?.phone;
  if (phone && phone.length >= 7) {
    return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
  }
  return phone || '未绑定手机号';
});

// 每次页面显示时刷新用户信息
onShow(() => {
  loadUserInfo();
});

const loadUserInfo = () => {
  const stored = getStoredUserInfo();
  if (stored) {
    userInfo.value = stored;
  }
};

onMounted(async () => {
  // 加载用户信息（从本地存储）
  loadUserInfo();
  // 加载可用优惠券数量
  try {
    const result = await getCouponCount();
    availableCouponCount.value = result.availableCount || 0;
  } catch (e) {
    logger.log('获取优惠券数量失败', e);
  }
});

const goBack = () => {
  uni.navigateBack();
};

const goToOrders = () => {
  uni.navigateTo({
    url: '/pages/orders/orders'
  });
};

const goToCoupons = () => {
  uni.navigateTo({
    url: '/pages/coupons/coupons'
  });
};

const goToCouponCenter = () => {
  uni.navigateTo({
    url: '/pages/couponCenter/couponCenter'
  });
};

const goToMembership = () => {
  uni.vibrateShort({ type: 'light' });
  uni.showToast({
    title: '会员卡功能开发中',
    icon: 'none'
  });
};

const goToCards = () => {
  uni.vibrateShort({ type: 'light' });
  uni.showToast({
    title: '卡片功能开发中',
    icon: 'none'
  });
};

const goToInvoice = () => {
  uni.vibrateShort({ type: 'light' });
  uni.showToast({
    title: '发票管理功能开发中',
    icon: 'none'
  });
};

const goToFAQ = () => {
  uni.vibrateShort({ type: 'light' });
  uni.showToast({
    title: '常见问题功能开发中',
    icon: 'none'
  });
};

const callService = () => {
  uni.vibrateShort({ type: 'light' });
  uni.makePhoneCall({
    phoneNumber: '400-0755-315'
  });
};

const goToOfficialAccount = () => {
  uni.vibrateShort({ type: 'light' });
  uni.showToast({
    title: '公众号信息功能开发中',
    icon: 'none'
  });
};

const goToSettings = () => {
  uni.showToast({
    title: '设置功能开发中',
    icon: 'none'
  });
};

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await logoutApi();
        } catch (e) {
          logger.log('退出登录接口调用失败', e);
        } finally {
          clearAuth();
          uni.reLaunch({
            url: '/pages/login/login'
          });
        }
      }
    }
  });
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: $color-bg-secondary;
  display: flex;
  flex-direction: column;
  padding-bottom: $spacing-xl;
}

/* ========== 用户信息卡片 ========== */
.user-card {
  background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
  padding: $spacing-lg $spacing-lg;
  padding-bottom: $spacing-md;
  display: flex;
  align-items: center;
  animation: slideDown 0.3s ease;
  
  .user-avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: $radius-circle;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: $spacing-md;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    
    .avatar-icon-modern {
      width: 44rpx;
      height: 44rpx;
      background: linear-gradient(135deg, $color-primary-light, $color-primary);
      border-radius: 50%;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        background: #ffffff;
        border-radius: 50%;
        top: 6rpx;
        left: 50%;
        transform: translateX(-50%);
      }
      
      &::after {
        content: '';
        position: absolute;
        width: 36rpx;
        height: 24rpx;
        background: #ffffff;
        border-radius: 18rpx 18rpx 0 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  
  .user-details {
    flex: 1;
  }
  
  .user-phone {
    font-size: 28rpx;
    font-weight: 500;
    color: $color-text-primary;
  }
}

/* ========== 菜单分组 ========== */
.menu-section {
  margin-top: $spacing-lg;
  animation: slideUp 0.3s ease;
  
  .section-title {
    font-size: 24rpx;
    color: $color-text-secondary;
    padding: 0 $spacing-lg $spacing-sm;
    font-weight: 500;
  }
}

.menu-card {
  background: $color-bg-primary;
  margin: 0 $spacing-lg;
  border-radius: $radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: $spacing-md $spacing-lg;
  border-bottom: 1rpx solid $color-border;
  transition: all $duration-fast $ease-out;
  position: relative;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background: $color-bg-secondary;
  }
  
  .menu-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: $spacing-md;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .menu-svg-icon {
      width: 100%;
      height: 100%;
    }
  }
  
  .menu-text {
    flex: 1;
    font-size: 28rpx;
    color: $color-text-primary;
  }
  
  .menu-arrow {
    width: 16rpx;
    height: 16rpx;
    border-top: 2rpx solid $color-text-tertiary;
    border-right: 2rpx solid $color-text-tertiary;
    transform: rotate(45deg);
    margin-left: $spacing-sm;
  }
  
  .menu-badge {
    background: $color-error;
    color: #ffffff;
    font-size: 20rpx;
    min-width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 16rpx;
    padding: 0 8rpx;
    margin-right: $spacing-sm;
    animation: bounce 0.3s ease;
  }
  
  .service-phone {
    font-size: 24rpx;
    color: $color-text-secondary;
    margin-left: auto;
    margin-right: $spacing-sm;
  }
}

/* ========== 退出登录 ========== */
.logout-section {
  padding: $spacing-xxl $spacing-lg $spacing-lg;
  display: flex;
  justify-content: center;
  animation: fadeIn 0.35s ease;
  
  .logout-btn {
    width: 60%;
    height: 88rpx;
    background: $color-bg-primary;
    border: 2rpx solid $color-border;
    border-radius: $radius-xl;
    color: $color-text-secondary;
    font-size: 28rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all $duration-fast $ease-out;
    
    &::after {
      border: none;
    }
    
    &:active {
      background: $color-bg-secondary;
      border-color: $color-text-tertiary;
    }
  }
}

/* ========== 版本信息 ========== */
.version-info {
  text-align: center;
  font-size: 22rpx;
  color: $color-text-tertiary;
  padding: $spacing-lg 0;
  animation: fadeIn 0.4s ease;
}
</style>