WenWuGuanJia/answer_pages/home/dashboard.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="答题" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view>
			<u-swiper
				:list="bannerlist"
				imgMode="aspectFill"
				:height="200"
				:indicator="true"
				radius="5"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>

		<view>
			<view class="flex justify-center gui-margin-top" style="margin-top: 40rpx">
				<view style="width: 300rpx">
					<u-subsection :list="tablist" :current="testIndex" mode="subsection" @change="onTestSelect"></u-subsection>
				</view>
			</view>
			<view class="activity-list">
				<view class="b-items" v-if="state.items.length > 0">
					<view class="b-item" v-for="(item, index) in state.items" :key="index" @click="onJumpActivitty(item.id)">
						<view class="b-cover" v-if="item.cover_url">
							<image :src="item.cover_url" mode="aspectFill"></image>
						</view>
						<view class="b-main">
							<text class="b-title">{{ item.name }}</text>
							<view class="b-time">
								<view class="s-start">开始时间 {{ datetime(item.start_time) }}</view>
								<view class="s-end">结束时间 {{ datetime(item.end_time) }}</view>
							</view>
							<view class="b-foot">
								<view class="b-state">
									<view class="s-state f-wait" v-if="item.state == 0">未开始</view>
									<view class="s-state f-ing" v-else-if="item.state == 1">进行中</view>
									<view class="s-state f-end" v-else-if="item.state == 2">已结束</view>
								</view>
								<view class="b-action">
									<view class="s-enter">进入活动</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
	</view>
</template>

<script>
import { getActivityList } from '@/service/api/common.js';
import { formatDate } from '../../common/util.js';
// import mixinsCommon from '@/mixins/common.js';

let that;
export default {
	// mixins: [mixinsCommon],
	data() {
		return {
			official: false,
			tablist: ['全部', '比赛', '练习'],
			src: 'https://huli-app.wenlvti.net/uploads/20230608/8432937eabc5a32dcdbab19d2ab68f51.png',
			shh: 'https://huli-app.wenlvti.net/uploads/20230608/667d2bde4141dbe791d8a080edc90d38.png',
			jfdh: 'https://huli-app.wenlvti.net/uploads/20230608/462f2c03a21e5e66a82837e253198bac.png',

			testIndex: 0,
			testList: [
				{
					name: '全部',
					value: 'all'
				},
				{
					name: '比赛',
					value: '1'
				},
				{
					name: '练习',
					value: '2'
				}
			],
			state: {
				items: []
			},
			loadingType: 1,
			loadingText: '',
			bannerlist: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dati_bg.png'],
			tasklist: [],
			page: 1
		};
	},
	onLoad(options) {
		that = this;
		this.loadActivityList(true);
		// 清空了activityId导致积分进不去
		// if (this.$store.getters.activityId) {
		// 	this.$store.commit('delActivityId');
		// }
		// this.getBannerList();
	},
	onShow() {
		// 获取任务列暂时注释
		// this.getTaskList();
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadActivityList();
		}
	},
	computed: {
		datetime() {
			return (timestamp) => {
				return formatDate(timestamp, 'yyyy-MM-dd hh:mm');
			};
		}
	},
	methods: {
		// getBannerList() {
		// 	this.$api.getBannerList({ block: 'Examine', type: 'banner' }, function (res) {
		// 		if (res.code > 0) {
		// 			that.bannerlist = [];
		// 			for (var i = 0; i < res.data.length; i++) {
		// 				that.bannerlist.push({ title: res.data[i].title, url: that.$config.baseUrl + res.data[i].image, page: res.data[i].url });
		// 			}
		// 		}
		// 	});
		// },
		bannerClick(index) {
			this.$common.navigateTo(this.bannerlist[index].page);
		},
		getTaskList() {
			this.$api.getTaskList({}, function (res) {
				console.log(res);
				that.tasklist = res.data;
			});
		},
		loadActivityList(refresh) {
			// console.log('-------------------------------');
			// console.log('loadActivityList', refresh);
			if (refresh) {
				this.page = 1;
				this.state.items = [];
			} else {
				this.page++;
			}

			this.loadingType = 1;
			this.loadingText = '';
			getActivityList(this.testList[this.testIndex].value, this.page, 10).then(([err, res]) => {
				console.log('getActivityList', err, res);

				this.loadingType = -1;
				if (!err) {
					if (res.items.length > 0) {
						this.state.items = [...this.state.items, ...res.items];
					} else {
						this.loadingType = 2;
						if (this.page == 1) {
							this.loadingText = '暂无数据';
						}
						this.page--; // 重置分页
					}
				} else {
					this.loadingType = 3;
				}
			});
		},
		onTestSelect(index) {
			this.testIndex = index;
			this.loadActivityList(true);
		},
		onJumpActivitty(id) {
			uni.navigateTo({
				url: '/answer_pages/home/welcome?from=jump&aid=' + id
			});
		}
	}
};
</script>

<style lang="scss">
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.number {
	background-color: #ff5500;
	width: 60rpx;
	height: 60rpx;
	color: white;
	text-align: center;
	font-size: 40rpx;
	padding: 10rpx;
	margin: 35rpx;
	border-radius: 60upx;
}

.wrap {
}

.filter-box {
	padding: 40upx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;

	.b-item {
		width: 240upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;

		&.f-active {
			font-weight: bold;
		}

		.s-tit {
			color: #333;
		}
	}
}

.activity-list {
	padding: 40upx 40upx 0 40upx;

	.b-items {
		.b-item {
			margin-bottom: 40upx;
			border-bottom: 1upx solid #eee;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 20upx;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			.b-cover {
				width: 670upx;
				height: 300upx;

				image {
					border-radius: 20upx 20upx 0 0;
					width: 670upx;
					height: 300upx;
				}
			}

			.b-main {
				padding: 20upx;
			}

			.b-title {
				font-size: 32upx;
			}

			.b-time {
				margin-top: 10upx;
				display: flex;
				flex-direction: column;

				font-size: 26upx;
				color: #999;
				line-height: 40upx;
			}

			.b-foot {
				margin-top: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.b-state {
					.s-state {
						padding: 0 20upx;
						background: #da5650;
						color: #fff;
						font-size: 24upx;
						height: 40upx;
						line-height: 40upx;

						&.f-wait {
							background: #444c69;
						}

						&.f-ing {
							background: #ffc300;
						}

						&.f-end {
							background: #c4c4c4;
						}
					}
				}

				.b-action {
					.s-enter {
						padding: 0 30upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						color: #fff;
						font-size: 28upx;
						background: #da5650;
						border-radius: 30upx;
					}
				}
			}
		}
	}
}
</style>