xiaoding-app-technician/pages/Technician/other/chooseTime/chooseTime.vue

<!-- 选择时间 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #3D444E; font-size: 28rpx">接单时间</view>
			</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-kefu2 icon-navigation"></text>
		</view>
		
		<view class="big-time-box">
			<view class="default-box ss-flex-2 ss-col-center">
				<view class="ss-flex-1"></view>
				<view class="default-item-box" @click="clickInfo(1)" :style="clickIndex==1?'background-color: #DB2A46;color: #fff;':''">
					默认
				</view>
				<view class="ss-flex-1"></view>
				<view class="default-item-box" @click="clickInfo(2)" :style="clickIndex==2?'background-color: #DB2A46;color: #fff;':''">
					今天
				</view>
				<view class="ss-flex-1"></view>
			</view>
			<view class="ss-flex-2 ss-col-center" style="width: 95%;margin-left: 2.5%;box-sizing: border-box;margin-top: 20rpx;">
				<view class="week-box" v-for="item in weekData" :key="item.text" @click="clickWeek(item)" :style="weekArr.indexOf(item.value)>-1?'background-color: #FED037;color: #fff;':''">
					{{item.text}}
				</view>
			</view>
		</view>
		
		<view class="setting-time">
			<view class="title-time-box">点击以下时间段设置/取消</view>
			<view class="ss-flex-2 ss-col-center" style="flex-wrap: wrap;width: 95%;margin-left: 2.5%;box-sizing: border-box;">
				<view class="time-pian-box" v-for="i in 46">
					00:00
				</view>
			</view>
		</view>
		
		
		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">

				</view>
			</scroll-view>
		</view>
	</view>
</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 clickIndex=ref(1)
	const clickInfo=async(num)=>{
		clickIndex.value=num
	}
	const weekArr=ref([])
	const clickWeek=async(item)=>{
		if(weekArr.value.length>0){
			if(weekArr.value.indexOf(item.value)>-1){
				weekArr.value.splice(weekArr.value.indexOf(item.value),1)
			}else{
				weekArr.value.push(item.value)
			}
		}else{
			weekArr.value.push(item.value)
		}
	}
	const weekData=ref([
		{
			text:'周一',
			value:1
		},
		{
			text:'周二',
			value:2
		},
		{
			text:'周三',
			value:3
		},
		{
			text:'周四',
			value:4
		},
		{
			text:'周五',
			value:5
		},
		{
			text:'周六',
			value:6
		},
		{
			text:'周日',
			value:7
		}
	])
	// 返回上一页
	const backPage = async () => {
		uni.navigateBack({
			delta:1
		});
	};

	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">
	.time-pian-box{
		padding: 10rpx 40rpx;
		font-size: 18rpx;
		color: #414141;
		border-radius: 20rpx;
		border: 1rpx solid #CCCCD0;
		margin-top:20rpx;
		margin-right:28rpx;
	}
	.title-time-box{
		font-size: 22rpx;
		color: #3D444E;
		font-weight: 600;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}
	.setting-time{
		width: 95%;
		min-height: 100rpx;
		margin-left: 2.5%;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 30rpx;
	}
	.week-box{
		padding: 10rpx 10rpx 30rpx 10rpx;
		box-sizing: border-box;
		border: 1rpx solid #EEEEF0;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #484F57;
		margin-right: 20rpx;
	}
	.default-item-box{
		padding: 10rpx 70rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #484F57;
	}
	.default-box{
		width: 95%;
		min-height: 50rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		background-color: #EEEEF0;
		border-radius: 5rpx;
	}
	.big-time-box{
		width:95%;
		min-height:100rpx;
		margin-left:2.5%;
		padding: 15rpx;
		box-sizing:border-box;
		border-radius:10rpx;
		background-color:#fff;
		margin-top:20rpx;
	}
	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

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

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		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>