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

<template>
	<view class="">
		<view class="personal-pet-basic-info">
				<view class="personal-pet-info-title border-bottom">
					宠物基本信息
				</view>
				<u--form labelPosition="left" :model="model" ref="uForm">
					<u-form-item required label="昵称" prop="petBaseInfo.name" labelWidth="80" borderBottom>
						<u--input v-model="petBaseInfo.name" placeholder="请输入宠物昵称" @change="nameChange"
							placeholderStyle="text-align:right;color:#AAA" border="none"  inputAlign="right"></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="petBaseInfo.gender" labelWidth="80" borderBottom @click="showSex = true">
						<u--input v-model="petBaseInfo.gender" 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="petBaseInfo.breed" labelWidth="80" borderBottom @click="breedSelectOpen">
						<u--input v-model="petBaseInfo.breed" 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="petBaseInfo.bodyType" labelWidth="80" borderBottom @click="showWeight = true"
						ref="item1">
						<u--input v-model="petBaseInfo.bodyType" 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="petBaseInfo.birthDate" labelWidth="80" borderBottom @click="yearMonthOpen">
						<u--input v-model="petBaseInfo.birthDate" 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="petBaseInfo.personality" labelWidth="80" borderBottom
						@click="dispositionSelectOpen">
						<u--input v-model="petBaseInfo.personality" 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>
			</view>
			<view style="background-color: #fffcf2;padding: 10px 20px;" v-show="showDisposition">
				<view style="height: 85%;">
					<u-checkbox-group 
						v-model="petBaseInfo.personality" 
						@change="checkboxChange"  
						iconPlacement="left" 
						placement="row"
						style="flex-wrap: wrap;"
						activeColor="#ffbf60">
						<u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in dispositionActions"
							:key="item" :label="item" :name="item">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<u-picker :show="showSex" :showToolbar='false' :columns="sexActions" @cancel="showSex = false" :immediateChange="true"
				@confirm="sexSelect"></u-picker>
			<u-picker :show="showWeight" :showToolbar='false' :columns="weightActions" @cancel="showWeight = false" :immediateChange="true"
				@confirm="weightSelect"></u-picker>
					
			<u-overlay :show="showBreed">
				<view class="breed-select" style="height: 60%;">
					<u-search shape="round" :show-action="false" v-model="searchValue" @change="searchBreed"></u-search>
					<view style="padding: 10px;height: 80%;overflow: auto;">
						<u-radio-group v-model="tempBreed" placement="column">
							<u-radio v-for="(item,index) in searchBreedData" :customStyle="{marginBottom: '8px'}"
								activeColor="#ffbf60" :label="item" :name="item" :key="item"></u-radio>
						</u-radio-group>
					</view>

					<view class="personal-pet-breed-btns">
						<view class="personal-pet-breed-btn">
							<u-button color="#FFF4E4" @click="breedSelectClose">
								<view style="color: #FFAA48;">
									取消
								</view>
							</u-button>
						</view>
						<view class="personal-pet-breed-btn" @click="breedSelectConfirm">
							<u-button color="#FFBF60">
								<view style="color: #fff;">
									确定
								</view>
							</u-button>
						</view>
					</view>
				
					
				</view>
			</u-overlay>
			<u-datetime-picker :maxDate='getMaxDate()' :minDate="getMinDate()" :show="showBirthday" v-model="tempBirthday" mode="year-month" @confirm="yearMonthConfirm"
				@cancel="yearMonthClose"></u-datetime-picker>
					
	
		
	</view>
</template>

