yimo-resource-blog/pages/mine/integral_record.vue

<template>
	<view>
		<view v-if="dataList.length != 0" class="re-box">
			<view>
				<text style="font-size: 40rpx;color: #0081ff;" class="cuIcon-titles"></text><text style="font-size: 35rpx;">积分明细</text>
			</view>
			<view style="margin-top: 40rpx;">
				<view v-for="(item,index) in dataList" :key="index" class="flex solid-bottom padding justify-between">
					<view class="content-left">
						<view class="re-type">{{item.source}}</view>
						<view class="re-time">{{item.integralTime}}</view>
						<view v-if="item.isAdd !== 0 && item.resourceId" class="re-exchange">
							<text class="cuIcon-present exchange-icon"></text>
							<text class="exchange-title" @click="goToResourceDetail(item.resourceId)">{{item.resourceTitle}}</text>
						</view>
					</view>
					<view v-if="item.isAdd == 0" class="re-number">+{{item.integralNumber}}
					<text class="cuIcon-vip" style="margin-left: 15rpx;font-size: 40rpx;"></text>
					</view>
					<view v-else style="color: #07C160;" class="re-number">-{{item.integralNumber}}
					<text class="cuIcon-vip" style="margin-left: 15rpx;font-size: 40rpx;"></text>
					</view>
					
				</view>
				
			</view>
		</view>
		<view style="text-align: center;" v-else>
			<image style="width: 400rpx;height: 200rpx;margin-top: 200rpx;" src="https://img.yidaima.cn/feast/nodata.svg"></image>
			<view style="color: #adadad;">无数据</view>
		</view>
		<!-- 加载动图 -->
		<view class="artileload" v-if="showTotal">
			<image style="width: 100%;height: 100%;" src="https://img.yidaima.cn/feast/articleload.gif" mode="aspectFit"></image>
		</view>
		<!-- 文章列表没有数据 -->
		<view class="no-list-data" v-else>
			--我的底线就到这里了--
		</view>
	</view>
</template>

<script>
	import {
		listAppIntegra
	} from "@/api/app/index.js"
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: uni.getStorageSync("userInfo").userId,
					
				},
				dataList: [],
				total: 0,
				showTotal: false,
			}
		},
		// 上拉分页
		onReachBottom() {
			var that = this;
			var allTotal = this.queryParams.pageNum * this.queryParams.pageSize
			//this.page为加载次数，this.pageSize为每一次加载的数据条数
			if (allTotal < this.total) {
				//this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
				this.showTotal = true;
				this.queryParams.pageNum++;
				//加载次数递加
				//请求更多数据列表
				listAppIntegra(this.queryParams).then(response => {
					that.dataList = that.dataList.concat(response.rows)
					var allTotal2 = this.queryParams.pageNum * this.queryParams.pageSize
					if (allTotal2 < this.total) {
						//this.total为请求数据的总条数。只要现有条数小于总条数就执行一下代码
						this.showTotal = true;
					} else {
						this.showTotal = false;
					}
		
				})
			} else {
				this.showTotal = false;
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			getDataList(){
				var that = this;
				listAppIntegra(this.queryParams).then(response => {
					that.dataList = response.rows
					var allTotal = this.queryParams.pageNum * this.queryParams.pageSize
					that.total = response.total
					if (allTotal < this.total) {
						this.showTotal = true;
					} else {
						this.showTotal = false;
					}
					uni.stopPullDownRefresh(); //停止刷新
				})
			},
			goToResourceDetail(resourceId) {
				this.$tab.navigateTo('/pages/blog/resource?id=' + resourceId + "&type=1")
			}
		}
	}
</script>

<style>
	.re-type{
		font-size: 33rpx;
	}
	.re-time{
		font-size: 30rpx;
		color: #adadad;
		margin-top: 15rpx;
	}
	.content-left {
		flex: 3;
		margin-right: 30rpx;
		overflow: hidden;
	}
	.re-exchange {
		font-size: 30rpx;
		color: #606060;
		margin-top: 15rpx;
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
		max-width: 100%;
		width: 95%;
	}
	.exchange-icon {
		color: #ff9900;
		margin-right: 10rpx;
		font-size: 32rpx;
		flex-shrink: 0;
	}
	.exchange-title {
		color: #ff9900;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
		max-width: 420rpx;
		cursor: pointer;
	}
	.re-number{
		font-size: 40rpx;
		color: red;
		margin-top: 20rpx;
		flex-shrink: 0;
		text-align: right;
		min-width: 140rpx;
		flex: 1;
	}
	.re-box{
		min-height: 500rpx;
		background-color: white;
		border-radius: 20rpx;
		margin: 0 40rpx 40rpx 40rpx;
		padding: 20rpx;
	}
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin-bottom: 100rpx;
		color: #e6e6e6;
		font-size: 24upx;
	}
	
	/* 加载动图 */
	.artileload {
		height: 80rpx;
		width: 80rpx;
		margin: 20rpx auto;
		overflow: hidden;
	}
	

</style>