samehome/pages/mine/mineRecord.vue

<template>
    <view class="main">
        <!-- nav -->
        <navigation>{{ i18n.MinePool }}</navigation>
		    <u-empty :show="userInfoObj.length === 0" marginTop="350rpx" :text="i18n.NoData" textColor="#818197"
		            textSize="36rpx" icon="../../static/mine/img_data.png"></u-empty>
        <!-- 列表 -->
        <view class="content" v-if="userInfoObj.length > 0">
            <view class="dataBody" v-for="(item, index) in userInfoObj" :key="index">
                <key-value-row :keyName="i18n.BaseCoin" :value="item.amount+item.baseCoin"></key-value-row>
                <key-value-row :keyName="i18n.ProfitCoin" :value="item.profitCoin"></key-value-row>
                <key-value-row :keyName="i18n.DayRebate" :value="item.price"></key-value-row>
                <u-divider text="" lineColor="#B9C1D9"></u-divider>
                <key-value-row :keyName="i18n.RebateDay" :value="item.rebateDay+'/'+item.day"></key-value-row>
                <key-value-row :keyName="i18n.RebateAmount" :value="item.rebateAmount+'/'+item.deadAmount"></key-value-row>
                <u-divider text="" lineColor="#B9C1D9"></u-divider>
                <key-value-row :keyName="i18n.AddTime" :value="item.timestr"></key-value-row>
                <key-value-row :keyName="i18n.ReleaseTime" :value="item.timestr2"></key-value-row>
            </view>
        </view>
        <u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
        	:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
          
    </view>
</template>

<script>
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
import api from '@/utils/api'
	import constant from '@/utils/constant.js';
export default {
    components: { KeyValueRow },
    name: "mineRecord",
    data() {
        return {
			form: {
				pageNumber: 1,
				pageSize: 20,
			},
			baseURL: '',
			isLoadMore: false, //是否加载中
			loadStatus: 'loadmore',
			loadingText: this.$t("login").toload,
			loadmoreText: this.$t("login").pullup,
			nomoreText: this.$t("login").Nomore,
			userInfoObj: [],
        };
    },
    computed: {
        i18n() {
            return this.$t("mine");
        },
    },
	onReachBottom() {
		if (!this.isLoadMore) {
			this.form.pageNumber += 1
			this.getList();
		}
	},
    onLoad() {
		this.getList()
    },
    onShow() { },
    methods: {
        getList() {
        	this.isLoadMore = true
        	api.mineRecord(this.form).then(res => {
        		if (res.content.length) {
        			if (this.form.pageNumber > 1) {
        				this.userInfoObj = this.userInfoObj.concat(res.content)
        				for (var i = 0; i < this.userInfoObj.length; i++) {
        					if (this.userInfoObj[i].addTime) {
        						this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
        							i].addTime)
        					}
							if (this.userInfoObj[i].releaseTime) {
								this.userInfoObj[i].timestr2 = this.$index.formatyymmddhhmmss(this.userInfoObj[
									i].releaseTime)
							}
        				}
        			} else {
        				this.userInfoObj = res.content
        				for (var i = 0; i < this.userInfoObj.length; i++) {
        					if (this.userInfoObj[i].addTime) {
        						this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
        							i].addTime)
        					}
							if (this.userInfoObj[i].releaseTime) {
								this.userInfoObj[i].timestr2 = this.$index.formatyymmddhhmmss(this.userInfoObj[
									i].releaseTime)
							}
        				}
        			}
        			if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
        				this.isLoadMore = true
        				this.loadStatus = 'nomore'
        			} else {
        				this.isLoadMore = false
        			}
        		} else {
        			this.isLoadMore = true
        			this.loadStatus = 'nomore'
        			this.userInfoObj = []
        		}
        		this.$forceUpdate()
        	})
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    .content {
        margin-top: 200rpx;
        padding: 32rpx;

        .dataBody {
            margin-bottom: 32rpx;
            padding: 32rpx;
            box-sizing: border-box;
            background: #211F32;
            border-radius: 20rpx;

            .text {
                margin-top: 20rpx;
                padding: 10rpx 16rpx;
                background: #323045;
                border-radius: 8rpx;
                font-size: 24rpx;
                color: #A1A0A8;
            }

        }
    }




}
</style>