mechanicStore-app/pages/index/my.uvue

<template>
  <view class="page-container">

    <!-- 1. 用户信息头部 -->
    <view class="user-header">
      <image :src="userInfo['avatar']" class="avatar" mode="aspectFill" />
      <view class="user-info">
        <text class="username">
          {{ userInfo['name'] }}
        </text>
        <view class="badge-row">
          <text class="badge vip">
            王牌
          </text>
        </view>
      </view>
      <view class="header-actions">
        <view class="action-item" @click="contactService">
          <u-icon type="customer-service" size="24" color="#666">
          </u-icon>
          <text>
            客服
          </text>
        </view>
        <view class="action-item" @click="openSettings">
          <u-icon type="gear" size="24" color="#666">
          </u-icon>
          <text>
            设置
          </text>
        </view>
      </view>
    </view>

    <!-- 2. 等级卡片 -->
    <view class="level-card">
      <view class="level-main">
        <text class="level-title">
          V{{ userInfo['level'] }}
        </text>
        <text class="level-sub">
          成长值 {{ userInfo['growthValue'] }}
        </text>
      </view>
      <view class="level-progress">
        <text class="progress-text">
          还差{{ userInfo['nextLevelGap'] }}成长值可升至V{{ userInfo['nextLevel'] }}
        </text>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressWidth }">
          </view>
        </view>
        <view class="progress-labels">
          <text>
            V1
          </text>
          <text>
            V2
          </text>
        </view>
      </view>
      <view class="level-badge" @click="viewLevelDetail">
        <u-icon type="vip" size="40" color="#ffffff">
        </u-icon>
        <text>
          我的等级
        </text>
      </view>
    </view>

    <!-- 3. 我的档案 -->
    <view class="section-title">
      我的档案
    </view>
    <view class="profile-stats">
      <view class="stat-item">
        <text class="stat-value">
          60
        </text>
        <text class="stat-label">
          签约
        </text>
      </view>
      <view class="stat-item">
        <text class="stat-value">
          21
        </text>
        <text class="stat-label">
          解约
        </text>
      </view>
      <view class="stat-item">
        <u-icon type="location" size="24" color="#666">
        </u-icon>
        <text class="stat-label">
          异地签到
        </text>
      </view>
      <view class="stat-item">
        <u-icon type="cart" size="24" color="#666">
        </u-icon>
        <text class="stat-label">
          购买物料
        </text>
      </view>
    </view>

    <!-- 4. 我的工具 -->
    <view class="section-title">
      我的工具
    </view>
    <view class="tools-grid">
      <view class="tool-item" v-for="(tool, idx) in tools" :key="idx" @click="handleToolClick(tool)">
        <u-icon :type="tool.icon" size="32" :color="tool.color">
        </u-icon>
        <text class="tool-name">
          {{ tool.name }}
        </text>
      </view>
    </view>

    <!-- 5. 推广卡片 -->
    <view class="promo-cards">
      <!-- 邀请好友 -->
      <view class="promo-card invite" @click="inviteFriends">
        <view class="promo-content">
          <text class="promo-title">
            邀请好友赚钱
          </text>
          <text class="promo-subtitle">
            单次最高可奖200元
          </text>
        </view>
        <u-icon type="gift" size="40" color="#ffd700">
        </u-icon>
      </view>

      <!-- 我的团队 -->
      <view class="promo-card team" @click="viewTeam">
        <view class="promo-content">
          <text class="promo-title">
            我的团队
          </text>
          <text class="promo-subtitle">
            团队成员100人
          </text>
        </view>
        <u-icon type="person" size="40" color="#4a90e2">
        </u-icon>
      </view>
    </view>

    <!-- 6. 城市合伙人 banner -->
    <view class="partner-banner" @click="joinPartner">
      <view class="partner-content">
        <text class="partner-title">
          寻找城市合伙人
        </text>
        <text class="partner-subtitle">
          全新盈利模式助你创业
        </text>
      </view>
      <view class="partner-icon">
        <u-icon type="person" size="50" color="#ffffff">
        </u-icon>
        <u-icon type="person" size="30" color="#ffffff" style="margin-left: -20rpx;">
        </u-icon>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';

  // --- 用户信息 ---

	type UserInfo = {
		name : string;
		avatar : string;
		level : number;
		growthValue : number;
		nextLevel : number;
		nextLevelGap : number;
		progressPercent : number;
	}
  const userInfo = reactive<UserInfo>({
      name: '刘大锤',
      avatar: 'https://via.placeholder.com/100x100/4a90e2/ffffff?text=LD', // 替换为实际头像
      level: 30,
      growthValue: 50,
      nextLevel: 2,
      nextLevelGap: 15,
      progressPercent: 75 // (50 / (50+15)) * 100 ≈ 75%
    });

  // computed helpers to satisfy UTS inference rules
  // convert percent to a fixed rpx width (assuming 750rpx full width)
  const progressWidth = computed(() => `${userInfo.progressPercent * 7.5}rpx`);

  // --- 工具列表 ---

	type ToolItem = {
		name : string;
		icon : string;
		color : string;
	};

  // avoid generic parameter on ref which earlier triggered an "interface does not
  // have constructors" error; cast the initial value instead.
  const tools = ref([
      { name: '学习园地', icon: 'book', color: '#ff9900' },
      { name: '问题反馈', icon: 'chat', color: '#52c41a' },
      { name: '定制优惠', icon: 'wallet', color: '#1890ff' },
      { name: 'VIP俱乐部', icon: 'vip', color: '#faad14' }
    ] as ToolItem[]);

  // --- 方法 ---
  const contactService = () => {
    uni.showToast({ title: '联系客服', icon: 'none' });
  };

  const openSettings = () => {
    uni.showToast({ title: '打开设置', icon: 'none' });
  };

  const viewLevelDetail = () => {
    uni.showToast({ title: '查看等级详情', icon: 'none' });
  };

  const handleToolClick = (tool : ToolItem) => {
    uni.showToast({ title: `点击${tool.name}`, icon: 'none' });
  };

  const inviteFriends = () => {
    uni.showModal({
        title: '邀请好友',
        content: '分享链接邀请好友加入，单次最高可获奖励200元！',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '已生成邀请链接', icon: 'success' });
          }
        }
      });
  };

  const viewTeam = () => {
    uni.showToast({ title: '查看团队成员', icon: 'none' });
  };

  const joinPartner = () => {
    uni.showModal({
        title: '城市合伙人',
        content: '全新盈利模式助你创业，立即申请成为城市合伙人！',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '申请已提交', icon: 'success' });
          }
        }
      });
  };
