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.
390 lines
8.3 KiB
390 lines
8.3 KiB
<template>
|
|
<!-- <div>宠物信息页 </div> -->
|
|
<view class="box">
|
|
<view class="top box-size">
|
|
<view class="form-title">
|
|
宠物头像
|
|
</view>
|
|
<view class="img">
|
|
<image :src="petInfo.photo" mode="" style="width: 157rpx;height: 157rpx;"
|
|
:style="{borderRadius:'100rpx'}"></image>
|
|
<!-- <view >
|
|
点击更换头像
|
|
<view class="top_item">
|
|
<image src="/static/images/tabBar/Group 1000001460@2x.png" mode=""
|
|
style="width: 55rpx;height: 55rpx;" :style="{borderRadius:'50rpx'}"></image>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="information">
|
|
<view class="form-title">
|
|
宠物基本信息
|
|
</view>
|
|
<view class="information_item box-size margin_top_3%">
|
|
<view class="level name box-size pad_4">
|
|
昵称
|
|
<!-- <input type="text" placeholder="请输入宠物名字" /> -->
|
|
<view class="item_">
|
|
{{ petInfo.name }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
性别
|
|
<!-- <view>
|
|
<up-picker :show="show" :columns="columns"></up-picker>
|
|
<up-button @click="show = true">请选择</up-button>
|
|
</view> -->
|
|
<view class="item_">
|
|
<!-- {{ petInfo.sex == 0 ? '男' : '女' }} -->
|
|
{{ petInfo.gender }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
品种
|
|
<view class="item_">
|
|
<!-- {{ petInfo.type }} -->
|
|
{{ petInfo.breed }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
出生年月
|
|
<view class="item_">
|
|
{{ petInfo.birthDate || '未知' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
体重
|
|
<view class="item_">
|
|
<!-- {{ petInfo.weight }} -->
|
|
{{ petInfo.bodyType || '未知' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
性格
|
|
<view class="item_">
|
|
<!-- {{ petInfo.personality }} -->
|
|
{{ petInfo.personality && petInfo.personality.join ? petInfo.personality.join('，') : petInfo.personality }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="information">
|
|
<view class="form-title">
|
|
宠物健康情况
|
|
</view>
|
|
<view class="information_item box-size margin_top_3% item">
|
|
<view class="level name box-size pad_4">
|
|
疫苗
|
|
<!-- <input type="text" placeholder="请输入宠物名字" /> -->
|
|
<view class="item_">
|
|
<!-- 有免疫史 -->
|
|
<!-- {{ vaccineText }} -->
|
|
{{ petInfo.vaccineStatus || '未知' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
驱虫
|
|
<!-- <view>
|
|
<up-picker :show="show" :columns="columns"></up-picker>
|
|
<up-button @click="show = true">请选择</up-button>
|
|
</view> -->
|
|
<view class="item_">
|
|
<!-- {{ dewormText }} -->
|
|
<!-- 未驱虫 -->
|
|
{{ petInfo.dewormingStatus || '未知' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
绝育
|
|
<view class="item_">
|
|
<!-- {{ neuteredText }} -->
|
|
<!-- 已绝育 -->
|
|
{{ petInfo.sterilization || '未知' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
健康
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="container box-size">
|
|
<view class="container_item level">
|
|
<view class="icon" :style="{borderRadius:'30rpx'}">
|
|
<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
|
|
</view>
|
|
身体健康，无异常
|
|
</view>
|
|
<view class="container_item level">
|
|
<view class="icon_" :style="{borderRadius:'30rpx'}">
|
|
<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
|
|
</view>
|
|
近三个月有做过手术
|
|
</view>
|
|
<view class="bottom box-size" :style="{borderRadius:'8rpx'}">
|
|
右腿骨折，右眼有轻微白内障
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="container box-size">
|
|
|
|
<view class="container_item level" v-for="(value, index) in healthData"
|
|
:key="index">
|
|
<view class="icon" :style="{borderRadius:'30rpx'}" v-if="petInfo.healthStatus.includes(value)">
|
|
<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
|
|
</view>
|
|
<view class="icon_" :style="{borderRadius:'30rpx'}" v-else>
|
|
<up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon>
|
|
</view>
|
|
{{ value }}
|
|
</view>
|
|
|
|
<view class="bottom box-size" :style="{borderRadius:'8rpx'}"
|
|
v-if="petInfo.remark">
|
|
{{ petInfo.remark }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
} from "vue"
|
|
import {
|
|
onLoad,
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
getPetById
|
|
} from "@/api/order/order.js"
|
|
import { getDictList } from "@/api/system/user"
|
|
|
|
onLoad((options) => {
|
|
petId.value = options.id || null;
|
|
getPetDetail()
|
|
});
|
|
|
|
// const
|
|
|
|
const healthData = ref([])
|
|
|
|
const vaccineText = computed(() => {
|
|
const vaccineMap = {
|
|
0: '每年都免疫',
|
|
1: '有免疫史',
|
|
2: '未免疫'
|
|
};
|
|
return vaccineMap[petInfo.value.vaccine] || ''
|
|
});
|
|
const dewormText = computed(() => {
|
|
const dewormMap = {
|
|
0: '未驱虫',
|
|
1: '定期驱虫',
|
|
2: '有驱虫史'
|
|
};
|
|
return dewormMap[petInfo.value.deworm] || ''
|
|
});
|
|
const neuteredText = computed(() => {
|
|
const neuteredMap = {
|
|
0: '已绝育',
|
|
1: '未绝育'
|
|
};
|
|
return neuteredMap[petInfo.value.neutered] || ''
|
|
});
|
|
const petCartText = computed(() => {
|
|
const petCartMap = {
|
|
0: '是',
|
|
1: '否'
|
|
};
|
|
return petCartMap[petInfo.value.petCard] || ''
|
|
});
|
|
|
|
|
|
const petId = ref(null);
|
|
const petInfo = ref({})
|
|
|
|
const getPetDetail = async () => {
|
|
if (!petId.value) return;
|
|
let response = await getPetById(petId.value)
|
|
if (response.code == 200 && response.data) {
|
|
petInfo.value = response.data;
|
|
}
|
|
}
|
|
|
|
function getDictListInfo(){
|
|
getDictList('pet_health_status').then(res=>{
|
|
if (res.code == 200) {
|
|
healthData.value = res.data.map(e=>e.dictLabel)
|
|
}
|
|
})
|
|
}
|
|
|
|
getDictListInfo()
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.box {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
.top {
|
|
width: 100vw;
|
|
height: 300rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 0 1%;
|
|
|
|
|
|
.img {
|
|
width: 165rpx;
|
|
height: 165rpx;
|
|
// background-color: pink;
|
|
color: #7D8196;
|
|
font-size: 28rpx;
|
|
margin: 1% 39%;
|
|
display: grid;
|
|
jplace-items: center;
|
|
// position: relative;
|
|
|
|
// .top_item {
|
|
// position: absolute;
|
|
// top: 100rpx;
|
|
// left: 100rpx;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.item {
|
|
height: 360rpx !important;
|
|
}
|
|
|
|
.information {
|
|
width: 100vw;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
margin-top: 17rpx;
|
|
padding: 0 1%;
|
|
|
|
.information_item {
|
|
width: 100vw;
|
|
height: 550rpx;
|
|
font-size: 30rpx;
|
|
display: grid;
|
|
justify-content: space-around;
|
|
|
|
.item_ {
|
|
width: auto;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.name {
|
|
width: 100vw;
|
|
height: 40rpx;
|
|
justify-content: space-between;
|
|
|
|
// .name input {
|
|
// width: 50rpx;
|
|
// background-color: #FFFFFF;
|
|
// }
|
|
}
|
|
|
|
// .sex {
|
|
// width: 200rpx;
|
|
// height: 40rpx;
|
|
// background-color: #7D8196;
|
|
// }
|
|
|
|
.line1 {
|
|
position: relative;
|
|
margin-bottom: 30rpx;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 5rpx;
|
|
left: 17rpx;
|
|
content: "";
|
|
width: 706rpx;
|
|
height: 0.5rpx;
|
|
background-color: #EFEFEF;
|
|
// background-color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 500rpx;
|
|
background-color: #FFF4E4;
|
|
padding: 3% 3% 5% 5%;
|
|
font-size: 30rpx;
|
|
|
|
.container_item {
|
|
width: auto;
|
|
height: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #FFBF60;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.icon_ {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border: 1rpx solid gray;
|
|
background-color: #FFF;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 680rpx;
|
|
height: 80rpx;
|
|
background-color: #FFFFFF;
|
|
padding-left: 2%;
|
|
border: 1rpx solid #FFBF60;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-size {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.level {
|
|
display: flex;
|
|
}
|
|
|
|
.pad_4 {
|
|
padding: 0 4%;
|
|
}
|
|
|
|
.margin_top_3 {
|
|
margin-top: 3%;
|
|
}
|
|
</style>
|