dev/dcp-app-gate/pages/service/others/myactivity.vue

<template>
	<view class="myActivity">
		<!-- 页面头部 -->
		<view class="bg"></view>
		<u-navbar back-icon-color="#fff" :back-text="$t('common.Back')" :is-back="true"
			:background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :border-bottom="true"
			title-color="#fff" :title="title" :custom-back="back">
		</u-navbar>
		<!-- 全屏选项卡 -->
		<view class="tabcontent">
			<u-tabs-swiper class="menu" ref="uTabs" swiperWidth="750" bar-width="100" bar-height="4"
				inactive-color="#666" :list="list" :current="current" :is-scroll="false" :bold="false"
				@change="tabsChange">
			</u-tabs-swiper>
			<!-- 选项卡绑定的页面 -->
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="currentPage">
							<view class="pageitem" v-for="(pageitem,pageidx) in item.list" :key="pageidx"
								@click="showDetial(pageitem)">
								<view class="thumb">
									<image class="img" :src="pageitem.activityLogo"></image>
									<view class="tag" v-if="$i18n.locale=='en'"
										:class="{'uni':pageitem.activityTypeDict=='2','vip':pageitem.activityTypeDict=='1','ml':pageitem.activityTypeDict=='0'}">
										{{
									pageitem.activityType=='会员活动'?'Member':item.activityType=='联盟活动'?'Alliance':'Cooperation'
									}}
									</view>
									<view class="tag" v-else
										:class="{'uni':pageitem.activityTypeDict=='2','vip':pageitem.activityTypeDict=='1','ml':pageitem.activityTypeDict=='0'}">
										{{
									pageitem.activityType
									}}
									</view>
								</view>
								<view class="pageinfo">
									<view class="label">
										<view class="text">{{pageitem.activityName}}</view>
										<view class="sta unstart" v-if="pageitem.activityStatusDict=='0'">
											{{$t('common.Upcoming')}}
										</view>
										<view class="sta start" v-if="pageitem.activityStatusDict=='1'">
											{{$t('common.RegistrationOpen')}}
										</view>
										<view class="sta doing" v-if="pageitem.activityStatusDict=='2'">
											{{$t('common.Live')}}
										</view>
										<view class="sta finish" v-if="pageitem.activityStatusDict=='3'">
											{{$t('common.Closed')}}
										</view>
									</view>
									<view class="other">
										<view class="country">{{pageitem.activityCity}}</view>
										<view class="date"><text
												class="lab">{{$t('common.Releasedate')}}</text>{{formatDate(pageitem.activityStartTime)}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="nodata" v-if="!showLoading && tabs[swiperCurrent].list.length==0"
							style="text-align: center;margin-top: 120upx;">
							<view class="imgBox" style="height:400upx;margin-bottom:60upx">
								<image src="../../../static/img/public/7.png" style="width: 80%;margin:10%"
									mode="widthFix"></image>
								<text style="font-size:28upx;color:#ccc">{{$t('common.Nodata')}}</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 页面优化提示 -->
		<view class="loading" v-if="showLoading" :class="{fixbottom:true}">
			<u-loadmore :status="status" iconType="flower" :load-text="{loading:this.$t('common.Loading')}" />
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		name: 'MyActivity',
		components: {
			UNavbar,
		},
		data() {
			return {
				title: '',
				list: [{
						name: this.$t('common.Live')
					},
					{
						name: this.$t('common.Finished'),
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabs: [{
						list: []
					},
					{
						list: []
					}
				],
				pageNo: 1,
				pageSize: 10,
				totalPage: 0,
				showLoading: true,
				status: 'loading',
				token: '',
				userId: '',
			}
		},
		onLoad(e) {
			this.title = this.$i18n.locale == 'zh' ? '我的活动' : 'My Activity'
		},
		created() {

		},
		onShow() {
			this.token = uni.getStorageSync('Auth-Token') ? 'Bearer ' + uni.getStorageSync('Auth-Token') : '';
			this.userId = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).id : '';
			this.getActivityApplyById()

		},
		methods: {
			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			//切换选项卡
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			//滑动选项
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.showLoading = false;
				this.pageNo = 1;
				this.getActivityApplyById(this.swiperCurrent)
			},
			//下滑滚动刷新
			onreachBottom() {

			},
			// 获取我的活动列表
			async getActivityApplyById(index, loadmore) {
				this.tabs[0].list = [];
				this.tabs[1].list = [];
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					id: this.userId,
					language: this.$i18n.locale.toUpperCase(),
					type: this.swiperCurrent.toString()
				};
				let res = await this.$myRequest({
					url: '/meeting/meetingApplys/getActivityApplyById',
					data,
				})
				if (res.status == 200) {
					if (res.data.activityInfos) {
						for (let i = 0; i < res.data.activityInfos.length; i++) {
							this.$set(res.data.activityInfos[i], 'activityLogo', 'https://m.geidcp.com/api/file/pub/' +
								res.data.activityInfos[i]
								.activityLogo)
							this.$set(res.data.activityInfos[i], 'activityStartTime', parseInt(res.data.activityInfos[
								i].activityStartTime))
						}
						if (loadmore) { // 加载更多
							this.tabs[this.swiperCurrent].list = [this.tabs[this.swiperCurrent].list, ...res.data
								.activityInfos
							]
						} else {
							this.tabs[this.swiperCurrent].list = res.data.activityInfos
						}
					}
					this.showLoading = false;
				} else {
					this.showLoading = false;
					this.tabs[this.swiperCurrent].list = [];
				}
			},
			//路由跳转
			showDetial(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=' + item
						.baseActivityEntityId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myActivity {
		.bg {
			position: fixed;
			width: 100%;
			right: 0;
			bottom: 0;
			top: 0;
			right: 0;
			background-color: #fafafa;
			z-index: -1;
		}

		.loading {
			width: 100%;
			padding: 20rpx 0;
			background-color: #fafafa;

			/deep/ .u-load-more-wrap {
				margin-top: 50rpx;
			}

			&.fixbottom {
				position: fixed;
				bottom: 0;
				z-index: 999;
			}
		}

		/deep/ .uni-swiper-wrapper {
			position: absolute;
			height: 90%;
		}

		.tabcontent {
			width: 100%;
			height: 90%;
			position: absolute;

			.menu {
				margin-bottom: 0px;
				border-bottom: 1px solid #eee;
			}
		}

		.currentPage {
			width: 96%;
			padding: 2%;
			margin: 0 auto;

			.pageitem {
				display: flex;
				margin: 20upx 0;
				border-radius: 20rpx;
				box-shadow: 1px 1px 6px 2px #f0f0f0;
				justify-content: space-between;
				overflow: hidden;

				.thumb {
					width: 220upx;
					height: 160upx;
					position: relative;
					overflow: hidden;

					.img {
						display: block;
						width: 100%;
						height: 160upx;
					}

					.tag {
						min-width: 120upx;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 222;
						color: #fff;
						font-size: 24upx;
						border-radius: 0 0 20rpx 0;

						&.uni {
							background-color: #0091FF;
						}

						&.vip {
							background-color: #F19E38;
						}

						&.ml {
							background-color: #6DD400;
						}
					}

				}

				.pageinfo {
					width: 70%;
					padding: 0 16upx 0 16upx;

					.label {
						width: 100%;
						font-size: 28upx;
						display: flex;
						justify-content: space-between;
						margin-top: 10upx;

						.text {
							flex: 1;
							height: 80upx;
							line-height: 40upx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							font-size: 24upx;
							color: #555;
						}

						.sta {
							margin-left: 16upx;
							padding: 0 14upx;
							height: 36upx;
							line-height: 36upx;
							font-size: 24upx;
							font-weight: normal;
							text-align: center;
							border-radius: 20upx;

							&.unstart {
								border: 1px solid #0091FF;
								color: #0091FF;
							}

							&.start {
								border: 1px solid #80C93D;
								color: #80C93D;
							}

							&.doing {
								border: 1px solid #F7B500;
								color: #F7B500;
							}

							&.finish {
								border: 1px solid #aaa;
								color: #aaa;
							}

						}
					}

					.other {
						margin-top: 6upx;
						flex: 1;
						display: flex;
						justify-content: space-between;

						.country,
						.date {
							font-size: 24upx;
							color: #aaa;


						}

						.date {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.lab {
								margin-right: 20upx;
							}
						}

					}
				}
			}
		}
	}
</style>