dev/dcp-app-gate/pages/notify/notify.vue

<template>
	<view class="rf-category">
		<rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" @tab="tabClick"
			:title="$i18n.locale=='zh'?'发现':'Find'"
			:placeholder="$i18n.locale == 'zh'? '请输入关键字': 'Please input keywords'" />

		<!-- 轮播 -->
		<view class="uni-padding-wrap" style="paddingTop:70upx">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" circular="true">
						<swiper-item v-for="(item,index) in activityInfo" v-if="item.logoFlag && item.logoFlag=='n'">
							<view class="swiper-item uni-bg-red">
								<img v-if="item.activityLogo" :src="websiteUrl+ item.activityLogo" alt="">
								<img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="classification-list">
			<view class="module-classify-icon" v-for="(item,index) in findInitData" @click="navTo(item.value)">
				<view style="width: 100upx;height: 100upx;margin-left: 10upx;" :style="{'backgroundImage':'url(  '+ item.icon +' )',
					'background-repeat':'no-repeat', backgroundSize:'100upx 100upx'}">
				</view>
				<text>{{i18n(item.label)}}</text>
			</view>
		</view>
		<view class="module-classify-border"></view>
		<!-- 活动区域 -->
		<view class="classification-area">
			<view class="module-classify-icon" @click="navTo(item.value)" v-for="(item,index) in findZoneOfAction">
				<view style="width: 320upx;height: 150upx;" :style="{'backgroundImage':'url(  '+ item.icon +' )',
					'background-repeat':'no-repeat', backgroundSize:'320upx 150upx'}">
				</view>
				<text class="module-classify-text">{{i18n(item.label)}}</text>
			</view>
		</view>
		<view class="module-classify-border"></view>
		<!-- 推荐活动 -->
		<view style="background-color: #fff;padding-top: 25upx;">

			<scroll-view scroll-x class="index-cate">
				<text style="font-size: 35upx;color: #0B0B11;margin-left: 20upx;">{{i18n('recommend')}}</text>
				<view style="float: right; display: inline-block;" :style="$i18n.locale=='en'?'margin-right:20upx':''">
					<view v-for="(item, index) in categoryList" :key="index" class="index-cate-item"
						:class="tabCurrentIndex === index ? `text-${themeColor.name} active` : ''" style="color: #000;"
						@tap.stop="tabClicks(index, item.value)">
						{{ i18n(item.label) }}
					</view>
				</view>
			</scroll-view>
			<view v-if="tabCurrentIndex == 0">
				<view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
					overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in activityInfo"
					@click="toView(item)">
					<img :src="websiteUrl+ item.activityLogo" alt="" v-if="item.activityLogo && !item.meetingPicUrl"
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					<img :src="websiteUrl+'/def/projectdefault.png'" alt=""
						v-if="!item.activityLogo && !item.meetingPicUrl"
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					<view class="" v-if="$i18n.locale=='en'" :class="item.activityType=='会员活动'?'yellow'
																		:item.activityType=='联盟活动'?'green'
																			:'red'">
						{{item.activityType=='会员活动'?'MemberActivities'
							:item.activityType=='联盟活动'?'AllianceActivities'
								:'CooperationActivities'}}
					</view>
					<view class="" v-if="$i18n.locale=='zh'"
						:class="item.activityType=='会员活动'?'yellow':item.activityType=='联盟活动'?'green':item.activityType?'red':'bule'">
						{{item.activityType}}
						<!-- ?item.activityType:i18n('ConferenceActivities') -->
					</view>
					<view class="recommend-bottom">
						<view class="recommend-bottom-name">{{item.activityName}}</view>
						<view class="recommend-bottom-time">{{i18n('ActivityTime')}}：
							<text>{{formatDate(item.activityStartTime)}} - {{formatDate(item.activityEndTime)}}</text>

						</view>
					</view>
				</view>
			</view>
			<view v-if="tabCurrentIndex == 1">
				<view style="margin: 10upx 20upx;height: 464upx;border-radius: 30upx;
					overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in recommendData"
					@click="toView(item)">
					<img :src="websiteUrl+ item.meetingPicUrl" alt="" v-if="item.meetingPicUrl"
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					<img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-if="!item.meetingPicUrl "
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					<view class="" v-if="$i18n.locale=='en'" class="bule">
						{{i18n('ConferenceActivities')}}
					</view>
					<view class="" v-if="$i18n.locale=='zh'" class="bule">
						{{i18n('ConferenceActivities')}}
					</view>
					<view class="recommend-bottom">
						<view class="recommend-bottom-name">{{$i18n.locale=='zh'?item.meetingName:item.meetingNameEn}}
						</view>
						<view class="recommend-bottom-time">{{i18n('ActivityTime')}}：
							<text>{{formatDate(item.meetingStartDate)}} - {{formatDate(item.meetingEndDate)}}</text>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import rfSearchBar from '@/components/rf-search-bar';
	export default {
		components: {
			rfSearchBar,
		},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				tabCurrentIndex: 0,
				duration: 500,
				findInitData: {},
				findZoneOfAction: [],
				activityInfo: [], // 活动信息
				recommendData: [], // 会议信息
				categoryList: [{
						"label": 'Events',
						"value": "3"
					},
					{
						"label": 'Conference',
						"value": "2"
					},
					// {"label":'Achievements',"value":"4"},
				],
			};
		},

		async onShow() {
			this.findInitData = await this.$api.json('findInitData');
			console.log("findInitData",this.findInitData);
			this.findZoneOfAction = await this.$api.json('findZoneOfAction');
			this.getList();
		},
		computed: {

		},
		methods: {
			tabClick() {

			},
			tabClicks(index, num) {
				this.tabCurrentIndex = index;
			},
			async getList() {
				let page = {
					pageSize: 10,
					pageNo: 1,
					language: this.$i18n.locale.toUpperCase()
				}
				const that = this;
				const Info = await this.$myRequest({
					url: '/project/activityInfos/showActivityInfos',
					data: {
						...page
					}
				});
				const res = await this.$myRequest({
					url: '/meeting/meetingBasicInfos/getList',
					data: {}
				})
				let recommendData = [];
				res.data.meetingBasicInfos.forEach((item, index) => {
					if (!that.isMeetingOver(item.meetingEndDate)) {
						if (index <= 5) {
							recommendData.push(item);
						} else {
							return;
						}
					}
				})

				this.activityInfo = Info.data.activityInfos;
				this.recommendData = recommendData;
			},

			isMeetingOver(t) {
				let ct = Date.parse(new Date());
				if (ct - t < 0) {
					return true;
				} else {
					return false;
				}
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			navTo(src) {

				this.$mRouter.push({
					route: src
				});
			},
			toView(item) {
				let id = item.id;
				let baseActivityEntityId = item.baseActivityEntityId ? item.baseActivityEntityId : null;
				if (!item.activityName) {
					// 会议
					this.$mRouter.push({
						route: `/pages/conference/meetingIndexCh/meetingOver?id=${id}`,
					});
				} else {
					// 活动
					this.$mRouter.push({
						route: `/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=${baseActivityEntityId}`
					})
				}

			},
			// 通用跳转
			navToSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.rf-category {
		background-color: $color-white;
		/*  #ifdef  APP-PLUS  */
		margin-top: calc(20upx + var(--status-bar-height));

		/*  #endif  */
		.recommend-bottom {}

		.swiper {
			height: 300upx;
		}

		.swiper-item,
		.swiper-item img {
			width: 100%;
			height: 100%;
		}

		.yellow,
		.green,
		.red,
		.bule {
			position: absolute;
			top: 0;
			left: 0;
			/* min-width: 96px;  */
			padding: 0 40upx;
			height: 64upx;
			text-align: center;
			line-height: 64upx;
			font-size: 28upx;
			color: #fff;
			border-radius: 0 0 20upx 0;
		}

		.yellow {
			background: rgb(255, 153, 0);
		}

		.green {
			background: rgb(102, 204, 1);
		}

		.red {
			background: rgb(224, 32, 32);
		}

		.bule {
			background: rgb(137, 190, 178);
		}

		.recommend-bottom-name {
			font-size: 45upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #0B0B11;
			line-height: 65upx;
			margin-top: 10upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.recommend-bottom-time {
			line-height: 55upx;
		}

		.module-classify-border {
			background-color: #f1f2f3;
			height: 20upx;
		}

		.classification-list {
			height: 27vw;
			display: flex;
			padding: 0 30upx;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			background-color: $color-white;

			.module-classify-icon {
				width: 120upx;
				margin-right: 10upx;
				text-align: center;

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

	.classification-area {
		height: 65vw;
		display: flex;
		padding: 0upx 30upx 0 30upx;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		background-color: $color-white;

		.module-classify-icon {
			width: 320upx;
			height: 200upx;
			margin-right: 10upx;
			text-align: center;
			background-color: #eaeff9;
			border-radius: 30upx;

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

			.module-classify-text {
				font-size: 25upx;
				font-weight: 700;
			}
		}
	}
</style>