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.
371 lines
13 KiB
371 lines
13 KiB
<template>
|
|
<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 class="top box-size" :style="{borderRadius:'16rpx'}">
|
|
<view class="form-title">
|
|
您需要的附加服务
|
|
</view>
|
|
|
|
<!-- 陪玩服务 -->
|
|
<view class="mt32 ml10" v-if="form.playtimeService">
|
|
<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(form.playtimeToolsLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('playtimeToolsLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.playtimeRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.playtimeService"></view>
|
|
|
|
<!-- 活动区吸毛 -->
|
|
<view class="mt32 ml10" v-if="form.furCleaningService">
|
|
<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(form.furCleaningToolsLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('furCleaningToolsLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.furCleaningRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.furCleaningService"></view>
|
|
|
|
<!-- 毛发梳理 -->
|
|
<view class="mt32 ml10" v-if="form.groomingService">
|
|
<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(form.groomingToolsLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('groomingToolsLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.groomingRequirements" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.groomingService"></view>
|
|
|
|
<!-- 食具深度清洁 -->
|
|
<view class="mt32 ml10" v-if="form.deepCleaningService">
|
|
<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(form.deepCleaningToolsLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('deepCleaningToolsLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.deepCleaningRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
<view class="line" :style="{borderRadius:'1rpx'}" v-if="form.deepCleaningService"></view>
|
|
|
|
<!-- 喂药上药 -->
|
|
<view class="mt32 ml10" v-if="form.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(form.administerMedicationLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('administerMedicationLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.administerMedicationRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 遛狗服务 -->
|
|
<view class="mt32 ml10" v-if="form.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(form.walkDogToolsLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('walkDogToolsLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 雨天遛狗 -->
|
|
<view v-if="form.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(form.dogRainGearLocation)" :key="index"></u-image>
|
|
<view class="upload-btn" @click="uploadImage('dogRainGearLocation')">
|
|
<up-icon name="camera-fill" size="40rpx" color="#FFBF60"></up-icon>
|
|
</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="form.walkDogRainRemark" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 遛狗时长 -->
|
|
<view v-if="form.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="form.walkDogDuration" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 狗狗行为 -->
|
|
<view v-if="form.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="form.dogBehavior" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 偏好区域 -->
|
|
<view v-if="form.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="form.favoriteRegion" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 偏好路线 -->
|
|
<view v-if="form.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="form.favoriteRoute" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 附加服务备注 -->
|
|
<view class="mt32 ml10" v-if="form.additionalService">
|
|
<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="form.additionalServicesRemarks" :style="{height:'50rpx',fontSize:'30rpx'}">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="buttom_ mt60 box-size level">
|
|
<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">
|
|
完成
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPetCareByPetId, savePetCare } from "@/api/order/order.js";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
// 附加服务相关字段
|
|
additionalService: false,
|
|
playtimeService: false,
|
|
playtimeToolsLocation: '',
|
|
playtimeRequirements: '',
|
|
furCleaningService: false,
|
|
furCleaningToolsLocation: '',
|
|
furCleaningRequirements: '',
|
|
groomingService: false,
|
|
groomingToolsLocation: '',
|
|
groomingRequirements: '',
|
|
deepCleaningService: false,
|
|
deepCleaningToolsLocation: '',
|
|
deepCleaningRemarks: '',
|
|
administerMedication: false,
|
|
administerMedicationLocation: '',
|
|
administerMedicationRemarks: '',
|
|
additionalServicesPlacement: '',
|
|
additionalServicesPlacementRemark: '',
|
|
additionalServicesRemarks: '',
|
|
// 遛狗相关字段
|
|
walkDog: false,
|
|
walkDogToolsLocation: '',
|
|
walkDogRainyDay: false,
|
|
dogRainGearLocation: '',
|
|
walkDogRainRemark: '',
|
|
isWalkDogDuration: false,
|
|
walkDogDuration: '',
|
|
isDogBehavior: false,
|
|
dogBehavior: '',
|
|
isFavoriteRegion: false,
|
|
favoriteRegion: '',
|
|
isFavoriteRoute: false,
|
|
favoriteRoute: ''
|
|
},
|
|
currentStep: 2, // 当前步骤，固定为附加服务页面
|
|
petId: 0,
|
|
imageField: '' // 当前操作的图片字段
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.petId = options.petId;
|
|
if (this.petId) {
|
|
this.getPetCareData();
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取宠物服务档案数据
|
|
getPetCareData() {
|
|
getPetCareByPetId(this.petId).then(res => {
|
|
if (res.data) {
|
|
this.form = { ...this.form, ...res.data };
|
|
}
|
|
}).catch(err => {
|
|
console.error('获取宠物服务档案失败', err);
|
|
});
|
|
},
|
|
// 处理图片URL
|
|
handleImageUrl(url) {
|
|
if (!url) return [];
|
|
return url.split(',');
|
|
},
|
|
// 预览图片
|
|
previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url]
|
|
});
|
|
},
|
|
// 上传图片
|
|
uploadImage(field) {
|
|
this.imageField = field;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
// 这里应该有上传图片到服务器的逻辑
|
|
// 模拟上传成功后设置图片URL
|
|
this.form[this.imageField] = tempFilePaths[0];
|
|
}
|
|
});
|
|
},
|
|
// 上一步
|
|
prevStep() {
|
|
uni.navigateBack();
|
|
},
|
|
// 下一步/完成
|
|
nextStep() {
|
|
// 保存数据
|
|
this.saveData();
|
|
},
|
|
// 保存数据
|
|
saveData() {
|
|
// 这里应该有保存数据到服务器的逻辑
|
|
// 模拟保存成功后返回上一页
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
duration: 2000,
|
|
success: () => {
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 2 // 返回上两级页面
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "detail.scss";
|
|
@import "steps-custom.scss";
|
|
|
|
.upload-btn {
|
|
width: 173rpx;
|
|
height: 230rpx;
|
|
background-color: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 30rpx 0 10rpx 0;
|
|
}
|
|
|
|
.fw400 {
|
|
font-weight: 400;
|
|
}
|
|
</style>
|