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="#999999" 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>

        <!-- 喂养要求内容 -->
        <view v-if="currentStep === 0">
		<view class="top box-size" :style="{borderRadius:'16rpx'}"
        v-if="detail.includeDryFood 
        || detail.includeWetFood
        || detail.includeHomemadeFood
        || detail.includeRawMeat
        || detail.includeHealthSupplements
        || detail.includeSnacks
        ">
			<view class="form-title">
				本次喂养过程中，您需要喂养的食品包括
			</view>
			<view class=" mt32 ml10" v-if="detail.includeDryFood">
				<view class="color-A55 size-30 fw400">
					干粮(主粮、冻干等)
				</view>
				<view class="size-30 mt32 fw400">
					干粮摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24 flex-between">
					<view :style="{color:'#999999'}">干粮喂养重量</view>
					<view class="level">
						<view class="input_ mr10">
							<input type="text" v-model="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" v-model="detail.dryFoodFeedFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
						</view>
						<view>天</view>
						<view class="input_ mr10">
							<input type="text" v-model="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" v-model="detail.dryFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeDryFood"></view>
			<view class=" mt32 ml10" v-if="detail.includeWetFood">
				<view class="color-A55 size-30 fw400">
					湿粮(罐头等)
				</view>
				<view class="size-30 mt32 fw400">
					湿粮摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24 flex-between">
					<view :style="{color:'#999999'}">湿粮喂养重量</view>
					<view class="level">
						<view class="input_ mr10">
							<input type="text" v-model="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" v-model="detail.wetFoodFeedFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
						</view>
						<view>天</view>
						<view class="input_ mr10">
							<input type="text" v-model="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" v-model="detail.wetFoodRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeWetFood"></view>
			<view class=" mt32 ml10" v-if="detail.includeHomemadeFood">
				<view class="color-A55 size-30 fw400">
					自制食品
				</view>
				<view class="size-30 mt32 fw400">
					自制食品摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					自制饭制作和喂食说明
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="detail.homemadeFoodInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeHomemadeFood"></view>
			<view class=" mt32 ml10" v-if="detail.includeRawMeat">
				<view class="color-A55 size-30 fw400">
					生骨肉
				</view>
				<view class="size-30 mt32 fw400">
					生骨肉摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					生骨肉喂食说明
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="detail.rawMeatFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeRawMeat"></view>
			<view class=" mt32 ml10" v-if="detail.includeHealthSupplements">
				<view class="color-A55 size-30 fw400">
					保健品
				</view>
				<view class="size-30 mt32 fw400">
					保健品摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					保健品喂养方式
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="detail.healthSupplementsFeedingInstructions" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeHealthSupplements"></view>
			<view class=" mt32 ml10" v-if="detail.includeSnacks">
				<view class="color-A55 size-30 fw400">
					零食
				</view>
				<view class="size-30 mt32 fw400">
					零食摆放位置
				</view>
				<view class="img mt20">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					零食喂养方式
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="detail.snacksFeedingMethod" :style="{height:'50rpx',fontSize:'30rpx'}">
				</view>
			</view>
			<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeSnacks"></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">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					备注信息
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="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">
					<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>
				</view>
				<view class="size-30 mt24" :style="{color:'#999999'}">
					饮用水添加要求
				</view>
				<view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
					<input type="text" v-model="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" v-model="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="mt32 ml10" v-if="detail.includeCatLitter">
                    <view class="color-A55 size-30 fw400">
                        猫砂
                    </view>
                    <view class="size-30 mt32 fw400">
                        猫砂摆放位置
                    </view>
                    <view class="img mt20">
                        <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>
                    </view>
                    <view class="size-30 mt24 flex-between">
                        <view :style="{color:'#999999'}">猫砂更换频率</view>
                        <view class="level">
                            <view class="input_ mr10">
                                <input type="text" v-model="detail.catLitterChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
                            </view>
                            <view>天</view>
                            <view class="input_ mr10">
                                <input type="text" v-model="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" v-model="detail.catLitterRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
                    </view>
                </view>
                <view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.includeCatLitter"></view>
                
                <view class="mt32 ml10" v-if="detail.includeUrinePad">
                    <view class="color-A55 size-30 fw400">
                        尿垫
                    </view>
                    <view class="size-30 mt32 fw400">
                        尿垫摆放位置
                    </view>
                    <view class="img mt20">
                        <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>
                    </view>
                    <view class="size-30 mt24 flex-between">
                        <view :style="{color:'#999999'}">更换尿垫</view>
                        <view class="level">
                            <view class="input_ mr10">
                                <input type="text" v-model="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" v-model="detail.urinePadChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
                            </view>
                            <view>天</view>
                            <view class="input_ mr10">
                                <input type="text" v-model="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" v-model="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="size-30 mt24" :style="{color:'#999999'}">
                        备注信息
                    </view>
                    <view class="notes mt16 box-size ml--15" :style="{borderRadius:'16rpx'}">
                        <input type="text" v-model="detail.additionalServiceRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 底部按钮 -->
		<view class="buttom mt60 box-size">
			<view class="buttom-item level size-30" :style="{borderRadius:'41rpx',color:'#fff'}" @click="nextStep">
				{{ currentStep === 2 ? '完成' : '下一页' }}
			</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()
		},
		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]
				})
			},
			// 切换到下一步
			nextStep() {
				if (this.currentStep < 2) {
					this.currentStep++;
				} else {
					// 如果是最后一步，可以提交表单或返回上一页
					uni.navigateBack();
				}
			},
		}
	}
</script>

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