</script>

<style scoped>
  /*
  UniApp X 默认 page 是 flex-direction: column
  所以 .page-container 会自动垂直排列子元素
  */

  .page-container {
    background-color: #f5f6f8;
    /* min-height: 100vh unsupported */
    min-height: 1000rpx;
    /* width: 100%; default block behavior */
    box-sizing: border-box;
    padding: 20rpx;
    /* gap: 20rpx; */
    /* 各模块间间距 */
  }

  /* --- 用户头部 --- */
  .user-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 20rpx; */
    padding: 20rpx;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    border: 2rpx solid #eee;
  }

  .user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*  */
  }

  .username {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .badge-row {
    display: flex;
    flex-direction: row;
    /* gap: 10rpx; */
  }

  .badge {
    font-size: 22rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-weight: bold;
  }

  .badge.vip {
    background: linear-gradient(90deg, #4a90e2, #67b26f);
    color: #ffffff;
  }

  .header-actions {
    display: flex;
    flex-direction: row;
    /* gap: 30rpx; */
  }

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 4rpx; unsupported */
    font-size: 22rpx;
    color: #666;
  }

  /* --- 等级卡片 --- */
  .level-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    color: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .level-main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* baseline unsupported */
    /* gap: 15rpx; not supported by uvue */
    margin-bottom: 20rpx;
  }

  .level-title {
    font-size: 48rpx;
    font-weight: bold;
  }

  .level-sub {
    font-size: 28rpx;
    opacity: 0.9;
  }

  .level-progress {
    margin-bottom: 20rpx;
  }

  .progress-text {
    font-size: 24rpx;
    opacity: 0.8;
    margin-bottom: 10rpx;
    /* display:block removed; inline text is fine */
  }

  .progress-bar {
    /* width: 100%; */
    /* 全宽默认，无需指定百分比 */
    height: 12rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6rpx;
    overflow: hidden;
    margin-bottom: 8rpx;
  }

  .progress-fill {
    /* 使用与父容器相同的固定高度 */
    height: 12rpx;
    background: #ffffff;
    border-radius: 6rpx;
    transition: width 0.3s ease;
  }

  .progress-labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 22rpx;
    opacity: 0.7;
  }

  .level-badge {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*  */
    font-size: 24rpx;
    opacity: 0.9;
  }

  /* --- 章节标题 --- */
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-top: 10rpx;
    margin-bottom: 15rpx;
    padding-left: 10rpx;
    border-left: 4rpx solid #4a90e2;
  }

  /* --- 档案统计 --- */
  .profile-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .stat-value {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .stat-label {
    font-size: 24rpx;
    color: #666;
  }

  /* --- 工具网格 --- */
  .tools-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* gap: 20rpx; */
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .tool-item {
    /* width: calc(25% - 15rpx); not supported */
    width: 168rpx;
    /* approximate quarter width */
    /* 4列，减去gap */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 10rpx; */
    padding: 20rpx 0;
  }

  .tool-name {
    font-size: 24rpx;
    color: #666;
    text-align: center;
  }

  /* --- 推广卡片 --- */
  .promo-cards {
    display: flex;
    flex-direction: row;
    /* gap: 20rpx; */
  }

  .promo-card {
    flex: 1;
    border-radius: 16rpx;
    padding: 25rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  }

  .promo-card.invite {
    background: linear-gradient(135deg, #fff9e6 0%, #ffeaa7 100%);
  }

  .promo-card.team {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  }

  .promo-content {
    display: flex;
    flex-direction: column;
    /*  */
  }

  .promo-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }

  .promo-subtitle {
    font-size: 24rpx;
    color: #666;
  }

  /* --- 合伙人 Banner --- */
  .partner-banner {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    border-radius: 16rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }

  .partner-content {
    display: flex;
    flex-direction: column;
    /* gap: 10rpx; */
  }

  .partner-title {
    font-size: 32rpx;
    font-weight: bold;
  }

  .partner-subtitle {
    font-size: 26rpx;
    opacity: 0.9;
  }

  .partner-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>