jp-railway/pages/mine/points/pointsExchange/pointsExchange.vue

<template>
	<view>
		<u-navbar title="积分兑换">
			<view class="slot-wrap" v-if="false">
				兑换规则
			</view>	
		</u-navbar>
		<view class="header">
			<!-- 积分 -->
					<view class="points">
						<view class="picture">
							<img src="../../../../assets/img/riFill-vip-diamond-fill Copy@1x.png" alt="">
						</view>
						<view class="number">
							{{plusInfo.userPoints}}
						</view>
						<view class="button"   @click="gotoUrl('pages/mine/points/points')">
							兑换记录
						</view>
					</view>
			<!-- 提示 -->
			<view class="hint" v-if="false">
				 <view class="img"><img src="../../../../assets/img/md-notifications@1x.png" alt=""></view>
					 <view class="text">
					 	积分将于1月1日0时自动清零，记得使用哦~
					 </view>
			</view>
			<!-- 标签 -->
			<view class="tabs">
				<u-tabs font-size="28" height="64 " :list="tablist" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<!-- 奖品 -->
		<view class="prize">
			<view class="item"  v-for="(item,i) in list" :key="i" @click="ckItem(item)" >
				<view class="picture">
					<img :src="item.photoUrl" alt="">
				</view>
				<view class="name">
					{{item.name}}
				</view>
				<view class="infos">
					<view class="points">
						{{item.needPoint}}积分
					</view>
					<view class="remain">
						剩余{{item.quantity}}
					</view>
				</view>
				
			</view>
			
			
		</view>
		<u-divider  :isnone="list.length==0" nonetext="敬请期待" bg-color="#B5D0F4" border-color="#A1B2D1">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/goods.js'
	
	export default {
		data() {
			return {
				tablist: [{
					name: '全部'
				}, {
					name: '1万及以上',
					start:10000,
						end:'',
					
				}, {
					name: '5千-1万',
					start:5000,
					end:10000,
					
				}, {
					name: '1千-5千',
					start:1000,
					end:5000,
					
				}, {
					name: '1千以下',
					start:'',
					end:1000,
				}],
				current: 0,
				plusInfo:{},
				list:[],
				listForm:{
					pageIndex:1,
					typeId:"",
					title:"",
					pageSize:20,
				},
				recordsTotal:0,
			}
		},
		onLoad(){
			//this.userInfo
			this.plusInfo=this.carhelp.getPersonInfoPlus()
			this.getList();
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			ckItem(item){
				if(item.badgeId){
					var url="/pages/staffHome/teamHonor/badgeDetails?type="+item.badgeId+"&id="+item.type;
					uni.navigateTo({
						url:url
					})
				}
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			change(index) {
				
				this.current = index;
				this.listForm.queryPointStart='';
				this.listForm.queryPointEnd='';
				if(index){
					
					this.listForm.queryPointStart=this.tablist[index].end;
					this.listForm.queryPointEnd=this.tablist[index].start;
				}
				
				this.listForm.pageIndex=1;
				
				this.getList();
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.goodsList(this.listForm).then((res) => {
					uni.hideLoading();
									if(this.listForm.pageIndex==1){
										this.list = res.data.data;
									}else{
										this.list = [
											...this.list,
											...res.data.data
										];
									}
					
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
     background-color: #B5D0F4;
	 padding-bottom: 100px;
	}
	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: rgba(31, 74, 153, 1);
		font-size: 16px;
	}
	.header{
				background: linear-gradient(180deg, rgba(18,114,238,1) 0%,rgba(181,208,244,1) 100%);
	// 积分
		.points{
			padding: 48rpx 32rpx;
			display: flex;
			align-items: center;
			.picture{
				width: 80rpx;
				height: 80rpx;
				background-color: rgba(255, 175, 18, 1);
				border: 3px solid rgba(252, 236, 107, 1);
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.number{
				color: rgba(255, 255, 255, 1);
				font-size: 36px;
				margin-left: 24rpx;
				font-weight: bold;
				font-family: 'Medium';
			}
			.button{
				font-family: 'Regular';
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 0.3);
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin-left: auto;
			}
		}
	
	// 提示
	.hint{
		font-family: 'Regular';
		  border-radius: 8px;
		  background-color: #018BB9;
		  color: #fff;
		  height: 72rpx;
		   font-size: 14rpx;
		  margin: 40rpx 48rpx 24rpx;
		  display: flex;
		  align-items: center;
		  .img{
			  
			  margin-left: 8rpx;
		  }
		  img{
			  vertical-align: middle;
		  }
	}
	
	// 标签
   .tabs{
	    margin: 0 32rpx;
		height: 96rpx;
		line-height:96rpx;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
   }	
	}
  
// 奖品
.prize{
	margin-top: 32rpx;
	padding: 0 32rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.item{
		background-color: #fff;
		border-radius: 8px;
		width: 336rpx;
		padding-bottom: 22rpx;
		margin-bottom: 24rpx;
		.picture{
			height: 336rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.name{
			font-family: 'Medium';
			margin-top: 24rpx;
			color: #101010;
			font-weight: bold;
			padding-left: 16rpx;
		}
		.infos{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 16rpx;
			margin-top: 16rpx;
			.points{
				color: rgba(255, 61, 0, 1);
				font-size: 32rpx;
				font-family: 'SemiBold';
			}
			.remain{
				color: rgba(148, 148, 148, 1);
				font-family: 'Regular';
			}
		}
	}
}
</style>