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.
226 lines
3.9 KiB
226 lines
3.9 KiB
<template>
|
|
<!-- <div>创建宠物档案</div> -->
|
|
<view class="box">
|
|
<view class="top box-size">
|
|
<view class="title">
|
|
宠物头像
|
|
</view>
|
|
<view class="img">
|
|
<image src="/static/images/ydd/profile.png" mode="" style="width: 157rpx;height: 157rpx;"
|
|
:style="{borderRadius:'100rpx'}"></image>
|
|
<view class="">
|
|
点击更换头像
|
|
<view class="top_item">
|
|
<image src="/static/images/ydd/photograph.png" mode="" style="width: 55rpx;height: 55rpx;"
|
|
:style="{borderRadius:'50rpx'}"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="base-info box-size">
|
|
<view class="information">基本信息(必填)</view>
|
|
<view class="information_">
|
|
<DForm :list="state.list" @submit="handleSubmit" />
|
|
</view>
|
|
</view>
|
|
<view class="base-info box-size">
|
|
<view class="information">其他信息(非必填)</view>
|
|
<view class="information_">
|
|
<DForm :list="nostate.list" @submit="nohandleSubmit" />
|
|
</view>
|
|
</view>
|
|
<view class="bottom box-size level">
|
|
<view class="delet level" :style="{borderRadius:'12rpx'}">
|
|
删除
|
|
</view>
|
|
<view class="save level" :style="{borderRadius:'12rpx'}">
|
|
保存
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive
|
|
} from "vue";
|
|
import DForm from "@/components/dForm/index.vue"
|
|
|
|
const state = reactive({
|
|
list: [{
|
|
type: "input",
|
|
label: "昵称 ",
|
|
key: "name",
|
|
placeholder: "请输入宠物名字",
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "类别",
|
|
key: "category",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "猫咪"
|
|
},
|
|
{
|
|
name: "狗狗"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "性别",
|
|
key: "sex",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "男生"
|
|
},
|
|
{
|
|
name: "女生"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "品种",
|
|
key: "variety",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "男生"
|
|
},
|
|
{
|
|
name: "女生"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "体重",
|
|
key: "variety",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "小型(<10KG)"
|
|
},
|
|
{
|
|
name: "中型(10~20KG)"
|
|
},
|
|
{
|
|
name: "大型(20KG以上)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|
|
const nostate = reactive({
|
|
list: [{
|
|
type: "select",
|
|
label: "生日",
|
|
key: "birthday",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "猫咪"
|
|
},
|
|
{
|
|
name: "狗狗"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "input",
|
|
label: "性格",
|
|
key: "character ",
|
|
placeholder: "请描述",
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "疫苗",
|
|
key: "sex",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "每年都免疫"
|
|
},
|
|
{
|
|
name: "有免疫史"
|
|
},
|
|
{
|
|
name: "未免疫"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "驱虫",
|
|
key: "variety",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "未驱虫"
|
|
},
|
|
{
|
|
name: "定期驱虫"
|
|
},
|
|
{
|
|
name: "有驱虫史"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "绝育",
|
|
key: "variety",
|
|
placeholder: "请选择",
|
|
options: [{
|
|
name: "未绝育"
|
|
},
|
|
{
|
|
name: "已绝育"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: "select",
|
|
label: "健康",
|
|
key: "variety",
|
|
placeholder: "请选择(多选)",
|
|
options: [{
|
|
name: "小型(<10KG)"
|
|
},
|
|
{
|
|
name: "中型(10~20KG)"
|
|
},
|
|
{
|
|
name: "大型(20KG以上)"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
})
|
|
|
|
const handleSubmit = (val) => {
|
|
console.log("获取参数", val)
|
|
}
|
|
|
|
const nohandleSubmit = (val) => {
|
|
console.log("获取参数", val)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import"index.css";
|
|
|
|
.line1 {
|
|
position: relative;
|
|
margin-bottom: 30rpx;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 5rpx;
|
|
left: 0;
|
|
content: "";
|
|
width: 670rpx;
|
|
height: 0.5rpx;
|
|
// background-color: #EFEFEF;
|
|
background-color: red;
|
|
}
|
|
}
|
|
</style>
|