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