You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
754 lines
34 KiB
754 lines
34 KiB
<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="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.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" 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" 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 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" disabled v-model="detail.wetFoodFeedFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
<view>天</view>
|
|
<view class="input_ mr10">
|
|
<input type="text" disabled 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">
|
|
<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" 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">
|
|
<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 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">
|
|
<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 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">
|
|
<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 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">
|
|
<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 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">
|
|
<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 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" disabled 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 v-if="!detail.includeCatLitter && !detail.includeUrinePad" 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" v-if="detail.includeCatLitter">
|
|
<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 v-model="detail.catLitterChangeFrequencyDays" :style="{width:'80rpx',height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
<view>天</view>
|
|
<view class="input_ mr10">
|
|
<input type="text" disabled 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">
|
|
<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" 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" disabled 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 v-if="!detail.additionalService || (!detail.playtimeService && !detail.furCleaningService && !detail.groomingService && !detail.deepCleaningService)" 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" v-if="detail.playtimeService">
|
|
<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" v-model="detail.playtimeRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.playtimeService"></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" v-model="detail.furCleaningRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.furCleaningService"></view>
|
|
|
|
<!-- 毛发梳理 -->
|
|
<view class="mt32 ml10" v-if="detail.groomingService">
|
|
<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" v-model="detail.groomingRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.groomingService"></view>
|
|
|
|
<!-- 食具深度清洁 -->
|
|
<view class="mt32 ml10" v-if="detail.deepCleaningService">
|
|
<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" v-model="detail.deepCleaningRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.deepCleaningService"></view>
|
|
|
|
<!-- 喂药上药 -->
|
|
<view class="mt32 ml10" v-if="detail.administerMedication">
|
|
<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.administerMedicationLocation)" :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" disabled v-model="detail.administerMedicationRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="detail.administerMedication"></view>
|
|
|
|
<!-- 遛狗服务 -->
|
|
<view class="mt32 ml10" v-if="detail.walkDog">
|
|
<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.walkDogToolsLocation)" :key="index"></u-image>
|
|
</view>
|
|
|
|
<!-- 雨天遛狗 -->
|
|
<view v-if="detail.walkDogRainyDay">
|
|
<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.dogRainGearLocation)" :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.walkDogRainRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 遛狗时长 -->
|
|
<view v-if="detail.isWalkDogDuration">
|
|
<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.walkDogDuration" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 狗狗行为 -->
|
|
<view v-if="detail.isDogBehavior">
|
|
<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.dogBehavior" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 偏好区域 -->
|
|
<view v-if="detail.isFavoriteRegion">
|
|
<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.favoriteRegion" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 偏好路线 -->
|
|
<view v-if="detail.isFavoriteRoute">
|
|
<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.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" v-model="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>
|