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

<template>
  <view class="container">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar">
        <image class="avatar-icon" src="/static/icons/user.svg"></image>
      </view>
      <view class="user-details">
        <view class="user-name">微信用户</view>
        <view class="user-phone">130****1579</view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToOrders">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/orders.svg"></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"></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"></image>
        </view>
        <view class="menu-text">领券中心</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToMembership">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/membership.svg"></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"></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"></image>
        </view>
        <view class="menu-text">发票管理</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="goToFAQ">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/faq.svg"></image>
        </view>
        <view class="menu-text">常见问题</view>
        <view class="menu-arrow"></view>
      </view>
      <view class="menu-item" @click="callService">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/service.svg"></image>
        </view>
        <view class="menu-text">联系客服</view>
        <view class="service-phone">400-0755-315</view>
      </view>
      <view class="menu-item" @click="goToOfficialAccount">
        <view class="menu-icon">
          <image class="menu-svg-icon" src="/static/icons/official.svg"></image>
        </view>
        <view class="menu-text">公众号信息</view>
        <view class="menu-arrow"></view>
      </view>
    </view>

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

    <!-- 版本信息 -->
    <view class="version-info">
      v1.62.11
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { mockApi } from '../../utils/mock';
import { logout as logoutApi } from '../../api/user';
import { getCouponCount } from '../../api/coupon';
import { clearAuth } from '../../utils/auth';

const userInfo = ref<any>(null);
const availableCouponCount = ref(0);

onMounted(async () => {
  const response = await mockApi.getUserInfo();
  if (response.success) {
    userInfo.value = response.data;
  }
  // 加载可用优惠券数量
  try {
    const result = await getCouponCount();
    availableCouponCount.value = result.availableCount || 0;
  } catch (e) {
    console.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.showToast({
    title: '会员卡功能开发中',
    icon: 'none'
  });
};

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

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

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

const callService = () => {
  uni.makePhoneCall({
    phoneNumber: '18371997424'
  });
};

const goToOfficialAccount = () => {
  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) {
          console.log('退出登录接口调用失败', e);
        } finally {
          clearAuth();
          uni.reLaunch({
            url: '/pages/login/login'
          });
        }
      }
    }
  });
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx 40rpx;
  background-color: #FFD700;
  margin-top: 0;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32rpx;
}

.avatar-icon {
  width: 90rpx;
  height: 90rpx;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 34rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
  color: #000000;
}

.user-phone {
  font-size: 24rpx;
  color: #333333;
}

/* 菜单列表 */
.menu-list {
  background-color: #ffffff;
  margin-top: 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f9f9f9;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.menu-svg-icon {
  width: 32rpx;
  height: 32rpx;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.menu-arrow {
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #999999;
  border-right: 2rpx solid #999999;
  transform: rotate(45deg);
}

.menu-badge {
  background-color: #FF4D4F;
  color: #ffffff;
  font-size: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 0 8rpx;
  margin-right: 12rpx;
}

.service-phone {
  font-size: 24rpx;
  color: #666666;
}

/* 退出登录区域 */
.logout-section {
  padding: 60rpx 32rpx 20rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}

.logout-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #FFD700;
  border: none;
  border-radius: 40rpx;
  color: #333333;
  font-size: 28rpx;
  font-weight: 500;
}

.logout-btn:active {
  background-color: #E6C200;
}

/* 版本信息 */
.version-info {
  padding: 40rpx 0;
  text-align: center;
  font-size: 22rpx;
  color: #999999;
  background-color: #ffffff;
}
</style>