mechanicStore-app/pages/console/serviceProject.uvue

<template>
	<view class="page-container">
		<scroll-view style="flex:1">

			<!-- 服务列表容器 -->
			<view class="service-list" v-for="service in servicesList" :key="service.id">
				<!-- 中式推拿项（带路费设置） -->
				<view class="service-item">
					<!-- 左侧图片+信息区（核心：显式设置flex-direction: row） -->
					<view class="item-left" style="flex-direction: row;">
						<image class="service-img" :src="service.img" mode="aspectFill">
						</image>
						<view class="service-info">
							<text class="service-title">
								{{ service.title }}
							</text>
							<text class="service-desc">
								{{ service.desc }}
							</text>
							<text class="service-price">
								¥{{ service.price }}
							</text>
						</view>
					</view>
					<!-- 右侧开关 -->
					<switch class="service-switch" :checked="service.hasFare" color="#FFCC00">
					</switch>

					<!-- 路费设置（仅中式推拿展示） -->
					<view class="fare-setting" style="flex-direction: row;">
						<text class="fare-label">
							路费设置
						</text>
						<view class="fare-options" style="flex-direction: row;">
							<button class="fare-btn">
								免路费
							</button>
							<button class="fare-btn">
								单程
							</button>
							<button class="fare-btn active">
								双程
							</button>
						</view>
					</view>
				</view>


			</view>
		</scroll-view>
		<!-- 底部保存按钮 -->
		<view class="footer-box" @click="handleSave">
			<text class="footer-text">
				保存设置
			</text>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue';
	import { editWorkTimeSetting } from '@/utils/api/workbenches.uts'

	type ServiceItem = {
		id : number
		title : string
		desc : string
		price : number
		img : string
		hasFare : boolean
	}

	const fareType = ref<string>('roundtrip');
	const servicesList = ref<ServiceItem[]>([
		{
			id: 1,
			title: '中式推拿',
			desc: '服务时长：60分钟',
			price: 199,
			img: '/static/imagesInfo/anmo.png',
			hasFare: true
		},
		{
			id: 2,
			title: '足疗按摩',
			desc: '服务时长：45分钟',
			price: 149,
			img: '/static/imagesInfo/anmo.png',
			hasFare: false
		},
		{
			id: 3,
			title: '肩颈按摩',
			desc: '服务时长：30分钟',
			price: 99,
			img: '/static/imagesInfo/anmo.png',
			hasFare: false
		}
	])
	const handleSave = async () => {
		// console.log(timeArr.value, 'timeArr')
		// // 1. 声明选中时间数组（类型固定）
		// const kjTime : TimeItem[] = []
		// // 2. 遍历获取选中的时间段
		// for (let i = 0; i < timeArr.value.length; i++) {
		// 	const item : TimeItem = timeArr.value[i]
		// 	if (item.isSelect) {
		// 		kjTime.push(item)
		// 	}
		// }
		// // 3. 校验：未选择时间段
		// if (kjTime.length === 0) {
		// 	uni.showToast({
		// 			title: '请至少选择一个可接单时间段',
		// 			icon: 'none',
		// 			duration: 2000
		// 		})
		// 	return
		// }
		try {

			// const scheduleData = {
			// 	time_ranges: kjTime.filter((range : TimeItem) => range.isSelect).map((range : TimeItem) => ({
			// 		start_time: range.start_time,
			// 		end_time: range.end_time
			// 	}))
			// }
			// 调用接口保存
			const res = await editWorkTimeSetting({})
			console.log(res);
			// if ((res.code as number) === 200) {
			// 	uni.showToast({
			// 		title: '保存成功',
			// 		icon: 'success',
			// 		duration: 2000
			// 	})
			// 	uni.reLaunch({
			// 		url: '/pages/index/console'
			// 	})
			// }
		} catch (error) {
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none'
			})
			console.error('保存报错：', error)
		}
	}
</script>

<style>
	/* 页面根容器：利用默认flex + column，全屏适配 + 基础背景 */
	.page-container {
		min-height: 100%;
		height: 100%;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
		/* 给保存按钮留间距 */
	}

	/* 顶部导航栏：显式设置flex-direction: row，保证横向排版 */
	.nav-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	/* 关闭图标 */
	.close-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 导航标题 */
	.nav-title {
		font-size: 36rpx;
		font-weight: 700;
		/* 替换600，兼容uni app x */
		color: #333;
	}

	/* 占位空盒 */
	.empty-box {
		width: 40rpx;
		height: 40rpx;
	}

	/* 服务列表容器：纵向排列，替代gap用margin */
	.service-list {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	/* 服务项间距：替代gap:15rpx */
	.service-item {
		margin-bottom: 15rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		/* 核心：显式设置横向排版 */
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		/* 小屏幕路费设置换行 */
	}

	/* 最后一个服务项去掉底部间距 */
	.service-list .service-item:last-child {
		margin-bottom: 0;
	}

	/* 左侧图片+信息区：横向排版 */
	.item-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	/* 服务图片 */
	.service-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		/* 替代gap:20rpx */
	}

	/* 服务信息区：纵向排列 */
	.service-info {
		display: flex;
		flex-direction: column;
	}

	/* 服务描述/价格：顶部间距，替代gap:8rpx */
	.service-desc {
		margin-top: 8rpx;
	}

	.service-price {
		margin-top: 8rpx;
	}

	/* 服务标题：替换font-weight:600为700 */
	.service-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
	}

	/* 服务描述：替换font-weight:500为400 */
	.service-desc {
		font-size: 24rpx;
		color: #666;
		font-weight: 400;
	}

	/* 服务价格：替换font-weight:500为400 */
	.service-price {
		font-size: 28rpx;
		color: #ff6700;
		font-weight: 400;
	}

	/* 开关样式 */
	.service-switch {
		transform: scale(0.9);
	}

	/* 路费设置区域：横向排版 */
	.fare-setting {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 15rpx;
		padding-top: 15rpx;
		border-top: 1px solid #eee;
	}

	/* 路费标签 */
	.fare-label {
		font-size: 26rpx;
		color: #666;
		white-space: nowrap;
		margin-right: 20rpx;
		/* 替代gap:20rpx */
	}

	/* 路费选项容器：横向排版 */
	.fare-options {
		display: flex;
		flex: 1;
	}

	/* 路费按钮：替代gap:10rpx用margin-left */
	.fare-btn {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8rpx;
		border: 1px solid #ddd;
		background-color: #fff;
	}

	/* 路费按钮：非首个按钮左侧间距 */
	.fare-btn:not(:first-child) {
		margin-left: 10rpx;
	}

	/* 选中状态样式 */
	.fare-btn.active {
		background-color: #FFCC00;
		color: #fff;
		border-color: #FFCC00;
	}

	/* 底部保存按钮 */
	.footer-box {

		/* bottom: 40rpx; */
		/* 距离底部距离 */

		transform: translateX(-50%);
		left: 50%;
		width: 78%;
		height: 100rpx;
		background-color: #FFDA59;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		.footer-text {
			color: #3A3330;
			font-size: 34rpx;
			font-weight: 700;
			letter-spacing: 3rpx;
		}
	}
</style>