mechanicStore-app/pages/homepage/serviceProject.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view class="page-scroll">
		<!-- #endif -->
		<view class="page">
			<view v-for="service in serviceList" :key="service.id" class="service-card">
				<view class="service-top">
					<image
					:src="(((service as UTSJSONObject).cover_urls as UTSArray<UTSJSONObject>)[0] as UTSJSONObject).url ?? ''"
					class=" service-image" mode="aspectFill" />
					<view class="service-info">
						<text class="service-title">
							{{ service.title }}
						</text>
						<text class="service-desc">
							服务时长：{{ service.duration }} 分钟
						</text>
						<text class="service-price">
							{{ service.price }}
						</text>
					</view>
					<switch class="service-switch" :checked="service.is_opened== 1 ? true : false" color="#ffcf3a"
					@change="toggleService(service.id as Number)">
					</switch>

				</view>

				<view class=" service-bottom">
					<text class="service-bottom-label">
						路费设置
					</text>
					<view class="fare-group">
						<view class="fare-chip"
						:class="service.traffic_fee_type == 0 ? 'fare-chip-active' : 'fare-chip-idle'"
						@click="setFareType(service.id as Number, 0)">
							<text class="fare-chip-text"
							:class="service.traffic_fee_type == 0 ? 'fare-chip-text-active' : 'fare-chip-text-idle'">
								免路费
							</text>
						</view>
						<view class="fare-chip"
						:class="service.traffic_fee_type == 1 ? 'fare-chip-active' : 'fare-chip-idle'"
						@click="setFareType(service.id as Number, 1)">
							<text class="fare-chip-text"
							:class="service.traffic_fee_type == 1 ? 'fare-chip-text-active' : 'fare-chip-text-idle'">
								单程
							</text>
						</view>
						<view class="fare-chip"
						:class="service.traffic_fee_type == 2 ? 'fare-chip-active' : 'fare-chip-idle'"
						@click="setFareType(service.id as Number, 2)">
							<text class="fare-chip-text"
							:class="service.traffic_fee_type == 2 ? 'fare-chip-text-active' : 'fare-chip-text-idle'">
								双程
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="footer-button" @click="saveServiceSetting">
				<text class="footer-button-text">
					保存设置
				</text>
			</view>
		</view>
		<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="uts">
	import { ref } from 'vue'
	import { getCoachItems, getAvailableProjects, toggleProject } from '@/utils/api/workbenches'
	type FareType = 'free' | 'single' | 'double'


	const serviceList = ref<UTSJSONObject[]>([
		{ id: 1, title: '中式推拿', duration: 60, price: '¥199', cover_urls: [{ url: '/static/imagesInfo/anmo.png' }], is_opened: 1, traffic_fee_type: 2 },
	{ id: 2, title: '足疗按摩', duration: 45, price: '¥149', cover_urls: [{ url: '/static/imagesInfo/anmo.png' }], is_opened: 1, traffic_fee_type: 2 },
	{ id: 3, title: '肩颈放松', duration: 50, price: '¥99', cover_urls: [{ url: '/static/imagesInfo/anmo.png' }], is_opened: 1, traffic_fee_type: 2 },
	])

	const toggleService = (serviceId : number) : void => {
		for (let i = 0; i < serviceList.value.length; i++) {
			const item = serviceList.value[i]
			if (item.id == serviceId) {
				item.is_opened = item.is_opened == 1 ? false : true
				return
			}
		}
	}

	const setFareType = (serviceId : number, fareType : Number) : void => {
		for (let i = 0; i < serviceList.value.length; i++) {
			const item = serviceList.value[i]
			if (item.id == serviceId) {
				item.traffic_fee_type = fareType
				return
			}
		}
	}
	// 获取可开通服务项目接口
	const httpGetServiceList = async () => {
		try {
			const response = await getAvailableProjects() as UTSJSONObject
			const code = response["code"] as number
			// const data = response["data"] as UTSJSONObject
			if (code !== 200) return

			serviceList.value = response["data"] as UTSArray<UTSJSONObject>;
			console.log(serviceList.value, 'sssss');

		} catch (err : any) {
			console.error('获取服务项目接口异常', err)
		}
	}
	// 获取技师服务项目接口
	const httpGetCoachItems = async () => {
		// try {
		// 	const response = await getCoachItems() as UTSJSONObject
		// 	const code = response["code"] as number
		// 	const data = response["data"] as UTSJSONObject
		// 	if (code !== 200) return
		// } catch (err : any) {
		// 	console.error('获取技师服务项目接口异常', err)
		// }
	}
	// 保存服务设置
	const saveServiceSetting = async () => {
		// 构建保存参数
		const params = serviceList.value.map((service) => {
				// 检查路费设置是否为空
				if (service["is_opened"] == true && service["traffic_fee_type"] == null) {
					uni.showToast({ title: '请设置路费类型', icon: 'none' })
					throw new Error('请设置路费类型')
				}
				return {
					project_id: service["id"],
					is_opened: service["is_opened"] == true ? 1 : 0,
					traffic_fee_type: service["traffic_fee_type"]
				} as UTSJSONObject
			})
		try {
			const response = await toggleProject(params) as UTSJSONObject
			const code = response["code"] as number
			if (code !== 200) {
				uni.showToast({ title: '保存失败', icon: 'none' })
				return
			}
			uni.showToast({ title: '服务设置已保存', icon: 'success' })
		} catch (err : any) {
			console.error('保存服务设置接口异常', err)
			uni.showToast({ title: '保存失败', icon: 'none' })
		}
	}
	// 页面加载时获取服务项目
	onLoad(() => {
			httpGetServiceList();
			httpGetCoachItems()
		})
