jje_staff/pages/index/index.vue

<template>
	<view class="page">

					<view class="flex-row tuni">
						<image class="profile" src="/static/my/fuwuNmber.png"></image>
						<view class="tuniMsg flex-col">
							<text class="name">托老师</text>
							<view class="flex-row dizi">
								<u-icon name="/static/index/dizi.png" size="18"></u-icon>
								<text>娇骄儿白云店</text>
							</view>
						</view>
						<view class="flex-col ">
							<view class="flex-row justify-center dakaIcon">
								<u-icon name="/static/index/saoma.png" size="25"></u-icon>
							</view>
							<view class="flex-row justify-center dakaText">
								<text>报道打卡</text>
							</view>
						</view>
					</view>

				<view class="flex-row justify-center">
					<view class="tab flex-row">
						<view class="tabs" :class="{selectTabs: tabIndex === 0}" @click="clickTab(0)">
							<text>服务中</text>
						</view>
						<view class="tabs" :class="{selectTabs: tabIndex === 1}"  @click="clickTab(1)">
							<text>待服务</text>
						</view>
					</view>
				</view>

				<view v-if="tabIndex === 0" class="flex-row justify-center">
						<view class="serviceMsg " v-if="true">
							<view class="flex-row serviceInfo ">
								<image class="serviceProfile" src="/static/my/fuwuNmber.png"></image>
								<view class="flex-col justify-end">
									<view class="flex-row" >
										<text class="servicename">张某某</text>
										<view class="flex-row justify-center tag">
											<text>切换</text>
											<u-icon name="/static/index/qiehuan.png" size="18"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view :style="{'height':'110rpx'}"></view>
							<view class="flex-row justify-center ">

								<view class="flex-row hintView">
										<view class="hint">
											<text>!</text>
										</view>
									<view class="hintCentent">
										<text>娇宝，提前10分钟到哟，一人一号过号需</text>
									</view>
								</view>
							</view>
							<view class="flex-row justify-center ">
								<view class="flex-col itemView">
									<view class="flex-row item">
										<u-icon name="/static/index/jiandao.png" size="20"></u-icon>
										<text class="key">服务项目：</text>
										<text class="value">理发</text>
									</view>
									<view class="flex-row item">
										<u-icon name="/static/index/riqi.png" size="20"></u-icon>
										<text class="key">服务日期：</text>
										<text class="value">2023年12月6日</text>
									</view>
									<view class="flex-row  item">
										<view class="flex-row">
											<u-icon name="/static/index/aixin.png" size="20"></u-icon>
											<text class="key">服务人员：</text>
											<text class="value">姜欣欣</text>
										</view>
										<view class="flex-row leftBord">
											<text class="key">预约费用：</text>
											<text class="value2">￥24.00</text>
										</view>
									</view>

									<view class="flex-row item">
										<view class="flex-row">
											<u-icon name="/static/index/shiduan.png" size="20"></u-icon>
											<text class="key">服务时段：</text>
											<text class="value">11:45</text>
										</view>
										<view class="flex-row leftBord">
											<text class="key">服务费用：</text>
											<text class="value2">￥24.00</text>
										</view>
									</view>


								</view>
							</view>
							<view class="flex-row justify-center">
								<view class="flex-col itemView">
									<view class="flex-row justify-between">

										<view class="flex-col justify-center">
											<view class="flex-row">
												<text class="key1">服务总金额：</text>
												<text class="value1">￥24.00</text>
											</view>
										</view>
										<view class="flex-row justify-center tag1">
											<u-icon name="/static/index/qianbao.png" size="18"></u-icon>
											<text>去结算</text>
										</view>
									</view>
								</view>
							</view>

							<view class="flex-row justify-center">
								<view class="flex-row justify-around grid">
										<view>
											<u-icon name="/static/index/jiaojieban.png" size="40"></u-icon>
											<text class="grid-text">服务交接</text>
										</view>
										<view>
											<u-icon name="/static/index/jiandao.png" size="40"></u-icon>
											<text class="grid-text">添加服务</text>
										</view>
										<view >
											<u-icon name="/static/index/xiayige.png" size="40"></u-icon>
											<text class="grid-text">下一位</text>
										</view>
										<view >
											<u-icon name="/static/index/yijiuwei.png" size="40"></u-icon>
											<text class="grid-text">已就位</text>
										</view>
								</view>
							</view>

							<view class="flex-row justify-center start">
								<text>开始服务</text>
							</view>
					</view>

					<view class="flex-col" :style="{'height':sysHeight}" v-else>
						<view class="flex-row justify-center">
							<image class="dataNull" src="/static/index/dataNull.png"></image>
						</view>
						<view class="flex-row justify-center dataNullText">
							<text>暂无服务项目</text>
						</view>
					</view>
		       </view>
			<view v-if="tabIndex === 1" :style="{'height':sysHeight}">
					<mescroll-uni v-if="true" ref="mescrollRef" @init="mescrollInit" :height="sysHeight" :down="downOption" @down="downCallback"
								  :up="upOption" @up="upCallback" @emptyclick="emptyClick">

							<view class="listItem flex-row justify-between ">
								<view class="flex-row">
									<image class="listItemProfile" src="/static/my/fuwuNmber.png"></image>
									<text class="listItemName">张某某</text>
								</view>
								<view class="flex-row">
									<u-icon name="/static/index/shiduan.png" size="20"></u-icon>
									<text class="listItemkey">服务时段：</text>
									<text class="listItemValue">11:45</text>
								</view>
							</view>


					</mescroll-uni>
				<view :style="{'height':sysHeight}" v-else>
					<view class="flex-row justify-center">
						<image class="dataNull" src="/static/index/dataNull.png"></image>
					</view>
					<view class="flex-row justify-center dataNullText">
						<text>暂无服务项目</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/imageIcon/empty.png',
						tip: '暂无内容', // 提示
						// btnText: '去看看'
					},
					textNoMore: '没有更多了'
				},
				tabIndex:0,
				sysHeight:'',
				group1: [
					{thumb: '/static/my/idcard.png', title: '个人信息', rightText: '', to: '/myPages/aboutOur/index'}
				],
			}
		},
		onLoad(){
			let sysInfo = uni.getSystemInfoSync()
			this.sysHeight = sysInfo.windowHeight - (sysInfo.windowWidth/750) * 354  + 'px'
			console.log(this.sysHeight)

			 uni.getLocation({
				 success:(e)=>{
					 console.log(e)
				 }
			 })
		},
		methods: {
			clickTab(e){
				this.tabIndex = e
			},

			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {

				let status = this.index
				if (this.index === 3){
					status = 4
				}

				//联网加载数据
				let httpData = {
					pageNum: page.num,
					pageSize: 10,
					orderType:'SERVICE',
					status:status
				}

				// this.$api.getOrderList(httpData).then((res) => {
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.mescroll.endSuccess(res.data.rows.length, res.data.rows.length === 10);
				// 	//设置列表数据
				// 	if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
				// 	this.list = this.list.concat(res.data.rows); //追加新数据
				// 	console.log(this.list)
				// }).catch((err) => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })


			},



			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.css';
</style>