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="width:150rpx" class="td" @click="show" :data-e="i.schoolName">
								{{i.schoolName}}
							</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
				},
				arrlist: [],
				adv: {},
				topNum: 0
			};
		},
		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) {
				let data = e.currentTarget.dataset.e
				// console.log(data);
				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.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;
	}
</style>