mechanicStore-app/pages/index/console.uvue

<template>
	<view class="container">
		<!-- 背景图改为absolute，避免fixed在scroll-view内的问题 -->
		<image class="bg-image" src="@/static/imagesInfo/bg-color.png" mode="aspectFill" />

		<scroll-view style="flex: 1" scroll-y>
			<view class="page">
				<!-- 城市信息 -->
				<view class="city-info">
					<text class="city-text-box">当前城市：{{ state.cityInfo }}</text>
					<u-icon name="notification" :size="24" />
				</view>

				<!-- 用户卡片 -->
				<view class="user-card">
					<image class="user-bg" src="@/static/imagesInfo/bg-icon.png" mode="scaleToFill" />

					<view class="user-content" style="padding: 20rpx;">
						<!-- 左侧信息 -->
						<view class="user-left">
							<view class="user-row">
								<text class="user-name">{{ coachInfo.nickname  }}</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-row">
								<u-icon name="customer-interests" :size="18" />
								<text class="user-role">{{ coachInfo.role_name  }}</text>
								<u-icon name="store" :size="18" />
								<text class="user-shop">{{ coachInfo.shop_name  }}</text>
							</view>

							<view class="online-switch">
								<u-switch :checked="state.isOnline" @change="toggleOnline" />
							</view>
						</view>

						<!-- 右侧头像 -->
						<view class="user-right" @click="jumpMasterInfo">
							<text class="time-text">入驻时间</text>
							<text class="time-text" style="margin-top: 5rpx;">{{ displayCreatedAt }}</text>
							<image class="avatar-img" :src="coachInfo.avatar" mode="aspectFit" />
						</view>
					</view>

					<!-- 定位栏 -->
					<view class="location-bar">
						<u-icon name="navigation" :size="18" />
						<text class="location-text">当前定位：{{ userLocation }}</text>
						<text class="location-btn" @click="updateLocation">手动更新</text>
					</view>
				</view>

				<!-- 本月数据 -->
				<view class="stats-row">
					<view class="stat-item" v-for="(item, index) in monthStats" :key="index">
						<text class="stat-label">{{ item.label }}</text>
						<text class="stat-value">{{ item.value }}</text>
					</view>
				</view>

				<!-- 功能按钮 -->
				<view class="func-grid">
					<view class="func-item" v-for="(item, index) in funcList" :key="index"
						@click="jumpSetProject(item.label)">
						<image class="func-icon" :src="item.iconUrl" mode="aspectFit" />
						<text class="func-label">{{ item.label }}</text>
					</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, index) in dataStats" :key="index">
							<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>
					<scroll-view class="eval-tags" scroll-x>
						<text class="eval-tag" v-for="(tag, index) in evalTags" :key="index">
							{{ tag.text }} {{ tag.count > 0 ? tag.count : '' }}
						</text>
					</scroll-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>
								<text class="eval-service">泰式松骨</text>
							</view>
							<text class="eval-comment">服务到位</text>
						</view>
					</view>
				</view>

				<!-- 底部留白，避免悬浮球遮挡 -->
				<view style="height: 100rpx;"></view>
			</view>
		</scroll-view>

		<!-- 悬浮球移到scroll-view外 -->
		<u-floating @click="callPolice" />
	</view>
</template>

