mechanicStore-app/pages/myEdit/my.uvue

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

		<!-- 1. 用户信息头部 -->
		<view class="user-header">
			<view class="user-info">
				<image class="avatar" :src="coachInfo['avatar']" mode="aspectFill" />
				<text class="username">
					{{ coachInfo['name'] }}
				</text>
				<image @click="jumpStarRating()" :src="'/static/testInfo/xx-x' + coachInfo?.star_leavl + '.png'"
					style="width: 108rpx;height:40rpx;margin-left: 12rpx;" mode="aspectFit">
				</image>
			</view>
			<view class="header-actions">
				<view class="action-item" @click="contactService">
					<view class="icon-circle">
						<u-icon name="customerService" size="30" color="#666" />
					</view>
					<text>
						客服
					</text>
				</view>
				<view class="action-item" style="margin-left: 20rpx;" @click="openSettings">
					<view class="icon-circle">
						<u-icon name="setting" size="22" color="#666" />
					</view>
					<text>
						设置
					</text>
				</view>
			</view>
		</view>


		<!-- 2. 等级卡片 -->
		<view class="level-card">
			<image src="/static/testInfo/l-bg.png" class="level-bg" mode="widthFix">
			</image>
			<view class="level-content">
				<view class="level-main" style="width: 60%;">
					<text class="level-title">
						V{{ coachInfo['level'] }}
					</text>
					<text style="margin: 0 20rpx;">
						|
					</text>
					<text class="level-sub">
						成长值 {{ coachInfo['growthValue'] }}
					</text>
				</view>
				<text class="progress-text">
					还差{{ coachInfo['nextLevelGap'] }}成长值可升至V{{ coachInfo['nextLevel'] }}
				</text>
				<view class="level-progress-box">
					<view class="level-progress">

						<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">
						<text>
							我的等级
						</text>
					</view>
				</view>
			</view>


			<!-- 3. 我的档案 -->
			<view class="bs-box">
				<view class="title-bg-box">
					<text class="texnj-box">
						我的档案
					</text>
				</view>
				<view class="level-main">
					<view class="action-item" @click="jumpQy">
						<image src="/static/myImages/my-qy.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							签约
						</text>

					</view>

					<view class="action-item" style="margin-left: 25rpx;" @click="jumpJiey">
						<image src="/static/myImages/my-jiey.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							解约
						</text>
					</view>
					<view class="action-item" @click="jumpQd">
						<image src="/static/myImages/my-qd.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							店铺签到
						</text>
					</view>
					<view class="action-item" @click="jumpGoum">
						<image src="/static/myImages/my-goum.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							购买物料
						</text>

					</view>
				</view>
				<view class="title-bg-box">
					<view class="texnj-box">
						我的工具
					</view>
				</view>
				<view class="level-main" style="justify-content: space-between; padding: 0 15rpx;">
					<view class="action-item" @click="jumpXuexi">
						<image src="/static/myImages/my-xux.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							学习园地
						</text>
					</view>
					<view class="action-item">
						<image src="/static/myImages/my-wt.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							申诉
						</text>
					</view>
					<view class="action-item">
						<image src="/static/myImages/my-yhj.png" style="width: 60rpx;height:60rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							定制优惠
						</text>
					</view>
					<view class="action-item">
						<image src="/static/myImages/vipIcon.png" style="width: 70rpx;height:70rpx;" mode="aspectFit">
						</image>
						<text class="dib-text">
							VIP俱乐部
						</text>
					</view>
				</view>
				<view class="level-progress-box">
					<view class="lef-bg-box" @click="jumpLaxin">
						<image src="/static/myImages/my-lax.png" class="my-lax" mode="widthFix">
						</image>
						<view class="conm-box">
							<text class="max-box">
								邀请好友赚钱
							</text>
							<text class="min-box">
								单次最高可奖200元
							</text>
						</view>
					</view>
					<view class="lef-bg-box" @click="jumpMyTeam">
						<image src="/static/myImages/my-td.png" class="my-lax" mode="widthFix">
						</image>
						<view class="conm-box">
							<text class="max-box">
								我的团队
							</text>
							<text class="min-box">
								团队成员数：100人
							</text>
						</view>
					</view>
				</view>

				<image class="hhr-image" src="/static/yaoqInfo/hhr-image.png" mode="widthFix">
				</image>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { getCoachDetaile } from '@/utils/api/masterInfoApi'
	// --- 用户信息 ---
	const coachInfo = reactive<UTSJSONObject>({
		name: '刘大锤',
		avatar: '/static/testInfo/boy-nickname.png', // 替换为实际头像
		level: 30,
		growthValue: 50,
		star_leavl: 3,
		star_score: 3.0,
		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(() => `${coachInfo.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 httpGetCoachDetail = async () => {
		const response = await getCoachDetaile() as UTSJSONObject
		const code = response["code"] as number
		const dataObj = response["data"] as UTSJSONObject | null
		if (code != 200 || dataObj == null) {
			return
		}
		coachInfo.name = dataObj["nickname"] as string
		coachInfo.avatar = dataObj["avatar"] as string
		coachInfo.level = dataObj["level"] as number
		coachInfo.growthValue = dataObj["growthValue"] as number
		coachInfo.nextLevel = dataObj["nextLevel"] as number
		coachInfo.nextLevelGap = dataObj["nextLevelGap"] as number
		coachInfo.progressPercent = dataObj["progressPercent"] as number
		coachInfo.star_leavl = dataObj["star_leavl"] as number
		coachInfo.star_score = dataObj["star_score"] as number

	}

	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 jumpQy = () => {
		uni.navigateTo({
			url: '/pages/myEdit/sign'
		});
	};
	const jumpJiey = () => {
		uni.navigateTo({
			url: '/pages/myEdit/terminate'
		});
	};
	const jumpQd = () => {
		uni.navigateTo({
			url: '/pages/myEdit/signIn'
		});
	};
	const jumpGoum = () => {
		uni.navigateTo({
			url: '/pages/myEdit/shoppingRecord'
		});
	};
	const jumpLaxin = () => {
		uni.navigateTo({
			url: '/pages/myEdit/inviteRecord'
		});
	};
	//跳转到我的团队
	const jumpMyTeam = () => {
		uni.navigateTo({
			url: '/pages/myEdit/team'
		});
	};
	const jumpYhj = () => {
		uni.navigateTo({
			url: '/pages/myEdit/setting'
		});
	};
	//跳转到城市合伙人
	const jumpPartner = async () => {
		uni.navigateTo({
			url: '/pages/masterProject/inviteInfo/partner/index'
		})
	}

	//跳转到用户开通VIP
	const goToOpenVip = async () => {
		uni.navigateTo({
			url: '/pages/masterProject/masterInfo/vipMember/index'
		})
	}
	//跳转到问题反馈
	const goToMyCourse = async () => {
		uni.navigateTo({
			url: '/pages/masterProject/masterInfo/problemFeedback/index'
		})
	}
	//跳转到个人信息
	const jumpMasterInfo = async () => {
		uni.navigateTo({
			url: '/pages/masterProject/masterInfo/index'
		})
	}
	//跳转到我的星级
	const jumpStarRating = async () => {
		uni.navigateTo({
			url: '/pages/masterProject/masterInfo/starRating/index?star_score'
		})
	}
	//跳转到学习园地
	const jumpXuexi = () => {
		uni.navigateTo({
			url: '/pages/masterProject/inviteInfo/learningCorner/index'
		})
	}
	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' });
				}
			}
		});
	};
	onLoad(() => {
		httpGetCoachDetail()
	})
</script>

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

	.page-container {
		background-color: rgba(246, 246, 244, 0.5);
	}

	/* --- 用户头部 --- */
	.user-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		justify-content: space-between;
	}

	.avatar {
		width: 124rpx;
		height: 124rpx;
		border-radius: 62rpx;
		border: 2rpx solid #fff;
	}

	.user-info {
		flex-direction: row;
		align-items: center;
	}

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

	.badge-row {
		display: flex;
		flex-direction: row;
	}

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

	.badge.vip {
		color: #ffffff;
	}

	.header-actions {
		display: flex;
		flex-direction: row;
	}

	.action-item {
		display: flex;
		align-items: center;

	}

	.icon-circle {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}


	/* --- 等级卡片 --- */
	.level-card {
		/* padding:0 40rpx; */
		position: relative;
		flex-direction: column;
		align-items: center;
	}

	.level-bg {
		position: absolute;
		width: 90%;
		z-index: 1;
	}

	.level-content {
		position: absolute;
		z-index: 2;
		padding: 20rpx;
		width: 90%;
	}

	.level-main {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.level-title {
		font-size: 86rpx;
		color: #485575;
	}

	.level-sub {
		font-size: 36rpx;
		color: #424C6C;
	}

	.level-progress-box {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

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

	.progress-text {
		font-size: 28rpx;
		opacity: 0.8;
		margin-bottom: 10rpx;
	}

	.progress-bar {

		height: 12rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 6rpx;
		overflow: hidden;
		margin-top: 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 {
		background-color: #E9EEF7;
		border-radius: 14px;
		padding: 8rpx 16rpx;
	}

	/* --- 章节标题 --- */
	.bs-box {
		background-color: #ffffff;
		border-radius: 36rpx;
		padding: 30rpx;
		width: 100%;
		margin-top: 30%;
	}

	.title-bg-box {
		display: flex;
		align-items: flex-start;
		margin: 35rpx 0;
	}

	.texnj-box {
		font-size: 30rpx;
		font-weight: 500;
		background: linear-gradient(to right, #ffd95aff, #FFFFFF);
		border-radius: 24rpx;
		padding: 4rpx 10rpx;
		background-size: 50% 100%;
		background-repeat: no-repeat;
		background-position: 0 50%;
	}

	.lef-bg-box {
		width: 49%;
		position: relative;
		margin: 20rpx 0;
	}

	.my-lax {
		width: 100%;
		/* position: absolute; */

	}

	.min-box {
		font-size: 30rpx;
		color: #a8a8a8ff;
	}

	.max-box {
		font-size: 32rpx;
		color: #000000ff;
		font-weight: bold;
	}

	.conm-box {
		position: absolute;
		padding: 28rpx;

	}

	.hhr-image {
		width: 100%;
	}
</style>