mechanicStore-app/pages/index/console.uvue

<template>
	<scroll-view style="flex:1">

		<view class="page">
			<image class="upContent" src="@/static/imagesInfo/bg-color.png" mode="aspectFill">
			</image>

			<view class="city-info">
				<view>
					<text class="city-text-box">
						当前城市：{{ cityInfo }}
					</text>
				</view>
				<u-icon name="notification" :size="24" />
			</view>
			<!-- 用户卡片 -->
			<view class="user-card ">
				<image class="user-bg" src="@/static/imagesInfo/bg-icon.png" mode="scaleToFill">
				</image>
				<view class="user-info" style="padding: 20rpx;">
					<view class="user-left">
						<view class="user-info">
							<text class="user-name">
								刘大锤
							</text>
							<view class="tags">
								<text class="tag-new">
									新人实习
								</text>

							</view>
							<u-icon name="edit" :size="18" @click="jumpMasterInfo" />
							<text class="tag">
								编辑
							</text>
						</view>
						<view class="user-info">
							<u-icon name="customer-interests" :size="18" />
							<text class="user-role">
								小丁理疗师
							</text>
							<u-icon name="store" :size="18" />
							<text class="user-shop">
								佳人有约
							</text>

						</view>
						<view class="online-switch">
							<u-switch :checked="isOnline" @change="toggleOnline" />
						</view>
					</view>
					<view class="user-right" @click="jumpMasterInfo">
						<text class="text-time-box">
							入驻时间
						</text>
						<text class="text-time-box" style="margin-top: 5rpx;">2026.03.01{{
							coachInfo?.created_at.split(' ')[0] }}
						</text>
						<image v-if="coachInfo!=null && coachInfo.avatar_url!=null"
						:src="coachInfo!.avatar_url!.url"
						style="width: 138rpx;height:138rpx;border-radius: 69rpx;margin-top: 15rpx;"
						mode="aspectFit">
						</image>
						<image v-else src="/static/testInfo/boy-nickname.png"
						style="width: 138rpx;height:138rpx;border-radius: 69rpx;margin-top: 15rpx;"
						mode="aspectFit">
						</image>
					</view>
				</view>

				<view class="location-bar user-info">
					<u-icon name="navigation" :size="18" />
					<text class="location-text">
						当前定位：烟台市楚凤一街1号楚凤花园
					</text>
					<text class="location-btn">
						手动更新
					</text>

				</view>

			</view>
			<!-- 本月数据 -->
			<view class="stats-row">
				<view class="stat-item">
					<text class="stat-label">
						本月收益(元)
					</text>
					<text class="stat-value">
						2234.88
					</text>
				</view>
				<view class="stat-divider">
				</view>
				<view class="stat-item">
					<text class="stat-label">
						本月接单量(单)
					</text>
					<text class="stat-value">
						2234.88
					</text>
				</view>
				<view class="stat-divider">
				</view>
				<view class="stat-item">
					<text class="stat-label">
						本月退单率
					</text>
					<text class="stat-value">
						30%
					</text>
				</view>
			</view>

			<!-- 功能按钮 -->
			<view class="func-grid">
				<view class="func-item" v-for="(item, i) in funcList" :key="i">
					<view @click.stop="jumpSetProject(item.label as string)">
						<image style=" width: 92rpx;height: 92rpx;" :src="item.iconUrl" mode="aspectFit">
						</image>
						<text class="func-label">
							{{ item.label }}
						</text>
					</view>

				</view>
			</view>

			<!-- 数据统计 -->
			<view class="data-section">
				<view class="section-header">
					<text class="section-title">
						数据统计
					</text>
					<text class="section-more">
						查看全部 >
						</text>
					</view>
					<view class="data-grid">
						<view class="data-item" v-for="(item, i) in dataStats" :key="i">
							<text class="data-value">
								{{ item.value }}
							</text>
							<text class="data-label">
								{{ item.label }}
							</text>
						</view>
					</view>
				</view>

				<!-- 客户评价 -->
				<view class="eval-section">
					<view class="section-header">
						<text class="section-title">
							客户评价
						</text>
						<text class="section-more">
							查看全部 >
							</text>
						</view>
						<view class="eval-tags">
							<text class="eval-tag" v-for="(tag, i) in evalTags" :key="i">
								{{ tag.text }} {{ tag.count > 0 ? tag.count : '' }}
								</text>
							</view>
							<view class="eval-item">
								<image class="eval-avatar" src="/static/testInfo/boy-nickname.png" mode="aspectFill" />
								<view class="eval-content">
									<view class="eval-top">
										<text class="eval-name">
											匿名评价
										</text>
										<text class="eval-date">
											2025-04-24
										</text>
									</view>
									<view class="eval-stars">
										<text>
											⭐⭐⭐⭐☆
										</text>
										<view class="stat-divider">
										</view>
										<text class="eval-service">
											泰式松骨
										</text>
									</view>
									<text class="eval-comment">
										服务到位
									</text>
								</view>
							</view>
						</view>
						<!-- 做一个悬浮球 -->
						<u-floating @dblclick="callPolice" />
					</view>
				</scroll-view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	// import { colors } from '@/common/theme';

	// 状态
	const isOnline = ref(true);
	const cityInfo = ref('')
	// 头像url类型
	type AvatarUrl = {
		url : string
	}

	// 技师信息（空对象，字段可为null）
	type CoachInfo = {
		created_at : string | null
		avatar_url : AvatarUrl | null
	}
	type FuncItem = {
		label : string | undefined;
		iconUrl : string;
	// 补充其他可能的字段（如id、desc等）
	}
	const coachInfo = ref<CoachInfo | null>(null);

	// 切换上线状态
	const toggleOnline = () => {
		isOnline.value = !isOnline.value;
		// 这里可以调用 API 更新状态
		console.log('Status changed:', isOnline.value);
	};

	// 功能列表
	const funcList = [
		{ iconUrl: '/static/imagesInfo/cx-shop.png', label: '接单时间' },
		{ iconUrl: '/static/imagesInfo/item-icon.png', label: '服务项目' },
		{ iconUrl: '/static/imagesInfo/jied-time.png', label: '重选店铺' },
		{ iconUrl: '/static/imagesInfo/gengxin-wz.png', label: '位置更新' }
	];

	// 跳转到技师详情
	const jumpMasterInfo = () => {
		uni.navigateTo({
				url: '/pages/myEdit/myEdit'
			});

	};

	// 功能按钮点击处理
	const jumpSetProject = (label : string) => {
		console.log(label, 'jumpSetProject invoked');
		switch (label) {
			case '接单时间':
			uni.navigateTo({
					url: '/pages/console/setOrderTime'
				});
			break;
			case '服务项目':
			uni.navigateTo({
					url: '/pages/console/serviceProject'
				});
			break;
			default:
			break;
		}



	};

	// 悬浮球双击处理
	const callPolice = () => {
		console.log('callPolice triggered');
		// 可在此触发紧急呼叫等操作
	};

	// 统计数据
	const dataStats = [
		{ value: '456', label: '接单量' },
		{ value: '10%', label: '加钟率' },
		{ value: '70%', label: '好评率' },
		{ value: '3%', label: '复购率' },
		{ value: '19%', label: '退单率' }
	];

	// 评价标签数据
	// 使用类型别名避免 UTS 对内联对象字面量的限制
	type EvalTag = { text : string; count : number };
	const evalTags : EvalTag[] = [
		{ text: '不良引导', count: 0 },
	{ text: '手法不好', count: 101 },
	{ text: '性格温柔', count: 198 },
	{ text: '服务到位', count: 10 }
	];