</script>

<style>
	.page-scroll {
		flex: 1;
	}

	.page {
		min-height: 1000rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #f5f1e9;
		flex-direction: column;
	}

	.hero-card {
		margin-bottom: 20rpx;
		padding: 28rpx;
		border-radius: 26rpx;
		background-color: #fff0af;
		flex-direction: column;
	}

	.hero-title {
		font-size: 38rpx;
		font-weight: 700;
		color: #352f24;
	}

	.hero-desc {
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #6c624f;
	}

	.service-card {
		margin-bottom: 20rpx;
		padding: 24rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		flex-direction: column;
		border-width: 2rpx;
		border-style: solid;
		border-color: #f0eadf;
	}

	.service-top {
		flex-direction: row;
		align-items: center;
	}

	.service-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
	}

	.service-info {
		flex: 1;
		margin-left: 20rpx;
		flex-direction: column;
	}

	.service-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
	}

	.service-desc {
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #7c7c7c;
	}

	.service-price {
		margin-top: 8rpx;
		font-size: 28rpx;
		color: #f36b3d;
	}

	.service-bottom {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #efefef;
		flex-direction: row;
		align-items: center;
	}

	.service-bottom-label {
		font-size: 26rpx;
		color: #6f6f6f;
	}

	.fare-group {
		flex: 1;
		margin-left: 16rpx;
		flex-direction: row;
	}

	.fare-chip {
		flex: 1;
		height: 62rpx;
		margin-left: 12rpx;
		border-radius: 12rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.fare-chip-active {
		background-color: #ffcf3a;
	}

	.fare-chip-idle {
		background-color: #f7f7f7;
		border-width: 1px;
		border-style: solid;
		border-color: #dddddd;
	}

	.fare-chip-text {
		font-size: 24rpx;
	}

	.fare-chip-text-active {
		color: #ffffff;
	}

	.fare-chip-text-idle {
		color: #666666;
	}

	.footer-button {
		margin-top: 8rpx;
		height: 96rpx;
		border-radius: 24rpx;
		background-color: #ffd54d;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.footer-button-text {
		font-size: 32rpx;
		font-weight: 700;
		color: #3d3528;
	}
</style>