IHG/pages/my/integral/integral.vue

<template>
	<view class="integral">
		<!-- 标题栏 -->
		<view class="nav">
			<image src="http://t9.9026.com/imgs/integralbg.png" style="width: 100%; height: 100%;"></image>
			<view class="PointsColumn">
				<image src="/static/icon/integralicon.png"></image>
				<text>{{userIntegral}}</text>
			</view>
			<view class="titletext">
				<view class="textitem" @click="gointegralRecord">
					<image style="width: 38rpx;height: 44rpx;" src="/static/icon/integralrecord.png"></image>
					<text>积分记录</text>
				</view>
				<view class="textitem" @click="goMyorder">
					<image src="/static/icon/lament.png"></image>
					<text>我的兑换</text>
				</view>
				<view class="textitem" @click="gointegralRule">
					<image style="width: 44rpx;height: 40rpx;" src="/static/icon/integralrule.png"></image>
					<text>积分规则</text>
				</view>
			</view>
		</view>
		
		<!-- 占位 -->
		<view  style="width: 100%; height: 238rpx; "></view>
		
		
		<!-- 积分商品 -->
		<view class="shopList">
			<view class="listTop">
				<text>积分兑换</text>
			</view>
			
			<view class="msg-null" v-if="integralList.length == 0 ">
				<image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
				<view class="msg-null-text">
					<text>暂无数据</text>
				</view>
			</view>
			
			<view class="ListContent" v-if="integralList.length > 0 ">
				<view class="home-hotel-img-content">
					<view @click="goIntegralDetail(item.id)" class="home-hotel-img-content-item" v-for="(item,index) in integralList" :key="index"
						:style="{marginTop:item.marginTop || 0 }" >
						<image class="home-hotel-img-content-item-img"
							:class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
							:src="item.cover_img" mode=""></image>
						<view class="text">
							<text class="text-top">{{item.name}}</text>
						</view>
					</view>
				
				</view>
			</view>
			
			<!-- 触底 -->
			<view class="home-bottom" v-if="integralList.length > 0 ">
				<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
			</view>
			
		</view>
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				// 用户积分
				userIntegral:0,
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				// 积分产品列表
				integralList:[],	
				arr:[],
				// 分页
				page: 1,
				pagesize: 15,
				totalElements: '',
				allListItem: '',
				// 组件uni-load-more
				status: 'noMore',
			}
		},
		onLoad() {
			this.getProductList()
			this.getInfo()
			uni.$on('refreshData',()=>{
				this.getInfo()
			})
		},
		onUnload() {
			uni.$emit('refreshOrderNum')
		},
		
		// 触底加载
		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			var allTotal = this.page * this.pagesize
			console.log(allTotal, '----allTotal');
			//this.page为加载次数，this.pagesize为每一次加载的数据条数
			if (allTotal < this.totalElements) {
				//this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
				this.allListItem = false;
				this.page++;
				//加载次数递加
				this.status = "loading"
				this.$api.product.getProducts({ //请求更多数据列表
					page: this.page,
					type:2,
				}).then(res => {
					let ret = [...this.integralList, ...res.data.data]
					this.integralList = ret
					console.log(ret)
				})
			} else {
				this.allListItem = true;
				console.log('已加载全部数据')
				this.status = "noMore"
			}
		},
		
		methods:{	
			//用户信息
			getInfo(){
				this.$api.my.userInfo().then(res=>{
					this.$store.dispatch('user/info', res.data)
					this.userIntegral=this.$store.getters.userInfo.integral
				})
			},
			
			// 获取积分产品列表
			getProductList(){
				this.$api.product.getProducts({
					page:0,
					type:2,
				}).then(res=>{
					console.log(res,"积分产品")
					if(res.code==0){
						this.integralList=res.data.data
						this.totalElements = res.data.total
						this.pagesize = res.data.per_page
						this.shortLong()
					}
				})
			},
			
			shortLong() {
				this.integralList.forEach((item, index, arr) => {
					if (index % 4 === 0) {
						item.short = true
					}
					if (index % 4 === 1) {
						item.long = true
					}
					if (index % 4 === 2) {
						item.long = true
						item.marginTop = -68 + "rpx"
					}
					if (index % 4 === 3) {
						item.short = true
					}
				})

			},
			
			// 跳转积分规则
			gointegralRule(){
				uni.navigateTo({
					url:'/pages/my/integral/integralRule'
				})
			},
			// 跳转积分记录
			gointegralRecord(){
				uni.navigateTo({
					url:'/pages/my/integral/integralRecord'
				})
			},
			// 跳转积分产品详情
			goIntegralDetail(id){
				uni.navigateTo({
					url:`/pages/goods/goods-detail/index?id=${id}&type=2`
				})
			},
			// 跳转订单记录
			goMyorder(){
				uni.navigateTo({
					url:'/pages/my/myorders/orders'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;
	// flex布局居中对齐
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.integral{
		height: 100%;
		background:$bgColor ;
	}
	
	.msg-null{
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.msg-null-text{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.home-bottom {
		background-color: #FFF;
		padding-bottom: 84rpx;
	}
	.nav{
		width: 100%;
		height: 238rpx;
		position: fixed;
		z-index: 100;
		background-color: #F9F9F9;
		.PointsColumn{
			position: absolute;
			width: 690rpx;
			border-radius: 8rpx;
			height: 74rpx;
			background: #FFFFFF;
			border-radius: $bgColor;
			left:30rpx;
			top:32rpx;
			display: flex;
			align-items: center;
			image{
				margin-left: 30rpx;
				width: 46rpx;
				height: 46rpx;
			}
			text{
				margin-left: 16rpx;
				font-size: 48rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: 500;
				color: #333333;
			}
		}
		.titletext{
			position: absolute;
			bottom:30rpx;
			left: 30rpx;
			width: 690rpx;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.textitem{
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: 44rpx;
				}
				text{
					margin-left: 8rpx;
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: $bgColor;
				}
			}
		}
	}
	.shopList{
		padding-top: 24rpx;
		width: 100%;
		background: $bgColor;
		border-radius: 16rpx 16rpx 0px 0px;
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-top: 32rpx;
		.listTop{
			@include flexlayout;
			margin-bottom: 40rpx;
			text{
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}
		.ListContent{
			
			.home-hotel-img-content {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					flex-wrap: wrap;
			
					.home-hotel-img-content-item {
						width: 332rpx;
						background: #FFFFFF;
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
						border-radius: 12rpx;
						margin-bottom: 26rpx;
						overflow: hidden;
			
						.home-hotel-img-content-item-img {
							width: 332rpx;
							height: 332rpx;
							object-fit: cover;
							object-position: center;
						}
			
						.home-hotel-img-content-item-img-long {
							width: 332rpx;
							height: 400rpx;
							object-fit: cover;
							object-position: center;
						}
			
						.text {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: center;
							padding: 18rpx 22rpx 32rpx;
			
							.text-top {
								font-size: 28rpx;
								font-weight: bold;
								color: #333;
							}
			
							.text-main {
								margin-top: 20rpx;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}
			
			// display: flex;
			// flex-wrap: wrap;
		// 	.contentItemShort{
		// 		width: 332rpx;
		// 		background: $bgColor;
		// 		box-sizing: border-box;
		// 		box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
		// 		border-radius: 12rpx;
		// 		display: inline-block;
		// 		margin-bottom: 24rpx;
		// 		image{
		// 			width: 332rpx;
		// 			height: 332rpx;
		// 		}
		// 		.itemName{
		// 			margin:0 18rpx 20rpx 22rpx ;
		// 			font-size: 28rpx;
		// 			font-family: PingFang-SC-Bold, PingFang-SC;
		// 			font-weight: bold;
		// 			color: #333333;
		// 			overflow: hidden;
		// 		}
		// 		.itemPrice{
		// 			margin-left: 22rpx;
		// 			font-size: 28rpx;
		// 			font-family: PingFang-SC-Bold, PingFang-SC;
		// 			font-weight: bold;
		// 			color: #FF6200;
		// 		}
		// 	}
		// 	.contentItemLong{
		// 		width: 332rpx;
		// 		background: $bgColor;
		// 		box-sizing: border-box;
		// 		box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
		// 		border-radius: 12rpx;
		// 		margin-bottom: 24rpx;
		// 		display: inline-block;
		// 		clear: both;
		// 		image{
		// 			width: 332rpx;
		// 			height: 400rpx;
		// 		}
		// 		.itemName{
		// 			margin:0 18rpx 20rpx 22rpx ;
		// 			font-size: 28rpx;
		// 			font-family: PingFang-SC-Bold, PingFang-SC;
		// 			font-weight: bold;
		// 			color: #333333;
		// 			overflow: hidden;
		// 		}
		// 		.itemPrice{
		// 			margin-left: 22rpx;
		// 			font-size: 28rpx;
		// 			font-family: PingFang-SC-Bold, PingFang-SC;
		// 			font-weight: bold;
		// 			color: #FF6200;
		// 		}
		// 	}
		// 	.contentItem:nth-child(odd){
		// 		margin-right: 26rpx;
		// 	}
		// }
	}
</style>