discounts-minapp/pages/activity/index.vue

<template>
	<view style="height: 100%;" @touchstart="startTouch" @touchmove="moveTouch" @touchend="endTouch">
		<zs-skeleton type="activity" :loading="loading"></zs-skeleton>
		<view class="zs-header" :style="{ height: statusBarHeight + navBareight + 'px', background: '#fff' }">
			<view class="title">
				<view @click="changeTab(0)" :class="['title-text', headerTab === 0 ? 'active' : '']">
					平台活动
				</view>
				<view @click="changeTab(1)" :class="['title-text', headerTab === 1 ? 'active' : '']">
					我的活动
				</view>
			</view>
		</view>
		<view :style="{ marginTop: statusBarHeight + navBareight + 'px' }">
			<view class="activity" v-if="headerTab === 0">
				<zs-list mt="0" @load="loadMore" :status="status">
					<view class="item" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
						<zs-img :src="item.activityCover" width="710rpx" height="320rpx"></zs-img>
						<view class="info">
							<view class="title">
								{{ item.activityName }}
							</view>
							<view class="desc">
								活动时间: {{ item.activityStartTime }} 至 {{ item.activityEndTime }}
							</view>
						</view>
					</view>
				</zs-list>
			</view>
			<view class="activity" v-if="headerTab === 1">
				<zs-list mt="0" @load="loadEventMore" :status="eventStatus">
					<view class="event-item" v-for="item in eventList" :key="item.id" @click="toDetailStudy(item.orderNo)">
						<view class="info">
							<view class="content">
								<view class="main">
									<view class="title">
										{{ item.goodsInfoVo.goodsName || '低碳环保-云漫湖·森哒星生态度假哒星生态度哒星生态度哒星生态度' }}
									</view>
									<view class="description">
										{{ item.goodsInfoVo.goodsDescribe || '景观中国天眼探索宇宙深度的秘密宇宙深度的秘宇宙深度的秘宇宙深度的秘宇宙深度的秘' }}
									</view>
									<view class="itinerary">
										出发时间 {{ $u.timeFormat(item.reserveTime, 'yyyy-mm-dd hh:MM:ss') }}·{{ item.stateStr }}
									</view>
								</view>
								<view class="image">
									<img :src="item.goodsInfoVo.goodsPath || 'https://via.placeholder.com/82'" alt="活动图片">
								</view>
							</view>
							<view class="footer">
								<view class="slogan">
									研学旅行规划先行，请合理安排时间
								</view>
								<view class="action">
									立即学习
								</view>
							</view>
						</view>
					</view>
				</zs-list>
			</view>

		</view>

	</view>
</template>

