xiaoding-app-technician/pages/Technician/homePage/homePage.vue

<!-- 首页 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="首页" navbar="custom"
		tabbar="/pages/Technician/homePage/homePage">
		<view class="body" :style="'padding-top:' + bottomHeight">
			<view class="bg-info-box">
				<!-- 导航 -->
				<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
					<text class="textIcon icon-ditutubiao icon-navigation"></text>
					<view style="font-size:24rpx;color:#fff;margin-left:5rpx;">烟台市莱山区</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-kefu2 icon-navigation"></text>
					<text class="textIcon icon-shezhi icon-navigation" style="margin-left: 30rpx"></text>
				</view>
			</view>

			<view class="ss-flex-2 ss-col-center"
				style="margin-top: 20rpx;width: 95%;margin-left: 2.5%;box-sizing: border-box;">
				<view>
					<switchInfo :activeText="'开启接单'" :inactiveText="'关闭接单'"></switchInfo>
				</view>
				<view class="ss-flex-1"></view>
				<view class="ss-flex-2 ss-col-center bg-box-info">
					<text class="textIcon icon-ditutubiao" style="font-size: 28rpx;color: #DE3A52;"></text>
					<view class="address-box">烟台市莱山区华庭路橡树湾小区</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-jiazai" style="font-size: 30rpx;color: #DE3A52;"></text>
					<view style="font-size: 20rpx;color: #CC3043;margin-left:5rpx;">更新定位</view>
				</view>
			</view>

			<view class="ss-flex-2 left-right-box">
				<view style="width: 48%;">
					<view class="personalInformation">
						<view class="ss-flex-2 ss-col-center" style="padding: 10rpx 0rpx;">
							<text class="textIcon icon-gerenxinxi" style="font-size: 34rpx;color: #666;margin-right: 10rpx;font-weight: 650;"></text>
							<view style="font-size: 22rpx;color: #4B515A;font-weight: 550;">个人信息</view>
							<view class="ss-flex-1"></view>
							<view style="font-size: 20rpx;color: #838282;">修改</view>
							<text class="textIcon icon-gengduo" style="font-size: 32rpx;color: #333;margin-left: 5rpx;font-weight: 650;"></text>
						</view>
						<view style="width: 100%;height: 440rpx;">
							<image class="wh" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view style="font-size:28rpx;color:#595757;font-weight: 600;">王琳王琳</view>
							<view style="font-size:21rpx;color:#27AEEB;margin-left: 20rpx;margin-top: 10rpx;min-width: 70rpx;">接单中</view>
							<text class="textIcon icon-duihao2" style="font-size: 24rpx;margin-top: 10rpx;"></text>
							<view class="ss-flex-1"></view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="ss-flex-2 ss-col-center item-info-box">
								<text class="textIcon icon-vip" style="font-size: 26rpx;color:#FE7212;font-weight: 650;"></text>
								<view style="font-size:20rpx;margin-left: 5rpx;">个人认证</view>
							</view>
							<view class="ss-flex-2 ss-col-center item-info-box" style="margin-left: 10rpx;">
								<text class="textIcon icon-baozhang" style="font-size: 26rpx;color:#FE7212;font-weight: 650;"></text>
								<view style="font-size:20rpx;margin-left: 5rpx;">平台保障</view>
							</view>
							<view class="ss-flex-1"></view>
						</view>
						<view class="button-box-info">预览个人主页</view>
						<view style="width: 100%;height:10rpx;"></view>
					</view>
					
					<view class="bt-box">
						<view class="ss-flex-2 ss-col-center">
							<text class="textIcon icon-icon_map_list" style="font-size: 28rpx;color:#E2645B;font-weight: 650;"></text>
							<view style="font-size:24rpx;margin-left: 5rpx;font-weight: 550;">我的订单</view>
							<view class="ss-flex-1"></view>
							<text class="textIcon icon-gengduo" style="font-size: 28rpx;color:#333;font-weight: 650;"></text>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top:20rpx;">
							<view class="ss-flex-2" style="flex-wrap:wrap;width:45%;">
								<view style="width:100%;text-align:center;font-size:22rpx;font-weight:650;">待接订单</view>
								<view style="width:100%;text-align:center;font-size:32rpx;margin-top:20rpx;color:#FF7315;font-weight:650;">3</view>
							</view>
							<view class="ss-flex-1"></view>
							<view class="line-box"></view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2" style="flex-wrap:wrap;width:45%;">
								<view style="width:100%;text-align:center;font-size:22rpx;font-weight:650;">待完成订单</view>
								<view style="width:100%;text-align:center;font-size:32rpx;margin-top:20rpx;color:#444;font-weight:650;">3</view>
							</view>
						</view>
					</view>
					<view class="ss-flex-2 ss-col-center bottom-box">
						<view style="width: 100rpx;height: 80rpx;">
							<image class="wh" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
						</view>
						<view style="margin-left:30rpx;flex-wrap:wrap;" class="ss-flex-2 ss-col-center">
							<text style="font-size:28rpx;color:#333;">课程学习</text>
							<text style="font-size:20rpx;color:#999;margin-left:7rpx;">（未答题）</text>
						</view>
					</view>
					
				</view>
				<view style="width: 48%;margin-left: 4%;">
					<view class="right-box">
						<view class="ss-flex-2 ss-col-center" style="padding:10rpx;" @click="jumpOrderSetting">
							<text class="textIcon icon-jiedanshezhi" style="font-size: 30rpx;color:#333;font-weight: 650;"></text>
							<view style="font-size: 24rpx;color:#495058;font-weight: 600;margin-left:10rpx;">接单设置</view>
							<view class="ss-flex-1"></view>
							<text class="textIcon icon-gengduo" style="font-size: 30rpx;color:#333;font-weight: 650;"></text>
						</view>
						<view style="width:100%;margin-top:20rpx;">
							<view class="ss-flex-2 ss-col-center">
								<text class="textIcon icon-jiedanshijian" style="font-size: 28rpx;color:#649DFD;font-weight: 650;"></text>
								<view style="font-size: 22rpx;color:#B4B3B3;font-weight: 600;margin-left:10rpx;">接单时间</view>
							</view>
							<view style="font-size: 24rpx;color:#3D444D;font-weight: 600;margin-top:10rpx;margin-left:40rpx;">已开启8个小时</view>
						</view>
						<view style="width:100%;margin-top:20rpx;">
							<view class="ss-flex-2 ss-col-center">
								<text class="textIcon icon-nannvxingbie" style="font-size: 28rpx;color:#E47061;font-weight: 650;"></text>
								<view style="font-size: 22rpx;color:#B4B3B3;font-weight: 600;margin-left:10rpx;">客户性别</view>
							</view>
							<view style="font-size: 24rpx;color:#3D444D;font-weight: 600;margin-top:10rpx;margin-left:40rpx;">不限</view>
						</view>
						<view style="width:100%;margin-top:20rpx;margin-bottom: 10rpx;">
							<view class="ss-flex-2 ss-col-center">
								<text class="textIcon icon-destination" style="font-size: 28rpx;color:#FF7D13;font-weight: 650;"></text>
								<view style="font-size: 22rpx;color:#B4B3B3;font-weight: 600;margin-left:10rpx;">接单距离</view>
							</view>
							<view style="font-size: 24rpx;color:#3D444D;font-weight: 600;margin-top:10rpx;margin-left:40rpx;">10公里以内</view>
						</view>
					</view>
					<view class="right-bott-box">
						<view class="ss-flex-2 ss-col-center" style="padding:10rpx;">
							<text class="textIcon icon-xiangmushezhi" style="font-size: 30rpx;color:#DF4654;font-weight: 650;"></text>
							<view style="font-size: 24rpx;color:#495058;font-weight: 600;margin-left:10rpx;">项目设置</view>
							<view class="ss-flex-1"></view>
							<text class="textIcon icon-gengduo" style="font-size: 30rpx;color:#333;font-weight: 650;"></text>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;flex-wrap: wrap;">
							<view class="pro-item-box" style="background-color: #F54CB3;">养生保健</view>
							<view class="pro-item-box" style="background-color: #FF7D11;">足部按摩</view>
							<view class="pro-item-box" style="background-color: #F54CB3;">养生保健</view>
							<view class="pro-item-box" style="background-color: #FF7D11;">足部按摩</view>
						</view>
						
						
						<view class="list-wrap">
							<scroll-view scroll-y="true" class="list">
								<view class="list-scroll-view">
									
									<view class="ss-flex-2 ss-col-center project-item-box">
										<view style="font-size: 24rpx;color: #444A53;margin-right: 10rpx;max-width: 130rpx;min-width: 130rpx;">泰式按摩</view>
										<view style="font-size: 18rpx;color: #7C7A7B;">90分钟</view>
										<view class="ss-flex-1"></view>
										<text class="textIcon icon-renminbi" style="font-size: 24rpx;color:#FC8D44;font-weight: 650;"></text>
										<view style="font-size: 26rpx;color:#FC8D44;font-weight: 600;">399</view>
									</view>
									<view class="ss-flex-2 ss-col-center project-item-box" v-for="i in 5">
										<view style="font-size: 24rpx;color: #444A53;margin-right: 10rpx;max-width: 130rpx;min-width: 130rpx;">小儿推拿，按摩</view>
										<view style="font-size: 18rpx;color: #7C7A7B;">90分钟</view>
										<view class="ss-flex-1"></view>
										<text class="textIcon icon-renminbi" style="font-size: 24rpx;color:#FC8D44;font-weight: 650;"></text>
										<view style="font-size: 26rpx;color:#FC8D44;font-weight: 600;">399</view>
									</view>
									
								</view>
							</scroll-view>
						</view>
						
						
						
					</view>
					<view class="ss-flex-2 ss-col-center bottom-box">
						<view style="width: 100rpx;height: 80rpx;">
							<image class="wh" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
						</view>
						<view style="font-size:28rpx;color:#333;margin-left:30rpx;">嘀咚商城</view>
					</view>
				</view>
			</view>

			<!-- 中部 -->
			
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();
	
	//跳转到接单设置
	const jumpOrderSetting=async()=>{
		uni.navigateTo({
			url:'/pages/Technician/other/orderSetting/orderSetting'
		})
	}
	
	const iconClick = async (type) => {
		uni.showToast({
			title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
			icon: 'none'
		})
	}
	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/homePage/homePage',
		});
	};

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.bottom-box{
		width:100%;
		background-color: #fff;
		border-radius:30rpx;
		box-sizing:border-box;
		margin-top:20rpx;
		padding:10rpx 20rpx;
	}
	.project-item-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 15rpx 10rpx;
		font-size: 24rpx;
		background-color: #EEEEF0;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}
	.pro-item-box{
		padding: 3rpx 10rpx;
		box-sizing: border-box;
		font-size: 16rpx;
		color: #fff;
		border-radius: 20rpx;
		margin-right: 5rpx;
		margin-bottom: 10rpx;
	}
	.right-bott-box{
		width:100%;
		min-height:200rpx;
		box-sizing:border-box;
		padding:10rpx;
		background-color: #fff;
		border-radius:10rpx;
		margin-top: 20rpx;
	}
	.right-box{
		width:100%;
		min-height:200rpx;
		box-sizing:border-box;
		padding:10rpx;
		background-color: #fff;
		border-radius:10rpx;
	}
	.line-box{
		width:4rpx;
		min-height:140rpx;
		background-color: #9EA1A6;
	}
	.bt-box{
		width: 100%;
		min-height: 200rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 10rpx;
		background-color: #fff;
	}
	.button-box-info{
		width: 90%;
		margin-left: 5%;
		box-sizing: border-box;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		font-size: 34rpx;
		color: #C30D24;
		border: 1rpx solid #FFB887;
		border-radius: 30rpx;
		font-weight: 500;
	}
	.item-info-box{
		padding:4rpx;
		border-radius:10rpx;
		box-sizing:border-box;
		border:1rpx solid #BFC1C4;
	}
	.personalInformation{
		position: relative;
		width: 100%;
		min-height: 200rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}
	.left-right-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	.address-box {
		max-width:260rpx;
		font-size: 20rpx;
		color: #4B515A;
		margin-left: 5rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bg-box-info {
		padding: 15rpx;
		min-width: 240rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.bg-info-box {
		width: 100%;
		min-height: 350rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #CE4555, #EADADD);
	}

	.icon-navigation {
		font-size: 35rpx;
		color: #fff;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: calc(100vh - 50px);
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 100%;
		min-height:420rpx;
		max-height:700rpx;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>