pet_uni/pages/Draw/list.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">
          <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.goods_name }}*{{ item.number }}</view>
                  <view class="old">{{ item.draw_name }}</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 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";
import {listDraw} from "@/api/draw";

export default {
  components: {
    HeaderNav,
    FooterNav,
    RightNav,
    MzButton
  },
  data() {
    return {
      type: 'pet',
      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"
    }
  },
  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';
      listDraw(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/list.scss';
</style>