<script>
import { activityList, studyList } from '@/api/activity'
export default {
	data() {
		return {
			status: 'more',
			eventStatus: 'more',
			list: [],
			eventList: [],
			query: {
				currentPage: 1,
				pageSize: 10,
				shopId: 0,
				state: 2
			},
			eventQuery: {
				currentPage: 1,
				pageSize: 10,
				shopId: 0,
				state: 2
			},
			loading: true,
			statusBarHeight: 20,
			navBareight: 45,
			headerTab: 0,
			startX: 0,
			moveX: 0
		}
	},
	methods: {
		loadMore() {
			this.activityList()
		},
		loadEventMore() {
			this.getEventList()
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/signUp/index?scene=' + id
			})
		},
		goStudyDetail(id) {
			uni.navigateTo({
				url: '/pages/activity/detail?scene=' + id
			})
		},
		activityList() {
			this.status = 'loading'
			activityList(this.query).then(res => {
				if (res.state == 'Success') {
					this.list = this.list.concat(res.content.records)
					if (this.list.length >= res.content.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
						this.query.pageCurrent++
					}
				}
				this.loading = false
			})
		},
		getEventList() {
			this.eventStatus = 'loading'
			studyList(this.eventQuery).then(res => {
				if (res.state == 'Success') {
					this.eventList = this.eventList.concat(res.content.records)
					if (this.eventList.length >= res.content.total) {
						this.eventStatus = 'noMore'
					} else {
						this.eventStatus = 'more'
						this.eventQuery.pageCurrent++
					}
				}
			})
		},
		changeTab(v) {
			this.headerTab = v
			uni.vibrateShort()
		},
		startTouch(e) {
			this.startX = e.changedTouches[0].clientX;
		},
		moveTouch(e) {
			this.moveX = e.changedTouches[0].clientX - this.startX;
		},
		endTouch(e) {
			console.log(this.moveX, this.headerTab)
			if (Math.abs(this.moveX) > 90) { // 滑动距离超过90px时才进行切换  
				if (this.moveX > 0) {
					// 向右滑动  
					if (this.headerTab === 0) {
						this.headerTab = 1
					} else {
						this.headerTab = 0
					}
				} else {
					// 向左滑动  
					if (this.headerTab === 1) {
						this.headerTab = 0
					} else {
						this.headerTab = 1
					}
				}
				this.startX = 0; // 重置起始位置
				this.moveX = 0; // 重置移动距离
			}
		},
		toDetailStudy(orderNo) {
			console.log('====================================');
			console.log(orderNo);
			console.log('====================================');
			uni.navigateTo({
				url: '/pages/activity/detail?orderNo=' + orderNo
			})
		}
	},
	onLoad() {
		// this.activityList()
	},
	onShareTimeline() {
		return {
			title: "慧研学惠生活",
			query: "id=1",
		};
	},
	onShareAppMessage() {
		return {
			title: "慧研学惠生活",
			path: "/pages/activity/index",
		};
	},
	created() {
		//获取手机系统信息 -- 状态栏高度
		let {
			statusBarHeight,
		} = uni.getSystemInfoSync()
		this.statusBarHeight = statusBarHeight
		//去除
		//#ifndef H5 || MP-ALIPAY ||APP-PLUS
		//获取小程序胶囊的高度
		let {
			top,
			bottom,
			left
		} = uni.getMenuButtonBoundingClientRect()
		//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
		this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
		//#endif
		this.headerTab = 0
	}
}
</script>

<style lang="scss" scoped>
.zs-header {
	position: fixed;
	width: 100%;
	// height: calc(44px + env(safe-area-inset-top));
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	padding: 6px;
	transition: background .3s ease-in-out;

	.back {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		bottom: 10px;
		// top: calc(16px + env(safe-area-inset-top));
		left: 20rpx;
	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;

		.title-text {
			font-size: 32rpx;
			color: #333333;
			font-weight: 400;

			&:nth-child(1) {
				margin-right: 10rpx;
			}

			&:nth-child(2) {
				margin-left: 10rpx;
			}
		}

		.active {
			font-weight: bold;
			color: black;

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 4rpx;
				background: $uni-color-primary;
				border-radius: 2rpx 2rpx 0 0;
			}
		}
	}
}

.activity {
	padding: 20rpx;
	background: #F9F9F9;
	min-height: 100vh;

	.zs-list {
		.item {
			margin-bottom: 20rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.info {
				background: #fff;
				padding: 20rpx 24rpx;

				.title {
					font-size: 28rpx;
					color: #222222;
					width: 640rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.desc {
					font-size: 24rpx;
					color: #AAAAAA;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					margin-top: 20rpx;
				}
			}
		}

		.event-item {
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.info {
				background: #fff;
				padding: 24rpx;

				.content {
					display: flex;
					justify-content: space-between;

					.main {
						width: 70%;

						.title {
							font-size: 28rpx;
							color: #222222;
							font-weight: bold;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.description,
						.itinerary {
							font-size: 24rpx;
							color: #AAAAAA;
							overflow: hidden;
							text-overflow: ellipsis;
							/* 弹性伸缩盒子模型显示 */
							display: -webkit-box;
							/* 限制在一个块元素显示的文本的行数 */
							-webkit-line-clamp: 2;
							/* 设置或检索伸缩盒对象的子元素的排列方式 */
							-webkit-box-orient: vertical;
							margin-top: 20rpx;
						}
					}

					.image {
						width: 164rpx;
						height: 164rpx;
						border-radius: 16rpx;
						overflow: hidden;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					background: #F9F9F9;
					border-radius: 16rpx;
					padding: 24rpx;

					.slogan,
					.action {
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
			}
		}
	}
}
</style>