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(((type === 'pet')?'/pages/PetDetail/index?id=':'/pages/FeedLog/index?type=detail&pet_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>
		<u-loadmore :status="status" fontSize="28"
								color="#ACB4B6"
								line
								line-color="#ACB4B6"
								marginBottom="30" marginTop="30" @loadmore="getMyPets()"/>
	</view>

  <view class="footer-menu row">
    <!--   <view class="footer-button col-6">-->
    <!--     <MzButton-->
    <!--         title="管理"-->
    <!--         button-color="#ffffff"-->
    <!--         font-color="##262626"-->
    <!--         button-width="250rpx"-->
    <!--     >-->
    <!--     </MzButton>-->
    <!--   </view>-->
    <view class="footer-button col-12"
          @click="navTo('/pages/Pet/create')">
      <MzButton
          title="新增萌宠"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="100%"
          style="width:90%;"
      >
      </MzButton>
    </view>
  </view>
<!--  <view class="right-nav row" v-if="type === 'pet'">-->
<!--    <view class="right-nav-button col-12" :style="{backgroundImage:'url('+staticImage.addPet+')'}" @click="navTo('/pages/Pet/create')"></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 {
        type:'pet',
				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"
			}
		},
		onLoad(option) {
      this.type = option.type || 'pet';
      this.title = this.type === 'pet' ? '萌宠画册' : '喂养档案'
		},
    onShow() {
      this.currentPage = 1;
      this.status = 'loadmore';
      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/index.scss';
</style>