mechanicStore-app/pages/homepage/serviceProject.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view class="page-scroll">
	<!-- #endif -->
		<view class="page">
			<view class="hero-card">
				<text class="hero-title">服务项目设置</text>
				<text class="hero-desc">按项目维度管理开关和路费规则，界面风格向旧业务页靠拢。</text>
			</view>
			<view v-for="service in serviceList" :key="service.id" class="service-card">
				<view class="service-top">
					<image class="service-image" :src="service.image" mode="aspectFill"></image>
					<view class="service-info">
						<text class="service-title">{{ service.title }}</text>
						<text class="service-desc">{{ service.description }}</text>
						<text class="service-price">{{ service.priceText }}</text>
					</view>
					<switch :checked="service.enabled" color="#ffcf3a" @change="toggleService(service.id)"></switch>
				</view>

				<view class="service-bottom">
					<text class="service-bottom-label">路费设置</text>
					<view class="fare-group">
						<view class="fare-chip" :class="service.fareType == 'free' ? 'fare-chip-active' : 'fare-chip-idle'" @click="setFareType(service.id, 'free')">
							<text class="fare-chip-text" :class="service.fareType == 'free' ? 'fare-chip-text-active' : 'fare-chip-text-idle'">免路费</text>
						</view>
						<view class="fare-chip" :class="service.fareType == 'single' ? 'fare-chip-active' : 'fare-chip-idle'" @click="setFareType(service.id, 'single')">
							<text class="fare-chip-text" :class="service.fareType == 'single' ? 'fare-chip-text-active' : 'fare-chip-text-idle'">单程</text>
						</view>
						<view class="fare-chip" :class="service.fareType == 'double' ? 'fare-chip-active' : 'fare-chip-idle'" @click="setFareType(service.id, 'double')">
							<text class="fare-chip-text" :class="service.fareType == 'double' ? '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'

	type FareType = 'free' | 'single' | 'double'

	type ServiceItem = {
		id: number
		title: string
		description: string
		priceText: string
		image: string
		enabled: boolean
		fareType: FareType
	}

	const serviceList = ref<ServiceItem[]>([
		{ id: 1, title: '中式推拿', description: '服务时长 60 分钟', priceText: '¥199', image: '/static/imagesInfo/anmo.png', enabled: true, fareType: 'double' },
		{ id: 2, title: '足疗按摩', description: '服务时长 45 分钟', priceText: '¥149', image: '/static/imagesInfo/anmo.png', enabled: false, fareType: 'single' },
		{ id: 3, title: '肩颈放松', description: '服务时长 30 分钟', priceText: '¥99', image: '/static/imagesInfo/anmo.png', enabled: false, fareType: 'free' },
	])

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

	const setFareType = (serviceId : number, fareType : FareType) : void => {
		for (let i = 0; i < serviceList.value.length; i++) {
			const item = serviceList.value[i]
			if (item.id == serviceId) {
				item.fareType = fareType
				return
			}
		}
	}

	const saveServiceSetting = () : void => {
		uni.showToast({ title: '服务设置已保存', icon: 'none' })
	}
</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: 24rpx;
		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>