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.
183 lines
4.1 KiB
183 lines
4.1 KiB
<template>
|
|
<view class="personal-pet">
|
|
<view v-if="petList.length>0" class="personal-service-list">
|
|
<view v-for="(item,index) in petList" :key="index">
|
|
<view class="personal-service-list-item" @click="goServiceInfo(item)">
|
|
<view style="display: flex;align-items: center;">
|
|
<u-avatar :src="item.photo?item.photo:defaultPhoto" size="46" shape="circle"></u-avatar>
|
|
<view class="personal-service-tips ellipsis">
|
|
{{serviceTips(item)}}
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="personal-pet-none">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png" alt="pet"
|
|
style="width: 149px;height: 124px;" mode="widthFix"/>
|
|
<view class="personal-pet-none-text">这里还没有您的宠物,请点击添加吧~</view>
|
|
</view>
|
|
<view class="personal-pet-add" v-if="petList.length==0">
|
|
<button class="personal-pet-add-btn" @click="addPet">添加宠物</button>
|
|
</view>
|
|
<view class="">
|
|
<u-picker
|
|
:showToolbar='false'
|
|
:show="show"
|
|
:columns="petTypes"
|
|
@change="petTypeChange"
|
|
@cancel="cancel"
|
|
@confirm="confirm"
|
|
></u-picker>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPetList } from "@/api/system/pet"
|
|
import { getDictList } from "@/api/system/user.js"
|
|
export default{
|
|
data(){
|
|
return{
|
|
petList:[],
|
|
show:false,
|
|
petTypes:[],
|
|
petType:''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getPetList();
|
|
},
|
|
mounted() {
|
|
this.getPetList();
|
|
},
|
|
methods:{
|
|
getPetList(){
|
|
getPetList({owner:this.openIdStr}).then(res=>{
|
|
if(res&&res.content){
|
|
this.petList=res.content
|
|
if(this.petList.length==0){
|
|
this.getPetTypeList()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getPetTypeList(){
|
|
getDictList('pet_type').then(res=>{
|
|
if (res.code == 200) {
|
|
let petType = res.data.map(e=>e.dictLabel)
|
|
this.petTypes=[petType]
|
|
console.log(this.petTypes)
|
|
} else {
|
|
this.$modal.showToast('获取pet type失败')
|
|
}
|
|
})
|
|
},
|
|
addPet(){
|
|
this.show = true;
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
petTypeChange(e){
|
|
console.log(e)
|
|
this.petType=e.value[0]
|
|
},
|
|
confirm(e) {
|
|
this.show = false
|
|
if(this.petType==='猫猫'){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
|
|
});
|
|
}
|
|
if(this.petType==='狗狗'){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
|
|
});
|
|
}
|
|
if(!this.petType){
|
|
if(e.value[0]==='猫猫'){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/petInfo?petType=cat&optionType=add`
|
|
});
|
|
}
|
|
if(e.value[0]==='狗狗'){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/petInfo?petType=dog&optionType=add`
|
|
});
|
|
}
|
|
}
|
|
},
|
|
serviceTips(item){
|
|
return `完善${item.petType=='dog'?"狗狗":"猫猫"}"${item.name}"的服务信息`
|
|
},
|
|
goServiceInfo(item){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/serviceInfo?petType=${item.petType}&petId=${item.id}`
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.personal-pet{
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 58px;
|
|
.personal-pet-add{
|
|
background-color: #FFFFFF;
|
|
padding: 10px 20px 40px;
|
|
width: 100%;
|
|
height: 90px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
.personal-pet-add-btn{
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.personal-service-list{
|
|
.personal-service-list-item{
|
|
background-color: #fff;
|
|
margin: 10px 10px 0 10px;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.personal-service-tips{
|
|
margin-left: 10px;
|
|
color:#333;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.personal-pet-none{
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 40%;
|
|
.personal-pet-none-text{
|
|
color: #666;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|