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.
313 lines
9.8 KiB
313 lines
9.8 KiB
<template> |
|
<HeaderNav title="萌宠详情" :is-back="true"></HeaderNav> |
|
<view class="app-wallpaper" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"> |
|
|
|
<view class="order-screen-container row"> |
|
<view class="order-list-container"> |
|
<view class="order-list-item"> |
|
<view v-show="false" 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="pet.avatar" mode="aspectFill" /> |
|
</view> |
|
</view> |
|
<view class="order-card-right col row"> |
|
<view class="col"> |
|
<view class="name ">{{ pet.name }}</view> |
|
<view class="old">{{ pet.age }}岁</view> |
|
</view> |
|
<view class="col"> |
|
<view class="type">{{ pet.type_name }}</view> |
|
<view class="weight">{{ pet.weight }}kg</view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="pet-detail-bottom-container"> |
|
<view class="pet-detail-container"> |
|
<view class="pet-detail-gun col"> |
|
<image class="img" mode="heightFix" :src="staticImage.petGun"/> |
|
</view> |
|
<view class="pet-detail-content"> |
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petName"/> |
|
</view> |
|
<view class="item-title"> |
|
宝贝名字： |
|
</view> |
|
<view class="item-content"> |
|
{{ pet.name }} |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petType"/> |
|
</view> |
|
<view class="item-title"> |
|
宝贝品种： |
|
</view> |
|
<view class="item-content"> |
|
{{ pet.type_name }} |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petBirth"/> |
|
</view> |
|
<view class="item-title"> |
|
出生日期： |
|
</view> |
|
<view class="item-content"> |
|
{{ $u.timeFormat(pet.birthday, 'yyyy-mm-dd') }} |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petSex"/> |
|
</view> |
|
<view class="item-title"> |
|
宝贝性别： |
|
</view> |
|
<view class="item-content"> |
|
<span v-if="pet.sex === 1">弟弟</span> |
|
<span v-else-if="pet.sex === 2">妹妹</span> |
|
<span v-else>保密</span> |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row" v-if="pet.type === 2"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petYm"/> |
|
</view> |
|
<view class="item-title"> |
|
最近狂犬疫苗时间： |
|
</view> |
|
<view class="item-content"> |
|
{{ $u.timeFormat(pet.last_vaccine_time, 'yyyy-mm') }} |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petQc"/> |
|
</view> |
|
<view class="item-title"> |
|
最近驱虫时间 |
|
</view> |
|
<view class="item-content"> |
|
{{ $u.timeFormat(pet.last_insect_repellent_time, 'yyyy-mm') }} |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petHome"/> |
|
</view> |
|
<view class="item-title"> |
|
宝贝户口（犬证）： |
|
</view> |
|
<view class="item-content"> |
|
<span v-if="pet.is_home === 1">有</span> |
|
<span v-else>无</span> |
|
</view> |
|
</view> |
|
|
|
<view class="content-item row"> |
|
<view class="item-icon"> |
|
<image class="img" mode="widthFix" :src="staticImage.petBs"/> |
|
</view> |
|
<view class="item-title"> |
|
过往病史： |
|
</view> |
|
<view class="item-content item-textarea"> |
|
<span v-if="pet.remarks">{{ pet.remarks }}</span> |
|
<span v-else>无</span> |
|
</view> |
|
</view> |
|
|
|
<view class="content-item pet-detail-video-group"> |
|
<view class="video-title"> |
|
<image class="img" mode="heightFix" :src="staticImage.petVideoTitle"/> |
|
</view> |
|
<view class="video-content"> |
|
<view class="video-content-container"> |
|
<video class="img" mode="aspectFill" :src="pet.video"></video> |
|
</view> |
|
<view class="video-content-background"></view> |
|
</view> |
|
</view> |
|
<view class="content-item pet-detail-photo-group" v-if="pet.images.length > 0"> |
|
<view class="video-title"> |
|
<image class="img" mode="heightFix" :src="staticImage.petPhotoTitle"/> |
|
</view> |
|
<view class="video-content row" > |
|
<view class="photo-item col-4" v-for="(item, index) in pet.images" > |
|
<view class="photo-item-container"> |
|
<view class="photo-content"> |
|
<image class="img" mode="widthFix" :src="item ? item : staticImage.wallpaperBgImage"/> |
|
</view> |
|
<view class="photo-background"></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="pet-detail-background"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="footer-menu row"> |
|
<view class="footer-button col-6"> |
|
<MzButton |
|
title="删除" |
|
button-color="#ffffff" |
|
font-color="##262626" |
|
button-width="250rpx" |
|
@click="delPet()" |
|
> |
|
</MzButton> |
|
</view> |
|
<view class="footer-button col-6"> |
|
<MzButton |
|
title="修改" |
|
button-color="#4DC3B8" |
|
font-color="#FFFFFF" |
|
button-width="250rpx" |
|
@click="navTo('/pages/Pet/create?id='+id)" |
|
> |
|
</MzButton> |
|
</view> |
|
</view> |
|
<!-- <RightNav></RightNav> --> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import HeaderNav from '@/components/HeaderNav/Index.vue'; |
|
import FooterNav from '@/components/FooterNav/Index.vue'; |
|
import RightNav from '@/components/RightNav/Index.vue'; |
|
import MzButton from '@/components/MzButton/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
import {delPet, getDetail} from "@/api/pet"; |
|
import log from "@/utils/log"; |
|
import functions from "@/utils/functions.js"; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
title: 'Hello', |
|
loading: true, |
|
staticImage: { |
|
screenActiveImg: imghost + '/order-screen-active.png', |
|
orderCardBackground: imghost + '/order-card-background.png', |
|
wallpaperBgImage:imghost +'/background.png', |
|
petGun:imghost +'/pet_gun.png', |
|
petName:imghost +'/pet-detail-name.png', |
|
petType:imghost +'/pet-detail-type.png', |
|
petBirth:imghost +'/pet-detail-birthday.png', |
|
petSex:imghost +'/pet-detail-sex.png', |
|
petYm:imghost +'/pet-detail-ym.png', |
|
petQc:imghost +'/pet-detail-qc.png', |
|
petHome:imghost +'/pet-detail-home.png', |
|
petBs:imghost +'/pet-detail-bs.png', |
|
petVideoTitle:imghost +'/pet-detail-video-title.png', |
|
petPhotoTitle:imghost +'/pet-detail-photo-title.png', |
|
}, |
|
indexBanner: [{ |
|
image: imghost + '/banner.png', |
|
url: '', |
|
}], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
|
|
petImage: imghost + '/pet_avatar1.jpeg', |
|
orderCardList:[ |
|
{ |
|
title:'成都市武侯区丰德国际4栋...', |
|
tags:['刷毛','洗澡'], |
|
do_time:'2023/05/03 15—17时', |
|
create_time:'2023/03/03 15:23:22', |
|
}, |
|
{ |
|
title:'成都市武侯区丰德国际4栋...', |
|
tags:['刷毛','洗澡'], |
|
do_time:'2023/05/03 15—17时', |
|
create_time:'2023/03/03 15:23:22', |
|
}, |
|
], |
|
pet:{}, |
|
id:0, |
|
} |
|
}, |
|
onLoad(option) { |
|
log(option); |
|
this.id = option.id; |
|
this.getDetail(option.id); |
|
}, |
|
methods: { |
|
delPet(){ |
|
functions.confirm("确认删除该宠物吗？").then(() => { |
|
delPet(this.id).then((res) => { |
|
functions.success('删除成功').then(() => uni.navigateBack()) |
|
}) |
|
}) |
|
}, |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
getDetail(id){ |
|
getDetail(id).then(data => { |
|
this.pet = data.data; |
|
log(data); |
|
}) |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if(res.scrollTop <= 20){ |
|
uni.$emit('isTop', true); |
|
}else{ |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |