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.
301 lines
9.2 KiB
301 lines
9.2 KiB
<template>
|
|
<view >
|
|
<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" @change="sexSelect"></u-picker>
|
|
|
|
<u-picker :show="showWeight" :showToolbar='false' :columns="weightActions" @cancel="showWeight = false"
|
|
:immediateChange="true" @change="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: #A9A9A9;">
|
|
取消
|
|
</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 setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
watch
|
|
} from 'vue';
|
|
|
|
// 定义 props
|
|
const props = defineProps({
|
|
petType: {
|
|
type: String,
|
|
default: 'dog'
|
|
},
|
|
petBaseInfo: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
gender: '',
|
|
breed: '',
|
|
bodyType: '',
|
|
birthDate: '',
|
|
personality: ''
|
|
})
|
|
}
|
|
});
|
|
|
|
// 定义 emits
|
|
const emits = defineEmits(['update:petBaseInfo']);
|
|
|
|
// 定义响应式数据
|
|
const showSex = ref(false);
|
|
const showBreed = ref(false);
|
|
const showWeight = ref(false);
|
|
const showBirthday = ref(false);
|
|
const showDisposition = ref(false);
|
|
const sexActions = ref([
|
|
['男生', '女生']
|
|
]);
|
|
const weightActions = ref([
|
|
['小型（<10 KG）', '中型（10~20KG）', '大型（20KG以上）']
|
|
]);
|
|
const dispositionActions = ref([]);
|
|
const breedData = ref([]);
|
|
const searchBreedData = ref([]);
|
|
const tempBreed = ref('');
|
|
const searchValue = ref('');
|
|
const tempBirthday = ref('');
|
|
const tempDisposition = ref('');
|
|
const uForm = ref(null);
|
|
const item1 = ref(null);
|
|
|
|
// 定义方法
|
|
const nameChange = () => {
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const sexSelect = (e) => {
|
|
props.petBaseInfo.gender = e.value[0];
|
|
showSex.value = false;
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const weightSelect = (e) => {
|
|
props.petBaseInfo.bodyType = e.value[0];
|
|
showWeight.value = false;
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const breedSelectOpen = () => {
|
|
searchBreedData.value = breedData.value;
|
|
searchValue.value = '';
|
|
tempBreed.value = props.petBaseInfo.breed;
|
|
showBreed.value = true;
|
|
};
|
|
|
|
const searchBreed = () => {
|
|
if (searchValue.value && searchValue.value !== '') {
|
|
searchBreedData.value = breedData.value.filter(e => e.includes(searchValue.value));
|
|
} else {
|
|
searchBreedData.value = breedData.value;
|
|
}
|
|
};
|
|
|
|
const breedSelectClose = () => {
|
|
tempBreed.value = '';
|
|
showBreed.value = false;
|
|
};
|
|
|
|
const breedSelectConfirm = () => {
|
|
props.petBaseInfo.breed = tempBreed.value;
|
|
showBreed.value = false;
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const yearMonthOpen = () => {
|
|
if (props.petBaseInfo.birthDate) {
|
|
tempBirthday.value = Number(new Date(props.petBaseInfo.birthDate));
|
|
} else {
|
|
tempBirthday.value = Number(new Date());
|
|
}
|
|
showBirthday.value = true;
|
|
};
|
|
|
|
const yearMonthClose = () => {
|
|
showBirthday.value = false;
|
|
};
|
|
|
|
const yearMonthConfirm = (e) => {
|
|
const timeFormat = uni.$u.timeFormat;
|
|
props.petBaseInfo.birthDate = timeFormat(e.value, 'yyyy-mm');
|
|
showBirthday.value = false;
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const dispositionSelectOpen = () => {
|
|
tempDisposition.value = props.petBaseInfo.personality;
|
|
showDisposition.value = true;
|
|
};
|
|
|
|
const dispositionSelectClose = () => {
|
|
tempDisposition.value = '';
|
|
showDisposition.value = false;
|
|
};
|
|
|
|
const dispositionSelectConfirm = () => {
|
|
props.petBaseInfo.personality = tempDisposition.value;
|
|
showDisposition.value = false;
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const checkboxChange = (n) => {
|
|
console.log('change', n);
|
|
updatePetBaseInfo();
|
|
};
|
|
|
|
const updatePetBaseInfo = () => {
|
|
// 触发 update 事件，将修改后的 petBaseInfo 对象发送给父组件
|
|
emits('update:petBaseInfo', props.petBaseInfo);
|
|
};
|
|
|
|
const getPersonalityDataList = () => {
|
|
// getDictList('pet_personality').then(res => {
|
|
// if (res.code === 200) {
|
|
// dispositionActions.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
|
|
// } else {
|
|
// uni.showToast({
|
|
// title: '获取性格失败',
|
|
// icon: 'none'
|
|
// });
|
|
// }
|
|
// });
|
|
};
|
|
|
|
const getPetBreed = () => {
|
|
let petBreedType = props.petType === 'cat' ? 'pet_brand_cat' : 'pet_brand_dog';
|
|
// getDictList(petBreedType).then(res => {
|
|
// if (res.code === 200) {
|
|
// breedData.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
|
|
// } else {
|
|
// uni.showToast({
|
|
// title: '获取种类失败',
|
|
// icon: 'none'
|
|
// });
|
|
// }
|
|
// });
|
|
};
|
|
|
|
const getMaxDate = () => {
|
|
return Date.now();
|
|
};
|
|
|
|
const getMinDate = () => {
|
|
let dt = new Date();
|
|
dt.setFullYear(dt.getFullYear() - 30);
|
|
return Date.parse(dt);
|
|
};
|
|
|
|
// 生命周期钩子
|
|
onMounted(() => {
|
|
// getPersonalityDataList();
|
|
// getPetBreed();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.personal-pet-basic-info {
|
|
background-color: #fff;
|
|
margin-top: 10px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.personal-pet-breed-btns {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx 20rpx 40rpx 20rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 160rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.personal-pet-breed-btn {
|
|
width: 40%;
|
|
}
|
|
</style>
|