<script setup lang="uts">
	import { ref, computed, reactive, } from 'vue'
	import { getCoachDetaile } from '@/utils/api/masterInfoApi'

	// ==================== 类型定义 ====================
	type CoachInfo = {
		nickname : string
		role_name : string
		shop_name : string
		created_at : string
		avatar : string
		coach : string
	}

	type State = {
		isOnline : boolean
		cityInfo : string
	}

	type FuncItem = {
		label : string
		iconUrl : string
	}

	type EvalTag = {
		text : string
		count : number
	}

	// ==================== 响应式数据（全部使用reactive/ref，避免shallowRef）====================

	const state = ref<State>({
		isOnline: true,
		cityInfo: '定位中...'
	})


	const coachInfo = reactive<CoachInfo>({
		nickname: '',
		role_name: '小丁理疗师',
		shop_name: '未绑定门店',
		created_at: '',
		avatar: '/static/testInfo/boy-nickname.png',
		coach: ''
	})

	const userLocation = ref<string>('')

	const displayCreatedAt = computed(() : string => {
		const date = coachInfo.created_at
		if (date == null || date.length == 0) {
			return '--'
		}
		return date
	})

	// ==================== 静态数据 ====================
	const monthStats = [
		{ label: '本月收益(元)', value: '2234.88' },
		{ label: '本月接单量(单)', value: '2234.88' },
		{ label: '本月退单率', value: '30%' }
	]

	const funcList : FuncItem[] = [
		{ 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 dataStats = [
		{ value: '456', label: '接单量' },
		{ value: '10%', label: '加钟率' },
		{ value: '70%', label: '好评率' },
		{ value: '3%', label: '复购率' },
		{ value: '19%', label: '退单率' }
	]

	const evalTags : EvalTag[] = [
		{ text: '不良引导', count: 0 },
		{ text: '手法不好', count: 101 },
		{ text: '性格温柔', count: 198 },
		{ text: '服务到位', count: 10 }
	]

	// ==================== 方法 ====================


	const toggleOnline = () => {
		state.value.isOnline = !state.value.isOnline
		console.log('Status changed:', state.value.isOnline)
	}


	const httpGetCoachDetail = async () => {


		//  response.data.nickname
		// coachInfo.created_at = response.data.created_at
		// coachInfo.avatar = response.data.avatar
		try {
			const response = await getCoachDetaile() as UTSJSONObject
			console.log('Coach detail:', response)
			const code = response["code"] as number
			const dataObj = response["data"] as UTSJSONObject | null
			if (code != 200 || dataObj == null) {
				return
			}
			const coach = dataObj["coach"] as UTSJSONObject | null
			if (coach == null) {
				uni.navigateTo({
					url: '/pages/login/merchantRecuitment'
				})
				return
			}
			coachInfo.nickname = dataObj["nickname"] as string
			coachInfo.created_at = dataObj["created_at"] as string

		} catch (err : any) {
			console.error('获取技师详情失败:', err)
		}
	}

	const updateLocation = async () => {
		// try {
		// 	const location = await new Promise<UniApp.GetLocationSuccess>((resolve, reject) => {
		// 		uni.getLocation({
		// 			type: 'gcj02',
		// 			success: resolve,
		// 			fail: reject
		// 		})
		// 	})

		// 	console.log('Location:', location)
		// 	// 简化处理，实际需要逆地理编码
		// 	userLocation.value = `${location.latitude.toFixed(2)}, ${location.longitude.toFixed(2)}`

		// } catch (e) {
		// 	console.error('定位错误:', e)
		// 	uni.showToast({ title: '定位失败', icon: 'none' })
		// 	userLocation.value = '定位失败'
		// }
	}

	const jumpMasterInfo = () => {
		uni.navigateTo({
			url: '/pages/myEdit/myEdit'
		});


	}

	const jumpSetProject = (label : string) => {
		console.log('Navigate to:', label)
		switch (label) {
			case '接单时间':
				uni.navigateTo({ url: '/pages/console/setOrderTime' })
				break
			case '服务项目':
				uni.navigateTo({ url: '/pages/console/serviceProject' })
				break
		}
	}

	const callPolice = () => {
		console.log('Emergency call triggered')
	}
	onLoad(() => {
		// httpGetCoachDetail()
	})

	onReady(() => {
		// httpGetCoachDetail();
	})
</script>

<style>
	/* 修复8：外层容器使用flex布局 */
	.container {
		flex: 1;
		position: relative;
	}

	/* 修复9：背景图改为absolute，避免fixed在scroll-view内的问题 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 900rpx;
		z-index: 0;
	}

	.page {
		padding: 20rpx;
		position: relative;
		z-index: 1;
	}

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

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

	/* 用户卡片 */
	.user-card {
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		position: relative;
		overflow: hidden;
		background-color: #fff;
	}

	.user-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.user-content {
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}

	.user-left {
		flex: 1;
		flex-direction: column;
	}

	.user-row {
		flex-direction: row;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.user-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.tags {
		flex-direction: row;
		margin-left: 16rpx;
	}

	.tag-new {
		background: linear-gradient(180deg, rgba(207, 221, 62, 0.69) 0%, rgba(162, 184, 29, 1) 100%);
		color: #fff;
		border-radius: 24rpx;
		font-size: 24rpx;
		padding: 6rpx 16rpx;
	}

	.tag {
		font-size: 24rpx;
		color: #666;
		margin-left: 8rpx;
	}

	.user-role,
	.user-shop {
		font-size: 26rpx;
		color: #999;
		margin-left: 8rpx;
		margin-right: 24rpx;
	}

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

	.user-right {
		width: 180rpx;
		align-items: center;
		flex-direction: column;
	}

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

	.avatar-img {
		width: 138rpx;
		height: 138rpx;
		border-radius: 69rpx;
		margin-top: 15rpx;
		border: 4rpx solid #fff;
	}

	.location-bar {
		flex-direction: row;
		align-items: center;
		background: linear-gradient(to right, rgba(255, 249, 225, 1), rgba(255, 241, 191, 1));
		padding: 16rpx 20rpx;
		border-radius: 18rpx;
		margin: 20rpx;
		position: relative;
		z-index: 1;
	}

	.location-text {
		flex: 1;
		font-size: 26rpx;
		color: #333;
		margin-left: 8rpx;
	}

	.location-btn {
		font-size: 24rpx;
		color: #333;
		border: 2rpx solid #333;
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
	}

	/* 本月数据 */
	.stats-row {
		flex-direction: row;
		background-color: #fff;
		margin-bottom: 32rpx;
		border-radius: 24rpx;
		padding: 32rpx 0;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		align-items: center;
		border-right-width: 2rpx;
		border-right-color: #eee;
		border-right-style: solid;
	}

	.stat-item:last-child {
		border-right-width: 0;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

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

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

	.func-item {
		align-items: center;
	}

	.func-icon {
		width: 92rpx;
		height: 92rpx;
	}

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

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

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

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

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

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

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

	.data-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

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

	/* 评价 */
	.eval-tags {
		flex-direction: row;
		margin-bottom: 24rpx;
	}

	.eval-tag {
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		background-color: #f5f5f5;
		border-radius: 24rpx;
		margin-right: 16rpx;
		color: #666;
	}

	.eval-item {
		flex-direction: row;
	}

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

	.eval-content {
		flex: 1;
		flex-direction: column;
	}

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

	.eval-name {
		font-size: 28rpx;
		color: #333;
	}

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

	.eval-stars {
		flex-direction: row;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.eval-service {
		font-size: 24rpx;
		color: #999;
		margin-left: 16rpx;
	}

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