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.
264 lines
8.6 KiB
264 lines
8.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>
|
|
<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>
|