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
10 KiB
313 lines
10 KiB
1 year ago
|
<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">
|
||
|
|
{{ pet.birthday.substr(0, 10) }}
|
||
|
|
</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-if="pet.sex === 2">女</span>
|
||
|
|
<span v-else>保密</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="content-item row">
|
||
|
|
<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.substr(0, 10) }}
|
||
|
|
</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_insect_repellent_time.substr(0, 10) }}
|
||
|
|
</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 + '/static/image/order-screen-active.png',
|
||
|
|
orderCardBackground: imghost + '/static/image/order-card-background.png',
|
||
|
|
wallpaperBgImage:imghost +'/static/image/background.png',
|
||
|
|
petGun:imghost +'/static/image/pet_gun.png',
|
||
|
|
petName:imghost +'/static/image/pet-detail-name.png',
|
||
|
|
petType:imghost +'/static/image/pet-detail-type.png',
|
||
|
|
petBirth:imghost +'/static/image/pet-detail-birthday.png',
|
||
|
|
petSex:imghost +'/static/image/pet-detail-sex.png',
|
||
|
|
petYm:imghost +'/static/image/pet-detail-ym.png',
|
||
|
|
petQc:imghost +'/static/image/pet-detail-qc.png',
|
||
|
|
petHome:imghost +'/static/image/pet-detail-home.png',
|
||
|
|
petBs:imghost +'/static/image/pet-detail-bs.png',
|
||
|
|
petVideoTitle:imghost +'/static/image/pet-detail-video-title.png',
|
||
|
|
petPhotoTitle:imghost +'/static/image/pet-detail-photo-title.png',
|
||
|
|
},
|
||
|
|
indexBanner: [{
|
||
|
|
image: imghost + '/static/image/banner.png',
|
||
|
|
url: '',
|
||
|
|
}],
|
||
|
|
user: {
|
||
|
|
avatar: imghost + '/static/image/banner.png',
|
||
|
|
nickname: '清晨的风',
|
||
|
|
coupons: 221,
|
||
|
|
id: 88685
|
||
|
|
},
|
||
|
|
isTop: false,
|
||
|
|
pagePadding: 100,
|
||
|
|
petImage: imghost + '/static/image/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>
|