<template> <view class="box"> <view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item.id)"> <view class="time">{{item.CreateTime}}</view> <view class="carPlate"> <view class="plate">{{item.PlateNumber}}</view> <view class="mileage" v-if="item.currentMileage>0">{{item.currentMileage}}km</view> </view> <view class="shopName"v-if="item.carmodel">{{item.carmodel}}</view> <view class="itemContent">{{item.shopname}}</view> </view> <!-- 上拉 加载更多 --> <view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view> <!-- 无数据空白页 --> <nodata v-if="itemData.length==0"></nodata> </view> </template> <script> import nodata from '../../components/nodata/nodata.vue' export default { components: { nodata, }, data() { return { page: 1, itemData: [1, 2, 3], noMoreShow: false, } }, onLoad() { this.page = 1 this.myOrderCoupon() }, methods: { goDetail(id) { uni.navigateTo({ url: 'reportDetail?id=' + id }) }, myOrderCoupon() { uni.showLoading({ title: '加载中' }) this.$http('opencheckSheet/getTestList', { // page: this.page, // limit: 10, }, 'GET').then(res => { uni.hideLoading(); // var list = res.data.Items var list = res.data // 处理 undefined和null转为空白字符串 // list.forEach((item, index) => { // for (const key in item) { // item[key] = this.$praseStrEmpty(item[key]) // } // }) if (this.page == 1) { this.itemData = list } else { this.itemData = this.itemData.concat(list) } if (list.length < 10) { this.noMoreShow = true } else { this.noMoreShow = false } }) }, }, // 下拉刷新 上拉加载更多 onPullDownRefresh() { this.page = 1 this.myOrderCoupon() setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, onReachBottom() { // this.page++; this.myOrderCoupon() }, } </script> <style> .box { min-height: 100vh; background-color: #F4F5F7; padding-top: 20rpx; } .itemHistory { margin: 0rpx 24rpx 20rpx; padding: 20rpx; background-color: #FFFFFF; border-radius: 10rpx; } .time { font-size: 24rpx; color: #999999; } .carPlate { margin: 20rpx 0rpx 15rpx; display: flex; align-items: center; justify-content: flex-start; } .plate { font-size: 30rpx; color: #3C3C3C; font-weight: bold; margin-right: 20rpx; } .mileage { font-size: 24rpx; color: #F19D01; padding: 0rpx 10rpx; border: 1rpx solid #F19D01; border-radius: 4rpx; height: 36rpx; } .shopName{ color: #666666; font-size: 24rpx; margin: 16rpx 0rpx; /* 隐藏文字显示 ...不换行 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .itemContent { color: #666666; font-size: 24rpx; /* 隐藏文字显示 ...不换行 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .noMore { text-align: center; line-height: 50rpx; color: #999999; font-size: 28rpx; } </style>