dev/dcp-app-gate/pages/conference/meetingIndexCh/meetingIndex.vue

<template>
	<view>
		<view v-if="emptyBox">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:title="i18n('ThinkTankConsultingDetails')" :background="background">
			</u-navbar>
		</view>

		<!-- 房子按钮 -->
		<view class="house" @click="toHome" v-if="!emptyBox">
			<uni-icons type="home" size="20" color="#EEEEEE"></uni-icons>
		</view>
		<!-- 轮播图 -->
		<view class="swiperBig" :class="{'swiperSmall':pastEvent}" v-show="swiperexist">
			<view class="uni-padding-wrap">
				<!-- 图片部分 -->
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration" circular @change="test" @touchmove="handletouchmove"
							@touchstart="handletouchstart" @touchend="handletouchend">
							<swiper-item v-for="(item,index) in bannerData" :key="index">
								<!-- 									<image 
									class="myImage" 
									:src="websiteUrl + item.appPublicityImgZh + '?custom=375_694'"
									mode=""
									@click="navigateTo(item.id)"></image> -->
								<image class="myImage" :src="websiteUrl + item.appPublicityImgZh" mode=""
									@click="navigateTo(item.id)"></image>

							</swiper-item>
						</swiper>
					</view>
				</view>


				<!-- 箭头按钮 -->
				<view class="nextBig" @click="arrowNavto">
					<uni-icons type="arrowthinright" size="30" color="#EEEEEE"></uni-icons>
				</view>
				<!-- 大小图切换(past event) -->
				<view class="changeview" @click="changeMyView" v-show="pastEvents">
					往期会议
					<uni-icons type="arrowdown" size="30" color="#ffffff" class="arrowdown"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <view style="height: 100rpx"></view> -->

		<!-- 空白盒子,当没有未开始会议没有轮播图时,为了把列表挤下来 -->
		<!-- <view style="height: 70rpx;" v-if="emptyBox"></view> -->
		<!-- 搜索框 -->
		<view class="mySearch" :class="{'mySearchSmall':pastEvent}" v-show="pastEvent">
			<mSearch :show="false" @search="search($event,0)" placeholder='' backgroundColor='#d7d7d7' border="0px">
			</mSearch>
		</view>
		<!-- 列表展示 -->
		<view class="" v-for="(_item,_index) in meetingList" :key="_index">
			<!-- 分类年份 -->
			<view class="conference-time" v-show="pastEvent">
				<view
					style="width: 7px;height: 18px;background-color: #6dd400;display: inline-block;margin-right: 6px;">
				</view>
				{{_item.year}}
			</view>
			<!-- 每个会议 -->
			<view class="myList" v-for="(item,index) in _item.data" :key="index" v-show="pastEvent"
				@click="navigateOver(item.id)">
				<view class="listLeft" style="">
					<view style="text-align: center;font-size: 23px;color: #8a8989;">
						{{moment(item.meetingStartDate).format('DD')}}
					</view>
					<view style="text-align: center;color: #8a8989;">
						{{moment(item.meetingStartDate).format('YYYY - MM')}}
					</view>
				</view>
				<view class="listRight">
					<text style="font-size: 32rpx;line-height: 25px;font-weight: bold;">
						{{item.meetingName}}
					</text>
					<text style="color: #a8a8a8;">
						{{item.meetingPlace}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import {
		getConfrences
	} from "@/api/meeting/meetingOutInfo.js";
	export default {
		data() {
			return {
				background: {
					// backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
					backgroundColor: '#1777FE'
				},
				backStyle: {
					color: '#fff'
				},
				// background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				meetingList: [],
				conferenceData: [], //已结束会议
				bannerData: [], //筛选出的未开始的会议
				pastEvent: false, //决定轮播图下面的内容是否显示（false不显示）
				pastEvents: true, //决定pastEvent按钮是否显示
				swiperexist: true, //决定轮播图是否显示
				currentId: '',
				emptyBox: true,
				// 滑动需要用的变量
				flag: 0,
				text: '',
				lastX: 0,
				lastY: 0,
			}
		},
		components: {
			uniIcons,
			mSearch
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			back() {
				uni.navigateBack();

			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			async getList() {
				const res = await this.$myRequest({
					url: '/meeting/meetingBasicInfos/getList',
				});
				this.bannerData = []

				// console.log("222",res)
				res.data.meetingBasicInfos.forEach(item => {
					// 报名未开始会议
					if (!this.isMeetingOver(item.meetingEndDate) && item.meetingIsShow == "01" && item
						.meetingIsEnroll == "01") {
						this.bannerData.push(item);
						//把未开始会议的第一个的 id 赋值给 currentId. 防止当未开始会议只有一个时,没办法触发轮播图
						//change事件而导致 currentId 没有值,转调时就会出现详情页没有数据
						this.currentId = this.bannerData[0].id;
					}
					// 已结束会议
					if (this.isMeetingOver(item.meetingEndDate) && item.meetingIsShow == "01") {
						this.conferenceData.push(item)
					}
				});
				// 当未开始会议为零时,则不显示轮播图
				if (this.bannerData.length === 0) {
					this.swiperexist = false
					this.pastEvent = true
					this.emptyBox = true
				} else {
					this.swiperexist = true
					this.pastEvent = false
					this.emptyBox = false
				}
				// console.log("======="+this.bannerData.id)
				this.formatConferenceData(this.conferenceData);
				// this.conferenceData = this.meetingList;
			},
			// 结束会议数据重组
			formatConferenceData(data) {
				if (data.length) {
					this.meetingList = [];
					data.forEach(item => {
						let year = this.moment(item.meetingStartDate).format('YYYY年');
						if (this.meetingList.length) {
							let hasSameLetter = false;
							let listItemIndex;
							for (let l = 0; l < this.meetingList.length; l++) {
								if (this.meetingList[l].year == year) {
									hasSameLetter = true;
									listItemIndex = l;
									break;
								}
							}
							if (hasSameLetter) {
								this.meetingList[listItemIndex].data.push(item);
							} else {
								this.meetingList.push({
									year: year,
									data: [item]
								});
							}
						} else {
							this.meetingList.push({
								year: year,
								data: [item]
							});
						}
					})
				}
			},
			// 判断会议是否结束
			isMeetingOver(t) {
				var ct = Date.parse(new Date());
				if (ct - t > 0) {
					return true;
				} else {
					return false;
				}
			},
			//改变视图
			changeMyView() {
				// console.log(this.pastEvent)
				this.pastEvent = !this.pastEvent
				this.pastEvents = false
			},
			navigateTo(id) {
				uni.navigateTo({
					url: "meetingDetail?id=" + id
				})
				// console.log(id)
			},
			navigateOver(id) {
				uni.navigateTo({
					url: "meetingOver?id=" + id
				})
				// console.log(id)
			},
			toHome() {
				this.$mRouter.reLaunch({
					route: '/pages/index/index'
				});
			},
			test(e) {
				this.currentId = this.bannerData[e.detail.current].id;
				// console.log(e)
			},
			arrowNavto() {
				uni.navigateTo({
					url: "meetingDetail?id=" + this.currentId
				})
			},
			// 搜索方法
			search(e) {
				if (e == '') {
					this.formatConferenceData(this.conferenceData)
				} else {
					let ddd = this.conferenceData.filter(item => {
						return item.meetingName.includes(e) > 0 || item.meetingNameEn.includes(e) > 0
					});
					this.formatConferenceData(ddd)
				}
				if (!this.meetingList.length) {
					this.$message.warning('未找到匹配的内容');
				}
			},
			// 自定义的滑动事件
			handletouchmove: function(event) {
				// console.log(event)
				if (this.flag !== 0) {
					return;
				}
				let currentX = event.touches[0].pageX;
				let currentY = event.touches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						this.flag = 1;
						//  this.getList();  //调用列表的方法
					} else if (tx > 0) {
						text = '向右滑动';
						this.flag = 2;
					}
				}
				//上下方向滑动
				else {
					if (ty < 0) {
						text = '向上滑动';
						this.flag = 3;
						this.pastEvent = true
						this.pastEvents = false
						//  this.getList();  //调用列表的方法
					} else if (ty > 0) {
						text = '向下滑动';
						this.flag = 4;
						this.pastEvent = false
						this.pastEvents = true
					}
				}
				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
			},
			handletouchstart: function(event) {
				// console.log(event)
				this.lastX = event.touches[0].pageX;
				this.lastY = event.touches[0].pageY;
			},
			handletouchend: function(event) {
				this.flag = 0;
				this.text = '没有滑动';
			},
		},
		onReady() {
			this.getList()
			// this.meetingList = getMeetingApplys()
			// console.log('====',this.meetingList)
		},
		// 下拉刷新更新加载会议信息
		onLoad() {
			console.log(this.$i18n.locale, '大预言');
			// console.log(this.bannerData.id)
		},
	}
