Month: August 2022

1.页面排版

<template>
 <view>
     <view class="body">
         <view v-for="(item,index) in list" :key="index">
             <view class="card">
                 <view class="title">
                     <text>燃气编号：{{ item.gas_number }}</text>
                     <text class="orgen">{{ item.default }}</text>
                 </view>
                 <view class="main">
                     <text>{{ item.rela_name }}<text class="padding-left">{{ item.phone }}</text></text>
                     <text>地址：{{ item.address }}</text>
                 </view>
             </view>
         </view>
         <view v-if="list.length == 0">
             <emptyPage title="暂无绑定记录"></emptyPage>
         </view>
     </view>
 </view>
</template>

2.分页加载逻辑模板

<script>
import {
 toLogin
} from '@/libs/login.js';
import {
 userBindGasList
} from '@/api/user.js';
import emptyPage from '@/components/emptyPage.vue';
export default {
 components: {
     emptyPage
 },
  data() {
     return {
         list: [],
         page: 1,
         limit: 10,
         loading:true,
     }
  },
  onLoad(options) {
     this.getList(true);
  },
  onShow(){
     if (this.$store.getters.isLogin) {
           this.getList();
      } else {
         toLogin();
     }
  },
  methods: {
      getList(isRefresh){
          if(isRefresh){
             this.loading=true;
             this.page = 1;
             this.list = [];
         }
         if(!this.loading){
             return false;
         }
          this.loading = true;
          let data = {
              page:this.page,
             limit:this.limit,
          }
          userBindGasList(data)
              .then(res => {
                  this.loading = false;
                  this.loaded = res.data.list.length < this.limit;
                  this.list.push.apply(this.list, res.data.list);
                  this.page = this.page + 1;
              })
              .catch(err => {
                  this.$util.Tips({
                      title: err
                  })
              });
      },
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
          this.getList();
      },
  }
}
</script>

3. 页面样式

<style lang="scss">
.body {
 padding: 30rpx 30rpx;
 margin-bottom: 150rpx;
 .unbind {
     display: flex;
     justify-content: space-between;
     color: #777777;
     padding: 0 30rpx 30rpx 30rpx;

     .orgen {
         color: #feae35;
     }
 }

 .card {
     background: #fff;
     padding: 30rpx 30rpx;
     color: #373945;
     border-radius: 20rpx;
     margin-bottom: 30rpx;

     .title {
         display: flex;
         justify-content: space-between;
         border-bottom: 1rpx solid #dcdcdc;
         padding-bottom: 20rpx;

         .orgen {
             color: #fea716;
         }
     }

     .main {
         display: flex;
         flex-direction: column;
         padding: 30rpx 0 0rpx 0;
         line-height: 50rpx;

         .padding-left {
             padding-left: 40rpx;
         }
     }
 }
}
</style>