|
|
@@ -0,0 +1,607 @@
|
|
|
+<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>
|