pet-front-order/pages/personalCenter/components/petHealthInfo.vue

<template>
	<view class="">
		<view class="personal-pet-health-info">
			<view class="personal-pet-info-title border-bottom">
				宠物健康情况
			</view>
			<u--form labelPosition="left" :model="petHealthInfo" ref="uForm">
				<u-form-item required label="疫苗" prop="petHealthInfo.vaccineStatus" labelWidth="80" borderBottom
					@click="showVaccine = true">
					<u--input v-model="petHealthInfo.vaccineStatus" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item required label="驱虫" prop="petHealthInfo.dewormingStatus" labelWidth="80" borderBottom
					@click="showExpelling = true">
					<u--input v-model="petHealthInfo.dewormingStatus" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item label="绝育" prop="petHealthInfo.sterilization" labelWidth="80" borderBottom
					@click="showSterilization = true" ref="item1">
					<u--input v-model="petHealthInfo.sterilization" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item v-if="petType=='dog' || petType=='狗狗' " label="狗证" prop="petHealthInfo.doglicenseStatus" labelWidth="80" borderBottom
					@click="showDog = true" ref="item1">
					<u--input v-model="petHealthInfo.doglicenseStatus" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
					
				</u-form-item>
				<view class="dog-tips" v-if="petType=='dog' || petType=='狗狗'">
					<u-icon name="info-circle" color="#A94F20" size="12"></u-icon>
					<view style="margin-left: 3px;">
						未办理养犬许可证且需要外出遛狗, 犬只存在被相关单位收缴
						甚至捕杀的可能，请您遵守当地养犬规范，合法文明养犬。具体
						请您查看当地养犬条例
					</view>
					
				</view>
				<u-form-item required label="健康" prop="petHealthInfo.healths" labelWidth="80"
					@click="healthsSelect">
					<u--input disabled disabledColor="#ffffff" placeholder="请选择(多选)" :value="petHealthInfo.healthStatus && petHealthInfo.healthStatus.join(',')"
						placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					<view slot="right">
						<u-icon v-if="showHealths"  name="arrow-down" color="#AAA"></u-icon>
						<u-icon v-else name="arrow-right" color="#AAA" ></u-icon>
					</view>
				</u-form-item>
			</u--form>
		</view>	
		<view class="health-select" v-show="showHealths">
			<view style="padding: 10px;height: 85%;">
				<u-checkbox-group v-model="petHealthInfo.healthStatus" @change="checkboxChange" placement="column" activeColor="#ffbf60">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthData"
						:key="index" :label="item" :name="item">
					</u-checkbox>
				</u-checkbox-group>
				<u--input placeholder="请输入其他健康特征" 
					:disabled="!(petHealthInfo.healthStatus && petHealthInfo.healthStatus.includes('其他'))" 
					border="surround" maxlength='20' 
					:customStyle="{backgroundColor: '#fff'}"
					@change=updatePetHealthInfo()
					v-model="petHealthInfo.remark"></u--input>
			</view>
		</view>

		<u-picker :show="showVaccine" :showToolbar='false' :columns="vaccineActions" @cancel="showVaccine = false" :immediateChange="true" 
			:defaultIndex="defaultVaccine"
			@confirm="vaccineSelect"></u-picker>
		<u-picker :show="showExpelling" :showToolbar='false' :columns="expellingActions" @cancel="showExpelling = false" :immediateChange="true"
			:defaultIndex="defaultDeworming"
			@confirm="expellingSelect"></u-picker>
		<u-picker :show="showSterilization" :showToolbar='false' :columns="sterilizationActions" @cancel="showSterilization = false" :immediateChange="true"
			:defaultIndex="defaultSterilization"
			@confirm="sterilizationSelect"></u-picker>
		<u-picker :show="showDog" :showToolbar='false' :columns="dogActions" @cancel="showDog = false" :immediateChange="true"
			:defaultIndex="defaultDoglicense"
			@confirm="dogSelect"></u-picker>
		
	</view>
</template>

