mechanicStore-app/pages/myEdit/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 name="customer-service" size="18" color="#666">
					</u-icon>
					<text>
						客服
					</text>
				</view>
				<view class="action-item" @click="openSettings">
					<u-icon name="setting" size="18" 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.navigateTo({
			url: '/pages/myEdit/setting'
		});
	};

	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>