teaching-uniapp/pages/ranking/ranking.vue

<template>
	<view class="ranking">
		<statusBar :item="navBarData"></statusBar>
		<view class="top">
			<image :src="adv.img" mode="aspectFill" @click="gotoHome">
			</image>
		</view>
		<view class="scrollV">
			<!-- <scroll-view style="flex: 1;" @scroll='scrollYE' :scroll-top="topNum" scroll-y="true"> -->
			<uni-table border stripe emptyText="暂无更多数据">
				<view class="table-header">
					<uni-tr>
						<uni-th width="100rpx" align="left">序号</uni-th>
						<uni-th width="150rpx" align="left">姓名</uni-th>
						<uni-th width="150rpx" align="left">单位</uni-th>
						<uni-th width="100rpx" align="left">课程</uni-th>
						<uni-th width="100rpx" align="left">活动</uni-th>
						<uni-th width="150rpx" align="left">活跃度</uni-th>
					</uni-tr>
				</view>

				<view class="warper">
					<uni-tr v-for="(i,index) in arrlist" :key="i.openid">
						<uni-td>
							<view class="td" style="width:100rpx">
								{{index + 1}}
							</view>
						</uni-td>
						<uni-td>
							<view style="width:150rpx" class="td" @click="show" :data-e="i.username">
								{{ i.username }}
							</view>
						</uni-td>
						<uni-td>
							<view style="position: relative;" class="floatBlck">
								<view style="width:150rpx;position: relative;" class="td" @click="show" :data-e="index">
									{{i.schoolName}}

								</view>
								<view :class="floatTd>9?'floatTd2':'floatTd'" v-if="floatTd==index">
									{{i.schoolName}}
								</view>
							</view>
						</uni-td>
						<uni-td>
							<view class="td" style="width:100rpx">
								{{i.views}}
							</view>
						</uni-td>
						<uni-td>
							<view class="td" style="width:100rpx">
								{{i.signNum}}
							</view>
						</uni-td>
						<uni-td>
							<view class="td" style="width:150rpx">
								{{i.act}}
							</view>
						</uni-td>
					</uni-tr>
				</view>



			</uni-table>
			<!-- </scroll-view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '排行',
					btn: 0
				},
				floatTd: -1,
				arrlist: [],
				adv: {},
				topNum: 0
			};
		},
		onShareTimeline() {
			uni.share({
				provider: "weixin",
				scene: "WXSceneTimeline",
				type: 0,
				href: "http://uniapp.dcloud.io/",
				title: "uni-app分享",
				summary: "我正在使用丽湖双创小程序，赶紧跟我一起来体验！",
				imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});

		},
		// 分享
		onShareAppMessage() {

			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "我正在使用丽湖双创小程序，赶紧跟我一起来体验！",
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		},
		methods: {
			scrollYE(e) {
				if (e.detail.scrollTop >= 100) {
					this.topNum = 100
					console.log(this.topNum);
				}
			},
			getdata() {
				this.$request('/selectUserActivity', "get", {
					oid: this.$store.state.user.openid
				}).then(res => {
					// return console.log(res[0]);

					this.arrlist = res[0]

					this.arrlist.forEach(e => {
						// console.log(e);
						e.act = e.act.toFixed(0)
					})
					// this.arrlist.sort(function(a, b) {
					// 	return b.act - a.act
					// });

				})
			},
			show(e) {
				if (this.floatTd != -1) return
				let data = e.currentTarget.dataset.e
				// console.log(data);
				this.floatTd = data
				setTimeout(() => {
					this.floatTd = -1
				}, 1500);
				// uni.showToast({
				// 	title: data,
				// 	icon: 'none'
				// })
			},
			// getMag() {
			// 	this.$request('/selectAllMessage', "POST", {
			// 		oid: this.$store.state.user.openid
			// 	}).then(res => {
			// 		console.log('获取未读信息', res[0][0].msg);
			// 		let num = res[0][0].msg
			// 		this.msgn = num
			// 		if (num == 0) {
			// 			uni.hideTabBarRedDot({
			// 				index: 3
			// 			})
			// 		} else {
			// 			uni.setTabBarBadge({
			// 				index: 3,
			// 				text: num.toString()
			// 			})
			// 		}
			// 	})
			// },
			gotoHome() {
				// console.log(this.adv);
				// const web = this.classList[this.current];
				const url = this.adv.href
				uni.navigateTo({
					url: "/pages/skipone/skipone?item=" + encodeURIComponent(JSON.stringify(url))
					// url: "/pages/skipone/skipone?url=" + encodeURIComponent(JSON.stringify(url)),
				});
			},
			// 获取顶部大图
			getAdv() {
				this.$request('/selectAdvertisement', "get", {
					typ: 1
				}).then(res => {
					// console.log(res);
					this.adv = res[0][0]
				})
			}
		},
		onLoad() {
			this.getAdv()
		},
		onShow() {
			this.floatTd = -1
			// this.getMag()
			this.getAllMessage() // 调用app.js中的方法
			this.getdata()
		}
	}
</script>

<style lang="scss" scoped>
	.ranking {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 750rpx;

		.top {
			width: 750rpx;
			height: 288rpx;
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			background-color: #fff;
			justify-content: center;

			image {
				height: 246rpx;
				width: 690rpx;
				border-radius: 10rpx;
			}
		}

		.scrollV {
			overflow: hidden;
			flex: 1;
			display: flex;
			width: 750rpx;
			position: relative;
		}
	}

	.table-header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 99999;
		background-color: #fff;
	}


	/deep/ .uni-table-tr {
		display: flex;
	}

	/deep/ .table--border {
		box-sizing: border-box;
		// border-right: 1px #000 solid;
	}

	/deep/ .uni-table-th {
		background-color: #F7FBFF;
		padding: 0px 0;
		height: 40px;
		line-height: 40px;
		padding-left: 20rpx;
		display: flex;
		flex-shrink: 0;
	}


	/deep/ .uni-table-td {
		padding: 0px 0;
		height: 40px;
		border-right: none;
		border-bottom: none;
	}

	/deep/ .uni-table-td:nth-child(1) {
		background-color: #F7FBFF;
	}

	.td {
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		height: 40px;
		padding-left: 20rpx;
		line-height: 40px;
		box-sizing: border-box;
		border-right: 1px #ebeef5 solid;
		border-bottom: 1px #ebeef5 solid;

	}

	.floatTd {
		position: absolute;
		top: 0;
		left: 0;
		min-height: 100%;
		width: 350rpx;
		white-space: wrap;
		display: flex;
		align-items: center;
		z-index: 999;
		background-color: #ccc;
		padding: 0 5px;
		
	}

	.floatTd2 {
		position: absolute;
		bottom: 0;
		left: 0;
		min-height: 100%;
		width: 350rpx;
		display: flex;
		align-items: center;
		z-index: 999;
		white-space: wrap;
		background-color: #ccc;
		padding: 0 5px;
	}
</style>