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.
977 lines
31 KiB
977 lines
31 KiB
<template> |
|
<view class="pet-page-container" :style="{width:buttonWidth}" v-if="typeData === 'create'"> |
|
<view class="pet-page-capsule-container row"> |
|
<view class="pet-page-capsule col-4" v-for="(item,index) in petTypeList" |
|
:class="{active:(item.value === data.type)}" @click="selectPetType(item.value)"> |
|
{{item.label}} |
|
</view> |
|
</view> |
|
</view> |
|
<view class="pet-page-group row" v-if="typeData === 'create'"> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
<text style="color: red;">*</text>宝贝姓名 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-input border="none" v-model="data.name" inputAlign="right" placeholder="请输入"></u-input> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
<text style="color: red;">*</text>宝贝品种 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-input border="none" v-model="data.type_name" inputAlign="right" placeholder="请输入"></u-input> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title"> |
|
<text style="color: red;">*</text> 宝贝体重(KG) |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<uv-number-box border="none" v-model="data.weight" :min="1" :max="1000"></uv-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="data.birthday || '请选择'" |
|
size="28" |
|
color="#636363" |
|
icon-style="font-size:30" |
|
line-height="30" |
|
@click="$refs.birthdayPicker.open()" |
|
></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="data.sex_name || '请选择'" |
|
size="28" |
|
color="#636363" |
|
icon-style="font-size:30" |
|
line-height="30" |
|
@click="$refs.pickerSex.open()" |
|
></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row" v-if="data.type === 2"> |
|
<view class="item-title"> |
|
最近狂犬疫苗时间 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-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> |
|
<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="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> |
|
<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="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"> |
|
<text style="color: red;">*</text>健康状况 |
|
</view> |
|
<view class="item-content row col"> |
|
<view class="item-content-text"> |
|
<u-text |
|
suffix-icon="arrow-right" |
|
:text="data.is_health_name || '请选择'" |
|
size="28" |
|
color="#636363" |
|
icon-style="font-size:30" |
|
line-height="30" |
|
@click="$refs.pickerHealth.open()" |
|
></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
<text style="color: red;">*</text>过往病史 <text style="color: #999;font-size:26rpx;">(无请输入"无")</text> |
|
</view> |
|
<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" |
|
border="none" |
|
></u-textarea> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="order-item row"> |
|
<view class="item-title" style="padding-bottom:30rpx;"> |
|
<text style="color: red;">*</text>攻击性行为 <text style="color: #999;font-size:26rpx;">(无请输入"无")</text> |
|
</view> |
|
<view class="item-content row"> |
|
<view class="item-content-text row"> |
|
<u-textarea |
|
placeholder="请输入" |
|
v-model="data.attack" |
|
size="28" |
|
color="#636363" |
|
line-height="30" |
|
height="100" |
|
border="none" |
|
></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-textarea |
|
placeholder="请输入" |
|
v-model="data.other" |
|
size="28" |
|
color="#636363" |
|
line-height="30" |
|
height="100" |
|
border="none" |
|
></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"> |
|
<uv-upload |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="avatarList" |
|
name="img" |
|
multiple |
|
:maxCount="1" |
|
:previewFullImage="true" |
|
uploadIcon="plus" |
|
@afterRead="afterAvatarRead" |
|
@delete="deleteAvatar" |
|
></uv-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"> |
|
<uv-upload |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="imagesList" |
|
name="img" |
|
multiple |
|
:maxCount="10" |
|
:previewFullImage="true" |
|
uploadIcon="plus" |
|
@afterRead="afterImgRead" |
|
@delete="deleteImg" |
|
></uv-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="160rpx"--> |
|
<!-- height="160rpx"--> |
|
<!-- :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"> |
|
<view class="item-content-text row"> |
|
<uv-upload |
|
accept="video" |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="videoList" |
|
name="img" |
|
multiple |
|
:maxCount="1" |
|
:previewFullImage="true" |
|
uploadIcon="plus" |
|
@afterRead="afterVideoRead" |
|
@delete="deleteVideo" |
|
></uv-upload> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="pet-list" v-if="typeData === '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:0;top:0;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-6" style="justify-content: center;" v-if="typeData === 'lists'"> |
|
<view class="" style="display: inline-block;"> |
|
<MzButton |
|
title="选择萌宠" |
|
button-color="#FFFFFF" |
|
font-color="#262626" |
|
button-width="300rpx" |
|
class="" |
|
@click="openPet" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<view class="col-6" style="justify-content: center;" v-if="typeData === 'lists'"> |
|
<view class="" style="display: inline-block;"> |
|
<MzButton |
|
title="添加萌宠" |
|
button-color="#4DC3B8" |
|
font-color="#fff" |
|
button-width="300rpx" |
|
class="" |
|
@click="typeData = 'create'" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<view class="col-6" v-if="typeData === 'create' && showCancel"> |
|
<MzButton |
|
title="取消" |
|
button-color="#FFFFFF" |
|
font-color="#262626" |
|
button-width="300rpx" |
|
class="" |
|
@click="typeData = 'lists'" |
|
> |
|
</MzButton> |
|
</view> |
|
<view class="col-6" v-if="typeData === 'create'"> |
|
<MzButton |
|
title="保存" |
|
button-color="#4DC3B8" |
|
font-color="#fff" |
|
button-width="300rpx" |
|
class="" |
|
@click="submit" |
|
> |
|
</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="year-month" |
|
minDate="2000-01-01" |
|
@confirm="vaccineConfirm" |
|
></uv-datetime-picker> |
|
<uv-datetime-picker |
|
:value="data.last_insect_repellent_time" |
|
ref="insectRepellentPicker" |
|
mode="year-month" |
|
minDate="2000-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="[homeList]" ref="pickerHealth" key-name="name" title="是否健康" round="20rpx" @confirm="healthSelect"></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" style="min-height:500rpx;position:relative;"> |
|
<view class="" style="width:100%;padding-bottom:114rpx;"> |
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-if="petList.length>0"> |
|
<u-cell |
|
size="large" |
|
:title="item.name" |
|
isLink |
|
right-icon="" |
|
v-for="(item,index) in petList" |
|
> |
|
<template #value> |
|
<view class="" @click="selectPet(index)"> |
|
<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 @change="petCheckChange"> |
|
<u-checkbox |
|
:name="index" |
|
: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> |
|
<template #title> |
|
<u-text size="32" :text="item.name" @click="selectPet(index)"></u-text> |
|
</template> |
|
<template #label> |
|
<u-text :text="item.type_name" size="28" @click="selectPet(index)"></u-text> |
|
<view style="display: inline-block;"> |
|
<u-text text="编辑资料" size="28" color="#4DC3B8" suffix-icon="arrow-right" icon-style="font-size:28rpx;color:#4DC3B8;" @click="api.navTo('/pages/Pet/create?id='+item.id)"></u-text> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-else> |
|
<u-cell |
|
size="large" |
|
title="暂无宠物" |
|
> |
|
</u-cell> |
|
</u-cell-group> |
|
</view> |
|
<view class="row" style="position:absolute;bottom:0;width:100%;padding-top:30rpx;" v-if="petList.length>0"> |
|
<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, getDetail, getMyPets} from "@/api/pet"; |
|
import {getSTS} from "@/api/other"; |
|
import api from "@/utils/functions"; |
|
|
|
export default{ |
|
name:'PetPage', |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
}, |
|
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:true, |
|
}, |
|
petId:{ |
|
type:Number, |
|
default:0, |
|
}, |
|
}, |
|
components:{ |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
typeData: this.type, |
|
petList:[], |
|
petCheckList:[], |
|
status:'loadmore', |
|
loading: true, |
|
buttonBackground:imghost+"/small-button-background.png", |
|
staticImage:{ |
|
closeIcon:imghost + '/close-icon.png', |
|
buttonBackground:imghost+'/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, |
|
},{ |
|
label:'汪汪', |
|
value:2, |
|
},{ |
|
label:'其他萌宠', |
|
value:3, |
|
}, |
|
], |
|
data:{ |
|
type:1, |
|
remarks :'', |
|
weight:1, |
|
sex_name:'未知', |
|
sex:0, |
|
is_home:0, |
|
is_home_name:'否', |
|
is_health:0, |
|
is_health_name:'否', |
|
birthday:'', |
|
last_vaccine_time:'', |
|
last_insect_repellent_time:'', |
|
avatar:'', |
|
video:'', |
|
images:'', |
|
background_image:'', |
|
other:'', |
|
attack:'', |
|
}, |
|
videoList:[], |
|
imagesList:[], |
|
backgroundList:[], |
|
avatarList:[], |
|
} |
|
}, |
|
mounted() { |
|
this.data.birthday = uni.$u.timeFormat(null,'yyyy-mm-dd'); |
|
// this.data.last_insect_repellent_time = this.data.last_vaccine_time = uni.$u.timeFormat(null,'yyyy-mm'); |
|
if(this.petId!==0){ |
|
this.getDetail(this.petId) |
|
} |
|
if(this.typeData === 'lists'){ |
|
this.getMyPets() |
|
} |
|
}, |
|
methods: { |
|
api() { |
|
return api |
|
}, |
|
closePop(){ |
|
this.$refs.petPopup.close(); |
|
}, |
|
openPet(){ |
|
this.status = 'loadmore'; |
|
this.getMyPets(); |
|
this.$refs.petPopup.open() |
|
}, |
|
petCheckChange(e){ |
|
console.log(e) |
|
this.petList[e].checked = !this.petList[e].checked; |
|
}, |
|
delPetCheck(index){ |
|
this.petCheckList.splice(index,0); |
|
this.$emit('del',index) |
|
}, |
|
selectPet(index){ |
|
this.petList[index].checked = !this.petList[index].checked; |
|
}, |
|
addServiceConfirm(){ |
|
let list = []; |
|
this.petList.map(item => { |
|
if(item.checked){ |
|
list.push(item); |
|
} |
|
}) |
|
this.petCheckList = list; |
|
this.$refs.petPopup.close(); |
|
this.$emit('change',this.petCheckList) |
|
}, |
|
getMyPets(page = 1){ |
|
if (this.status === 'nomore') { |
|
return; |
|
} |
|
this.status = 'loading'; |
|
uni.showLoading('加载中'); |
|
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'; |
|
} |
|
uni.hideLoading(); |
|
}); |
|
}, |
|
getDetail(id){ |
|
getDetail(id).then(res => { |
|
this.data = res.data; |
|
this.data.birthday = uni.$u.timeFormat(this.data.birthday,'yyyy-mm-dd'); |
|
this.data.last_vaccine_time = this.data.last_vaccine_time ? uni.$u.timeFormat(this.data.last_vaccine_time,'yyyy-mm'):''; |
|
this.data.last_insect_repellent_time = this.data.last_insect_repellent_time?uni.$u.timeFormat(this.data.last_insect_repellent_time,'yyyy-mm'):''; |
|
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; |
|
} |
|
if(res.value===this.data.is_health){ |
|
this.data.is_health_name = res.name; |
|
} |
|
}); |
|
this.avatarList = res.data.avatar && res.data.avatar.split(',').map(item => { |
|
return {url:item}; |
|
}); |
|
|
|
if((res.data.images && res.data.images.length > 0)){ |
|
this.imagesList = res.data.images.map(item => { |
|
return {url:item}; |
|
}); |
|
} |
|
|
|
this.videoList = res.data.video && res.data.video.split(',').map(item => { |
|
return {url:item}; |
|
}); |
|
this.backgroundList = res.data.background_image && 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++; |
|
}) |
|
} |
|
}, |
|
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; |
|
}, |
|
healthSelect(e){ |
|
this.data.is_health_name = e.value[0].name; |
|
this.data.is_health = 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'); |
|
}, |
|
insectRepellentConfirm(e){ |
|
this.data.last_insect_repellent_time = uni.$u.timeFormat(e.value, 'yyyy-mm'); |
|
}, |
|
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('添加成功'); |
|
if(this.autoBack){ |
|
uni.navigateBack(); |
|
}else{ |
|
this.typeData = 'lists'; |
|
this.getMyPets(); |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |