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.
287 lines
7.3 KiB
287 lines
7.3 KiB
<template> |
|
<view class="pet-page-container" :style="{width:buttonWidth}"> |
|
<view class="pet-page-capsule-container row"> |
|
<view class="pet-page-capsule col-4" v-for="(item,index) in petTypeList" |
|
:class="{active:(index === petTypeChecked)}" @click="selectPetType(index)"> |
|
{{item.label}} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="pet-page-group row"> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝姓名 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-input inputAlign="right" placeholder="请输入"></u-input> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝品种 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-input inputAlign="right" placeholder="请输入"></u-input> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝体重(KG) |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-number-box :min="1" :max="1000" button-size="36" inputWidth="50" buttonSize="50"></u-number-box> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝生日 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝性别 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
最近疫苗时间 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
最近驱虫时间 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
是否有户口 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text suffix-icon="arrow-right" text="请选择" size="28" color="#636363" icon-style="font-size:30" line-height="30"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝图片 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="imageList" |
|
name="img" |
|
multiple |
|
:maxCount="10" |
|
:previewFullImage="true" |
|
uploadIcon="plus" |
|
@afterRead="afterImgRead" |
|
@delete="deleteImg" |
|
></u-upload> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
宝贝视频 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="imageList" |
|
name="img" |
|
multiple |
|
:maxCount="10" |
|
:previewFullImage="true" |
|
uploadIcon="plus" |
|
@afterRead="afterImgRead" |
|
@delete="deleteImg" |
|
></u-upload> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="pet-page-button row"> |
|
<view class="col-12" style="justify-content: center;" v-if="type === 'lists'"> |
|
<view class="" style="display: inline-block;"> |
|
<MzButton |
|
title="添加萌宠" |
|
button-color="#FFFFFF" |
|
font-color="#262626" |
|
button-width="300rpx" |
|
class="" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<view class="col-6" v-if="type === 'create' && showCancel"> |
|
<MzButton |
|
title="取消" |
|
button-color="#FFFFFF" |
|
font-color="#262626" |
|
button-width="300rpx" |
|
class="" |
|
> |
|
</MzButton> |
|
</view> |
|
<view class="col-6" v-if="type === 'create'"> |
|
<MzButton |
|
title="保存" |
|
button-color="#4DC3B8" |
|
font-color="#fff" |
|
button-width="300rpx" |
|
class="" |
|
@click="submit" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { imghost } from '@/config/host.js'; |
|
import MzButton from "@/components/MzButton/Index.vue"; |
|
import {editPet} from "@/api/pet"; |
|
import {getSTS} from "@/api/other"; |
|
|
|
export default{ |
|
name:'PetPage', |
|
props:{ |
|
title:{ |
|
type:String, |
|
default:'确认' |
|
}, |
|
buttonColor:{ |
|
type:String, |
|
default:'#FFFFFF' |
|
}, |
|
fontColor:{ |
|
type:String, |
|
default:'#131313' |
|
}, |
|
buttonWidth:{ |
|
type:String, |
|
default:'100%' |
|
}, |
|
isBackground:{ |
|
type:Boolean, |
|
default:true |
|
}, |
|
fontSize:{ |
|
type:String, |
|
default:'30rpx', |
|
}, |
|
paddingTb:{ |
|
type:String, |
|
default:'15rpx', |
|
}, |
|
btnStyle:{ |
|
type:Object, |
|
default:{}, |
|
}, |
|
type:{ |
|
type:String, |
|
default:'create', |
|
}, |
|
showCancel:{ |
|
type:Boolean, |
|
default:false, |
|
}, |
|
autoBack:{ |
|
type:Boolean, |
|
default:false, |
|
}, |
|
}, |
|
components:{ |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
loading: true, |
|
buttonBackground:imghost+"/static/image/small-button-background.png", |
|
staticImage:{ |
|
buttonBackground:imghost+'/static/image/small-button-background.png' |
|
}, |
|
petTypeList:[ |
|
{ |
|
label:'喵喵', |
|
value:'1', |
|
},{ |
|
label:'汪汪', |
|
value:'2', |
|
},{ |
|
label:'其他萌宠', |
|
value:'3', |
|
}, |
|
], |
|
petTypeChecked:0, |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
selectPetType(index){ |
|
this.petTypeChecked = index; |
|
}, |
|
submit(){ |
|
let data = { |
|
"id": "", |
|
"avatar": "", |
|
"name": "124123", |
|
"type_name": "12412", |
|
"type": "1", |
|
"weight": "12", |
|
"birthday": "2020/01/04", |
|
"sex": "1", |
|
"last_vaccine_time": "", |
|
"last_insect_repellent_time": "", |
|
"remarks": "121122", |
|
"is_home": "1", |
|
"video": "" |
|
} |
|
// editPet(data).then(res => { |
|
// console.log(res) |
|
// }) |
|
getSTS({}).then(res => { |
|
console.log(res) |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |