pet_uni/pages/Pet/index.vue

<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" v-for="(item,index) in petList" @click="navTo('/pages/PetDetail/index?id=' + item.id)">
          <view v-show="index!==0" 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="item.avatar" mode="aspectFill" />
                  </view>
								</view>
								<view class="order-card-right col row">
                  <view class="col">
                    <view class="name ">{{ item.name }}</view>
                    <view class="old">{{ item.age }}岁</view>
                  </view>
                  <view class="col">
                    <view class="type">{{ item.type_name }}</view>
                    <view class="weight">{{ item.weight }}kg</view>
                  </view>
								</view>

							</view>
						</view>
					</view>
				</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";
	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',
          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:[]
			}
		},
		onLoad() {
			this.getMyPets();
		},
		methods: {
      navTo(url){
        wx.navigateTo({
          url:url
        })
      },
			getMyPets(page = 1){
				getMyPets(page).then(data => {
					if (page === 1){
						this.petList = data.data;
					}else{
						this.petList.push.apply(this.petList,data.data);
					}
				})
			}
		},
		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/index.scss';
</style>