1

src/pages/demo/tc.vue

@@ -0,0 +1,379 @@
+<template>
+	<view class="page-container">
+		<view class="top-bg-gradient"></view>
+
+		<u-navbar 
+			title="技师中心" 
+			:placeholder="true" 
+			bgColor="transparent" 
+			leftIconColor="#000" 
+			titleStyle="font-weight:bold;"
+		>
+			<view slot="right">
+				<u-icon name="more-dot-fill" size="24" color="#000"></u-icon>
+			</view>
+		</u-navbar>
+
+		<view class="header-content">
+			<view class="card profile-card">
+				<view class="profile-left">
+					<u-avatar :src="userInfo.avatar" size="50"></u-avatar>
+					<view class="info">
+						<view class="name-row">
+							<text class="name">{{ userInfo.name }}</text>
+							<u-icon name="map-fill" color="#1ecbc3" size="14"></u-icon>
+						</view>
+						<view class="address">{{ userInfo.address }}</view>
+					</view>
+				</view>
+				<u-button 
+					text="更换位置" 
+					color="#1ecbc3" 
+					shape="circle" 
+					size="small" 
+					customStyle="height: 28px; font-size: 12px; padding: 0 15px;"
+				></u-button>
+			</view>
+
+			<view class="card stats-card">
+				<view class="stats-row">
+					<view class="stat-item">
+						<view class="label">本月订单数</view>
+						<view class="value-box">
+							<text class="value green">{{ stats.orderCount }}</text> <text class="unit">单</text>
+						</view>
+					</view>
+					<view class="stat-item">
+						<view class="label">本月在线时长</view>
+						<view class="value-box">
+							<text class="value green">{{ stats.onlineHours }}</text> <text class="unit">时</text>
+						</view>
+					</view>
+					<view class="stat-item">
+						<view class="label">本月营业额</view>
+						<view class="value-box">
+							<text class="value green">{{ stats.revenue }}</text> <text class="unit">元</text>
+						</view>
+					</view>
+				</view>
+				<u-line margin="20rpx 0" dashed color="#eee"></u-line>
+				<view class="stats-row bottom-row">
+					<view class="stat-item">
+						<view class="label">余额</view>
+						<view class="value-box">
+							<text class="value orange">{{ stats.balance }}</text> <text class="unit">元</text>
+						</view>
+					</view>
+					<view class="stat-item">
+						<view class="label">可提现</view>
+						<view class="value-box">
+							<text class="value orange">{{ stats.withdrawable }}</text> <text class="unit">元</text>
+						</view>
+					</view>
+					<view class="stat-btn">
+						<u-button text="申请提现" color="#ff9900" shape="circle" size="small"></u-button>
+					</view>
+				</view>
+			</view>
+
+			<view class="card status-card">
+				<view class="status-header">
+					<view class="status-text">
+						<u-icon name="empty-data" size="20" color="#999"></u-icon>
+						<text style="margin-left: 10rpx;">休息中</text>
+					</view>
+					<u-button text="上线" color="#1ecbc3" shape="circle" size="small" customStyle="width: 80px;"></u-button>
+				</view>
+				<view style="margin-top: 20rpx;">
+					<u-button text="报警/求助" color="#f56c6c" shape="circle"></u-button>
+				</view>
+			</view>
+
+			<view class="card function-card">
+				<u-grid :border="false" col="5">
+					<u-grid-item v-for="(item, index) in functionList" :key="index" customStyle="padding: 20rpx 0;">
+						<u-icon :name="item.icon" :size="28" color="#333"></u-icon>
+						<text class="grid-text">{{ item.title }}</text>
+					</u-grid-item>
+				</u-grid>
+			</view>
+		</view>
+
+		<u-sticky bgColor="#F6F7F9" offset-top="0">
+			<view class="tabs-container">
+				<u-tabs 
+					:list="tabList" 
+					:current="currentTab" 
+					lineColor="#1ecbc3" 
+					activeColor="#1ecbc3"
+					:scrollable="false"
+					itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"
+					@click="changeTab"
+				></u-tabs>
+			</view>
+		</u-sticky>
+
+		<view class="list-container">
+			<z-paging 
+				ref="paging" 
+				v-model="dataList" 
+				@query="queryList" 
+                :fixed="false"
+				:use-page-scroll="true"
+				:refresher-enabled="false" 
+			>
+				<view class="order-item" v-for="(item, index) in dataList" :key="index">
+					<view class="order-header">
+						<text class="time">上门时间：{{ item.serviceDate }}</text>
+						<text class="status" :class="getStatusClass(item.status)">{{ item.statusText }}</text>
+					</view>
+					
+					<view class="order-content">
+						<view class="row">
+							<text class="label">客户姓名：</text>
+							<text class="val">{{ item.customerName }}</text>
+						</view>
+						<view class="row">
+							<text class="label">项目名称：</text>
+							<text class="val">{{ item.projectName }}</text>
+						</view>
+						<view class="row">
+							<text class="label">下单时间：</text>
+							<text class="val">{{ item.createTime }}</text>
+						</view>
+					</view>
+
+					<view class="order-footer">
+						<view class="price">¥ {{ item.price }}</view>
+						<view class="actions">
+							<template v-if="item.status === 1">
+								<u-button text="取消订单" size="mini" shape="circle" plain customStyle="margin-right: 10rpx;"></u-button>
+								<u-button text="转单" size="mini" shape="circle" color="#f56c6c"></u-button>
+							</template>
+							<template v-else-if="item.status === 3">
+								<u-button text="拒绝退款" size="mini" shape="circle" color="#f56c6c" customStyle="margin-right: 10rpx;"></u-button>
+								<u-button text="同意退款" size="mini" shape="circle" color="#1ecbc3"></u-button>
+							</template>
+						</view>
+					</view>
+				</view>
+				
+			</z-paging>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 模拟数据
+				userInfo: {
+					name: '郭丽丽',
+					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
+					address: '山西省太原市古交市东曲街道...'
+				},
+				stats: {
+					orderCount: 12,
+					onlineHours: 3.55,
+					revenue: '21893.98',
+					balance: '3324.9',
+					withdrawable: '8127.43'
+				},
+				functionList: [
+					{ title: '订单', icon: 'order' },
+					{ title: '设置免车费', icon: 'car' },
+					{ title: '编辑资料', icon: 'edit-pen' },
+					{ title: '我的分销码', icon: 'scan' },
+					{ title: '合同签订', icon: 'file-text' }
+				],
+				tabList: [
+					{ name: '全部' }, { name: '进行中' }, { name: '已完成' }, 
+					{ name: '待付款' }, { name: '已取消' }, { name: '售后' }
+				],
+				currentTab: 0,
+				dataList: []
+			}
+		},
+		// 必须监听：页面滚动和触底，传递给 z-paging
+		onPageScroll(e) {
+			// 如果你的 z-paging 版本较新，且开启了 use-page-scroll，通常它会自动监听
+			// 但显式调用更安全，用于处理回到顶部等功能
+			this.$refs.paging && this.$refs.paging.updatePageScroll(e);
+		},
+		onReachBottom() {
+			// 页面触底时，通知 z-paging 加载更多
+			this.$refs.paging && this.$refs.paging.pageReachBottom();
+		},
+		methods: {
+			changeTab(item) {
+				this.currentTab = item.index;
+				this.$refs.paging.reload();
+			},
+			queryList(pageNo, pageSize) {
+				// 模拟请求
+				setTimeout(() => {
+					const list = [];
+					for(let i = 0; i < 5; i++) {
+						const statusType = (i % 3) + 1;
+						list.push({
+							id: i,
+							serviceDate: '今天10:00-11:00',
+							status: statusType,
+							statusText: ['待接单', '已接单', '退款申请中'][statusType-1],
+							customerName: '陈思成',
+							projectName: '泰式 · 王室古法SPA',
+							createTime: '2025-09-14 12:08',
+							price: '493.4'
+						});
+					}
+					this.$refs.paging.complete(list);
+				}, 1000);
+			},
+			getStatusClass(status) {
+				return 'text-blue';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page-container {
+		min-height: 100vh;
+		background-color: #F6F7F9;
+		position: relative;
+		/* 防止外边距塌陷 */
+		padding-top: 1rpx; 
+		padding-bottom: 40rpx;
+	}
+
+	/* 背景渐变 - 固定在最底层 */
+	.top-bg-gradient {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 400rpx;
+		background: linear-gradient(to bottom, #dffbf9 0%, #F6F7F9 100%);
+		z-index: 0;
+	}
+
+	/* 头部内容 - 相对定位，层级高于背景 */
+	.header-content {
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+	}
+
+	.card {
+		background: #fff;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.02);
+		padding: 30rpx;
+	}
+
+	/* 个人信息 */
+	.profile-card {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 10rpx;
+		.profile-left {
+			display: flex;
+			align-items: center;
+			.info {
+				margin-left: 20rpx;
+				.name { font-size: 32rpx; font-weight: bold; margin-right: 10rpx; }
+				.address { font-size: 24rpx; color: #999; }
+			}
+		}
+	}
+
+	/* 数据统计 */
+	.stats-card {
+		padding: 30rpx 20rpx;
+		.stats-row {
+			display: flex;
+			justify-content: space-between;
+			.stat-item {
+				flex: 1;
+				text-align: center;
+				.label { font-size: 24rpx; color: #666; margin-bottom: 8rpx; }
+				.value { font-size: 32rpx; font-weight: bold; }
+				.unit { font-size: 22rpx; color: #999; margin-left: 4rpx; }
+				.green { color: #1ecbc3; }
+				.orange { color: #ff9900; }
+			}
+		}
+		.bottom-row {
+			align-items: center;
+			.stat-btn { flex: 1; display: flex; justify-content: flex-end; }
+		}
+	}
+
+	/* 状态栏 */
+	.status-card {
+		.status-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			color: #999;
+		}
+	}
+
+	/* 功能宫格 */
+	.function-card {
+		padding: 10rpx 0;
+		.grid-text { font-size: 24rpx; color: #666; margin-top: 14rpx; }
+	}
+
+	/* Tabs */
+	.tabs-container {
+		background-color: #F6F7F9;
+		padding-bottom: 10rpx;
+		z-index: 99; /* 保证吸顶时在列表上方 */
+	}
+
+	/* 列表区域 */
+	.list-container {
+		position: relative;
+		z-index: 1;
+		padding: 0 20rpx;
+	}
+
+	.order-item {
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+		
+		.order-header {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 20rpx;
+			font-size: 30rpx;
+			font-weight: bold;
+			.text-blue { color: #5ac8fa; font-weight: normal; font-size: 28rpx;}
+		}
+		.order-content {
+			margin-bottom: 20rpx;
+			.row {
+				display: flex;
+				margin-bottom: 10rpx;
+				font-size: 26rpx;
+				.label { color: #999; width: 150rpx; }
+				.val { color: #666; }
+			}
+		}
+		.order-footer {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-top: 1rpx solid #f5f5f5;
+			padding-top: 20rpx;
+			.price { color: #fa3534; font-size: 36rpx; font-weight: bold; }
+			.actions { display: flex; }
+		}
+	}
+</style>