xiaoyou-h5/pages/mine/my_active.vue

<template>
	<view class="my_active">
		<view class="search">
			<image src="../../static/images/search.png" mode=""></image>
			<input type="text" value="" placeholder="请输入活动名称" v-model="search_text"
				placeholder-style="font-size:14px;color:#D9D0C8;" @confirm="search" @input="get_text" />
		</view>
		<view class="card">
			<view class="tab">
				<u-tabs-swiper ref="uTabs" :list="list" bar-height="8" bar-width="60"  bg-color="" font-size="36" :bold="false"
					active-color="#674023" inactive-color="#A2A2A2" @change="tabsChange"></u-tabs-swiper>
			</view>

			<swiper :style="{'height': scrollHeight+'px'}" class="swiper" :current="swiperCurrent"
				@transition="transition" @change="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view class="scrollbox" :style="{'height': scrollHeight+'px'}" :scroll-y='true'
						@scrolltolower="onreachBottom">
						<!-- scroll-y -->
						<view class="empty" v-if="my_list.length == 0">
							<image src="../../static/images/empty_active.png" mode=""></image>
							<text>没有相关活动哦，快返回活动列表去寻找您感兴趣的活动加入吧！</text>
						</view>
						<view class="item" v-for="(item,index) in my_list" :key="index" @click="to_detail(item)">
							<view class="img"
								:style="{backgroundImage:'url('+ (item.cover_resource?item.cover_resource.url :'' ) +')'}">
								<!-- <image :src="item.cover_resource.url" mode=""></image> -->
							</view>
							<view class="right">
								<view class="title">{{item.title}}</view>
								<view class="logo">
									<image
										:src="item.organization?item.organization.logo != null?item.organization.logo:'':''"
										mode=""></image>
									<text>{{item.organization?item.organization.name:'--'}}</text>
								</view>
								<view class="time">
									<text>{{item.start_time}}--{{item.end_time}}</text>|<text>{{item.shape_text}}活动</text>
								</view>
								<view class="free">
									<!-- {{item.money}} -->
									{{item.sign_up_nums}}/{{item.total_nums}}
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view class="scrollbox" :style="{'height': scrollHeight+'px'}" :scroll-y='true'
						@scrolltolower="onreachBottom">
						<view class="empty" v-if="my_list2.length == 0">
							<image src="../../static/images/empty_active.png" mode=""></image>
							<text>您还没有参与任何一项活动，快返回活动列表去寻找您感兴趣的活动加入吧！</text>
						</view>
						<view class="item" v-for="(item,index) in my_list2" :key="index" @click="to_detail(item)">
							<view class="img"
								:style="{backgroundImage:'url('+ (item.cover_resource?item.cover_resource.url :'' ) +')'}">
								<!-- <image :src="item.cover_resource.url" mode=""></image> -->
							</view>
							<view class="right">
								<view class="title">{{item.title}}</view>
								<view class="logo">
									<image
										:src="item.organization?item.organization.logo != null?item.organization.logo:'':''"
										mode=""></image>
									<text>{{item.organization?item.organization.name:'--'}}</text>
								</view>
								<view class="time">
									<text>{{item.start_time}}--{{item.end_time}}</text>|<text>{{item.shape_text}}活动</text>
								</view>
								<view class="free">
									<!-- {{item.money}} -->
									{{item.sign_up_nums}}/{{item.total_nums}}
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '我发起的'
				}, {
					name: '我参与的'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				search_text: '',
				my_list: [{
						title: '河南中医药大学药学院举办校友院举办校友…',
						logo: '../../static/images/logo.png',
						school: '河南中医药学院主办',
						time: '2021.09.28-2021.10.28',
						type: '线下活动',
						money: '免费'
					},
					{
						title: '河南中医药大学药学院举办校友院举办校友…',
						logo: '../../static/images/logo.png',
						school: '河南中医药学院主办',
						time: '2021.09.28-2021.10.28',
						type: '线下活动',
						money: '免费'
					},
					{
						title: '河南中医药大学药学院举办校友院举办校友…',
						logo: '../../static/images/logo.png',
						school: '河南中医药学院主办',
						time: '2021.09.28-2021.10.28',
						type: '线下活动',
						money: '免费'
					},
					{
						title: '河南中医药大学药学院举办校友院举办校友…',
						logo: '../../static/images/logo.png',
						school: '河南中医药学院主办',
						time: '2021.09.28-2021.10.28',
						type: '线下活动',
						money: '免费'
					}
				],
				my_list2: [],
				scrollHeight: '',
				params: {

				},
				join_params: {},
				page: 1,
				last: false,
			}
		},
		onShow() {
		
		},
		onLoad() {
			this.my_list = []
			this.my_list2 = []
			this.get_active_list()
		},
		mounted() {
			let that = this;
			const res = uni.getSystemInfoSync();
			let height = res.windowHeight
			this.scrollHeight = height - 150
			console.log(that.scrollHeight)
		},
		methods: {
			
			// tabs通知swiper切换
			tabsChange(index) {
				console.log(index, '0')
				this.swiperCurrent = index;

			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.page = 1
				this.last = false
				this.search_text = ''
				if (this.current == 0) {
					this.my_list = []
					this.get_active_list()
				} else {
					console.log(this.current)
					this.my_list2 = []
					this.get_join_list()
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(';;;;;;;;;;;;;;;;;;;;;;;;;pppp')
				if (!this.last) {
					this.page++

				}
				if (this.swiperCurrent == 0) {
					this.get_active_list()
				} else {
					this.get_join_list()
				}


			},

			get_active_list() {
				this.params.title = this.search_text
				this.params.page = this.page
				this.params.me = 1
				this.$u.get('/page/activities', this.params).then(res => {
					console.log(res, 'active')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.my_list = this.my_list.concat(data)
						this.my_list = this.my_list.map(item => {
							item.start_time = item.start_time.slice(0, 10)
							item.end_time = item.end_time.slice(0, 10)
							return item
						})
					}
				})
			},
			get_join_list() {
				this.join_params.title = this.search_text
				this.join_params.page = this.page
				this.$u.get('/page/me-join-activity', this.join_params).then(res => {
					console.log(res, 'join')
					if (this.page > 1 && res.data.data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.my_list2 = this.my_list2.concat(res.data.data)
						this.my_list2 = this.my_list2.map(item => {
							item.start_time = item.start_time.slice(0, 10)
							item.end_time = item.end_time.slice(0, 10)
							return item
						})
					}
				})
			},
			search() {
				if (this.swiperCurrent == 0) {
					this.my_list = []
					this.get_active_list()
				} else {
					this.my_list2 = []
					this.get_join_list()
				}
			},
			to_detail(item) {
				uni.navigateTo({
					url: '../activity/active_detail?id=' + item.id
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
		background-color: #F9F9FB;
	}

	.my_active {
		padding: 0 16px;

		.search {
			display: flex;
			align-items: center;
			height: 52px;
			box-shadow: 0px 8px 16px rgba(12, 20, 61, 0.06);
			border-radius: 10px;
			margin-top: 20px;

			image {
				width: 16px;
				height: 16px;
				margin-left: 20px;
				margin-right: 20px;
			}
		}

		.card {
			margin-top: 20px;
			width: 100%;

			.tab {
				padding-bottom: 10px;
				background-color: #F9F9FB;
			}

			.swiper {

				// height: 100vh;	
				// padding-bottom: 20px;
				.swiper-item {
					.empty {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						font-family: PingFang HK;
						font-weight: 400;
						line-height: 20px;
						color: #696969;
						opacity: 0.47;

						image {
							width: 94px;
							height: 51px;
							margin-bottom: 25px;
						}
					}

					
					.item{
						// height: 113px;
						background: #FFFFFF;
						box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
						border-radius: 10px;
						display: flex;
						align-items: center;
						margin-top: 14px;
						padding: 16px 10px;
						&:last-child{
							// padding-bottom: 20px;
							margin-bottom: 30px;
						}
						.img{
							width: 100px;
							height: 90px;
							overflow: hidden;
							border-radius: 6px;
							flex-shrink: 0;
							margin-right: 8px;
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center;
							image{
								width: 100px;
								height: 92px;
							}
						}
						.right{
							width: 100%;
							.title{
								font-size: 15px;
								font-family: Graphit;
								font-weight: 500;
								color: #282828;
								overflow: hidden;
								-webkit-line-clamp: 1;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}
							.logo{
								display: flex;
								align-items: center;
								font-size: 13px;
								font-family: Graphit;
								font-weight: 500;
								color: #696969;
								margin-top: 2px;
								image{
									width: 24px;
									height: 24px;
									border-radius: 50%;
									margin-right: 6px;
								}
							}
							.time{
								font-size: 12px;
								font-family: PingFang HK;
								font-weight: 400;
								color: #B2B2B2;
								margin-top: 2px;
								overflow: hidden;
								-webkit-line-clamp: 1;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								text:first-child{
									margin-right: 2px;
									
								}
								text:last-child{
									margin-left: 2px;
								}
							}

							.free {
								font-size: 14px;
								font-family: PingFang HK;
								font-weight: 500;
								color: #79573D;
								margin-top: 8px;
							}
						}
					}
				}
			}


		}
	}
</style>