techtron/pages/weitiandi/device/chargerecord.vue

<template>
	<view class="container">
		<view class="list-item">

			<view class="item" v-for="item in chargeList">
				<view class="item-header">
					<view class="item-title">
						{{item.deviceId}}
					</view>

					<view class="item-status">
						<uni-tag type="success" style="background: #0E9F9B" text="充电完成" v-if="item.status == 1"></uni-tag>
						<uni-tag type="success"  text="正在充电" v-if="item.status == 0"></uni-tag>
					</view>
				</view>
				<view class="item-body">
					<view class="item-time">充电时间：{{item.createTime}}</view>
					<view class="item-time" v-if="item.status == 1">结束时间：{{item.endTime}}</view>
				</view>
			</view>
      <uni-load-more @clickLoadMore="getMore" :content-text="contentText" :status="startText"></uni-load-more>


    </view>
	</view>
</template>

<script>
  import { listCharge } from '@/api/device/chargerecord.js'

  export default {
    data() {
      return {
        startText:"more",
        search:{
          pageNum:1,
          pageSize:6,
          reasonable:true,
        },
        contentText: {
          contentdown: '点击查看更多',
          contentrefresh: '加载中',
          contentnomore: '没有更多'
        },
        chargeList: [],
      }
    },
    methods: {
      getMore(){
        this.search.pageNum++;
        this.chargeRecord();
      },
       chargeRecord() {
          this.startText = "loading"
         listCharge(this.search).then(res=>{
           if(res.data.length == 0){
             this.$modal.showToast("没有更多数据了");
             this.startText = "no-more"
           }else{
             this.startText = "more"
             this.chargeList =  this.chargeList.concat(res.data);

           }

         })
      }
    },
    created() {
      this.chargeRecord();
    }
  }
</script>

<style>
	.container {
		background: rgb(249, 252, 255);
		inset: 0;
		position: absolute;
	}

	.list-item {
		margin: 0vw;
	}

	.item {
		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
		border-radius: 4px;
		background: #FFFFFF;
		margin: 4vw;
		padding: 4vw;
	}

	.item-title {
		display: inline-block;
		float: left;
	}

	.item-status {
		display: inline-block;
		float: right;
	}

	.item-header {
		border-bottom: 1px solid lightgray;
		height: 5vh;
	}

	.item-body {
		padding-top: 4vw;
	}

	.item-time {
		color: #545454;
		font-size: 12px;
		margin-bottom: 4px
	}
</style>