pet-front/otherPages/myOrdersManage/service/detail.vue

<template>
	<!-- <div>服务档案</div> -->
	<view class="box box-size">

		<view style="margin: 32rpx 0;">
			<up-steps :current="currentStep" activeColor="#FFA042" inactiveColor="#E5E5E5" class="up-steps-custom">
				<up-steps-item title="喂养要求"
					:titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 0 ? '#FFA042' : '#999999'}"></up-steps-item>
				<up-steps-item title="清洁要求"
					:titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 1 ? '#FFA042' : '#999999'}"></up-steps-item>
				<up-steps-item title="附加服务"
					:titleStyle="{fontSize: '32rpx', fontWeight: 'bold', color: currentStep === 2 ? '#FFA042' : '#999999'}"></up-steps-item>
			</up-steps>
		</view>

		<!-- v-if="detail.includeDryFood 
        || detail.includeWetFood
        || detail.includeHomemadeFood
        || detail.includeRawMeat
        || detail.includeHealthSupplements
        || detail.includeSnacks
        " -->

		<!-- 喂养要求内容 -->
		<view v-if="currentStep === 0">
			<view class="top box-size" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					本次喂养过程中，您需要喂养的食品包括
				</view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						干粮(主粮、冻干等)
					</view>
					<view class="size-30 mt32 fw400">
						干粮摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.dryFoodLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.dryFoodLocation)" :key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">干粮喂养重量</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" :value="detail.dryFoodFeedWeight"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>/次(单位:克)</view>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">干粮喂养频率</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" :value="detail.dryFoodFeedFrequencyDays"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>天</view>
							<view class="input_ mr10">
								<input type="text" :value="detail.dryFoodFeedFrequencyTimes"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>次</view>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.dryFoodRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						湿粮(罐头等)
					</view>
					<view class="size-30 mt32 fw400">
						湿粮摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.wetFoodLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.wetFoodLocation)" :key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">湿粮喂养重量</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" disabled :value="detail.wetFoodFeedWeight"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>/次(单位:罐)</view>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">湿粮喂养频率</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" disabled :value="detail.wetFoodFeedFrequencyDays"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>天</view>
							<view class="input_ mr10">
								<input type="text" disabled :value="detail.wetFoodFeedFrequencyTimes"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>次</view>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.wetFoodRemarks || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						自制食品
					</view>
					<view class="size-30 mt32 fw400">
						自制食品摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.homemadeFoodLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.homemadeFoodLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						自制饭制作和喂食说明
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.homemadeFoodInstructions || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						生骨肉
					</view>
					<view class="size-30 mt32 fw400">
						生骨肉摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.rawMeatLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.rawMeatLocation)" :key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						生骨肉喂食说明
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.rawMeatFeedingInstructions || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						保健品
					</view>
					<view class="size-30 mt32 fw400">
						保健品摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.healthSupplementsLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.healthSupplementsLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						保健品喂养方式
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.healthSupplementsFeedingInstructions || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						零食
					</view>
					<view class="size-30 mt32 fw400">
						零食摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.snacksLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.snacksLocation)" :key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						零食喂养方式
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.snacksFeedingMethod || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>
			</view>
			<view class="top mt24" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					食盆/自动喂食器
				</view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						喂食器具摆放位置
					</view>
					<view class="mt20">
						<template v-if="handleImageUrl(detail.feedingTrayAutomaticFeederLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.feedingTrayAutomaticFeederLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.feedingTrayAutomaticFeederRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
			<view class="top mt24" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					饮用水
				</view>
				<view class=" mt32 ml10">
					<view class="color-A55 size-30 fw400">
						饮用水摆放位置
					</view>
					<view class="mt20">
						<template v-if="handleImageUrl(detail.waterBowlLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.waterBowlLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						饮用水添加要求
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.waterBowlRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
			<view class="top mt24" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					其他补充信息(非必填)
				</view>
				<view class=" mt32 ml10">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.otherRemark || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
		</view>

		<!-- 清洁要求内容 -->
		<view v-if="currentStep === 1">
			<view class="top box-size" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					您需要的清洁内容				</view>
				<!-- <view class="empty-state-full">
					<up-icon name="info-circle" size="60rpx" color="#999999"></up-icon>
					<text class="empty-text-full">暂无清洁内容</text>
				</view> -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						猫砂
					</view>
					<view class="size-30 mt32 fw400">
						猫砂摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.catLitterLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.catLitterLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">猫砂更换频率</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" disabled :value="detail.catLitterChangeFrequencyDays"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>天</view>
							<view class="input_ mr10">
								<input type="text" disabled :value="detail.catLitterChangeFrequencyTimes"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>次</view>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.catLitterRemarks || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>

				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						尿垫
					</view>
					<view class="size-30 mt32 fw400">
						尿垫摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.urinePadLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.urinePadLocation)" :key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">更换尿垫</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" :value="detail.urinePadChangeFrequency"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>是</view>
						</view>
					</view>
					<view class="size-30 mt24 flex-between">
						<view :style="{color:'#999999'}">尿垫更换频率</view>
						<view class="level">
							<view class="input_ mr10">
								<input type="text" :value="detail.urinePadChangeFrequencyDays"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>天</view>
							<view class="input_ mr10">
								<input type="text" :value="detail.urinePadChangeFrequencyTimes"
									:style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
							</view>
							<view>次</view>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						备注信息
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.urinePadRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
		</view>

		<!-- 附加服务内容 -->
		<view v-if="currentStep === 2">
			<view class="top box-size" :style="{borderRadius:'16rpx'}">
				<view class="form-title">
					您需要的附加服务
				</view>

				<!-- 陪玩服务 -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						陪玩
					</view>
					<view class="size-30 mt32 fw400">
						陪玩用具摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.playtimeToolsLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.playtimeToolsLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						您希望的互动方式和要求
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.playtimeRequirements || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>

				<!-- 活动区吸毛 -->
				<view class="mt32 ml10" v-if="detail.furCleaningService">
					<view class="color-A55 size-30 fw400">
						活动区吸毛
					</view>
					<view class="size-30 mt32 fw400">
						吸毛用品摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.furCleaningToolsLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.furCleaningToolsLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						请说明吸毛区域及要求
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.furCleaningRequirements || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>

				<!-- 毛发梳理 -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						毛发梳理
					</view>
					<view class="size-30 mt32 fw400">
						毛发梳理用品摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.groomingToolsLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.groomingToolsLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						请说明毛发梳理要求(如: 天数,次数等)
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.groomingRequirements || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.groomingService"></view>

				<!-- 食具深度清洁 -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						食具深度清洁
					</view>
					<view class="size-30 mt32 fw400">
						需深度清洁的用具及消毒剂摆放位置
					</view>
					<view class="img mt20">
						<template v-if="handleImageUrl(detail.deepCleaningToolsLocation).length > 0">
							<u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
								@click="previewImage(item)"
								v-for="(item, index) in handleImageUrl(detail.deepCleaningToolsLocation)"
								:key="index"></u-image>
						</template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						请说明食具/饮水机深度清洁要求(如清洁方式、消毒剂使用方式、频率等)
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.deepCleaningRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>

				<!-- 喂药上药 -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						喂药上药
					</view>
					<view class="size-30 mt32 fw400">
						药品摆放位置
					</view>
					<view class="img mt20">
                        <template v-if="handleImageUrl(detail.walkDogToolsLocation).length">
						    <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
							@click="previewImage(item)"
							v-for="(item, index) in handleImageUrl(detail.administerMedicationLocation)"
							:key="index"></u-image>
                        </template>
						<view v-else class="empty-state">
							<up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
							<text class="empty-text">暂无图片</text>
						</view>
					</view>
					<view class="size-30 mt24" :style="{color:'#999999'}">
						请说明药品使用方式
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" disabled :value="detail.administerMedicationRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
				<view class="line" :style="{borderRadius:'1rpx'}"></view>

				<!-- 遛狗服务 -->
				<view class="mt32 ml10">
					<view class="color-A55 size-30 fw400">
						遛狗服务
					</view>
					<view class="size-30 mt32 fw400">
						遛狗用品摆放位置
					</view>
					<view class="img mt20">
                        
                        <template v-if="handleImageUrl(detail.walkDogToolsLocation).length">
						    <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
							@click="previewImage(item)"
							v-for="(item, index) in handleImageUrl(detail.walkDogToolsLocation)" :key="index"></u-image>
                        </template>
                        
                        <view v-else class="empty-state">
                            <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
                            <text class="empty-text">暂无图片</text>
                        </view>
					</view>

					<!-- 雨天遛狗 -->
					<view>
						<view class="size-30 mt32 fw400">
							狗狗雨具位置
						</view>
						<view class="img mt20">
							
                            <template v-if="handleImageUrl(detail.dogRainGearLocation).length">
                                <u-image class="img" :src="item" mode="aspectFill" width="173rpx" height="230rpx"
                                @click="previewImage(item)"
                                v-for="(item, index) in handleImageUrl(detail.dogRainGearLocation)"
                                :key="index"></u-image>
                            </template>
                                
                            <view v-else class="empty-state">
                                <up-icon name="info-circle" size="40rpx" color="#999999"></up-icon>
                                <text class="empty-text">暂无图片</text>
                            </view>
						</view>
						<view class="size-30 mt24" :style="{color:'#999999'}">
							下雨天遛狗要求
						</view>
						<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
							<input type="text" :value="detail.walkDogRainRemark || '无'"
								:style="{height:'50rpx',fontSize:'30rpx'}">
						</view>
					</view>

					<!-- 遛狗时长 -->
					<view>
						<view class="size-30 mt24" :style="{color:'#999999'}">
							遛狗时长
						</view>
						<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
							<input type="text" :value="detail.walkDogDuration || '无'"
								:style="{height:'50rpx',fontSize:'30rpx'}">
						</view>
					</view>

					<!-- 狗狗行为 -->
					<view>
						<view class="size-30 mt24" :style="{color:'#999999'}">
							狗狗行为
						</view>
						<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
							<input type="text" :value="detail.dogBehavior || '无'" :style="{height:'50rpx',fontSize:'30rpx'}">
						</view>
					</view>

					<!-- 偏好区域 -->
					<view>
						<view class="size-30 mt24" :style="{color:'#999999'}">
							偏好区域
						</view>
						<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
							<input type="text" :value="detail.favoriteRegion || '无'"
								:style="{height:'50rpx',fontSize:'30rpx'}">
						</view>
					</view>

					<!-- 偏好路线 -->
					<view>
						<view class="size-30 mt24" :style="{color:'#999999'}">
							偏好路线
						</view>
						<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
							<input type="text" :value="detail.favoriteRoute || '无'"
								:style="{height:'50rpx',fontSize:'30rpx'}">
						</view>
					</view>
				</view>

				<!-- 附加服务备注 -->
				<view class="mt32 ml10">
					<view class="size-30 mt24" :style="{color:'#999999'}">
						附加服务备注
					</view>
					<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
						<input type="text" :value="detail.additionalServicesRemarks || '无'"
							:style="{height:'50rpx',fontSize:'30rpx'}">
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="buttom_ mt60 box-size level" v-if="currentStep > 0">
			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="prevStep">
				上一页
			</view>
			<view class="buttom_item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
				{{ currentStep === 2 ? '完成' : '下一页' }}
			</view>
		</view>
		<view class="buttom mt60 box-size" v-else>
			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
				下一页
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getpetList
	} from "@/api/pet/index.js"
	import {
		getDictList
	} from "@/api/system/user.js"
	import {
		getPetCareByPetId
	} from "@/api/order/order.js";
	export default {
		data() {
			return {
				detail: {},
				show: false,
				petTypes: [],
				petType: '',
				orderId: 0,
				currentStep: 0, // 当前步骤，0:喂养要求，1:清洁要求，2:附加服务
			}
		},
		onLoad(options) {
			this.orderId = options.petId
			this.getPetCareByPetId()
			// 如果有指定步骤，则切换到对应步骤
			if (options.step) {
				this.currentStep = parseInt(options.step)
			}
		},
		methods: {
			getPetCareByPetId() {
				getPetCareByPetId(this.orderId).then(res => {
					this.detail = res.data || {}
				})
			},
			handleImageUrl(url) {
				if (!url) return []
				return url.split(',')
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			// 切换到上一步
			prevStep() {
				if (this.currentStep > 0) {
					this.currentStep--;
				}
			},
			// 切换到下一步
			nextStep() {
				if (this.currentStep < 2) {
					this.currentStep++;
				} else {
					// 如果是最后一步，可以提交表单或返回上一页
					uni.navigateBack();
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import"detail.scss";
	@import"steps-custom.scss";

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 173rpx;
		height: 230rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	.empty-text {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.empty-state-full {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.empty-text-full {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	/* 自定义步骤条样式 */
	:deep(.up-steps-custom) {
		.u-steps-item__wrapper {
			width: 40rpx !important;
			height: 40rpx !important;

			&__circle {
				width: 40rpx !important;
				height: 40rpx !important;
				background: #E5E5E5;

				&__text {
					font-size: 24rpx;
				}
			}
		}

		.u-steps-item__line {
			top: 20rpx !important;
			height: 4rpx !important;
			background: #E5E5E5 !important;
		}

		/* 激活状态样式 */
		.u-steps-item--active {
			.u-steps-item__wrapper__circle {
				background: linear-gradient(90deg, #FFA042, #FFD591) !important;
			}
		}

		/* 已完成步骤前的线条样式 */
		.u-steps-item--process {
			.u-steps-item__line {
				background: linear-gradient(90deg, #FFA042, #FFD591) !important;
			}
		}
	}
</style>