snapshot-wx/pagesPointsBase/Points/Index.vue

<template>
	<view class="container" v-show="isShow">
		<image class="bgImg" :src="bgImg"></image>
		<view class="headerBox">
			<view class="osNavigationBar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="viewTopTitle" :style="{height: navBarHeight + 'px', 'line-height': navBarHeight + 'px'}">
				<view class="topTitleBackButton" @tap="onBackTo" :style="{top: (navBarHeight - 20) / 2 + 'px'}">
					<image class="topTitleBackButtonImg" src="/static/img/common/back_black.png"></image>
				</view>
				<text class="topTitleText">积分荣誉榜</text>
			</view>
		</view>
		<view class="contentBox" :style="{height: 'calc(100% - ' + (statusBarHeight + navBarHeight) + 'px)'}">
			<view class="numberBox">
				<view class="userNumber">{{userPoints}}</view>
				<view class="userNumberTips">
					<image class="userNumberTipsIcon" src="../static/img/pointsIndex/goldCoin.png"></image>
					<text class="userNumberTipsText">当前可用积分</text>
				</view>
				<view class="numberBtnBox">
					<view class="numberBtn" @tap="onDetailTo">积分详情</view>
					<view class="numberBtn" @tap="onDescribeTo">积分说明</view>
				</view>
			</view>
			<view class="moduleBox">
				<view class="pointShopBox">
					<image class="pointShopBG" :src="pointShopBG"></image>
					<view class="pointShopBtn" @tap="onTapPointShop">我要兑换</view>
				</view>
				<view class="noticeBox">
					<image class="noticeBG" :src="noticeBG"></image>
					<view class="noticeInfoBox">
						<view class="noticeInfo">
							<view class="noticeInfoTitle">宣传视频</view>
							<view class="noticeInfoText">学习安全知识</view>
							<view class="noticeInfoBtn" @tap="onNoticeTo">点击学习</view>
						</view>
						<view class="noticeInfoVedioBox">
							<video class="noticeInfoVedio" src="https://www.bilibili.com/video/BV1MD4y1s7Yr/?spm_id_from=333.337.search-card.all.click&vd_source=c43d610aba47c5411d57d16a5dd7edd2"></video>
						</view>
					</view>
				</view>
				<view class="publicizeBox">
					<image class="publicizeBG" :src="publicizeBG"></image>
					<view class="publicizeInfoBox" @tap="onPublicizeTo">
						<view class="publicizeInfoTitle">通知公告</view>
						<view class="publicizeInfo">
							<image class="publicizeInfoIcon" src="../static/img/pointsIndex/noticeIcon.png"></image>
							<text class="publicizeInfoText">积分累计规则变动啦！</text>
							<text class="publicizeInfoRight"> > </text>
						</view>
						<view class="publicizeInfo">
							<image class="publicizeInfoIcon" src="../static/img/pointsIndex/noticeIcon.png"></image>
							<text class="publicizeInfoText">积分累计规则变动啦！</text>
							<text class="publicizeInfoRight"> > </text>
						</view>
					</view>
				</view>
			</view>
			<view class="pointsRankBox">
				<view class="pointsRankTitle">
					<image class="pointsRankTitleIcon" src="../static/img/pointsIndex/circle.png"></image>
					<text class="pointsRankTitleText">年度排名</text>
					<image class="pointsRankTitleIcon" src="../static/img/pointsIndex/circle.png"></image>
				</view>
				<view class="pointsRankBody">
					<view class="rankListHeader">
						<text class="rankList_rank">排名</text>
						<text class="rankList_tel">联系号码</text>
						<text class="rankList_point">累计积分</text>
					</view>
					<view class="rankList">
						<view class="rankListItem" v-for="(item, index) in listData" :class="index == 0 ? 'rankListItem_mine' : ''" >
							<image class="rankListItem_rankImg" :src="'../static/img/pointsIndex/rank' + item.rank + '.png'" v-if="[1,2,3].includes(item.rank)"></image>
							<text class="rankListItem_rank" v-else>{{item.rank}}</text>
							<view class="rankListItem_telBox">
								<image class="rankListItem_userImg" :src="item.headUrl"></image>
								<text class="rankListItem_tel">{{item.phoneNumber}}</text>
							</view>
							<text class="rankListItem_point">{{item.points}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="noneBox" v-else>
				<image class="noneImg" src="../../static/img/home/noneImg.png"></image>
				<view class="noneTips">暂无数据</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				isShow: false,
				statusBarHeight: 0,
				navBarHeight: 0,
				bgImg: '../../static/img/home/noneImg.png',
				pointShopBG: '/static/logo.png',
				noticeBG: '/static/logo.png',
				publicizeBG: '/static/logo.png',
				// pointShopBG: '../../static/img/home/noneImg.png',
				// noticeBG: '../../static/img/home/noneImg.png',
				// publicizeBG: '../../static/img/home/noneImg.png',
				userPoints: '0',
				listData: []
			}
		},
		onLoad() {
			that = this;
			that.statusBarHeight = that.$systemInfo.statusBarHeight;
			that.navBarHeight = that.$systemInfo.navBarHeight;
			that.onGetData(function() {
				that.onGetPointData(function() {
					that.onGetListData(function() {
						that.isShow = true;
					});
				});
			});
		},
		methods: {
			onGetData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/page/setting?PageType=1&Name=Points_Index'
				}).then(res => {
					if (res && res.length > 0) {
						res.forEach(item => {
							if (item.tagValue){
								that[item.tagName] = that.$admin.config.getfileurl + item.tagValue;
							}
						})
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetPointData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/points/total'
				}).then(res => {
					if (res) {
						that.userPoints = res;
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetListData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/points/rank'
				}).then(res => {
					that.listData = res.ranks || [];
					// that.listData = [
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 32, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 1, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 2, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 3, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 4, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 5, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 6, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 7, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 8, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 9, userName: null},
					// 	{citizenId: "08dd6c0d-e843-49bd-8965-9f97a4aa3df7", isSecurityMax: false, phoneNumber: "159****8027", points: 41, rank: 10, userName: null}
					// ];
					typeof fun === 'function' && fun();
				})
			},
			onDetailTo() {
				that.$util.msg("功能即将上线，敬请期待！");
			},
			onDescribeTo() {
				that.$util.msg("功能即将上线，敬请期待！");
			},
			onTapPointShop() {
				that.$util.msg("功能即将上线，敬请期待！");
			},
			onNoticeTo() {
				that.$util.msg("功能即将上线，敬请期待！");
			},
			onPublicizeTo() {
				that.$util.msg("功能即将上线，敬请期待！");
			},
			// 返回按钮点击事件
			onBackTo() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="less">
	.container{
		background-color: #f5f5f5;
	}
	
	.bgImg {
		height: 520rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.topTitleText {
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.contentBox {
		overflow-y: auto;
		position: relative;
		z-index: 9;
	}

	.numberBox {
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		padding: 50rpx 0 40rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.userNumber {
		width: 100%;
		color: #000;
		font-size: 64rpx;
		font-weight: bold;
		vertical-align: text-bottom;
		margin-left: 4rpx;
		margin-bottom: 20rpx;
	}

	.userNumberTips {
		background-color: #e8ebfc;
		border-radius: 50rpx;
		text-align: center;
		padding: 10rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.userNumberTipsIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.userNumberTipsText{
		font-weight: bold;
		color: #555;
	}
	
	.numberBtnBox {
		position: absolute;
		right: 0;
		height: 150rpx;
		width: 160rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: right;
	}
	
	.numberBtn{
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 60rpx 0 0 60rpx;
		background: linear-gradient(45deg, #0bbafb, #4285ec);
		color: #fff;
	}
	
	.moduleBox{
		display: flex;
		width: calc(100% - 40rpx);
		height: 420rpx;
		padding: 30rpx 20rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-between;
	}
	
	.pointShopBox {
		width: 100%;
		height: 200rpx;
		position: relative;
	}

	.pointShopBG {
		height: 200rpx;
		width: 100%;
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.pointShopBtn {
		background: url(../static/img/pointsIndex/button2.png) no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		position: absolute;
		bottom: 14rpx;
		left: 60rpx;
	}

	.noticeBox {
		width: calc(60% - 20rpx);
		height: 200rpx;
		position: relative;
	}

	.noticeBG {
		height: 200rpx;
		width: 100%;
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.noticeInfoBox {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.noticeInfoTitle {
		width: 100%;
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.noticeInfoText {
		width: 100%;
		color: #596bbd;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.noticeInfoBtn {
		background: url(../static/img/pointsIndex/button1.png) no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		color: #000;
		padding: 10rpx 0;
		border-radius: 50rpx;
		text-align: center;
	}

	.noticeInfoVedio {
		width: 160rpx;
		height: 160rpx;
	}
	
	.publicizeBox {
		width: 40%;
		height: 200rpx;
		position: relative;
	}

	.publicizeBG {
		height: 200rpx;
		width: 100%;
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.publicizeInfoBox{
		width: calc(100% - 40rpx);
		height: 100%;
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
		align-content: space-evenly;
	}
	
	.publicizeInfoTitle {
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.publicizeInfo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.publicizeInfoIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.publicizeInfoText {
		width: calc(100% - 80rpx);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
	}
	
	.publicizeInfoRight {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.pointsRankBox {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 30rpx;
	}
	
	.pointsRankTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
	}
	
	.pointsRankTitleIcon {
		width: 20rpx;
		height: 20rpx;
	}
	
	.pointsRankTitleText {
		padding: 0 20rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #478dff;
	}
	
	.pointsRankBody {
		padding: 0 30rpx 20rpx;
		margin-bottom: 20rpx;
	}
	
	.rankListHeader {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 0 30rpx;
		text-align: center;
	}
	
	.rankList_rank {
		width: 120rpx;
	}
	
	.rankList_tel {}
	
	.rankList_point {
	}
	
	.rankList {}
	
	.rankListItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #000;
		height: 120rpx;
		border-bottom: 2rpx #e5ecff solid;
	}
	
	.rankListItem_mine {
		border-bottom: none;
		border: 2rpx #e5ecff solid;
		border-radius: 100rpx;
		position: relative;
	}
	
	.rankListItem_mine::after{
		content: "本人";
		padding: 10rpx 40rpx;
		position: absolute;
		top: -10rpx;
		right: 0;
		background-color: #639dff;
		border-radius: 50rpx;
		color: #fff;
		font-size: 24rpx;
	}
	
	.rankListItem_rankImg {
		width: 60rpx;
		height: 60rpx;
		padding: 0 20rpx;
	}
	
	.rankListItem_rank {
		width: 100rpx;
	}
	
	.rankListItem_telBox{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.rankListItem_userImg {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.rankListItem_tel {}
	
	.rankListItem_point{
		width: 120rpx;
		color: #fe0000;
	}

	// .noneBox {
	// 	background-color: #fff;
	// 	border-radius: 50rpx 50rpx 0 0;
	// 	padding: 50rpx 20rpx;
	// 	text-align: center;
	// }
	
	// .noneImg {
	// 	width: 200rpx;
	// 	height: 200rpx;
	// }
	
	// .noneTips {
	// 	font-size: 26rpx;
	// 	color: #aaaaaa;
	// 	text-align: center;
	// 	margin-top: 10rpx;
	// }
</style>