mechanicStore-app/pages/index/console.uvue

<template>
	<view class="page">
		<view class="upContent">
		</view>
		<view class="city-info">
			<view class="city-text-box">
				<text>
					当前城市：{{ cityInfo }}
				</text>
			</view>
			<u-icon name="notification" :size="24" />
		</view>
		<!-- 用户卡片 -->
		<view class="user-card ">
			<image class="user-bg wh" src="@/static/imagesInfo/bg-icon.png" mode="scaleToFill">
			</image>
			<view class="user-info">
				<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" />
						<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">

					<text class="text-time-box">
						入驻时间
					</text>
					<text class="text-time-box" style="margin-top: 5rpx;">{{
						coachInfo?.created_at.split(' ')[0] }}
					</text>
					<image v-if="coachInfo?.avatar_url" @click.stop="jumpMasterInfo"
					:src="coachInfo?.avatar_url?.url"
					style="width: 138rpx;height:138rpx;border-radius: 50%;margin-top: 15rpx;" mode="aspectFit">
					</image>
					<image v-else src="/static/testInfo/boy-nickname.png"
					style="width: 138rpx;height:138rpx;border-radius: 50%;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">
					<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 ? 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>

</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { colors } from '@/common/theme';
	// 状态
	const isOnline = ref(true);

	// 切换上线状态
	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 jumpSetProject = () => {
		console.log('jumpSetProject invoked');
		// 在这里可以执行导航或其他逻辑
	};

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

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

	// 评价标签
	const evalTags = [
		{ text: '不良引导' },
		{ text: '手法不好', count: 101 },
		{ text: '性格温柔', count: 198 },
		{ text: '服务到位', count: 10 }
	];
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: $uni-bg-color-grey;
		padding: 24rpx;
	}

	.upContent {
		height: 50%;
		background-image: linear-gradient(180deg, #FFDA59 0%, rgba(255, 255, 255, 0) 100%);
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

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

	/* 用户卡片 */
	.user-card {
		border-radius: 16rpx;
		padding: 20rpx;
		/* 如需更明显的分层可加阴影 */
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		height: auto;
		position: relative;
		z-index: ;
		margin-top: 16rpx;
		margin-bottom: 32rpx;
	}

	.user-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* object-fit: cover; */
	}

	.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;
		width: 160rpx;
		line-height: 40rpx;
		border-radius: 24rpx;
		text-align: center;
		margin: 0 20rpx;
		font-size: 28rpx;
	}

	.tag-edit {
		color: #999999;
	}

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

	.online-switch {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
	}

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

	.user-right {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		/* position: absolute; */
		width: 180rpx;
		height: 245rpx;
		/* top: 0;
		right: 20rpx;
		*/
		/* text-align: center; */
		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: 50%;
		border: 4rpx solid #FFFFFF;
	}

	.location-bar {
		display: flex;
		align-items: center;
		background-image: linear-gradient(to right, #FFF9E1 0%, #FFF1BF 100%);
		padding: 10rpx;
		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%;
		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);
	}

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

	.stat-label {
		font-size: 26rpx;
		color: #999999;
		display: block;
		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;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		flex-direction: row;
	}

	.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.05);
	}

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

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		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: block;
		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.05);
	}

	.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: 50%;
	}

	.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: 500;
		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>