FE_preschoolEdu_miniProgram/other/vouchers/vouchers.vue

<template>
	<view class="page">
		<ul class="tab-wrap">
			<scroll-view scroll-x :scroll-left="scrollLeft" class="tab tab-scroll">
				<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
			</scroll-view>
		</ul>
		
		<view class="list">
			<view v-for="(item, i) in list" :key="i" class="item">
				<view class="texts">
					<view class="name ell">{{ item.competitionName }}</view>
					<view class="meta">有效期 {{ item.playEndTime.substr(0, 16) }}</view>
				</view>
				<view :class="['use', {ing: item.playing}]" @click.stop="presign(item)">使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { postLoginActivity } from '@/apis/modules/activity.js'
	import Util from '@/libs/util'
	export default {
		data() {
			return {
				teamId: uni.getStorageSync('teamId') || '',
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				keyword: '',
				list: [],
				page: 1,
				pageSize: 5,
				total: 0,
				curTab: 1,
				curItem: null,
				submiting: false,
				tabs: [
					{
						id: 1,
						name: '活动券票'
					},
					{
						id: 2,
						name: '品牌福利'
					},
					{
						id: 3,
						name: '会员福利'
					},
				],
				scrollLeft: 0,
				timer: null,
				now: '',
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		// 上拉加载
		onReachBottom() {
			if (this.reachBottom >= 0) {
				this.reachBottom = 1
				this.status = 'loading'
				this.getList()
			}
		},
		onShow() {
			this.keyword = ''
			this.initList()
		},
		methods: {
			getList() {
				postLoginActivity({
					pageNum: this.page,
					pageSize: this.pageSize,
					listType: 1,
					keyWord: this.keyword,
					platformSource: ''
				}).then(async ({ data }) => {
					this.list = this.reachBottom > 0 ? [...this.list, ...data.records] : data.records
					this.page++ // 每次获取了数据后page+1
					const noMore = this.list.length === data.total // 是否加载完所有数据
					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
					
					this.now = await Util.getNow()
					this.statusInterval()
					uni.hideLoading()
					this.timer = setInterval(() => {
						this.now = new Date(this.now.setSeconds(this.now.getSeconds() + 1))
						this.statusInterval()
					}, 1000)
				}).catch(e => {})
			},
			async statusInterval () {
				this.list.map(item => {
					if (item.signUpStartTime && item.signUpEndTime) {
						this.handleStatus(item)
					}
				})
			},
			// 定时处理时间及状态
			handleStatus (item) {
				let playing = 0
				const playStartTime = new Date(item.playStartTime) // 报名开始时间
				const playEndTime = new Date(item.playEndTime) // 报名结束时间
				const { now } = this
				// 报名中(whetherToSignUp 是否已报名 0为已报名 1为未报名)
				if (now > playStartTime && now < playEndTime) {
					playing = 1
				}
				this.$set(item, 'playing', playing)
			},
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			},
			
			// 跳转活动详情
			toDetail(item) {
				this.$util.to('/other/activityDetail/activityDetail?id=' + item.id)
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
				this.initList()
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding: 20rpx;
}
.tab-wrap {
	display: flex;
	.tab-scroll {
		width: calc(100% - 100rpx);
		white-space: nowrap;
		li {
			display: inline-block;
		}
	}
}
.list {
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 28rpx;
		background-color: #fff;
		overflow: hidden;
		border-radius: 8px;
	}
	.name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}
	.meta {
		margin: 10rpx 0;
		font-size: 24rpx;
		color: #999;
	}
	.use {
		padding: 8rpx 28rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #afafaf;
		border-radius: 4px;
	}
	.ing {
		font-size: 28rpx;
		background-color: $uni-primary;
	}
}
</style>