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

<!-- 接单设置 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="订单" navbar="custom"
		tabbar="/pages/XDHomePage/orderInfoList/orderInfoList">
		<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="sex-box">
				<view style="font-size: 26rpx;color: #3D444D;font-weight: 550;">接单用户性别</view>
				<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
					<view class="sex-item-box" @click="onClick(item)" v-for="item in sexData" :key="item.value" :style="item.value==onClickIndex?'background-color: #649DFD;color: #fff;border: none;':''">{{item.text}}</view>
				</view>
			</view>
			
			<view class="time-box ss-flex-2 ss-col-center" @click="jumpChooseTime">
				<view>选择可以接单的时间</view>
				<view class="ss-flex-1"></view>
				<view>去设置</view>
				<text class="textIcon icon-gengduo icon-navigation" style="margin-left:10rpx;"></text>
			</view>
			<!-- 服务半径 -->
			<view class="sex-box">
				<view style="font-size: 26rpx;color: #3D444D;font-weight: 550;">服务用户距离半径（公里/km）</view>
				<slider style="margin-top: 50rpx;" block-size="24" @change="sliderChange" step="1" min="3" max="50" show-value :value="sliderInfo"/>
			</view>
			
			<!-- 服务半径 -->
			<view class="time-box ss-flex-2 ss-col-center">
				<view>技师固定接单地址</view>
				<view class="ss-flex-1"></view>
				<view>去设置</view>
				<text class="textIcon icon-gengduo icon-navigation" style="margin-left:10rpx;"></text>
			</view>
			
			<!-- 中部 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">
					<view class="list-scroll-view">

					</view>
				</scroll-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 jumpChooseTime=async()=>{
		uni.navigateTo({
			url:'/pages/Technician/other/chooseTime/chooseTime'
		})
	}
	
	//选择服务半径
	const sliderInfo=ref(3)
	const sliderChange=async(e)=>{
		console.log(e,'服务半径')
		sliderInfo.value=e.detail.value
	}
	
	
	const sexData = ref([{
			text: '不限',
			value: 1
		},
		{
			text: '男士',
			value: 2
		},
		{
			text: '女士',
			value: 3
		}
	])
	const onClickIndex=ref(1)
	const onClick=async(item)=>{
		onClickIndex.value=item.value
	}
	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/Technician/other/orderSetting/orderSetting',
		});
	};

	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-box{
		width: 95%;
		min-height: 50rpx;
		margin-top: 20rpx;
		margin-left: 2.5%;
		font-weight: 550;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;
	}
	.sex-item-box {
		padding: 10rpx 50rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 550;
		border: 1rpx solid #D6D8DA;
		margin-right: 40rpx;
	}

	.sex-box {
		width: 95%;
		min-height: 100rpx;
		margin-top: 20rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.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: 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>