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>
		<scroll-view class="scrollV" scroll-y="true">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="100rpx" align="left">序号</uni-th>
					<uni-th width="150rpx" align="left">姓名</uni-th>
					<uni-th width="152rpx" 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" sortable>活跃度</uni-th>
				</uni-tr>

				<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>
				<!-- 表格数据行 -->
				<uni-tr v-for="(i,index) in arrlist" :key="i.openid">
					<uni-td>{{index + 1}}</uni-td>
					<uni-td>
						<view class="td" @click="show" :data-e="i.username">
							{{ i.username }}
						</view>
					</uni-td>
					<uni-td>
						<view class="td" @click="show" :data-e="i.schoolName">
							{{i.schoolName}}
						</view>
					</uni-td>
					<uni-td>{{i.views}}</uni-td>
					<uni-td>{{i.signNum}}</uni-td>
					<uni-td>{{i.act}}</uni-td>
				</uni-tr>


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

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '排行',
					btn: 0
				},
				arrlist: [],
				adv: {}
			};
		},
		methods: {
			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">
	.ranking {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.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 {
			flex: 1;
			overflow: hidden;
		}
	}

	// 顶部大图

	/deep/ .uni-table-tr:nth-child(1) {
		position: fixed;
		background-color: #F7FBFF;
		transform: translate(0, -5rpx);
		padding-bottom: 7rpx;
	}

	/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;
		}
</style>