<script>
	import { getDictList } from "@/api/system/user"
	export default {
		data() {
			return {
				showVaccine: false,
				showExpelling: false,
				showSterilization: false,
				showDog:false,
				showHealths: false,
				vaccineActions: [[ '每年都免疫','有免疫史','未免疫']],
				expellingActions: [['未驱虫', '定期驱虫', '有驱虫史']],
				sterilizationActions: [['已绝育','未绝育']],
				dogActions: [[ '是','否']],
				healthData: [],
				tempHealths: []
			}
		},
		props: {
			petType: {
			    type: String,
			    default: 'dog'
			},
			petHealthInfo:{
				type:Object,
				default:()=>({
					vaccineStatus: '',
					dewormingStatus: '',
					sterilization: '',
					doglicenseStatus:'',
					healthStatus: [],
					remark:''
				})
			},
			defaultVaccine:0,
			defaultDeworming:0,
			defaultSterilization:0,
			defaultDoglicense:0
		},
		mounted() {
			this.getHealthDataList()
			this.defaultVaccine=[].push(this.vaccineActions[0].indexOf(this.petHealthInfo.vaccineStatus))
			this.defaultDeworming=[].push(this.expellingActions[0].indexOf(this.petHealthInfo.dewormingStatus))
			this.defaultSterilization=[].push(this.sterilizationActions[0].indexOf(this.petHealthInfo.sterilization))
			this.defaultDoglicense=[].push(this.dogActions[0].indexOf(this.petHealthInfo.doglicenseStatus))
		},
		methods: {
			// getVaccineList(){ 
			// 	getDictList('pet_vaccine_status').then(res=>{
			// 		if (res.code == 200) {
			// 			let vaccineType = res.data.map(e=>e.dictLabel)
			// 			this.vaccineActions=[vaccineType]
			// 		} else {
			// 			this.$modal.showToast('获取免疫类型失败')
			// 		}
			// 	})
			// },
			// getDewormingList(){
			// 	getDictList('pet_deworming_status').then(res=>{
			// 		if (res.code == 200) {
			// 			let dewormingType = res.data.map(e=>e.dictLabel)
			// 			this.expellingActions=[dewormingType]
			// 		} else {
			// 			this.$modal.showToast('获取驱虫情况失败')
			// 		}
			// 	})
			// },
			getHealthDataList(){
				getDictList('pet_health_status').then(res=>{
					if (res.code == 200) {
						this.healthData = res.data.map(e=>e.dictLabel)
					} else {
						this.$modal.showToast('获取健康类型失败')
					}
				})
			},
			vaccineSelect(e) {
				this.petHealthInfo.vaccineStatus = e.value[0];
				this.showVaccine = false;
				this.updatePetHealthInfo();
			},
			expellingSelect(e) {
				this.petHealthInfo.dewormingStatus = e.value[0];
				this.showExpelling = false;
				this.updatePetHealthInfo();
			},
			sterilizationSelect(e) {
				this.petHealthInfo.sterilization = e.value[0];
				this.showSterilization = false;
				this.updatePetHealthInfo();
			},
			dogSelect(e){
				this.petHealthInfo.doglicenseStatus = e.value[0];
				this.showDog = false;
				this.updatePetHealthInfo();
			},
			healthsSelect() {
				this.showHealths = !this.showHealths;
				this.$nextTick(() => {
					uni.pageScrollTo({
					  scrollTop: 2000,
					  duration: 300
					})
				  })
			},
			checkboxChange(n) {
				console.log('change', n);
				this.updatePetHealthInfo();
			},
			changeRemark(e){
				debugger;
				this.petHealthInfo.remark=e
				this.updatePetHealthInfo()
			},
			updatePetHealthInfo() {
			  // 触发 update 事件，将修改后的 petHealthInfo 对象发送给父组件
			  this.$emit('update:petHealthInfo', this.petHealthInfo);
			}
		}

	}
</script>

<style lang="scss">
	.personal-pet-health-info{
		background-color: #fff;
		padding: 10px 20px 0 20px;
		margin-top: 10px;
	}
	.health-select{
		background-color: #fffcf2;
		padding: 10px 20px;
	}
	.dog-tips{
		color: #A94F20;
		font-size: 12px;
		display: flex;
		align-items: baseline;
		margin-top: 5px;
	}
</style>