<script>
	import { getDictList } from "@/api/system/user"
	export default {
		data() {
			return {
				showSex: false,
				showBreed: false,
				showWeight: false,
				showBirthday: false,
				showDisposition: false,
				sexActions: [['男生','女生']],
				weightActions: [['小型（<10 KG）','中型（10~20KG）', '大型（20KG以上）']],
				dispositionActions: [],

				breedData: [],
				searchBreedData:[],
				tempBreed: '',
				searchValue: '',
				tempBirthday: '',
				tempDisposition: ''
			}
		},
		props:{
			petType: {
			    type: String,
			    default: 'dog'
			},
			petBaseInfo:{
				type: Object,
				default: ()=> ({
					name: '',
					gender: '',
					breed: '',
					bodyType: '',
					birthDate: '',
					personality: ''
				})
			}
		},
		mounted() {
			this.getPersonalityDataList()
			this.getPetBreed()
		},
		methods: {
			nameChange(){
				this.updatePetBaseInfo()
			},
			sexSelect(e) {
				this.petBaseInfo.gender = e.value[0];
				this.showSex = false;
				this.updatePetBaseInfo()
			},
			weightSelect(e) {
				this.petBaseInfo.bodyType = e.value[0];
				this.showWeight=false;
				this.updatePetBaseInfo()
			},
			breedSelectOpen() {
				this.searchBreedData=this.breedData;
				this.searchValue='';
				this.tempBreed = this.petBaseInfo.breed;
				this.showBreed = true;
			},
			searchBreed(){
				if(this.searchValue&&this.searchValue!=''){
					this.searchBreedData=this.breedData.filter(e=>e.includes(this.searchValue));
				}else{
					this.searchBreedData=this.breedData
				}
				
			},
			breedSelectClose() {
				this.tempBreed = '';
				this.showBreed = false;
			},
			breedSelectConfirm() {
				this.petBaseInfo.breed = this.tempBreed;
				this.showBreed = false;
				this.updatePetBaseInfo()
			},
			yearMonthOpen() {
				if (this.petBaseInfo.birthDate) {
					this.tempBirthday = Number(new Date(this.petBaseInfo.birthDate))
				} else {
					this.tempBirthday = Number(new Date())
				}
				this.showBirthday = true;
			},
			yearMonthClose() {
				this.showBirthday = false;
			},
			yearMonthConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				this.petBaseInfo.birthDate = timeFormat(e.value, 'yyyy-mm');
				this.showBirthday = false;
				this.updatePetBaseInfo()
			},
			dispositionSelectOpen() {
				this.tempDisposition = this.petBaseInfo.personality;
				this.showDisposition = true;
			},
			dispositionSelectClose() {
				this.tempDisposition = '';
				this.showDisposition = false;
			},
			dispositionSelectConfirm() {
				this.petBaseInfo.personality = this.tempDisposition;
				this.showDisposition = false;
				this.updatePetBaseInfo()
			},
			checkboxChange(n) {
				console.log('change', n);
				this.updatePetBaseInfo();
			},
			updatePetBaseInfo() {
			  // 触发 update 事件，将修改后的 petBaseInfo 对象发送给父组件
			  this.$emit('update:petBaseInfo', this.petBaseInfo);
			},
			getPersonalityDataList(){
				getDictList('pet_personality').then(res=>{
					if (res.code == 200) {
						this.dispositionActions = Array.from(new Set(res.data.map(e=>e.dictLabel)))
					} else {
						this.$modal.showToast('获取性格失败')
					}
				})
			},
			getPetBreed(){
				let petBreedType = this.petType=='cat'?'pet_brand_cat':'pet_brand_dog'
				getDictList(petBreedType).then(res=>{
					if (res.code == 200) {
						this.breedData =Array.from(new Set(res.data.map(e=>e.dictLabel)))
					} else {
						this.$modal.showToast('获取种类失败')
					}
				})
			},
			getMaxDate(){
				return Date.now()
			},
			getMinDate(){
				let dt = new Date();
				dt.setFullYear(dt.getFullYear() - 30)
				return Date.parse(dt)
			}
		}
	}
</script>

<style >
	.personal-pet-basic-info{
		background-color: #fff;
		margin-top: 10px;
		padding: 10px 20px;
	}
	.personal-pet-breed-btns{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
	}
	.personal-pet-breed-btn{
		width: 40%;
	}
</style>