weapp-v1/pages/score/score.vue

<template>
	<view class="score">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<view class="score-type">
				<view class="score-type-item" :class="{ active: active == 0 }" @click="active = 0">上传成功</view>
				<view class="score-type-item" :class="{ active: active == 1 }" @click="active = 1">上传失败</view>
			</view>
			<view class="title">
				<text>时间</text>
				<text>类型</text>
				<text>学分</text>
			</view>
			<view class="list">
				<scroll-view v-if="list.length" scroll-y :style="{ height: scrollViewHeight + 'px' }" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item, index) in list" :key="index" @tap="preview(index)">
						<view class="date">
							<text>{{ item.timestamp | getYear }}-{{ item.timestamp | getMonth }}-{{ item.timestamp | getDate }}</text>
							<text>{{ item.timestamp | getDay }}</text>
						</view>
						<view class="type">{{ item.type | type }}</view>
						<view class="num">{{ item.num > 0 ? '+ ' + item.num : item.num }}</view>
						<view class="tap" v-if="item.img">点击查看上传图片</view>
					</view>
					<custom-reach-bottom v-if="list.length" :nomore="nomore"></custom-reach-bottom>
				</scroll-view>
				<view v-else class="nomore">-暂无更多兑换记录-</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getScoreList, api_upload_fail } from '../../api.js'
	import { formatTimestamp } from '../../common/js/utils.js'
	import customReachBottom from '../../components/custom-reach-bottom.vue'
	export default {
		components: {
			customReachBottom
		},
		data() {
			return {
				pageTitle: '学分账单',
				list: [],  //账单列表
				scrollViewHeight: 0,  //scrollview 高度
				page: 1,  //页数
				nomore: false,  //是否还有更多
				requesting: false,  //是否正在网络请求 用于防抖
				active: 0
			};
		},
		computed: {
			userServerInfo () {  //用户服务器信息
				return this.$store.state.userServerInfo
			},
		},
		filters: {  //过滤器
		  type (value) {
			  if (+value === 1) {
				  return '销售学分'
			  } else if (+value === 2) {
				  return '奖励学分'
			  } else if (+value === 3) {
				  return '竞猜成功学分'
			  } else if (+value === 4) {
				  return '挑战成功学分'
			  } else if (+value === 5) {
				  return '第一周上榜奖励'
			  } else if (+value === 6) {
				  return '第二周上榜奖励'
			  } else if (+value === 7) {
				  return '第三周上榜奖励'
			  }
		  }
		},
		watch: {
			active (n) {
				this.page = 1
				this.request()
			}
		},
		mounted() {
			this.$scrollViewHeight('.list')  //设置页面内 scroll view 的高度
			this.request()
		},
		methods: {
			request() {
				uni.showLoading({ mask: true, title: '加载中' })
				this.$ajax.get(`${ this.active == 0 ? api_getScoreList : api_upload_fail }?page=1&season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {
					uni.hideLoading()
					if (res.data.list.length < 20) {
						this.nomore = true
					} else {
						this.nomore = false
					}
					this.list = res.data.list
					// this.list = res.data.list.reverse()
				})
			},
			scrolltolower () {  //下拉 scroll view 触底函数
				if (!this.nomore && !this.requesting) {  //只有在有更多和没有网络请求时才触发请求
					this.requesting = true
					this.$ajax.get(`${ this.active == 0 ? api_getScoreList : api_upload_fail }?page=${this.page + 1}&season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {
						this.requesting = false
						this.page ++ 
						if (res.data.list.length < 20) {
							this.nomore = true
						}
						this.list = [...this.list, ...res.data.list.reverse()]
					}, () => {
						this.requesting = false
					})
				}
			},
			preview(index) {
				if (this.list[index].img) {
					uni.previewImage({ urls: [this.list[index].img] })
				}
				return
			}
		}
	}
</script>

<style lang="scss" scoped>
	.score {
		@include page();
		.content {
			margin-top: $custom-nav-borderbot-height;
			background: $custom-nav-borderbot-color;
			display: flex;
			flex-direction: column;
			.title {
				display: flex;
				height: 70rpx;
				font-size: 32rpx;
				background: #FFFFFF;
				align-items: center;
				color: rgba(42,42,42,1);
				justify-content: space-around;
				border-bottom: 2rpx solid $custom-nav-borderbot-color;
			}
			.score-type  {
				display: flex;
				height: 70rpx;
				font-size: 32rpx;
				background: #FFFFFF;
				color: rgba(42,42,42,1);
				border-bottom: 2rpx solid $custom-nav-borderbot-color;
				> view {
					flex: 1;
					height: 100%;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					justify-content: center;
					border-bottom: 4rpx solid #FFFFFF;
					&.active {
						border-color: #F76353;
					}
				}
			}
			.list {
				flex: 1;
				scroll-view {
					.item {
						display: flex;
						height: 130rpx;
						position: relative;
						align-items: center;
						background: #FFFFFF;
						justify-content: space-around;
						border-bottom: 2rpx solid $custom-nav-borderbot-color;
						view {
							font-size: 26rpx;
							color: #2A2A2A;
							&.date, &.type, &.num {
								height: 100%;
								width: 33.3333%;
								float: left;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
							}
							&.num { 
								font-size: 40rpx;
								color: #FE6740;
							}
							&.tap {
								position: absolute;
								right: 30rpx;
								bottom: 10rpx;
								color: #999999;
							}
						}
					}
				}
				.nomore {
					font-size: 20rpx;
					color: #999999;
					margin: 42rpx auto;
					text-align: center;
				}
			}
		}
	}
</style>