dev/dcp-app-gate/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionalInformaions.vue

<template>
	<view>
		<!--搜索导航栏-->
		<rf-search-bar2 @search="inputValue" icon="iconkuaijiecaidan" @tab="tabClick"
			:title=" i18n('Committeeactivities')  " style="z-index: 99;" />
		<view class="" style="background-color: #fff;margin-top: 150upx;width: 100%;">
			<view>
				<view style="margin: 10upx 20upx;
					overflow: hidden;background-color: #fff;position: relative;" v-for="(item,index) in activityInfo"
					@click="toView(item)">
					<image :src="websiteUrl+ item.activityLogo" alt="" v-if="item.activityLogo"
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					</image>
					<image :src="websiteUrl+'/def/def1.png'" alt="" v-if="!item.activityLogo"
						style="width: 100%;height: 300upx;border-radius: 0 0 20upx 20upx;">
					</image>

					<view class="recommend-bottom">
						<view class="recommend-bottom-name">{{item.activityName}}</view>
						<view class="activityInfoDetails" style="margin-top: 10upx;margin-bottom: 20upx;">
							<image src="../../../static/img/nationaIntroductionList/naPlace.png" mode="" class="icon">
							</image>
							{{item.activityPlace}} | <text style="margin-left: 15upx;">
								{{formatDate(item.activityStartTime)}} -- {{formatDate(item.activityEndTime)}}
							</text>
							<image src="@/static/img/nationaIntroductionList/heat.png" alt=""
								style="vertical-align: middle; width: 32upx; height: 32upx; margin: 0upx 6upx 0upx 12upx; vertical-align: middle;">
							</image>
							<span style="vertical-align: middle;">
								{{item.num?item.num:0}}
							</span>
						</view>
					</view>
					<u-gap v-if="index+1 !==activityInfo.length" height="20" bg-color="#F3F4F5"
						style="width: 750upx !important;"></u-gap>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import rfSearchBar2 from '@/components/rf-search-bar-xiangmu';
	export default {
		components: {

			rfSearchBar2
		},
		data() {
			return {
				input: '',
				activityInfo: [],
				options: [], // 区域
				options2: [], // 类型
			}
		},
		created() {
			this.getDicts();
		},
		onShow() {
			this.getList();
		},
		computed: {

			// options2Map(value){
			// 	if(this.options2.length>0){
			// 		const PostDicts= this.options2.filter(item=>{
			// 			return item.value == value
			// 		})
			// 		return PostDicts[0].label;
			// 	}
			// },
		},
		methods: {
			options2Map() {
				return this.options2.array2Obj("value", "label")
			},

			async getDicts() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'COMMITTEE_REGIONAL_DICT,COMMITTEE_ACTIVITY_TYPE,COMMITTEE_REGIONAL_DICT_EN,COMMITTEE_ACTIVITY_TYPE_EN'
					}
				})
				var data = res.data;
				if (data) {
					if (this.$i18n.locale == 'zh') {
						this.options = [];
						this.options2 = [];
						this.options = res.data[0];
						this.options2 = res.data[1];
						this.options.unshift({
							label: "全部区域",
							value: null,
						});
						this.options2.unshift({
							label: "全部类型",
							value: null,
						});
					} else if (this.$i18n.locale == 'en') {
						this.options = [];
						this.options2 = [];
						this.options = res.data[2];
						this.options2 = res.data[3];
						this.options.unshift({
							label: "ALL",
							value: null,
						});
						this.options2.unshift({
							label: "ALL",
							value: null,
						});
					}
				}
			},

			inputValue(data) {

				this.input = data.input;
				this.getList();
			},
			async getList() {
				let page = {
					pageSize: 5,
					pageNo: 1,
					language: this.$i18n.locale.toUpperCase(),
					activityName: this.input,
				};
				const res = await this.$myRequest({
					url: '/project/committeeActivityInfos/getCommitteeActivityList',
					data: page
				})
				this.activityInfo = res.data.committeeActivityInfos || [];

			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			toView(item) {
				this.$mRouter.push({
					route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionlInformationDetail?id=${item.entityId}`,
				});
			},
		}
	}
</script>

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

	.yellow {
		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);
	}

	.icon {
		width: 30upx;
		height: 30upx;
		vertical-align: middle;
		margin-right: 14upx;
	}

	.activityInfoDetails {
		line-height: 50upx;
	}
</style>