396316021
/
pet_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
63 Commits
1 Branch
0 Tags
8.0 MiB
 
 
 
Tree: 83833b6ff5
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '83833b6ff5'
${ noResults }
pet_uni/pages/PetDetail/index.vue

313 lines
9.9 KiB
Raw Blame History

<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">
{{ pet.last_vaccine_time !== null ? $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">
{{ pet.last_vaccine_time !== null ? $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" v-if="item !== ''">
<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>