dev/dcp-app-gate/pages/country/projectPresentation/projectPresentation.vue

<template>
	<view class="rf-category" style="position: relative;">

		<!--搜索导航栏-->
		<rf-search-bar2 @search="inputValue" icon="iconkuaijiecaidan" @tab="tabClick" :title=" i18n('return')  "
			style="z-index: 99;" />
		<u-dropdown class="u-dropdown" style="background-color: #fff;margin-top: 140upx;width: 100%;">
			<u-dropdown-item v-model="value1" :title="i18n('Comprehensive')" @change="dropdownChange(value1)"
				:options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" :title="i18n('Region')" @change="dropdownChange" :options="Dict1">
			</u-dropdown-item>
			<u-dropdown-item v-model="value3" :title="i18n('Category')" @change="dropdownChange" :options="Dict2">
			</u-dropdown-item>
		</u-dropdown>
		<view>
			<view style="background-color: #F5F5F5;">
				<!-- 项目 -->
				<view v-if="ProjectList.length>0" style="padding-top: 10upx;">
					<view
						@click="navToList('/pages/country/projectPresentation/projectPresentationDetails',item.projectId)"
						style="margin: 20upx 20upx;height: 200upx;border-radius: 30upx;overflow: hidden;
					 background-color: #fff;pointer-events: auto;" v-for="(item,index) in ProjectList" :key="index">
						<img :src="websiteUrl+ item.bannerList[0]" alt="" v-if="item.bannerList[0]"
							style="width: 200upx;height: 200upx;">
						<img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else
							style="width: 200upx;height: 200upx;">
						<view class="recommend-bottom">
							<view class="recommend-bottom-name">{{item.projectName}}</view>
							<!-- <view>发布日期：{{handlePublishTimeDesc(toDate,item.createDate,$i18n.locale)}} {{$t('common.release')}}</view> -->
						</view>
					</view>
				</view>
			</view>
			<view v-if="ProjectList.length==0" style="background-color: #f1f2f3;">
				<view style="width: 500upx;height: 350upx;margin:100upx auto;" :style="{'backgroundImage':'url(  /static/notFound.png )',
				'background-repeat':'no-repeat', backgroundSize:'500upx 350upx'}">
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
	</view>
</template>

<script>
	import rfSearchBar2 from '@/components/rf-search-bar-xiangmu';
	export default {
		components: {
			rfSearchBar2,
		},
		data() {
			return {
				placeholder: '',
				ProjectList: [],
				Dict1: [],
				Dict2: [],
				value1: 0,
				value2: null,
				value3: null,
				status: 'loadmore',
				input: '',
				page: 1,
				total2: 0,
				scrollTop: 0,
				options1: [{
						label: this.$t('common.LatestRelease'),
						value: 0,
					},
					{
						label: this.$t('common.MostAttention'),
						value: 1,
					},
					{
						label: this.$t('common.IntelligentRecommendation'),
						value: 3,
					},
				],

			}

		},
		onLoad(options) {
			this.value1 = options.type
		},
		async onShow() {
			this.getList();
			this.getDict();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {

			if (this.page * 10 >= this.total2) return;
			this.status = 'loading';
			this.page = this.page + 1;
			console.log(this.page, 'pagepagepagepage');

			if ((this.page - 1) * 10 >= this.total2) {
				this.status = 'nomore';
			} else {
				this.status = 'loading';
				this.getList(this.page);
			}


		},
		methods: {

			async inputValue(data) {

				this.input = data.input;
				console.log(data, this.input)
				this.getList();

			},
			async getDict() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts/',
					data: {
						type: this.$i18n.locale == "zh" ?
							'CONTINENT_CODE_DICT,PROJECT_CATEGORIES_DICT,TECHNICAL_SCOPE_DICT' :
							'CONTINENT_CODE_DICT_EN,PROJECT_CATEGORIES_DICT_EN,TECHNICAL_SCOPE_DICT_EN',
					}
				});
				let both = {
					label: this.$t('common.All'),
					value: null
				};
				this.Dict1 = res.data[0];
				this.Dict2 = res.data[1];
				this.Dict1.unshift(both);
				this.Dict2.unshift(both);

			},
			async getList(num) {

				let page = {
					pageNo: this.page,
					pageSize: 10,
					language: this.$i18n.locale.toUpperCase(),
					descStatus: this.value1,
					messageOpenType: 'Y',
					status: 1,
					technicalCategories: this.value3,
					continentCountry: this.value2,
					projectName: this.input
				};
				const res = await this.$myRequest({
					url: '/project/baseProjectViews/',
					data: {
						...page
					}
				});

				this.total2 = res.data.page.totalCount;
				if (res.data) {
					if (this.page == 1) {
						this.ProjectList = res.data.baseProjectViews ? res.data.baseProjectViews : [];
					} else {
						this.ProjectList = this.ProjectList.concat(res.data.baseProjectViews)
					}

				}
				if (this.ProjectList.length >= this.total2 - 0) {
					this.status = 'nomore';

				}
			},
			
			async getRecommendByPortals(){
				let params1 =  {
					pageNo: this.page,
					pageSize: 6,
					language: this.$i18n.locale.toUpperCase(),
			
					//0为默认排序，1为关注排序
					descStatus:0,
					messageOpenType:"Y",
					status:1,
					fuzzySearch:null,
				  };
				   console.log("this.page"+this.page);
				  const res = await this.$myRequest({
				  	url: '/project/baseProjectViews/getRecommendByPortals/',
				  	data: {
				  		...params1
				  	}
				  });
				  this.total2 = res.data.page.totalCount;
				  console.log("total2"+this.total2);
				  if (res.data) {
				  	if (this.page == 1) {
				  		this.ProjectList = res.data.baseProjectViews ? res.data.baseProjectViews : [];
				  	} else {
				  		this.ProjectList = this.ProjectList.concat(res.data.baseProjectViews)
				  	}
				  
				  }
				  if (this.ProjectList.length >= this.total2 - 0) {
				  	this.status = 'nomore';
				  
				  }
			},
			dropdownChange(data) {
				
				if(data ==3){
					let user = uni.getStorageSync('user');
					let token = uni.getStorageSync('Auth-Token');
					if (user && token) {
						this.getRecommendByPortals();
					} else {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/public/login?back=1&language=zh"
							})
						}, 1000)
					}
				}else {
					this.getList();
				}
			},
			navToList(src, data) {

				this.$mRouter.push({
					route: src + '?id=' + data + '&language=' + this.$i18n.locale
				});
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</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 {
			float: right;
			height: 200upx;
			width: 488upx;
		}

		.uni-scroll-view {
			height: 500upx !important;
			overflow: scroll;
		}

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

		.wrapper {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			transform: translate(-50%, -50%);
			flex-direction: row;

			.iconsousuo2 {
				font-size: 34upx;
				margin-right: $spacing-base;
			}

			input {
				width: 100%;
				padding-left: 28upx;
				height: 28upx;
				color: #888;
				font-size: 28upx;
			}
		}
	}
</style>