|
|
|
|
<template>
|
|
|
|
|
<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:(item.value === data.type)}" @click="selectPetType(item.value)">
|
|
|
|
|
{{item.label}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<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 v-model="data.name" 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 v-model="data.type_name" 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 v-model="data.weight" :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="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">
|
|
|
|
|
<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" style="padding-bottom:30rpx;">
|
|
|
|
|
过往病史
|
|
|
|
|
</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"
|
|
|
|
|
></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="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"
|
|
|
|
|
:previewFullImage="true"
|
|
|
|
|
uploadIcon="plus"
|
|
|
|
|
@afterRead="afterImgRead"
|
|
|
|
|
@delete="deleteImg"
|
|
|
|
|
></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="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">
|
|
|
|
|
<u-upload
|
|
|
|
|
width="160"
|
|
|
|
|
height="160"
|
|
|
|
|
:fileList="videoList"
|
|
|
|
|
name="img"
|
|
|
|
|
multiple
|
|
|
|
|
:maxCount="1"
|
|
|
|
|
:previewFullImage="true"
|
|
|
|
|
uploadIcon="plus"
|
|
|
|
|
@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-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="添加萌宠"
|
|
|
|
|
button-color="#FFFFFF"
|
|
|
|
|
font-color="#262626"
|
|
|
|
|
button-width="300rpx"
|
|
|
|
|
class=""
|
|
|
|
|
@click="type = 'create'"
|
|
|
|
|
>
|
|
|
|
|
</MzButton>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="col-6" v-if="type === 'create' && showCancel">
|
|
|
|
|
<MzButton
|
|
|
|
|
title="取消"
|
|
|
|
|
button-color="#FFFFFF"
|
|
|
|
|
font-color="#262626"
|
|
|
|
|
button-width="300rpx"
|
|
|
|
|
class=""
|
|
|
|
|
@click="type = 'lists'"
|
|
|
|
|
>
|
|
|
|
|
</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>
|
|
|
|
|
<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, getDetail, getMyPets} from "@/api/pet";
|
|
|
|
|
import {getSTS} from "@/api/other";
|
|
|
|
|
import api from "@/utils/functions";
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
|
},{
|
|
|
|
|
label:'汪汪',
|
|
|
|
|
value:2,
|
|
|
|
|
},{
|
|
|
|
|
label:'其他萌宠',
|
|
|
|
|
value:3,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
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:[],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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: {
|
|
|
|
|
delPetCheck(index){
|
|
|
|
|
this.petCheckList.splice(index,1);
|
|
|
|
|
this.$emit('del',index)
|
|
|
|
|
},
|
|
|
|
|
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++;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@import './components/index.scss';
|
|
|
|
|
</style>
|
