dev/dcp-app-gate/pages/financialService/investmentGuide/guideList.vue

<template>
	<view class="organsList">
		<view class="icoStyle">
			<view style="width:90%;height:99upx">
				<rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" style="z-index: 99;" />
			</view>
		</view>
		<PageMenu :currentIndex="1" />
		<view class="dataList">
			<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDeital(item)"
				style="background-color: #fff;">
				<view class="thumb">
					<!--  -->
					<image class="img"
						:src="item.photo?item.photo:'https://www.geidcp.com/api/file/pub//def/projectdefault.png'"
						@error="showErrorImg(item)" mode="widthFix">
					</image>
				</view>
				<view class="info">
					<view class="title">{{item.name}}</view>
					<view class="des">
						<view class="desdetail" v-html="item.introduction"></view>
					</view>
					<view class="country" v-if="item.countries&&item.countries!=null &&item.countries!=undefined">
						<text>{{$t('common.FocusCountry')}}：</text>
						<text style="color:#0091FF">{{item.countriesName}}</text>
					</view>
					<view class="language">
						<view class="lang">
							<text v-if="languageList[item.baseEntityId].entityZh == 1"> {{$t('common.Chinese')}}</text>
							<text v-if="languageList[item.baseEntityId].entityEn == 1"> |
								{{$t('common.English')}}</text>
							<text v-if="languageList[item.baseEntityId].entityFr == 1"> | {{$t('common.French')}}</text>
							<text v-if="languageList[item.baseEntityId].entityDe == 1"> | {{$t('common.German')}}</text>
							<text v-if="languageList[item.baseEntityId].entityEs == 1"> |
								{{$t('common.Spanish')}}</text>
							<text v-if="languageList[item.baseEntityId].entityJa == 1"> |
								{{$t('common.Japanese')}}</text>
							<text v-if="languageList[item.baseEntityId].entityAr == 1"> | {{$t('common.Arabic')}}</text>
							<text v-if="languageList[item.baseEntityId].entityRu == 1"> |
								{{$t('common.Russian')}}</text>
						</view>
						<view class="date">{{formatDate(item.publishDate)}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <scroll-view class="dataList" 
			
			:scroll-x="false" 
			:scroll-y="true" 
			
			@scrolltolower="lower"> -->
		<!-- </scroll-view> -->
		<!-- <view class="loademore" v-if="listNum>5">
			<u-loadmore  :status="status" icon-type="flower" font-size="24" margin-top="20" />
		</view> -->
		<rf-back-top :scrollTop="scrollTop2"></rf-back-top>
	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar-xiangmu';
	import BackTop from '@/components/rf-back-top'
	import PageMenu from '../dom/pageMenu';
	import {
		getBaseInvestmentGuidelinesInfos
	} from '@/api/financialService/baseInvestmentGuidelinesInfo';
	import {
		getDicts
	} from "@/api/dict";

	export default {
		name: 'FinanicalOrgans',
		components: {
			rfSearchBar,
			PageMenu,
			BackTop
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollTop2: 0,
				status: 'loadmore',
				page: 0,
				dataList: [],
				listNum: 0,
				languageList: [],
				dictList: [],
			}
		},
		computed: {

		},
		created() {
			this.getDataList();
			this.getDict()

		},
		onPageScroll(e) {
			this.scrollTop2 = e.scrollTop;
		},
		methods: {
			//路由后退
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack({})
				// #endif
			},
			//搜索
			navToSearch(keyword) {
				uni.navigateTo({
					url: '/pages/index/search/search?data=' + keyword
				})
			},
			//滚动到底的时候执行，实现加载更多
			lower(e) {
				this.status = 'loading';
				setTimeout(() => {
					this.status = 'loadmore';
				}, 2000)
				console.log(e)
			},
			//查看详情
			showDeital(item) {
				uni.navigateTo({
					url: '/pages/financialService/investmentGuide/guideDetial?id=' + item.baseEntityId
				})
			},
			//获取投资指引
			async getDataList() {
				let params = {
					language: this.$i18n.locale.toUpperCase(),
					statusDict: '2'
				}
				const res = await this.$myRequest({
					url: '/project/baseInvestmentGuidelinesInfos/',
					data: params
				});
				if (res.data.baseInvestmentGuidelinesInfos) {
					this.dataList = res.data.baseInvestmentGuidelinesInfos;
					this.languageList = res.data.investmentGuidelinesEntitiesMap;
					this.listNum = res.data.baseInvestmentGuidelinesInfos.length;
					for (let i = 0; i < this.dataList.length; i++) {
						this.$set(this.dataList[i], 'photo', 'https://m.geidcp.com/api/file/pub/' + this.dataList[
								i]
							.photo)
					}
				}
			},
			//查询国家字典
			async getDict() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts/',
					data: {
						type: this.$i18n.locale == "zh" ? 'UNIT_COUNTRY_DICT' : 'unit_country_dict_en',
					}
				});
				if (res.data) {
					this.dictList = res.data[0];
				} else {
					this.dictList = []
				}

			},

			// 错误图像加载显示
			showErrorImg(item) {
				this.$set(item, 'photo', 'https://www.geidcp.com/api/file/pub//def/projectdefault.png')
			},
			i18n(data) {
				return this.$t('common.' + data);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.icoStyle {
		display: flex;
		align-items: center;

		.leftArrow {
			/*  #ifdef  APP-PLUS  */
			padding-top: calc(28upx + var(--status-bar-height));

			/*  #endif  */
			.text {
				color: #fff;
			}
		}
	}

	.organsList {
		.loademore {
			position: fixed;
			bottom: 0;
			z-index: 999;
			margin: 0 auto;
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			background-color: #fff;
		}

		.dataList {
			position: absolute;
			height: 100%;

			// background-color:#fff;
			// padding:0 0 30upx;
			.item {
				padding: 20upx;
				display: flex;
				// margin:0 0 0 20upx;
				border-bottom: 20upx solid #f2f2f2;

				.thumb {
					width: 240upx;
					position: relative;
					margin-right: 20upx;

					.img {
						width: 100%;
						margin-top: 8upx;
					}
				}

				.info {
					flex: 1;
					color: #888;

					.title {
						font-weight: 600;
						font-size: 28upx;
						color: #333;
					}

					.des {
						font-size: 24upx;
						margin-top: 16upx;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// display: -webkit-box;
						// -webkit-box-orient: vertical;
						// -webkit-line-clamp: 2;
					}

					.des .desdetail {
						height: 80upx;
						overflow: hidden;
					}

					.country {
						font-size: 24upx;
						margin-top: 18upx;
					}

					.language {
						margin-top: 16upx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.lang,
						.date {
							font-size: 24upx;
						}
					}
				}
			}
		}
	}
</style>