agent-test/pages/integral-detail/integral-detail.vue

<template>
	<view class="list">
		<view class="list_con flexB" v-for="item in inteList" :key="item.id">
			<view>
				<view class="inte_title flexS">
					<text>{{ item.remark }}</text>
					<text style="color:#999;margin-left:10rpx;" v-if="item.type==1||item.type==2">（{{item.num}}套）</text>
					<view class="double flexC"
						v-if="item.type==1&&(Number(item.integral_double)-Number(item.integral)>0)">已翻倍
					</view>
				</view>
				<view class="inte_time">{{ item.created_at }}</view>
			</view>
			<view>
				<text class="inte_num" v-if="item.type == 1||item.type==4">+{{ item.integral_double || 0 }}</text>
				<text class="inte_num" v-else style="color:#FB231F">{{ item.integral_double || 0 }}</text>
				<image src="../../static/imgs/shop/money_icon.png" class="icon"></image>
			</view>
		</view>
		<view class="noData" v-if="inteList.length == 0">
			<image src="../../static/imgs/default/no_card.png" mode=""></image>
			<view>--暂无积分记录--</view>
		</view>
	</view>
</template>

<script>
	import {
		getIntegralRecord
	} from '../../apis/shop.js';
	export default {
		data() {
			return {
				inteList: [],
				params: {
					page_index: 1,
					page_size: 15
				},
				totalPage: 0
			};
		},
		onShow() {
			this.getIntegral();
		},
		onReachBottom() {
			this.getMore();
		},
		methods: {
			//获取积分明细
			getIntegral(isMore) {
				uni.showLoading({
					title: '加载中....'
				});
				let params = this.params;
				getIntegralRecord(params)
					.then(res => {
						if (res.code == 200) {
							this.inteList = isMore ? this.inteList.concat(res.data.list) : res.data.list;
							this.totalPage = Math.ceil(res.data.total / this.params.page_size);
						} else {
							uni.showModal({
								content: res.data || '获取积分明细失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			getMore() {
				if (this.params.page_index >= this.totalPage) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getIntegral(true);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		min-height: 100%;
		background: #fff;
		padding: 30rpx 0 100rpx;

		.list_con {
			width: 690rpx;
			margin: 0 auto 30rpx;

			.inte_title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.double {
				width: 100rpx;
				height: 40rpx;
				background: linear-gradient(269deg, #FFAA01 0%, #FE0000 100%);
				color: #fff;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: normal;
			}

			.inte_time {
				font-size: 28rpx;
				color: #999;
				margin-top: 20rpx;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				vertical-align: -2rpx;
			}

			.inte_num {
				font-size: 40rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}
	}
</style>