pet-front-order/pages/personalCenter/serviceInfo.vue

<template>
	<view class="service-info container">
		<view style="margin: 15px 15px 10px;">
			<uni-steps :options="serviceStep" active-icon="checkbox" :active="active" active-color='#ffbf60' activeTextColor='#ffbf60' />
		</view>
		<view v-if="active == 0" class="">
			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					本次喂养过程中，您需要喂养的食品包括
				</view>
				<view v-for="(item, index) in foods" :key="index" class="service-item">
					<view class="service-item-title">
						<view class="service-item-title-name">
							{{ item.name }}
						</view>
						<view class="service-item-title-switch"> 
							<view :style="{'color':item.status?'#333333':'#aaaaaa', 'margin-right': '10px'}">{{ item.status ? '是' : '否' }}</view>
							<view>
								<u-switch v-model="item.status" inactiveColor="#dddddd" :activeValue="true"></u-switch>
							</view>
						</view>
					</view>
					<view v-if="item.status" class="service-item-content">
						<view style="color: #333;">{{item.nameSort}}摆放位置</view>
						<view style="margin: 10px 0;">
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出{{item.nameSort}}摆放位置
						</view>
						<view v-if="item.needInput" class="service-item-input">
							<view>{{ item.nameSort }}喂养重量</view>
							<view style="width: 100px; display: flex;">
								<u-input v-model="item.foodWeight" border="bottom" :customStyle="{'padding':'0 0 0 5px'}">
								</u-input>
								<u--text :text="item.unit" margin="0 3px 0 0" type="tips"></u--text>
							</view>
							
						</view>
						<view v-if="item.needInput" class="service-item-input">
							<view>{{ item.nameSort }}喂养频率</view>
							<view style="width: 100px; display: flex;">
								<u-input v-model="item.frequency" border="bottom" type="number" :customStyle="{'padding':'0 0 0 5px'}">
								</u-input>
								<u--text text="次/天"  margin="0 3px 0 0" type="tips"></u--text>
							</view>
							
						</view>
						<view>
							<view style="margin: 10px 0;">{{item.remarkTip?item.remarkTip:'备注信息'}}</view>
							<u-input placeholder="请输入备注信息" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view v-for="(item, index) in otherTool" :key="item.name" class="service-card">
					<view class="service-card-title">
						<text class="service-card-title-flag"></text>
						<view class="service-card-title-name">
							{{ item.name }}
						</view>
					</view>
					<view class="service-item-content">
						<view style="color: #333; margin-top: 10px;">{{item.nameSort}}摆放位置</view>
						<view style="margin: 10px 0;" v-if="item.locationImage">
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view style="margin: 10px 0;" v-else>
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出{{item.nameSort}}摆放位置
						</view>

						<view>
							<view style="margin: 10px 0;">{{item.remarkTip?item.remarkTip:'备注信息'}}</view>
							<u-input placeholder="请输入备注信息" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>
			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					其他补充信息(非必填)
				</view>
				<view>
					<view style="margin: 10px 0;">备注信息</view>
					<u-input placeholder="请输入备注信息" v-model="otherRemark"></u-input>
				</view>
			</view>
		</view>
		
		<view v-if="active == 1">
			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					本次喂养过程中，您需要清洁的内容包括
				</view>
				<view v-for="(item, index) in cleans" :key="index" class="service-item">
					<view class="service-item-title">
						<view class="service-item-title-name">
							{{ item.name }}
						</view>
						<view class="service-item-title-switch">
							<view :style="{'color':item.status?'#333333':'#aaaaaa', 'margin-right': '10px'}">{{ item.status ? '是' : '否' }}</view>
							<view>
								<u-switch v-model="item.status" inactiveColor="#dddddd" :activeValue="true"></u-switch>
							</view>
						</view>
					</view>
					<view v-if="item.status" class="service-item-content">
						<view style="color: #333;">{{item.nameSort}}摆放位置</view>
						<view style="margin: 10px 0;">
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出{{item.nameSort}}摆放位置
						</view>
						<view v-if="item.needInput" class="service-item-input">
							<view>{{ item.nameSort }}更换频率</view>
							<view style="width: 100px; display: flex;">
								<u-input v-model="item.frequency" border="bottom" type="number" :customStyle="{'padding':'0 0 0 5px'}">
								</u-input>
								<u--text text="次/天"  margin="0 3px 0 0" type="tips"></u--text>
							</view>
							
						</view>
						<view>
							<view style="margin: 10px 0;">{{item.remarkTip?item.remarkTip:'备注信息'}}</view>
							<u-input placeholder="请输入备注信息" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="active == (serviceStep.length-1)">
			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					请选择您需要的附加服务类型
				</view>
				<view v-for="(item, index) in addpends" :key="index" class="service-item">
					<view class="service-item-title">
						<view class="service-item-title-name">
							{{ item.name }}
						</view>
						<view class="service-item-title-switch">
							<view :style="{'color':item.status?'#333333':'#aaaaaa', 'margin-right': '10px'}">{{ item.status ? '是' : '否' }}</view>
							<view>
								<u-switch v-model="item.status" inactiveColor="#dddddd" :activeValue="true"></u-switch>
							</view>
						</view>
					</view>
					<view v-if="item.status" class="service-item-content">
						<view style="color: #333;">{{item.nameSort}}摆放位置</view>
						<view style="margin: 10px 0;">
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出{{item.nameSort}}摆放位置
						</view>
						
						<view>
							<view style="margin: 10px 0;">{{item.remarkTip?item.remarkTip:'备注信息'}}</view>
							<u-input placeholder="请输入备注信息" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="active == 2 && petType == 'dog'">
			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					遛狗用品
				</view>
				<view class="service-item">
					<view class="service-item-content">
						<view style="color: #333;">遛狗用品摆放位置</view>
						<view style="margin: 10px 0;">
							<UploadComponent :imageUrl.sync="walkDogLocationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出遛狗用品摆放位置
						</view>
					</view>
				</view>
				
				<view  v-for="(item, index) in walk" :key="index" class="service-item">
					<view class="service-item-title">
						<view class="service-item-title-name" style="color: #333;">
							{{ item.name }}
						</view>
						<view class="service-item-title-switch">
							<view :style="{'color':item.status?'#333333':'#aaaaaa', 'margin-right': '10px'}">{{ item.status ? '是' : '否' }}</view>
							<view>
								<u-switch v-model="item.status" inactiveColor="#dddddd" :activeValue="true"></u-switch>
							</view>
						</view>
					</view>
					<view v-if="item.status" class="service-item-content">
						<view style="color: #333;">{{item.nameSort}}摆放位置</view>
						<view style="margin: 10px 0;">
							<UploadComponent :imageUrl.sync="item.locationImage"></UploadComponent>
						</view>
						<view class="service-item-image-tip">
							<text style="color:#ff3d3d;line-height: 2;">* </text>请在图片中, 用“红圈”圈出{{item.nameSort}}摆放位置
						</view>
						
						<view>
							<view style="margin: 10px 0;">{{item.remarkTip?item.remarkTip:'备注信息'}}</view>
							<u-input placeholder="请输入备注信息" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>

			<view class="service-card">
				<view class="service-card-title">
					<text class="service-card-title-flag"></text>
					注意事项(非必填)
				</view>
				<view v-for="(item, index) in needDos" :key="index" class="service-item">
					<view class="service-item-title">
						<view class="service-item-title-name">
							{{ item.name }}
						</view>
						<view class="service-item-title-switch">
							<view :style="{'color':item.status?'#333333':'#aaaaaa', 'margin-right': '10px'}">{{ item.status ? '是' : '否' }}</view>
							<view>
								<u-switch v-model="item.status" inactiveColor="#dddddd" :activeValue="true"></u-switch>
							</view>
						</view>
					</view>
					<view v-if="item.status">
						<view>
							<view style="margin: 10px 0;">备注信息</view>
							<u-input :placeholder="item.remarkTip?item.remarkTip:'请输入备注信息'" v-model="item.remark"></u-input>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="service-info-btns">
			<view class="personal-service-btns">
				<view class="personal-service-btn">
					<u-button color="#FFF4E4" :disabled="active==0" @click="previousStep">
						<view style="color: #FFBF60;">
							上一步
						</view>
					</u-button>
				</view>
				<view class="personal-service-btn" >
					<u-button v-if="active<(serviceStep.length-1)" color="#FFBF60" @click="nextStep">
						<view style="color: #fff;">
							下一步
						</view>
					</u-button>
					<u-button v-else color="#FFBF60" @click="submit" :loading="loading">
						<view style="color: #fff;">
							提交
						</view>
					</u-button>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import { getServiceInfo,addServiceInfo,updateServiceInfo} from '@/api/system/service.js'
	import UploadComponent from './components/uploadComponent.vue';