</script>

<style>
	.page {
		/* width: 100%;
		commented out because percentage unsupported
		*/
		padding: 20rpx;
	}

	.upContent {
		height: 900rpx;
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.city-info {
		flex-direction: row;
		justify-content: space-between;
	}

	.city-text-box {
		font-size: 28rpx;
	}

	/* 用户卡片 */
	.user-card {
		border-radius: 16rpx;
		/* padding: 20rpx; */
		/* margin-top: 16rpx; */
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		/* border: 1rpx solid #f5f5f5; */
		position: relative;
	}

	.user-bg {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.user-info {
		/* display: flex; */
		flex-direction: row;
		align-items: center;
		margin-bottom: 16rpx;
		justify-content: space-between;
	}

	.user-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		/* margin-bottom: 16rpx; */
	}


	.tag {
		font-size: 24rpx;
	}

	.tag-new {
		/* 绿色透明度渐变 */
		background: linear-gradient(180deg, rgba(207, 221, 62, 0.69) 0%, rgba(162, 184, 29, 1) 100%);
		color: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 16rpx;
		font-size: 28rpx;
		padding: 6rpx 12rpx;
	}

	.tag-edit {
		color: #999999;
	}

	.user-role,
	.user-shop {
		font-size: 26rpx;
		color: #999999;
		margin-right: 32rpx;
	}

	.online-switch {
		margin-top: 24rpx;
	}

	.online-text {
		font-size: 26rpx;
		color: #333333;
		margin-right: 16rpx;
	}

	.user-right {
		align-items: center;
		width: 180rpx;
		height: 245rpx;
		z-index: 1;
		margin-right: 14rpx;
	}

	.text-time-box {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #fff;
		letter-spacing: 1rpx;
		text-align: center;
	}

	.join-time {
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.6);
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		/* half of width/height */
		border: 4rpx solid #FFFFFF;
	}

	.location-bar {
		display: flex;
		align-items: center;
		background-image: linear-gradient(to right, #FFF9E1 0%, #FFF1BF 100%);
		padding: 10rpx 20rpx;
		border-radius: 18rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.location-icon {
		font-size: 28rpx;
		margin-right: 16rpx;
	}

	.location-text {
		/* flex: 1; */
		font-size: 26rpx;
		/* color: #333333; */
	}

	.location-btn {
		font-size: 26rpx;
		border: 2rpx solid #0a0a0a;
		padding: 8rpx 8rpx;
		border-radius: 16rpx;

	}

	/* 本月数据 */
	.stats-row {
		display: flex;
		flex-direction: row;
		/* width: 100%; removed percentage, flex children will stretch */
		text-align: center;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		/* border: 1rpx solid #e9e9e9; */
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-label {
		font-size: 26rpx;
		color: #999999;
		/* display: block not supported; default inline behavior is fine */
		margin-bottom: 24rpx;
		text-align: center;
	}

	.stat-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.stat-divider {
		width: 2rpx;
		background-color: #EEEEEE;
		margin: 0 16rpx;
	}

	/* 功能网格 */
	.func-grid {
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		padding: 32rpx 0;
		flex-direction: row;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid #f9f9f9;
	}

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

	.func-label {
		font-size: 24rpx;
		color: #666666;
		margin-top: 16rpx;
	}

	/* 数据统计 */
	.data-section {
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid #f9f9f9;
	}

	.section-header {
		/* display: flex; */
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		flex-direction: row;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.section-more {
		font-size: 26rpx;
		color: #999999;
	}

	.data-grid {
		/* display: flex; */
		justify-content: space-between;
		flex-direction: row;
	}

	.data-item {
		text-align: center;
	}

	.data-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		/* display property not needed */
		margin-bottom: 8rpx;
	}

	.data-label {
		font-size: 24rpx;
		color: #999999;
	}

	/* 客户评价 */
	.eval-section {
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid #f9f9f9;
	}

	.eval-tags {
		display: flex;
		/* flex-wrap: wrap; */
		flex-direction: row;
		/* gap: 16rpx; */
		margin-bottom: 32rpx;
	}

	.eval-tag {
		font-size: 24rpx;
		padding: 8rpx 24rpx;
		background-color: #F5F5F5;
		border-radius: 24rpx;
		/* color: #666666; */
	}

	.eval-item {
		/* display: flex; */
		/* gap: 24rpx; */
		flex-direction: row;
	}

	.eval-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.eval-content {
		flex: 1;
	}

	.eval-top {
		/* display: flex; */
		justify-content: space-between;
		margin-bottom: 8rpx;
		flex-direction: row;
	}

	.eval-name {
		/* font-size: 28rpx; */
		font-weight: 400;
		color: #333333;
	}

	.eval-date {
		font-size: 24rpx;
		color: #999999;
	}

	.eval-stars {
		font-size: 24rpx;
		color: #FFD740;
		margin-bottom: 8rpx;
		flex-direction: row;
	}

	.eval-service {
		color: #999999;
		margin-left: 16rpx;
		font-size: 28rpx;

	}

	.eval-comment {
		font-size: 26rpx;
		color: #333333;
	}
</style>