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.
316 lines
6.2 KiB
316 lines
6.2 KiB
<template>
|
|
<!-- <div>宠物信息页 </div> -->
|
|
<view class="box">
|
|
<view class="top box-size">
|
|
<view class="form-title">
|
|
宠物头像
|
|
</view>
|
|
<view class="img">
|
|
<image :src="petInfo.headImage" 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.nickName }}
|
|
</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 ? '男' : '女' }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
品种
|
|
<view class="item_">
|
|
{{ petInfo.type }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
出生年月
|
|
<view class="item_">
|
|
{{ petInfo.birthday }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
体重
|
|
<view class="item_">
|
|
{{ petInfo.weight }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
性格
|
|
<view class="item_">
|
|
{{ 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_">
|
|
有免疫史
|
|
</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_">
|
|
未驱虫
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="level name box-size pad_4">
|
|
绝育
|
|
<view class="item_">
|
|
已绝育
|
|
</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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from "vue"
|
|
import {
|
|
onLoad,
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
getByPetId
|
|
} from "@/api/pet/index.js"
|
|
|
|
onLoad((options) => {
|
|
petId.value = options.id || null;
|
|
});
|
|
|
|
onShow(() => {
|
|
getPetDetail()
|
|
})
|
|
|
|
const petId = ref(null);
|
|
const petInfo = ref({})
|
|
|
|
const getPetDetail = async () => {
|
|
if (!petId.value) return;
|
|
let response = await getByPetId({
|
|
id: petId.value
|
|
})
|
|
if (response.code == 200 && response.data) {
|
|
petInfo.value = response.data;
|
|
}
|
|
}
|
|
</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>
|