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.
167 lines
5.6 KiB
167 lines
5.6 KiB
<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>
|
|
|
|
<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-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,
|
|
showWeight: false,
|
|
showBirthday: false,
|
|
sexActions: [['男生','女生']],
|
|
weightActions: [['小型（<10 KG）','中型（10~20KG）', '大型（20KG以上）']],
|
|
tempBirthday: ''
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
'petBaseInfo.breed': {
|
|
handler(newVal) {
|
|
console.log('品种数据更新:', newVal);
|
|
this.updatePetBaseInfo();
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
props:{
|
|
petType: {
|
|
type: String,
|
|
default: 'dog'
|
|
},
|
|
petBaseInfo:{
|
|
type: Object,
|
|
default: ()=> ({
|
|
name: '',
|
|
gender: '',
|
|
breed: '',
|
|
bodyType: '',
|
|
birthDate: '',
|
|
personality: ''
|
|
})
|
|
}
|
|
},
|
|
|
|
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() {
|
|
// 跳转到品种选择页面
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/breedSelect?petType=${this.petType}&selectedBreed=${encodeURIComponent(this.petBaseInfo.breed || '')}`
|
|
});
|
|
},
|
|
|
|
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() {
|
|
// 跳转到性格选择页面
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/personalitySelect?personality=${encodeURIComponent(this.petBaseInfo.personality || '')}`
|
|
});
|
|
},
|
|
|
|
updatePetBaseInfo() {
|
|
// 触发 update 事件，将修改后的 petBaseInfo 对象发送给父组件
|
|
this.$emit('update:petBaseInfo', this.petBaseInfo);
|
|
},
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
</style>
|