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.sn}}
					</view>

					<view class="item-status">
						<uni-tag type="success" style="background: #57B03D;border-radius: 20px;" :text="i18('充电完成')" v-if="item.status == 1"></uni-tag>
						<uni-tag type="success" style=";border-radius: 20px;" :text="i18('正在充电')" v-if="item.status == 0"></uni-tag>
					</view>
				</view>
				<view class="item-body">
					<view class="item-time">{{i18('充电时间')}}：{{item.createTime}}</view>
					<view class="item-time" v-if="item.status == 1">{{i18('结束时间')}}：{{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'
  import i18 from '@/utils/i18.js'
  export default {
    data() {
      return {
        startText:"more",
        search:{
          pageNum:1,
          pageSize:6,
          reasonable:true,
        },
        contentText: {
          contentdown: i18('点击查看更多'),
          contentrefresh: i18('加载中'),
          contentnomore: i18('没有更多'),
        },
        chargeList: [],
      }
    },
    onShow(){
      uni.setNavigationBarTitle({
        title: this.$t('page.chargerecord')
      })
    },
    methods: {
      i18(text){
        return i18(text)
      },
      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-image: url('../../../static/images/new/starts/bg1.jpg'); */
		background-color: #030303;
		background-size: cover;
		background-repeat: no-repeat;
		inset: 0;
		height: 100%;
		width: 100%;
		/* position: absolute; */
	}

	.list-item {
		margin: 0vw;
	
	}

	.item {
		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
		border-radius: 4px;
		margin: 0 0 1vw 0;
		padding: 4vw;
		background: linear-gradient(#000000eb, #000000);
		color: aliceblue;
		
	}

	.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;
		color: aliceblue;
	}

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