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

<template>
	<view>
		<u-navbar title="积分">
			<view class="slot-wrap"  @click="showPointsRule()" >
				积分规则
			</view>	
		</u-navbar>
		<u-modal v-model="showPointsRuleBl" title="积分规则" >
			<view class="showPointsRuleClass">
				<view>登陆微官网 +1分</view>
				<view>点赞 +1分<span class="viewspan" v-text="'[<图片新闻><政务动态>]'"></span></view>
				<view>分享 +1分<span class="viewspan">[同上]</span></view>
				<view>评论 +1分<span class="viewspan">[同上](需要审核通过)</span></view>
				<view>空间发布 +1分<span class="viewspan">(需要审核通过)</span></view>
				<view>每天上限为5分</view>
			</view>
		</u-modal>

		<view class="background">
			<view class="points">
				<view class="number">
					{{plusInfo.userPoints}}
				</view>
				<view class="unit">
					积分
				</view>
			</view>
			<view class="rank" v-if="this.current==0" @click="gotoUrl('pages/mine/points/rankingList')">
				<view class="img"><img src="../../../assets/img/riFill-bar-chart-2-fill@1x.png" alt=""></view>
				<view class="text">积分排名{{top&&top.userSortNo?'第'+top.rank+'名':''}}</view>
				<view><u-icon name="arrow-right" color="#fff" size="28"></u-icon></view>
			</view>
			<view class="rank" v-if="this.current==1">
				<view class="img"><img src="../../../assets/img/riLine-gift-2-line@1x.png" alt=""></view>
				<view class="text">积分兑换</view>
				<view><u-icon name="arrow-right" color="#fff" size="28"></u-icon></view>
			</view>
			
		</view>
		
		<view class="record">
			<view class="tabs" v-if="false">
				<u-tabs bar-width="100" inactive-color="#bbbbbb" active-color="#101010" :list="tablist" :is-scroll="false" :current="current" @change="change" ></u-tabs>
			</view>
			<view class="get" v-if="this.current==0" >
				<!-- <view class="total">
					6月获取278
				</view> -->
				<view class="each" v-for="(item,i) in list" :key="i">
					<view class="way-date">
						<view class="way">
							{{item.source}}
						</view>
						<view class="date">
							{{item.createTime}}
						</view>
					</view>
					<view class="number">
						{{item.score?"+"+item.score:item.score}}
					</view>
				</view>
				
			</view>
		    <view class="exchange" v-if="this.current==1">
		    	<view class="item">
		    		<view class="month">
		    			6月
		    		</view>
					<view class="details" v-for="(item,i) in 2"  :key="i">
						<view class="picture">
							<img src="../../../assets/img/riLine-gift-2-line@1x.png" alt="">
						</view>
						<view class="infos">
							<view class="name">
								兑换礼品名称
							</view>
							<view class="price">
								<text>价格：</text>
								<text>30积分</text>
							</view>
							<view class="date">
								<text>时间：</text>
								<text>2022-06-23 14:27:22兑换</text>
							</view>
						</view>
					</view>
		    	</view>
				
				<view class="item">
					<view class="month">
						5月
					</view>
					<view class="details"  v-for="(item,i) in 2"  :key="i">
						<view class="picture">
							<img src="../../../assets/img/riLine-gift-2-line@1x.png" alt="">
						</view>
						<view class="infos">
							<view class="name">
								兑换礼品名称
							</view>
							<view class="price">
								<text>价格：</text>
								<text>30积分</text>
							</view>
							<view class="date">
								<text>时间：</text>
								<text>2022-05-23 14:27:22兑换</text>
							</view>
						</view>
					</view>
				</view>
		    </view>
		
		</view>
		<u-divider  :isnone="list.length==0" nonetext="你还没有获取到积分" bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>