export default {
	data() {
		return {
			loading:false,
			id:'',
			petId:'',
			petType: 'dog',
			serviceStep: [],
			active: 0,
			foods: [
				{
					name: '干粮（主粮、冻干等）',
					nameSort: '干粮',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					unit: '/次',
					needInput:true,
					remarkTip:'',
					remark: ''
				},
				{
					name: '湿粮（罐头等）',
					nameSort: '湿粮',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					unit: '罐/次',
					needInput:true,
					remarkTip:'',
					remark: ''
				}, {
					name: '自制食品',
					nameSort: '自制食品',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					needInput:false,
					remarkTip:'自制饭制作和喂食说明',
					remark: ''
				}, {
					name: '生骨肉',
					nameSort: '生骨肉',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					needInput:false,
					remarkTip:'生骨肉喂食说明',
					remark: ''
				}, {
					name: '保健品',
					nameSort: '保健品',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					needInput:false,
					remarkTip:'保健品喂养方式',
					remark: ''
				},
				{
					name: '零食',
					nameSort: '零食',
					status: false,
					locationImage: '',
					foodWeight: '',
					frequency: '',
					needInput:false,
					remarkTip:'零食喂养方式',
					remark: ''
				}
			],
			otherTool:[
				{
					name: '食盆/自动喂食器',
					nameSort: '喂食器',
					locationImage: '',
					remarkTip:'',
					remark: ''
				},
				{
					name: '饮用水',
					nameSort: '饮用水',
					locationImage: '',
					remarkTip:'饮用水添加要求',
					remark: ''
				},
			],
			cleans:[
				{
					name: '猫砂',
					nameSort: '猫砂',
					status: false,
					locationImage: '',
					frequency: '',
					needInput:true,
					remark: ''
				},
				{
					name: '尿垫',
					nameSort: '尿垫',
					status: false,
					locationImage: '',
					frequency: '',
					needInput:true,
					remark: ''
				}
			],
			addpends:[
				{
					name: '陪玩',
					nameSort: '陪玩用品',
					status:false,
					locationImage: '',
					remarkTip:'您希望的互动方式和要求',
					remark: ''
				},
				{
					name: '活动区吸毛',
					nameSort: '吸毛用品',
					status:false,
					locationImage: '',
					remarkTip:'请说明吸毛区域及要求',
					remark: ''
				},
				{
					name: '毛发梳理',
					nameSort: '毛发梳理用品',
					status:false,
					locationImage: '',
					remarkTip:'请说明毛发梳理要求(如: 天数, 次数等)',
					remark: ''
				},
				{
					name: '食具深度清洁',
					nameSort: '需深度清洁的用具及消毒剂',
					status:false,
					locationImage: '',
					remarkTip:'请说明食具/饮水机深度清洁要求(如清洁方式、消毒剂使用方式、频率等）',
					remark: ''
				},
				{
					name: '喂药上药',
					nameSort: '药品',
					status:false,
					locationImage: '',
					remarkTip:'备注信息',
					remark: ''
				},
			],
			walkDogLocationImage:'',
			walk:[
				{
					name: '下雨天是否遛狗',
					status:false,
					nameSort: '狗狗雨具',
					locationImage: '',
					remarkTip:'雨天遛狗要求',
					remark: ''
				}
			],
			needDos:[
				{
					name: '遛狗时长',
					status:false,
					remarkTip:'',
					remark: ''
				},
				{
					name: '狗狗行为',
					status:false,
					remarkTip:'请输入备注信息(是否爆冲、避开其他狗等)',
					remark: ''
				},
				{
					name: '偏好区域',
					status:false,
					remarkTip:'请输入备注信息(如禁止狗狗进入的区域)',
					remark: ''
				},
				{
					name: '偏好路线',
					status:false,
					remarkTip:'请输入备注信息(如建议遛狗路线)',
					remark: ''
				},
			],
			otherRemark:''
		};
	},
	components:{
		UploadComponent
	},
	onLoad: function (option) {
		this.petType = option.petType || 'dog';
		this.petId= option.petId
		// this.petId= 123 //option.petId
	},
	mounted() {
		this.getServiceStep()
		this.getServiceInfo()
	},
	methods: {
		getServiceStep() {
			if (this.petType == 'dog') {
				this.serviceStep = [{
					title: '喂养要求'
				}, {
					title: '清洁要求'
				}, {
					title: '遛狗要求'
				}, {
					title: '附加服务'
				},]
			} else {
				this.serviceStep = [{
					title: '喂养要求'
				}, {
					title: '清洁要求'
				}, {
					title: '附加服务'
				},]
			}
		},
		getServiceInfo(){
			getServiceInfo(this.petId).then(res=>{
				if(res.code==200&&res.data){
					let data= res.data
					this.id = data.id
					this.petId= data.petId
					this.foods[0].status= data.includeDryFood
					this.foods[0].frequency= data.dryFoodFeedFrequencyTimes
					this.foods[0].foodWeight= data.dryFoodFeedWeight
					this.foods[0].locationImage= data.dryFoodLocation
					this.foods[0].remark= data.dryFoodRemarks
					this.foods[1].status= data.includeWetFood
					this.foods[1].frequency= data.wetFoodFeedFrequencyTimes
					this.foods[1].foodWeight= data.wetFoodFeedWeight
					this.foods[1].locationImage= data.wetFoodLocation
					this.foods[1].remark= data.wetFoodRemarks
					this.foods[2].status= data.includeHomemadeFood
					this.foods[2].remark= data.homemadeFoodInstructions
					this.foods[2].locationImage= data.homemadeFoodLocation
					this.foods[3].status= data.includeRawMeat
					this.foods[3].remark= data.rawMeatFeedingInstructions
					this.foods[3].locationImage= data.rawMeatLocation
					this.foods[4].status= data.includeHealthSupplements
					this.foods[4].remark= data.healthSupplementsFeedingInstructions
					this.foods[4].locationImage= data.healthSupplementsLocation
					this.foods[5].status= data.includeSnacks
					this.foods[5].remark= data.snacksFeedingMethod
					this.foods[5].locationImage= data.snacksLocation
					this.otherRemark= data.otherRemark
					this.otherTool[0].locationImage= data.feedingTrayAutomaticFeederLocation
					this.otherTool[0].remark= data.feedingTrayAutomaticFeederRemarks
					this.otherTool[1].locationImage= data.waterBowlLocation
					this.otherTool[1].remark= data.waterBowlRemarks
					this.cleans[0].status= data.changeLitterBox
					this.cleans[0].frequency= data.litterBoxChangeFrequencyTimes
					this.cleans[0].locationImage= data.litterBoxLocation
					this.cleans[0].remark= data.litterBoxRemarks
					this.cleans[1].status= data.changePeePad
					this.cleans[1].frequency=data.peePadFrequencyTimes
					this.cleans[1].locationImage= data.peePadLocation
					this.cleans[1].remark= data.peePadRemarks
					this.addpends[0].remark= data.playtimeRequirements
					this.addpends[0].status= data.playtimeService
					this.addpends[0].locationImage= data.playtimeToolsLocation
					this.addpends[1].remark= data.furCleaningRequirements
					this.addpends[1].status= data.furCleaningService
					this.addpends[1].locationImage= data.furCleaningToolsLocation
					this.addpends[2].remark= data.groomingRequirements
					this.addpends[2].status= data.groomingService
					this.addpends[2].locationImage= data.groomingToolsLocation
					this.addpends[3].remark= data.deepCleaningRemarks
					this.addpends[3].status= data.deepCleaningService
					this.addpends[3].locationImage= data.deepCleaningToolsLocation
					this.addpends[4].status= data.administerMedication
					this.addpends[4].locationImage= data.administerMedicationLocation
					this.addpends[4].remark= data.administerMedicationRemarks
					this.needDos[0].status= data.isWalkDogDuration
					this.needDos[1].status= data.isDogBehavior
					this.needDos[2].status= data.isFavoriteRegion
					this.needDos[3].status= data.isFavoriteRoute
					this.needDos[0].remark= data.walkDogDuration
					this.needDos[1].remark= data.dogBehavior
					this.needDos[2].remark= data.favoriteRegion
					this.needDos[3].remark= data.favoriteRoute
					this.needDos[0].status= data.walkDog
					this.walk[0].status= data.walkDogRainyDay
					this.walkDogLocationImage= data.walkDogToolsLocation
					this.walk[0].locationImage= data.dogRainGearLocation
					this.walk[0].remark= data.walkDogRainRemark
				}
				
			})
		},
		previousStep(){
			this.active =  this.active - 1
		},
		nextStep(){
			let isVaild = true;
			let errorTip = ''
			if(this.active==0){
				if(!this.otherTool[0].locationImage){
					isVaild = false;
					errorTip='请上传喂食器具摆放位置'
				}
				if(!this.otherTool[1].locationImage){
					isVaild = false;
					errorTip='请上传饮用水摆放位置'
				}
				this.foods.map(item=>{
					if(item.status && !item.locationImage){
						isVaild = false;
						errorTip=`请上传${item.nameSort}摆放位置`
					}
				})
			}
			if(this.active==1){
				this.cleans.map(item=>{
					if(item.status && !item.locationImage){
						isVaild = false;
						errorTip=`请上传${item.nameSort}摆放位置`
					}
				})
			}
			if(this.active == 2 && this.petType == 'dog'){
				this.walk.map(item=>{
					if(item.status && !item.locationImage){
						isVaild = false;
						errorTip=`请上传${item.nameSort}摆放位置`
					}
				})
			}
			if(isVaild == false){
				this.$modal.showToast(errorTip);
				return;
			}
			this.active = this.active + 1
		},
		submit(){
			
			let isVaild = true;
			let errorTip = ''
			if(this.active == (this.serviceStep.length-1)){
				this.addpends.map(item=>{
					if(item.status && !item.locationImage){
						isVaild = false;
						errorTip=`请上传${item.nameSort}摆放位置`
					}
				})
			}

			
			if(isVaild == false){
				this.$modal.showToast(errorTip);
				return;
			}
			let params = {
				"id": this.id?this.id:0,
				"petId": this.petId,
				"includeDryFood": this.foods[0].status,
				"dryFoodFeedFrequencyDays": 1,
				"dryFoodFeedFrequencyTimes": this.foods[0].frequency,
				"dryFoodFeedWeight": this.foods[0].foodWeight,
				"dryFoodLocation": this.foods[0].locationImage,
				"dryFoodRemarks": this.foods[0].remark,
				"includeWetFood": this.foods[1].status,
				"wetFoodFeedFrequencyDays": 1,
				"wetFoodFeedFrequencyTimes": this.foods[1].frequency,
				"wetFoodFeedWeight": this.foods[1].foodWeight,
				"wetFoodLocation": this.foods[1].locationImage,
				"wetFoodRemarks": this.foods[1].remark,
				"includeHomemadeFood": this.foods[2].status,
				"homemadeFoodInstructions": this.foods[2].remark,
				"homemadeFoodLocation": this.foods[2].locationImage,
				"includeRawMeat": this.foods[3].status,
				"rawMeatFeedingInstructions": this.foods[3].remark,
				"rawMeatLocation":  this.foods[3].locationImage,
				"includeHealthSupplements": this.foods[4].status,
				"healthSupplementsFeedingInstructions": this.foods[4].remark,
				"healthSupplementsLocation":this.foods[4].locationImage,
				"includeSnacks": this.foods[5].status,
				"snacksFeedingMethod": this.foods[5].remark,
				"snacksLocation": this.foods[5].locationImage,
				// 其他补充信息？
				// "snacksRemarks": this.otherRemark,
				"otherRemark": this.otherRemark,
				"feedingTrayAutomaticFeederLocation": this.otherTool[0].locationImage,
				"feedingTrayAutomaticFeederRemarks": this.otherTool[0].remark,
				"waterBowlLocation": this.otherTool[1].locationImage,
				"waterBowlRemarks": this.otherTool[1].remark,
				// 是否需要猫砂？
				"changeLitterBox":this.cleans[0].status,
				"litterBoxChangeFrequencyDays": 1,
				"litterBoxChangeFrequencyTimes": this.cleans[0].frequency,
				"litterBoxLocation":  this.cleans[0].locationImage,
				"litterBoxRemarks":  this.cleans[0].remark,
				// 尿垫更换频率？
				"changePeePad": this.cleans[1].status,
				"peePadFrequencyDays": 1,
				"peePadFrequencyTimes": this.cleans[1].frequency,
				"peePadLocation": this.cleans[1].locationImage,
				"peePadRemarks": this.cleans[1].remark,

				"playtimeRequirements": this.addpends[0].remark,
				"playtimeService": this.addpends[0].status,
				"playtimeToolsLocation":this.addpends[0].locationImage,
				"furCleaningRequirements": this.addpends[1].remark,
				"furCleaningService": this.addpends[1].status,
				"furCleaningToolsLocation": this.addpends[1].locationImage,
				"groomingRequirements": this.addpends[2].remark,
				"groomingService": this.addpends[2].status,
				"groomingToolsLocation": this.addpends[2].locationImage,
				"deepCleaningRemarks": this.addpends[3].remark,
				"deepCleaningService": this.addpends[3].status,
				"deepCleaningToolsLocation": this.addpends[3].locationImage,
				"administerMedication": this.addpends[4].status,
				"administerMedicationLocation": this.addpends[4].locationImage,
				"administerMedicationRemarks": this.addpends[4].remark,
				// 遛狗注意事项状态？
				"isWalkDogDuration":this.needDos[0].status,
				"isDogBehavior":this.needDos[1].status,
				"isFavoriteRegion":this.needDos[2].status,
				"isFavoriteRoute":this.needDos[3].status,
				"walkDogDuration": this.needDos[0].remark,
				"dogBehavior": this.needDos[1].remark,
				"favoriteRegion": this.needDos[2].remark,
				"favoriteRoute": this.needDos[3].remark,
				//遛狗？
				"walkDog": this.needDos[0].status,
				"walkDogRainyDay": this.walk[0].status,
				// 遛狗用品？雨具？
				"walkDogToolsLocation": this.walkDogLocationImage,
				"dogRainGearLocation": this.walk[0].locationImage,
				"walkDogRainRemark":this.walk[0].remark,
				  // "additionalService": true,
				  // "additionalServicesPlacement": "string",
				  // "additionalServicesPlacementRemark": "string",
				  // "additionalServicesRemarks": "string",

				  // "cleaningRequirements": true,
				
				  
				}
			console.log('提交')
			console.log(params)
			this.loading=true;
			try {
				if(this.id){
					updateServiceInfo(params).then(res=>{
						console.log(res)
					if(res.code==200){
						uni.showToast({
							title: '保存成功!',
							duration: 3000,
							icon:"none"
							})
						setTimeout(() => {
							let len = getCurrentPages().length;  
							this.loading=false;
							if(len >= 2) {  
							    uni.navigateBack();  
							}else {  
							    uni.redirectTo({url:'/pages/personalCenter/service'});  
							}
						
						}, 2000);
						
					}else {
							this.loading=false
							uni.showToast({
								title: '保存失败!',
								duration: 3000,
								icon:"none"
								})
						}
				})
			}else{
				addServiceInfo(params).then(res=>{
					if(res.code==200){
						uni.showToast({
							title: '保存成功!',
							duration: 3000,
							icon:"none"
							})
						setTimeout(() => {
							let len = getCurrentPages().length;  
							this.loading=false;
							if(len >= 2) {  
							    uni.navigateBack();  
							}else {  
							    uni.redirectTo({url:'/pages/personalCenter/service'});  
							}
						}, 2000);
					}else {
							this.loading=false
							uni.showToast({
								title: '保存失败!',
								duration: 3000,
								icon:"none"
								})
						}
				})
			}
			} catch (error) {
				this.loading=false;
				uni.showToast({
					title: '保存失败!',
					duration: 3000,
					icon:"none"
					})
			} finally {
				this.loading=false;
			}
			
		}
	}
}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100%;
		padding-bottom: 90px;
		.service-info-btns {
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
			.personal-service-btns{
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				.personal-service-btn{
					width: 40%;
				}
			}
		}
	}
	.service-info{
		.service-card{
			margin: 10px;
			background: #fff;
			padding: 10px;
			border-radius: 5px;
			.service-card-title{
				display: flex;
				align-items: center;
				padding-bottom: 10px;
				border-bottom: solid 1px #efefef;
				font-size: 14px;
				font-weight: 500;
				color: #333;
				.service-card-title-flag{
					width: 4px;
					height: 16px;
					flex-shrink: 0;
					border-radius: 15px;
					background: #FFBF60;
					display: inline-block;
					margin-right: 5px;
				}
			}
			.service-item{
				
				.service-item-title{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 50px;
					border-bottom: solid 1px #efefef;
					.service-item-title-name{
						display: flex;
						align-items: center;
						color: #a94f20;
						height: 30px;
					}
					.service-item-title-switch{
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
					
				}
				.service-item-content{
					padding: 10px 0;
					.service-item-image-tip{
						font-size: 12px; 
						color: #aaa; 
						display: flex;
						padding-bottom: 10px;
						border-bottom: solid 1px #efefef;
					}
					.service-item-input{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10px 0;
						border-bottom: solid 1px #efefef;
					}
				}
			}
		}
	}
</style>