随手拍积分榜

pagesPointsBase/Points/Index.vue

@@ -0,0 +1,565 @@
+<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>