|
|
|
|
@ -1,20 +1,20 @@
|
|
|
|
|
<template> |
|
|
|
|
<view class="pet-page-container" :style="{width:buttonWidth}"> |
|
|
|
|
<view class="pet-page-container" :style="{width:buttonWidth}" v-if="type === 'create'"> |
|
|
|
|
<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)"> |
|
|
|
|
:class="{active:(item.value === data.type)}" @click="selectPetType(item.value)"> |
|
|
|
|
{{item.label}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="pet-page-group row"> |
|
|
|
|
<view class="pet-page-group row" v-if="type === 'create'"> |
|
|
|
|
<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> |
|
|
|
|
<u-input v-model="data.name" inputAlign="right" placeholder="请输入"></u-input> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -25,7 +25,7 @@
|
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row col"> |
|
|
|
|
<view class="item-content-text"> |
|
|
|
|
<u-input inputAlign="right" placeholder="请输入"></u-input> |
|
|
|
|
<u-input v-model="data.type_name" inputAlign="right" placeholder="请输入"></u-input> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -35,7 +35,7 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-number-box v-model="data.weight" :min="1" :max="1000" button-size="36" inputWidth="50" buttonSize="50"></u-number-box> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -45,7 +45,15 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-text |
|
|
|
|
suffix-icon="arrow-right" |
|
|
|
|
:text="data.birthday || '请选择'" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
icon-style="font-size:30" |
|
|
|
|
line-height="30" |
|
|
|
|
@click="$refs.birthdayPicker.open()" |
|
|
|
|
></u-text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -55,7 +63,15 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-text |
|
|
|
|
suffix-icon="arrow-right" |
|
|
|
|
:text="data.sex_name || '请选择'" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
icon-style="font-size:30" |
|
|
|
|
line-height="30" |
|
|
|
|
@click="$refs.pickerSex.open()" |
|
|
|
|
></u-text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -65,7 +81,15 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-text |
|
|
|
|
suffix-icon="arrow-right" |
|
|
|
|
:text="data.last_vaccine_time || '请选择'" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
icon-style="font-size:30" |
|
|
|
|
line-height="30" |
|
|
|
|
@click="$refs.vaccinePicker.open()" |
|
|
|
|
></u-text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -75,7 +99,15 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-text |
|
|
|
|
suffix-icon="arrow-right" |
|
|
|
|
:text="data.last_insect_repellent_time || '请选择'" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
icon-style="font-size:30" |
|
|
|
|
line-height="30" |
|
|
|
|
@click="$refs.insectRepellentPicker.open()" |
|
|
|
|
></u-text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -85,20 +117,66 @@
|
|
|
|
|
</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> |
|
|
|
|
<u-text |
|
|
|
|
suffix-icon="arrow-right" |
|
|
|
|
:text="data.is_home_name || '请选择'" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
icon-style="font-size:30" |
|
|
|
|
line-height="30" |
|
|
|
|
@click="$refs.pickerHome.open()" |
|
|
|
|
></u-text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-item row"> |
|
|
|
|
<view class="item-title"> |
|
|
|
|
宝贝图片 |
|
|
|
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
|
|
|
过往病史 |
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row col"> |
|
|
|
|
<view class="item-content-text"> |
|
|
|
|
<view class="item-content row"> |
|
|
|
|
<view class="item-content-text row"> |
|
|
|
|
<u-textarea |
|
|
|
|
placeholder="请输入" |
|
|
|
|
v-model="data.remarks" |
|
|
|
|
size="28" |
|
|
|
|
color="#636363" |
|
|
|
|
line-height="30" |
|
|
|
|
height="100" |
|
|
|
|
></u-textarea> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-item row"> |
|
|
|
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
|
|
|
宝贝头像 |
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row"> |
|
|
|
|
<view class="item-content-text row"> |
|
|
|
|
<u-upload |
|
|
|
|
width="160" |
|
|
|
|
height="160" |
|
|
|
|
:fileList="imageList" |
|
|
|
|
:fileList="avatarList" |
|
|
|
|
name="img" |
|
|
|
|
multiple |
|
|
|
|
:maxCount="1" |
|
|
|
|
:previewFullImage="true" |
|
|
|
|
uploadIcon="plus" |
|
|
|
|
@afterRead="afterAvatarRead" |
|
|
|
|
@delete="deleteAvatar" |
|
|
|
|
></u-upload> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-item row"> |
|
|
|
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
|
|
|
宝贝相册 |
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row"> |
|
|
|
|
<view class="item-content-text row"> |
|
|
|
|
<u-upload |
|
|
|
|
width="160" |
|
|
|
|
height="160" |
|
|
|
|
:fileList="imagesList" |
|
|
|
|
name="img" |
|
|
|
|
multiple |
|
|
|
|
:maxCount="10" |
|
|
|
|
@ -111,29 +189,107 @@
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-item row"> |
|
|
|
|
<view class="item-title"> |
|
|
|
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
|
|
|
宝贝背景图 |
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row"> |
|
|
|
|
<view class="item-content-text row"> |
|
|
|
|
<u-upload |
|
|
|
|
width="160" |
|
|
|
|
height="160" |
|
|
|
|
:fileList="backgroundList" |
|
|
|
|
name="img" |
|
|
|
|
multiple |
|
|
|
|
:maxCount="1" |
|
|
|
|
:previewFullImage="true" |
|
|
|
|
uploadIcon="plus" |
|
|
|
|
@afterRead="afterBackgroundRead" |
|
|
|
|
@delete="deleteBackground" |
|
|
|
|
></u-upload> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="order-item row"> |
|
|
|
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
|
|
|
宝贝视频 |
|
|
|
|
</view> |
|
|
|
|
<view class="item-content row col"> |
|
|
|
|
<view class="item-content-text"> |
|
|
|
|
<view class="item-content row"> |
|
|
|
|
<view class="item-content-text row"> |
|
|
|
|
<u-upload |
|
|
|
|
width="160" |
|
|
|
|
height="160" |
|
|
|
|
:fileList="imageList" |
|
|
|
|
:fileList="videoList" |
|
|
|
|
name="img" |
|
|
|
|
multiple |
|
|
|
|
:maxCount="10" |
|
|
|
|
:maxCount="1" |
|
|
|
|
:previewFullImage="true" |
|
|
|
|
uploadIcon="plus" |
|
|
|
|
@afterRead="afterImgRead" |
|
|
|
|
@delete="deleteImg" |
|
|
|
|
@afterRead="afterVideoRead" |
|
|
|
|
@delete="deleteVideo" |
|
|
|
|
></u-upload> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="pet-list" v-if="type === 'lists'"> |
|
|
|
|
<view class="order-screen-container row"> |
|
|
|
|
<view class="order-list-container"> |
|
|
|
|
<view class="order-list-item" v-for="(item,index) in petCheckList"> |
|
|
|
|
<view |
|
|
|
|
@click="delPetCheck(index)" |
|
|
|
|
class="close-icon" |
|
|
|
|
style="position:absolute;right:0rpx;top:0rpx;z-index:2;background-color:#fff;border-radius: 50%;" |
|
|
|
|
> |
|
|
|
|
<u-image :src="staticImage.closeIcon" mode="widthFix" width="40" height="40"></u-image> |
|
|
|
|
</view> |
|
|
|
|
<view v-if="index!==0" class="pet-gun" :style="{ |
|
|
|
|
backgroundImage:'url('+staticImage.petGun+')' |
|
|
|
|
}"></view> |
|
|
|
|
<view class="order-card-container row"> |
|
|
|
|
<view class="order-card-container-background col-12"></view> |
|
|
|
|
<view class="order-card-container-background-main row"> |
|
|
|
|
<view class="order-card-col row"> |
|
|
|
|
<view class="order-card-left"> |
|
|
|
|
<view class="left-background"> |
|
|
|
|
<image class="img" :src="item.avatar" mode="aspectFill" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-card-right col row"> |
|
|
|
|
<view class="col"> |
|
|
|
|
<view class="name ">{{ item.name }}</view> |
|
|
|
|
<view class="old">{{ item.age }}岁</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="col"> |
|
|
|
|
<view class="type">{{ item.type_name }}</view> |
|
|
|
|
<view class="weight">{{ item.weight }}kg</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="pet-page-button row"> |
|
|
|
|
<view class="col-12" style="justify-content: center;" v-if="type === 'lists'"> |
|
|
|
|
<view class="col-6" 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="" |
|
|
|
|
@click="$refs.petPopup.open()" |
|
|
|
|
> |
|
|
|
|
</MzButton> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="col-6" style="justify-content: center;" v-if="type === 'lists'"> |
|
|
|
|
<view class="" style="display: inline-block;"> |
|
|
|
|
<MzButton |
|
|
|
|
title="添加萌宠" |
|
|
|
|
@ -141,6 +297,7 @@
|
|
|
|
|
font-color="#262626" |
|
|
|
|
button-width="300rpx" |
|
|
|
|
class="" |
|
|
|
|
@click="type = 'create'" |
|
|
|
|
> |
|
|
|
|
</MzButton> |
|
|
|
|
</view> |
|
|
|
|
@ -152,6 +309,7 @@
|
|
|
|
|
font-color="#262626" |
|
|
|
|
button-width="300rpx" |
|
|
|
|
class="" |
|
|
|
|
@click="type = 'lists'" |
|
|
|
|
> |
|
|
|
|
</MzButton> |
|
|
|
|
</view> |
|
|
|
|
@ -167,13 +325,177 @@
|
|
|
|
|
</MzButton> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<uv-datetime-picker |
|
|
|
|
:value="data.birthday" |
|
|
|
|
ref="birthdayPicker" |
|
|
|
|
mode="date" |
|
|
|
|
minDate="1970-01-01" |
|
|
|
|
@confirm="birthdayConfirm" |
|
|
|
|
></uv-datetime-picker> |
|
|
|
|
<uv-datetime-picker |
|
|
|
|
:value="data.last_vaccine_time" |
|
|
|
|
ref="vaccinePicker" |
|
|
|
|
mode="date" |
|
|
|
|
minDate="1970-01-01" |
|
|
|
|
@confirm="vaccineConfirm" |
|
|
|
|
></uv-datetime-picker> |
|
|
|
|
<uv-datetime-picker |
|
|
|
|
:value="data.last_insect_repellent_time" |
|
|
|
|
ref="insectRepellentPicker" |
|
|
|
|
mode="date" |
|
|
|
|
minDate="1970-01-01" |
|
|
|
|
@confirm="insectRepellentConfirm" |
|
|
|
|
></uv-datetime-picker> |
|
|
|
|
<uv-picker :columns="[homeList]" ref="pickerHome" key-name="name" title="是否有户口" round="20rpx" @confirm="homeSelect"></uv-picker> |
|
|
|
|
<uv-picker :columns="[sexList]" ref="pickerSex" key-name="name" title="宝贝性别" round="20rpx" @confirm="sexSelect"></uv-picker> |
|
|
|
|
<uv-popup ref="popup" style="position: relative;" :is-mask-click="false" round="20" mode="bottom" closeable safe-area-inset-bottom safe-area-inset-top> |
|
|
|
|
<view class="pet-list" style="padding:30rpx;max-height:50vh;overflow: auto;"> |
|
|
|
|
<view class="order-screen-container row"> |
|
|
|
|
<view class="order-list-container"> |
|
|
|
|
<view class="order-list-item" v-for="(item,index) in petList" @click=""> |
|
|
|
|
<view v-show="index!==0" class="pet-gun" :style="{ |
|
|
|
|
backgroundImage:'url('+staticImage.petGun+')' |
|
|
|
|
}"></view> |
|
|
|
|
<view class="order-card-container row"> |
|
|
|
|
<view class="order-card-container-background col-12"></view> |
|
|
|
|
<view class="order-card-container-background-main row"> |
|
|
|
|
<view class="order-card-col row"> |
|
|
|
|
<view class="order-card-left"> |
|
|
|
|
<view class="left-background"> |
|
|
|
|
<image class="img" :src="item.avatar" mode="aspectFill" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="order-card-right col row"> |
|
|
|
|
<view class="col"> |
|
|
|
|
<view class="name ">{{ item.name }}</view> |
|
|
|
|
<view class="old">{{ item.age }}岁</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="col"> |
|
|
|
|
<view class="type">{{ item.type_name }}</view> |
|
|
|
|
<view class="weight">{{ item.weight }}kg</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<u-loadmore :status="status" fontSize="28" |
|
|
|
|
color="#ACB4B6" |
|
|
|
|
line |
|
|
|
|
line-color="#ACB4B6" |
|
|
|
|
marginBottom="30" marginTop="30" @loadmore="getMyPets()"/> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="pop-service-container"> |
|
|
|
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;"> |
|
|
|
|
<u-cell |
|
|
|
|
size="large" |
|
|
|
|
:title="item.name" |
|
|
|
|
isLink |
|
|
|
|
right-icon="" |
|
|
|
|
v-for="(item,index) in addServiceList" |
|
|
|
|
@click="selectAddService(index)" |
|
|
|
|
> |
|
|
|
|
<template #value> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="" style="display:flex;align-items: center"> |
|
|
|
|
<view class=""> |
|
|
|
|
<u-text :text="parseFloat(item.price)+'元'" size="32" style="white-space: nowrap;" line-height="32"></u-text> |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<u-checkbox-group> |
|
|
|
|
<u-checkbox |
|
|
|
|
:customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}" |
|
|
|
|
size="32" |
|
|
|
|
:checked="item.checked" |
|
|
|
|
activeColor="#4DC3B8" |
|
|
|
|
iconSize="30" |
|
|
|
|
> |
|
|
|
|
</u-checkbox> |
|
|
|
|
</u-checkbox-group> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
</u-cell> |
|
|
|
|
</u-cell-group> |
|
|
|
|
<view class="row" style="padding-top:30rpx;"> |
|
|
|
|
<view class="col-6" style="padding:0 30rpx;"> |
|
|
|
|
<MzButton title="取消" @click="$refs.popup.close()"></MzButton> |
|
|
|
|
</view> |
|
|
|
|
<view class="col-6" style="padding:0 30rpx;"> |
|
|
|
|
<MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</uv-popup> |
|
|
|
|
|
|
|
|
|
<uv-popup ref="petPopup" mode="bottom" round="20" closeable safeAreaInsetTop safeAreaInsetBottom custom-style="position:relative;"> |
|
|
|
|
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;"> |
|
|
|
|
<view class="value col" style="position: relative;text-align: center;"> |
|
|
|
|
|
|
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
|
|
|
<view class="" style="position: relative;display:inline-block;"> |
|
|
|
|
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;">选择宠物</view> |
|
|
|
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="pop-service-container"> |
|
|
|
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;"> |
|
|
|
|
<u-cell |
|
|
|
|
size="large" |
|
|
|
|
:title="item.name" |
|
|
|
|
:label="item.type_name" |
|
|
|
|
isLink |
|
|
|
|
right-icon="" |
|
|
|
|
v-for="(item,index) in petList" |
|
|
|
|
@click="selectPet(index)" |
|
|
|
|
> |
|
|
|
|
<template #value> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="" style="display:flex;align-items: center"> |
|
|
|
|
<view class=""> |
|
|
|
|
<u-text :text="parseFloat(item.weight)+'KG'" size="32" style="white-space: nowrap;" line-height="32"></u-text> |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<u-checkbox-group> |
|
|
|
|
<u-checkbox |
|
|
|
|
:customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}" |
|
|
|
|
size="32" |
|
|
|
|
:checked="item.checked" |
|
|
|
|
activeColor="#4DC3B8" |
|
|
|
|
iconSize="30" |
|
|
|
|
> |
|
|
|
|
</u-checkbox> |
|
|
|
|
</u-checkbox-group> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
</u-cell> |
|
|
|
|
</u-cell-group> |
|
|
|
|
<view class="row" style="padding-top:30rpx;"> |
|
|
|
|
<view class="col-6" style="padding:0 30rpx;"> |
|
|
|
|
<MzButton title="取消" @click="$refs.petPopup.close()"></MzButton> |
|
|
|
|
</view> |
|
|
|
|
<view class="col-6" style="padding:0 30rpx;"> |
|
|
|
|
<MzButton title="确认" @click="addServiceConfirm" button-color="#4DC3B8" font-color="#fff"></MzButton> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</uv-popup> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { imghost } from '@/config/host.js'; |
|
|
|
|
import MzButton from "@/components/MzButton/Index.vue"; |
|
|
|
|
import {editPet} from "@/api/pet"; |
|
|
|
|
import {editPet, getDetail, getMyPets} from "@/api/pet"; |
|
|
|
|
import {getSTS} from "@/api/other"; |
|
|
|
|
import api from "@/utils/functions"; |
|
|
|
|
|
|
|
|
|
export default{ |
|
|
|
|
name:'PetPage', |
|
|
|
|
@ -222,60 +544,314 @@
|
|
|
|
|
type:Boolean, |
|
|
|
|
default:false, |
|
|
|
|
}, |
|
|
|
|
petId:{ |
|
|
|
|
type:Number, |
|
|
|
|
default:0, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
components:{ |
|
|
|
|
MzButton |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
petList:[], |
|
|
|
|
petCheckList:[], |
|
|
|
|
status:'loadmore', |
|
|
|
|
loading: true, |
|
|
|
|
buttonBackground:imghost+"/static/image/small-button-background.png", |
|
|
|
|
staticImage:{ |
|
|
|
|
closeIcon:imghost + '/static/image/close-icon.png', |
|
|
|
|
buttonBackground:imghost+'/static/image/small-button-background.png' |
|
|
|
|
}, |
|
|
|
|
homeList:[ |
|
|
|
|
{name:'是',value:1}, |
|
|
|
|
{name:'否',value:0}, |
|
|
|
|
], |
|
|
|
|
sexList:[ |
|
|
|
|
{name:'未知',value:0}, |
|
|
|
|
{name:'男',value:1}, |
|
|
|
|
{name:'女',value:2}, |
|
|
|
|
{name:'其他',value:9}, |
|
|
|
|
], |
|
|
|
|
petTypeList:[ |
|
|
|
|
{ |
|
|
|
|
label:'喵喵', |
|
|
|
|
value:'1', |
|
|
|
|
value:1, |
|
|
|
|
},{ |
|
|
|
|
label:'汪汪', |
|
|
|
|
value:'2', |
|
|
|
|
value:2, |
|
|
|
|
},{ |
|
|
|
|
label:'其他萌宠', |
|
|
|
|
value:'3', |
|
|
|
|
value:3, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
petTypeChecked:0, |
|
|
|
|
data:{ |
|
|
|
|
type:1, |
|
|
|
|
remarks :'', |
|
|
|
|
weight:1, |
|
|
|
|
sex_name:'未知', |
|
|
|
|
sex:0, |
|
|
|
|
is_home:0, |
|
|
|
|
is_home_name:'否', |
|
|
|
|
birthday:'', |
|
|
|
|
last_vaccine_time:'', |
|
|
|
|
last_insect_repellent_time:'', |
|
|
|
|
avatar:'', |
|
|
|
|
video:'', |
|
|
|
|
images:'', |
|
|
|
|
background_image:'' |
|
|
|
|
}, |
|
|
|
|
videoList:[], |
|
|
|
|
imagesList:[], |
|
|
|
|
backgroundList:[], |
|
|
|
|
avatarList:[], |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
let date = new Date(); |
|
|
|
|
let today = ''+date.getFullYear(); |
|
|
|
|
today += '-'+ (date.getMonth() + 1); |
|
|
|
|
today += '-'+ date.getDate(); |
|
|
|
|
console.log(today) |
|
|
|
|
console.log(date.getMonth()) |
|
|
|
|
this.data.birthday = this.data.last_vaccine_time = this.data.last_insect_repellent_time = today; |
|
|
|
|
if(this.petId!==0){ |
|
|
|
|
this.getDetail(this.petId) |
|
|
|
|
} |
|
|
|
|
if(this.type === 'lists'){ |
|
|
|
|
this.getMyPets() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
selectPetType(index){ |
|
|
|
|
this.petTypeChecked = index; |
|
|
|
|
delPetCheck(index){ |
|
|
|
|
this.petCheckList.splice(index,1); |
|
|
|
|
this.$emit('del',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": "" |
|
|
|
|
selectPet(index){ |
|
|
|
|
this.petList[index].checked = !this.petList[index].checked; |
|
|
|
|
}, |
|
|
|
|
addServiceConfirm(){ |
|
|
|
|
this.petList.map(item => { |
|
|
|
|
if(item.checked){ |
|
|
|
|
this.petCheckList.push(item); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.$refs.petPopup.close(); |
|
|
|
|
this.$emit('change',this.petCheckList) |
|
|
|
|
}, |
|
|
|
|
getMyPets(page = 1){ |
|
|
|
|
if (this.status === 'nomore') { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.status = 'loading'; |
|
|
|
|
getMyPets(page).then(data => { |
|
|
|
|
if (page === 1){ |
|
|
|
|
this.petList = data.data.map(item => { |
|
|
|
|
item.checked = false; |
|
|
|
|
return item; |
|
|
|
|
}); |
|
|
|
|
}else{ |
|
|
|
|
this.petList.push.apply(this.petList,data.data); |
|
|
|
|
} |
|
|
|
|
if (data.data.length < 10) { |
|
|
|
|
this.status = 'nomore'; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getDetail(id){ |
|
|
|
|
getDetail(id).then(res => { |
|
|
|
|
this.data = res.data; |
|
|
|
|
this.data.birthday = this.data.birthday.substr(0, 10); |
|
|
|
|
this.data.last_vaccine_time = this.data.last_vaccine_time.substr(0, 10); |
|
|
|
|
this.data.last_insect_repellent_time = this.data.last_insect_repellent_time.substr(0, 10); |
|
|
|
|
this.sexList.forEach(res=>{ |
|
|
|
|
if(res.value===this.data.sex){ |
|
|
|
|
this.data.sex_name = res.name; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.homeList.forEach(res=>{ |
|
|
|
|
if(res.value===this.data.is_home){ |
|
|
|
|
this.data.is_home_name = res.name; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.avatarList = res.data.avatar.split(',').map(item => { |
|
|
|
|
return {url:item}; |
|
|
|
|
}); |
|
|
|
|
this.imagesList = res.data.images.map(item => { |
|
|
|
|
return {url:item}; |
|
|
|
|
}); |
|
|
|
|
this.videoList = res.data.video.split(',').map(item => { |
|
|
|
|
return {url:item}; |
|
|
|
|
}); |
|
|
|
|
this.backgroundList = res.data.background_image.split(',').map(item => { |
|
|
|
|
return {url:item}; |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
async afterImgRead (event){ |
|
|
|
|
let lists = [].concat(event.file); |
|
|
|
|
|
|
|
|
|
let fileListLen = this.imagesList.length; |
|
|
|
|
lists.map((item) => { |
|
|
|
|
this.imagesList.push({ |
|
|
|
|
...item, |
|
|
|
|
status: 'uploading', |
|
|
|
|
message: '上传中', |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
for (let i = 0; i < lists.length; i++) { |
|
|
|
|
|
|
|
|
|
api.uploadOssFile(lists[i].url).then(res => { |
|
|
|
|
let item = this.imagesList[fileListLen]; |
|
|
|
|
this.imagesList.splice(fileListLen, 1, { |
|
|
|
|
...item, |
|
|
|
|
status: 'success', |
|
|
|
|
message: '', |
|
|
|
|
url: res.show_path, |
|
|
|
|
thumb: res.show_path, |
|
|
|
|
}); |
|
|
|
|
fileListLen++; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
async afterVideoRead (event){ |
|
|
|
|
let lists = [].concat(event.file); |
|
|
|
|
|
|
|
|
|
let fileListLen = this.videoList.length; |
|
|
|
|
lists.map((item) => { |
|
|
|
|
this.videoList.push({ |
|
|
|
|
...item, |
|
|
|
|
status: 'uploading', |
|
|
|
|
message: '上传中', |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
for (let i = 0; i < lists.length; i++) { |
|
|
|
|
|
|
|
|
|
api.uploadOssFile(lists[i].url).then(res => { |
|
|
|
|
let item = this.videoList[fileListLen]; |
|
|
|
|
this.videoList.splice(fileListLen, 1, { |
|
|
|
|
...item, |
|
|
|
|
status: 'success', |
|
|
|
|
message: '', |
|
|
|
|
url: res.show_path, |
|
|
|
|
thumb: res.show_path, |
|
|
|
|
}); |
|
|
|
|
fileListLen++; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
async afterAvatarRead (event){ |
|
|
|
|
let lists = [].concat(event.file); |
|
|
|
|
|
|
|
|
|
let fileListLen = this.avatarList.length; |
|
|
|
|
lists.map((item) => { |
|
|
|
|
this.avatarList.push({ |
|
|
|
|
...item, |
|
|
|
|
status: 'uploading', |
|
|
|
|
message: '上传中', |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
for (let i = 0; i < lists.length; i++) { |
|
|
|
|
|
|
|
|
|
api.uploadOssFile(lists[i].url).then(res => { |
|
|
|
|
let item = this.avatarList[fileListLen]; |
|
|
|
|
this.avatarList.splice(fileListLen, 1, { |
|
|
|
|
...item, |
|
|
|
|
status: 'success', |
|
|
|
|
message: '', |
|
|
|
|
url: res.show_path, |
|
|
|
|
thumb: res.show_path, |
|
|
|
|
}); |
|
|
|
|
fileListLen++; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
async afterBackgroundRead (event){ |
|
|
|
|
let lists = [].concat(event.file); |
|
|
|
|
|
|
|
|
|
let fileListLen = this.backgroundList.length; |
|
|
|
|
lists.map((item) => { |
|
|
|
|
this.backgroundList.push({ |
|
|
|
|
...item, |
|
|
|
|
status: 'uploading', |
|
|
|
|
message: '上传中', |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
for (let i = 0; i < lists.length; i++) { |
|
|
|
|
|
|
|
|
|
api.uploadOssFile(lists[i].url).then(res => { |
|
|
|
|
let item = this.backgroundList[fileListLen]; |
|
|
|
|
this.backgroundList.splice(fileListLen, 1, { |
|
|
|
|
...item, |
|
|
|
|
status: 'success', |
|
|
|
|
message: '', |
|
|
|
|
url: res.show_path, |
|
|
|
|
thumb: res.show_path, |
|
|
|
|
}); |
|
|
|
|
fileListLen++; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// editPet(data).then(res => { |
|
|
|
|
// console.log(res) |
|
|
|
|
// }) |
|
|
|
|
getSTS({}).then(res => { |
|
|
|
|
console.log(res) |
|
|
|
|
}, |
|
|
|
|
deleteImg(event){ |
|
|
|
|
this.imagesList.splice(event.index, 1); |
|
|
|
|
}, |
|
|
|
|
deleteVideo(event){ |
|
|
|
|
this.videoList.splice(event.index, 1); |
|
|
|
|
}, |
|
|
|
|
deleteAvatar(event){ |
|
|
|
|
this.avatarList.splice(event.index, 1); |
|
|
|
|
}, |
|
|
|
|
deleteBackground(event){ |
|
|
|
|
this.backgroundList.splice(event.index, 1); |
|
|
|
|
}, |
|
|
|
|
homeSelect(e){ |
|
|
|
|
this.data.is_home_name = e.value[0].name; |
|
|
|
|
this.data.is_home = e.value[0].value; |
|
|
|
|
}, |
|
|
|
|
sexSelect(e){ |
|
|
|
|
this.data.sex_name = e.value[0].name; |
|
|
|
|
this.data.sex = e.value[0].value; |
|
|
|
|
}, |
|
|
|
|
formatter(type, value) { |
|
|
|
|
if (type === 'year') { |
|
|
|
|
return `${value}年` |
|
|
|
|
} |
|
|
|
|
if (type === 'month') { |
|
|
|
|
return `${value}月` |
|
|
|
|
} |
|
|
|
|
if (type === 'day') { |
|
|
|
|
return `${value}日` |
|
|
|
|
} |
|
|
|
|
return value |
|
|
|
|
}, |
|
|
|
|
birthdayConfirm(e){ |
|
|
|
|
this.data.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd'); |
|
|
|
|
}, |
|
|
|
|
vaccineConfirm(e){ |
|
|
|
|
this.data.last_vaccine_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd'); |
|
|
|
|
}, |
|
|
|
|
insectRepellentConfirm(e){ |
|
|
|
|
this.data.last_insect_repellent_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd'); |
|
|
|
|
}, |
|
|
|
|
selectPetType(value){ |
|
|
|
|
this.data.type = value; |
|
|
|
|
}, |
|
|
|
|
submit(){ |
|
|
|
|
this.data.avatar = this.avatarList.map(item => { |
|
|
|
|
return item.url; |
|
|
|
|
}).join(','); |
|
|
|
|
this.data.video = this.videoList.map(item => { |
|
|
|
|
return item.url; |
|
|
|
|
}).join(','); |
|
|
|
|
this.data.background_image = this.backgroundList.map(item => { |
|
|
|
|
return item.url; |
|
|
|
|
}).join(','); |
|
|
|
|
this.data.images = this.imagesList.map(item => { |
|
|
|
|
return item.url; |
|
|
|
|
}).join(','); |
|
|
|
|
editPet(this.data).then(res => { |
|
|
|
|
api.success('添加成功'); |
|
|
|
|
uni.navigateBack(); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
