pages/sub_mine/integralQuery.vue

<template>
	<view class="integralQuery">
		<!-- #ifndef H5 -->
		<view class="bgColor"></view>
		<!-- #endif -->
		<view class="integralQuery-item" v-for="(v,i) in list" :key="i">
			<view class="integralQuery-item-left">
				<text class="integralQuery-item-left-name">{{v.typename}}</text>
				<text class="integralQuery-item-left-date">{{v.date}}</text>
			</view>
			<view class="integralQuery-item-right" :style="{color:v.pointStatus=='add'?'#2FA7E0':'#F95A3D'}">
				{{v.points}}
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="30" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAdd: false,
				list: [],
				pageno: 1,
				status: "loading",
				iconType: 'circle',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '暂无更多'
				},
			}
		},
		methods: {
			getIntegralList(e) {
				let that = this
				let params = {
					pageno: e,
					pagesize: 10
				}
				that.pageno = e
				that.$u.get("/v1/point/flow", params).then(res => {
					let totals = res.data.count
					let list = res.data.data
					if (list.length > 0) {
						list.forEach(item => {
							item.date = item.transdate.substr(0, 4) + '-' + item.transdate.substr(4, 2) + '-' + item.transdate.substr(6,
								2) + ' ' + item.transtime.substr(0, 2) + ':' + item.transtime.substr(2, 2) + ':' + item.transtime.substr(4,
								2)
							item.pointStatus = item.points.indexOf("+") != -1 ? 'add' : 'mins'
						})
						that.list = that.list.concat(list)
						that.status = 'loadmore'
						//console.log(that.list)
					} else {
						that.status = 'nomore'
					}
				}).catch(res=>{
					that.status = 'nomore'
				})
			}
		},
		onLoad() {
			let that = this
			that.getIntegralList(1)
		},
		onReachBottom() {
			let that = this
			let pageno = ++that.pageno
			let status = that.status
			if (status != 'nomore') {
				that.getIntegralList(pageno)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef H5 */
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: -1;
	}
	/* #endif */
	page{
		background-color: #FFFFFF;
	}
	.integralQuery {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		width: 100vw;
		// height: 100vh;
		font-family: "PingFang-SC-Medium";

		&-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx rgba(203, 203, 203, 1) solid;
			padding: 20rpx 0;

			&-left {
				display: flex;
				flex-direction: column;

				text {
					margin: 5rpx;
				}

				&-name {
					font-size: 31rpx;
					color: #333333;
				}

				&-date {
					color: #999999;
					font-size: 25rpx;
				}
			}

			&-right {
				font-size: 32rpx;
				// color: #2FA7E0;
			}
		}
	}
</style>