qjd-user-uniapp/pagesMain/integralList.vue

<template>
	<view class="container">
		<view class="integral-mine-info">
			<view class="integral-info-round">
				<view class="integral-number">{{integralData.usableIntegral}}</view>
				<view class="integral-text">可用积分</view>
				<view class="integral-text">累计{{integralData.totalIntegral}}</view>
			</view>
		</view>
		<view class="integral-list-box">
			<view class="integral-tab">
				<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A"
				 inactive-color="#666666" :bold="false" height="90" bar-width="120"></u-tabs>
			</view>
			<scroll-view class="integral-list" scroll-y="true" @scrolltolower="handleLoadMore" v-if="!tabIndex">
				<view class="integral-row" v-for="(item, index) in integralList1" :key="index">
					<view class="integral-icon"></view>
					<view class="integral-info">
						<view class="integral-title">{{item.behaviorType == 1 ? '购物赠送' : (item.behaviorType == 2 ? '消费扣减' : '消费扣减')}}</view>
						<view class="integral-date">{{item.addTime}}</view>
					</view>
					<view class="integral-number">+{{item.integralValue}}</view>
				</view>
			</scroll-view>
			<scroll-view class="integral-list" scroll-y="true" @scrolltolower="handleLoadMore" v-else>
				<view class="integral-row" v-for="(item, index) in integralList2" :key="index">
					<view class="integral-icon"></view>
					<view class="integral-info">
						<view class="integral-title">{{item.behaviorType == 1 ? '购物赠送' : (item.behaviorType == 2 ? '消费扣减' : '消费扣减')}}</view>
						<view class="integral-date">{{item.reduceTime}}</view>
					</view>
					<view class="integral-number">-{{item.integralValue}}</view>
				</view>
			</scroll-view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				integralData: {
					usableIntegral: 0,
					totalIntegral: 0,
				},
				tabIndex: 0,
				tabList: [{
						name: '收入积分'
					},
					{
						name: '支出积分'
					},
				],
				pageIndex1: 1,
				isOver1: false,
				integralList1: [],
				pageIndex2: 1,
				isOver2: false,
				integralList2: [],
			}
		},
		onLoad() {
			NET.request(API.getIntegral, {}, 'POST').then(res => {
				this.integralData = res.data
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取个人积分失败',
					type: 'warning',
				})
			})
			this.getIntegraList(1)
			this.getIntegraList(2)
		},
		methods: {
			//  切换tab
			changeTabs(index) {
				this.tabIndex = index;
			},
			//  懒加载
			handleLoadMore() {
				if (this.tabIndex == 0) {
					if (!this.isOver1) {
						this.pageIndex1++
						this.getIntegraList(1)
					}
				} else {
					if (!this.isOver2) {
						this.pageIndex2++
						this.getIntegraList(2)
					}
				}
			},
			//  获取全部商品
			getIntegraList(type) {
				NET.request(API.getIntegralList, {
					behavior: type,
					pageIndex: this['pageIndex' + type],
					pageSize: 10,
				}, 'POST').then(res => {
					this['isOver' + type] = res.data.integralList.length != 10
					this['integralList' + type] = this['integralList' + type].concat(res.data.integralList)
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取商品列表失败',
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;

		.integral-mine-info {
			width: 100%;
			height: 180px;
			float: left;
			background-size: 100% 180px;
			background-position: center;
			background-repeat: no-repeat;
			background-image: url(@/static/images/integralBg.png);

			.integral-info-round {
				width: 118px;
				height: 118px;
				float: left;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				margin-top: 22px;
				background: #FFFFFF;
				border: 4px solid rgba(18, 148, 88, 0.38);
				border-radius: 50%;

				.integral-number {
					width: 100%;
					height: 40px;
					float: left;
					margin: 26px 0 4px 0;
					font-size: 36px;
					font-family: PingFang SC;
					color: #52A63A;
					line-height: 40px;
					text-align: center;
				}

				.integral-text {
					width: 100%;
					height: 16px;
					float: left;
					font-size: 12px;
					font-family: PingFang SC;
					color: #52A63A;
					line-height: 16px;
					text-align: center;
				}
			}
		}

		.integral-list-box {
			width: calc(100% - 30px);
			height: calc(100% - 150px);
			float: left;
			margin: -30px 15px 0 15px;
			background-color: #FFFFFF;

			.integral-tab {
				width: 100%;
				height: 45px;
				float: left;
				border-bottom: 1px solid #EFEFEF;
			}

			.integral-list {
				width: 100%;
				height: calc(100% - 46px);
				float: left;

				.integral-row {
					width: 100%;
					height: 70px;
					float: left;
					box-sizing: border-box;
					border-bottom: 1px solid #EFEFEF;

					.integral-icon {
						width: 8px;
						height: 8px;
						float: left;
						margin: 22px 10px 0 10px;
						background: #52A63A;
						border-radius: 50%;
					}

					.integral-info {
						width: calc(100% - 120px);
						height: 100%;
						float: left;

						.integral-title {
							width: 100%;
							height: 18px;
							float: left;
							font-size: 15px;
							font-family: PingFang SC;
							color: #222222;
							line-height: 18px;
							margin: 16px 0 6px 0;
						}

						.integral-date {
							width: 100%;
							height: 16px;
							float: left;
							font-size: 12px;
							font-family: PingFang SC;
							color: #888888;
							line-height: 16px;
						}
					}

					.integral-number {
						width: 80px;
						height: 100%;
						float: right;
						margin-right: 12px;
						font-size: 15px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #52A63A;
						line-height: 70px;
						text-align: right;
					}
				}
			}
		}
	}
</style>