pet_uni/pages/Pet/create.vue

<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 + '/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",
        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>