</script>

<style scoped>
	page {
		background-color: #ffffff;
	}

	/deep/uni-swiper .uni-swiper-dots-horizontal {
		left: 10%;
		bottom: 11%;
	}

	/deep/.uni-swiper-dot {}

	.uni-padding-wrap {
		box-sizing: border-box;
		position: relative;
		/* height: 100%; */
		/* margin: 0 0rpx; */
		/* padding-bottom: 100rpx; */
		/* border-bottom-right-radius: 100rpx; */
		overflow: hidden;
	}

	/* 轮播图高度样式一 */
	.swiper {
		height: calc(100vh);
		/* transition: all 1s; */
	}

	.swiperBig {
		transition: all 1s;
	}

	/* 轮播图样式二 */
	.swiperSmall {
		/* height: 430rpx; */
		transform: translateY(-820rpx);
		transition: all 1s;
		margin-bottom: -810rpx;
	}

	swiper-item {
		display: block;
		text-align: center;
	}

	.myImage {
		width: 100%;
		height: 100%;
	}

	/* 大图房子样式 */
	.house {
		z-index: 1;
		position: fixed;
		top: 70rpx;
		right: 48rpx;
		height: 60rpx;
		width: 100rpx;
		background-color: #667b9e;
		border-radius: 40rpx;
		text-align: center;
		line-height: 70rpx;
	}

	/* 小图房子样式 */
	.houseSmall {
		position: absolute;
		top: 890rpx;
		right: 50rpx;
		height: 60rpx;
		width: 100rpx;
		background-color: #667b9e;
		border-radius: 40rpx;
		text-align: center;
		line-height: 70rpx;
		transition: all 1s;
	}

	/* 箭头样式一 */
	.nextBig {
		position: absolute;
		bottom: 100rpx;
		right: 70rpx;
		height: 120rpx;
		width: 120rpx;
		background-color: #a3d3f1;
		border-radius: 50%;
		text-align: center;
		line-height: 120rpx;
		transition: all 1s;
	}

	.changeview {
		position: absolute;
		bottom: 52rpx;
		left: 52rpx;
		height: 60rpx;
		width: 380rpx;
		font-size: 48rpx;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.arrowdown {
		position: absolute;
		top: 2rpx;
		right: 100rpx;
	}

	/* 搜索框样式 */
	.mySearch {
		width: 710rpx;
		height: 90rpx;
		margin: 10rpx 20rpx;
		border: 0rpx;
		background-color: #e7e7e7;
		border-radius: 42rpx;
	}

	.search {
		border-radius: 60rpx;
	}

	.conference-time {
		text-align: left;
		padding-left: 30rpx;
		font-size: 24px;
		line-height: 50px;
		font-weight: bold;
		color: #666;
		border-top: 10px solid #d7d7d7;
	}

	/* 内容列表 */
	.myList {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0 30rpx 0 0;
		margin-bottom: 15px;
		/* transform: translateY(-820rpx);
		transition: all 1s; */
	}

	.myList view {
		width: 100%;
		height: 100%;
	}

	.listLeft {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.listRight {
		padding-top: 6rpx;
		display: flex;
		flex-direction: column;
		flex: 3;
		/* white-space:nowrap; */
		/* text-overflow:ellipsis */
	}

	/deep/ uni-swiper .uni-swiper-dot {
		background: #ccc;
		margin-bottom: 2px;
	}

	/deep/ uni-swiper .uni-swiper-dot-active {
		background-color: #ccc;
		border: 2px solid #FFFFFF;
		margin-bottom: 0;
	}
</style>