9 changed files with 530 additions and 73 deletions
@ -0,0 +1,106 @@ |
|||||||
|
.order-item.pet-page-item{ |
||||||
|
padding:{ |
||||||
|
left:0 !important; |
||||||
|
right:0 !important; |
||||||
|
} |
||||||
|
border-bottom: none !important; |
||||||
|
} |
||||||
|
.pet-page-group{ |
||||||
|
margin-top:20rpx; |
||||||
|
padding:0 20rpx; |
||||||
|
background:{ |
||||||
|
color:#F3FDFC; |
||||||
|
} |
||||||
|
border-radius: 20rpx; |
||||||
|
} |
||||||
|
.pet-page-button{ |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
padding:55rpx 0 15rpx 0; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.order-item { |
||||||
|
padding: 25rpx 10rpx; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1rpx solid #BBB; |
||||||
|
box-sizing: border-box; |
||||||
|
&:last-child { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
.item-content { |
||||||
|
justify-content: flex-end; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
.detail-container{ |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
.detail-background-container{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding:0 10rpx; |
||||||
|
position: absolute; |
||||||
|
top:0rpx; |
||||||
|
left:0; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
.detail-background{ |
||||||
|
position: relative; |
||||||
|
// top:10rpx; |
||||||
|
left:0; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
z-index: 1; |
||||||
|
background-color: #fff; |
||||||
|
border: 2rpx solid #262626; |
||||||
|
box-shadow: 1rpx 4rpx 6rpx 0rpx rgba(103,131,131,0.3); |
||||||
|
border-radius: 50rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.detail-content-container{ |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
padding:15rpx 0; |
||||||
|
.detail-content{ |
||||||
|
border: 2rpx solid #262626; |
||||||
|
border-radius: 50rpx; |
||||||
|
background-color:#fff; |
||||||
|
padding:40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.detail-container{ |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
.detail-background-container{ |
||||||
|
box-sizing: border-box; |
||||||
|
padding:0 10rpx; |
||||||
|
position: absolute; |
||||||
|
top:0rpx; |
||||||
|
left:0; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
.detail-background{ |
||||||
|
position: relative; |
||||||
|
// top:10rpx; |
||||||
|
left:0; |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
z-index: 1; |
||||||
|
background-color: #fff; |
||||||
|
border: 2rpx solid #262626; |
||||||
|
box-shadow: 1rpx 4rpx 6rpx 0rpx rgba(103,131,131,0.3); |
||||||
|
border-radius: 50rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.detail-content-container{ |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
padding:15rpx 0; |
||||||
|
.detail-content{ |
||||||
|
border: 2rpx solid #262626; |
||||||
|
border-radius: 50rpx; |
||||||
|
background-color:#fff; |
||||||
|
padding:40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,127 @@ |
|||||||
|
<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></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 + '/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', |
||||||
|
addPet:imghost +'/static/image/add-pet.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, |
||||||
|
currentPage:1, |
||||||
|
petImage: imghost + '/static/image/pet_avatar1.jpeg', |
||||||
|
petList:[], |
||||||
|
status:"loadmore", |
||||||
|
type:"create", |
||||||
|
} |
||||||
|
}, |
||||||
|
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> |
||||||
Loading…
Reference in new issue