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.
128 lines
3.0 KiB
128 lines
3.0 KiB
<template> |
|
<view class="body-background" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"></view> |
|
<HeaderNav :title="title" :is-back="true"></HeaderNav> |
|
<view class="app-wallpaper"> |
|
<view class="detail-container"> |
|
<view class="detail-content-container"> |
|
<view class="detail-content"> |
|
<PetPage :pet-id="id"></PetPage> |
|
</view> |
|
</view> |
|
<view class="detail-background-container"> |
|
<view class="detail-background"></view> |
|
</view> |
|
</view> |
|
|
|
</view> |
|
|
|
<view class="right-nav row"> |
|
<view class="right-nav-button col-12" :style="{backgroundImage:'url('+staticImage.addPet+')'}"></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 {getMyPets} from "@/api/pet"; |
|
import PetPage from '../../components/PetPage/Index.vue'; |
|
export default { |
|
components: { |
|
PetPage, |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
title: '', |
|
loading: true, |
|
staticImage: { |
|
screenActiveImg: imghost + '/order-screen-active.png', |
|
orderCardBackground: imghost + '/order-card-background.png', |
|
wallpaperBgImage:imghost +'/background.png', |
|
petGun:imghost +'/pet_gun.png', |
|
addPet:imghost +'/add-pet.png', |
|
}, |
|
indexBanner: [{ |
|
image: imghost + '/banner.png', |
|
url: '', |
|
}], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
|
|
currentPage:1, |
|
petImage: imghost + '/pet_avatar1.jpeg', |
|
petList:[], |
|
status:"loadmore", |
|
type:"create", |
|
id:0, |
|
} |
|
}, |
|
onLoad(option) { |
|
this.type = option.id ?"edit": "create"; |
|
this.id = option.id || 0; |
|
if(this.id !== 0){ |
|
this.title = '修改萌宠'; |
|
}else{ |
|
this.title = '添加萌宠'; |
|
} |
|
this.getMyPets(); |
|
}, |
|
methods: { |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
getMyPets(page = 1){ |
|
if (this.status === 'nomore') { |
|
return; |
|
} |
|
this.status = 'loading'; |
|
getMyPets(page).then(data => { |
|
if (page === 1){ |
|
this.petList = data.data; |
|
}else{ |
|
this.petList.push.apply(this.petList,data.data); |
|
} |
|
if (data.data.length < 10) { |
|
this.status = 'nomore'; |
|
} |
|
}); |
|
} |
|
}, |
|
onReachBottom() { |
|
this.getMyPets(++this.currentPage); |
|
}, |
|
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/create.scss'; |
|
</style> |