wxThird/pages/integral/scoreRecord.vue

<template>
	<view class="box">
		<view class="topBox">
			<view class="topCont">
				<view class="kyjf">
					<view class="kyjfTitle">可用积分</view>
					<view class="kyjfCont">
						<view class="kyjfNum">{{avaIntegral?avaIntegral:0}}</view>
						<!-- <view class="kyjfDq">333积分即将过期</view> -->
					</view>
				</view>

			</view>
		</view>


		<view class="itemHistory" v-for="(item,index) in itemData" :key="index">

			<view class="carPlate">
				<view class="plate" v-if="item.bizType==0">消费抵扣</view>
				<view class="plate" v-if="item.bizType==1">积分清理</view>
				<view class="plate" v-if="item.bizType==2">积分兑换</view>
				<view class="plate" v-if="item.bizType==3">积分调整</view>
				<view class="plate" v-if="item.bizType==4">消费积分</view>
				<view class="plate" v-if="item.bizType==5">消费撤销</view>
				<view class="plate" v-if="item.bizType==6">抵扣撤销</view>
				<view class="plate" v-if="item.bizType==7">期初导入</view>
				<view class="plate" v-if="item.bizType==8">兑换取消</view>
				<view class="plate" v-if="item.bizType==9">每日签到</view>
				<view class="plate" v-if="item.bizType==10">积分过期</view>
				
				
				<view class="mileage" v-if="item.type==1">+{{item.integral}}</view>
				<view class="jian" v-if="item.type==2" style="font-weight: 500;">-{{item.integral}}</view>
			</view>
			<view class="time">{{item.createTime}}</view>


		</view>

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="itemData.length==0"></nodata>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},

		data() {
			return {
				page: 1,
				itemData: [],
				noMoreShow: false,
				avaIntegral: '',
			}
		},
		onLoad(opt) {
			this.avaIntegral = opt.avaIntegral
			this.page = 1
			this.myOrderCoupon()
		},
		methods: {
			
			myOrderCoupon() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openIntegralMall/integralRecord', {

					page: this.page,
					limit: 10,
				}, 'GET').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data.Items

					// 处理 undefined和null转为空白字符串
					// list.forEach((item, index) => {
					// 	for (const key in item) {
					// 		item[key] = this.$praseStrEmpty(item[key])
					// 	}
					// })

					if (this.page == 1) {
						this.itemData = list
					} else {
						this.itemData = this.itemData.concat(list)
					}

					if (list.length < 10) {
						this.noMoreShow = true
					} else {
						this.noMoreShow = false
					}





				})
			},


		},

		// 下拉刷新 上拉加载更多
		onPullDownRefresh() {
			this.page = 1
			this.myOrderCoupon()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.page++;
			this.myOrderCoupon()
		},
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background-color: #ffffff;

	}

	.topBox {
		width: 100%;
		height: 200rpx;
		background: #ffffff;
		padding-top: 30rpx;
		position: relative;
	}

	.topCont {
		width: 702rpx;
		height: 200rpx;
		background: url('http://dmsphoto.66km.com.cn/thFiles/DCCDB197-4F64-4711-89C0-E5034B2F1788.png') no-repeat;
		background-size: 100% 100%;
		margin-left: 24rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.kyjf {
		padding-top: 46rpx;
		padding-left: 40rpx;
	}

	.kyjfTitle {
		color: #523509;
		font-size: 28rpx;
	}

	.kyjfNum {
		font-size: 60rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #523509;
		line-height: 84rpx;
	}

	.kyjfDq {
		width: 224rpx;
		height: 44rpx;
		background: linear-gradient(135deg, #FFC81B 0%, #FFA800 100%);
		border-radius: 22rpx 22rpx 22rpx 0px;
		text-align: center;
		color: #573400;
		line-height: 44rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
		margin-top: 22rpx;
	}

	.kyjfCont {
		display: flex;
	}


	.itemHistory {

		padding: 30rpx 24rpx;
		background-color: #FFFFFF;


		border-bottom: 1rpx solid #EEEEEE;
	}

	.time {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.carPlate {

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.plate {
		font-size: 30rpx;
		color: #3C3C3C;

	}

	.mileage {
		font-size: 30rpx;
		color: #FF0000;
		font-weight: bold;
	}
	.jian{
		font-size: 30rpx;
		color: #333333;
	}


	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>