<script>
	import * as API from '@/apis/pagejs/user.js'
	
	export default {
		data() {
			return {
				plusInfo:{},
				userInfo:{},
				tablist: [{
					name: '积分获取'
				}, {
					name: '积分兑换'
				}],
				listForm:{
					pageIndex:1,
					pageSize:20,
				},
				recordsTotal:0,
				list:[],
				current: 0,
				top:null,
				showPointsRuleBl:false,
			}
		},
		onLoad() {
			this.plusInfo=this.carhelp.getPersonInfoPlus();
			this.userInfo=this.carhelp.getPersonInfo();
				this.getList()
				this.pointsNotes()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			showPointsRule(){
				this.showPointsRuleBl=true;
			},
			pointsNotes(){
				var year=new Date().getFullYear()
				API.myPointsSort({
					year:year,
				
				}).then((res) => {
						
					
						if(res.data.myPoint){
							this.top=res.data.myPoint
							this.top.rank=parseInt(res.data.myPoint.userSortNo)
						}
						
					uni.hideLoading();
					
				}).catch(error => {
					
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.myPointsNotes(this.listForm).then((res) => {
					uni.hideLoading();
					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>
	.viewspan{
		font-size: 24rpx;
	}
	.showPointsRuleClass{
		padding: 0 20px
	}
	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: rgba(31, 74, 153, 1);
		font-size: 16px;
	}
	.background{
		background: linear-gradient(180deg, rgba(18,114,238,1) 0%,rgba(244,244,246,1) 100%);
		padding: 32rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		height: 231px;
		.points{
			display: flex;
			align-items: baseline;
			.number{
				font-size: 36px;
				font-family: 'Medium';
			}
			.unit{
				font-size: 16px;
				margin-left: 16rpx;
				font-family: 'Regular';
			}
		}
		.rank{
			display: flex;
			align-items: center;
			font-size: 32rpx;
			
			.img{
				width: 32rpx;
				height: 32rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				margin-left: 8rpx;
				margin-right: 4rpx;
				font-family: 'Regular';
			}
		}
	}

     .record{
		 margin: -320rpx 32rpx 24rpx;
		 background-color: #fff;
		 border-radius: 8px 8px 0px 0px;
		 min-height: 800rpx;
		.tabs{
			padding: 0 160rpx;
			height: 40px;
			border-bottom: 1px solid #E6E6E6;
			/deep/.u-tab-bar{
						 background-color: #0076FF !important ;
			}
		}
		.get{
			
			.total{
				height: 44px;
				line-height: 44px;
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				border-bottom: 1px solid #E6E6E6;
				text-indent:32rpx;
			}
			.each{
				font-family: 'Regular';
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				margin: 0 32rpx;
				border-bottom: 1px solid #E6E6E6;
				.way-date{
					.way{
						color: rgba(51, 51, 51, 1);
						font-size: 16px;
					}
					.date{
						color: rgba(119, 119, 119, 1);
						margin-top: 16rpx;
					}
				}
				.number{
					color: rgba(31, 74, 153, 1);
					font-size: 24px;
				}
				
			}
		}
	 
	    .exchange{
			padding:0 32rpx 32rpx;
			.item{
				
				.month{
					height: 88rpx;
					line-height: 88rpx;
					color: #101010;
				}
				.details{
					display: flex;
					border-radius: 4px;
					background-color: rgba(242, 242, 242, 1);
					padding: 16rpx ;
					margin-bottom: 16rpx;
					.picture{
						width: 128rpx;
						height:128rpx;
						border-radius: 4px;
						background-color: rgba(255, 70, 41, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						img{
							width: 88rpx;
							height: 88rpx;
						}
					}
					.infos{
						margin-left: 16rpx;
						.name{
							color: rgba(16, 16, 16, 1);
							font-size: 32rpx;
						}
						.price,.date{
							color: rgba(102, 102, 102, 1);
							line-height: 28rpx;
							margin-top: 14rpx;
							font-size: 28rpx
						}
					}
				}
			}
		}
	
	 }
</style>