dev/dcp-app-gate/pages/financialService/financialOrgans/organsList.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="0" />
		<view class="selectData">
			<view class="newfollow" :class="{active:menuIndex==0}" @click="getDatas(0)">{{$t('common.LatestUpdated')}}
			</view>
			<view class="followmost" :class="{active:menuIndex==1}" @click="getDatas(1)">{{$t('common.MostAttention')}}
			</view>
			<view class="selection">
				<view class="showstyle">
					<u-icon v-if="styleFlag" name="list-dot" @click="styleFlag=!styleFlag" color="#aaa" size="28">
					</u-icon>
					<u-icon v-if="!styleFlag" name="grid" @click="styleFlag=!styleFlag" color="#aaa" size="28"></u-icon>
				</view>
				<text class="text"></text>
				<view class="check" @click="showDia">
					<view class="text">{{$t('common.Screening')}}</view>
					<!-- <image class="img" src="../../../static/check.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>
		<!-- 筛选弹窗 -->
		<u-popup v-model="DiaFlag" mode="right" length="88%" border-radius="10" :closeable="true">
			<view class="diacontent">
				<view class="diatitle">{{$t('common.Screening')}}</view>
				<view class="titleTtype">{{$t('common.Region')}}</view>
				<view class="zone">
					<view class="zoneitem" v-for="(zoneitem,zoneidx) in zoneList" :key="zoneidx"
						:class="{active:zoneCurrentIndex==(zoneidx)}"
						@click="checkItemSingle(zoneidx,'zoneCurrentIndex')">
						{{$t(zoneitem.title)}}
					</view>
				</view>
				<view class="titleTtype">{{$t('common.Type')}}</view>
				<view class="zone">
					<view class="zoneitem" v-for="(zoneitem,zoneidx) in typeList" :key="zoneidx"
						:class="{active:typeCurrentIndex==zoneidx}"
						@click="checkItemSingle(zoneidx,'typeCurrentIndex')">{{$t(zoneitem.label)}}</view>
				</view>
				<!-- <view class="titleTtype">按产品</view>
				<view class="zone">
					<view class="zoneitem" 
					v-for="(zoneitem,zoneidx) in proList" 
					:key="zoneidx"
					:class="{active:proCheckedList.indexOf(zoneitem.id)!=-1}"
					@click="checkItem(zoneitem,'proCheckedList')">{{zoneitem.title}}</view>
				</view> -->
				<view class="btn">
					<view class="reset" @click="commitBtn('reset')" :class="{active:btnActive=='reset'}">
						{{$t('common.reset')}}
					</view>
					<view class="commit" @click="commitBtn('commit')" :class="{active:btnActive=='commit'}">
						{{$t('common.mConfirm')}}
					</view>
				</view>
			</view>
		</u-popup>
		<view class="myDatalist" style="margin-top:10upx;display:flex;">
			<view class="titlelist" style="width:60upx">
				<view class="titleitem" v-for="(titleitem,titleidx) in indexList" :key="titleidx"
					:class="{active:titleitem==titleIndex}" @click="checkWord(titleitem)">{{titleitem}}</view>
			</view>
			<view class="content" style="width:92%">
				<view v-for="(item, index) in indexList" :key="index">
					<view class="dataList" v-if="item=='A'" :class="{flex:!styleFlag}">
						<view class="list-cell" v-for="(dataitem,dataindex) in listA" :key="dataindex"
							:class="{flex:!styleFlag}" @click="showDetial(dataitem)">
							<view class="icon" v-if="styleFlag">
								<image v-if="dataitem.photo" class="img" :src="dataitem.photo"
									@error="showDefaultThumb(dataitem)" mode="widthFix"></image>
								<image v-if="!dataitem.photo" class="img" :src="defaultThumb" mode="widthFix"></image>
							</view>
							<view class="info" v-if="styleFlag">
								<view class="title">{{dataitem.unitName}}</view>
								<view class="city">{{dataitem.unitCountry}} </view>
							</view>
							<view class="box" v-if="!styleFlag"> {{dataitem.unitName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scrollTop="scrollTop" mode="circle" :icon-style="{fontSize:'32rpx',color:'#aaa'}"></u-back-top>
		<u-toast ref="uToast" />
	</view>
</template>

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

	export default {
		components: {
			rfSearchBar,
			PageMenu,
			BackTop
		},
		data() {
			return {
				titleIndex: '',
				menuIndex: 0,
				scrollTop: 0,
				totalPage: '0',
				count: 0,
				defaultThumb: 'https://m.geidcp.com/api/file/pub/unit/2020/09/22/a1ba37db5765439ea57e82ae074b239a.png',
				keyword: '',
				styleFlag: true,
				icon: '../../../static/apple.png',
				DiaFlag: false,
				btnActive: 'reset',
				pageNo: 1,
				pageSize: 20,
				sortType: 0,
				zoneList: [{
						id: 0,
						title: 'common.All'
					},
					{
						id: 1,
						title: 'common.Domestic'
					},
					{
						id: 2,
						title: 'common.International'
					}
				],
				zoneCurrentIndex: 0,
				zoneCheckedList: [],
				typeCurrentIndex: 0,
				typeList: [],
				typeCheckedList: [],
				proList: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '政策性及开发性金融机构'
					},
					{
						id: 2,
						title: '担保机构'
					},
					{
						id: 3,
						title: '商业银行'
					},
					{
						id: 4,
						title: '基金等投资机构'
					},
				],
				proCheckedList: [],
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z", "#"
				],
				listA: [],

			}
		},
		// 页面滚动到底部的时候加载更多数据
		onReachBottom(e) {
			if (this.pageNo < this.totalPage) {
				this.pageNo++;
				this.getMore();
			} else {
				let msg = this.$i18n.locale == 'zh' ? '没有更多数据了' : 'No more data'
				if (this.count == 0) this.$refs.uToast.show({
					title: msg,
					type: 'success',
				})
				this.count++;
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...'
			});
			this.title = this.$i18n.locale == 'zh' ? '机构详情' : 'InvestmentGuide Detial'
			setTimeout(() => {
				uni.hideLoading();
			}, 100)
		},
		created() {
			this.getBaseFinancialInstitutionInfos();

		},
		methods: {
			// 获取数据列表
			async getBaseFinancialInstitutionInfos(sortType) {
				let params = {
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					language: this.$i18n.locale.toUpperCase(),
					sortType: sortType ? sortType : 0
				}
				const res = await this.$myRequest({
					url: '/project/baseFinancialInstitutionInfos/',
					data: params
				})
				if (res.data) {
					if (res.data.baseFinancialInstitutionInfos) {
						this.listA = res.data.baseFinancialInstitutionInfos;
						for (let i = 0; i < this.listA.length; i++) {
							this.$set(this.listA[i], 'photo', 'https://m.geidcp.com/api/file/pub/' + this.listA[i][
								'photo'
							])
						}
						this.totalPage = parseFloat(res.data.page.totalPage);
					} else {
						this.listA = []
						this.menuIndex = -1;
					}
				}

			},

			// 加载更多
			async getMore() {
				let params = {
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					language: this.$i18n.locale.toUpperCase(),
					sortType: this.sortType
				}
				const res = await this.$myRequest({
					url: '/project/baseFinancialInstitutionInfos/',
					data: params
				});

				if (res.data.baseFinancialInstitutionInfos) {
					this.listA = [...this.listA, ...res.data.baseFinancialInstitutionInfos];
					for (let i = 0; i < this.listA.length; i++) {
						this.$set(this.listA[i], 'photo', 'https://m.geidcp.com/api/file/pub/' + this.listA[i][
							'photo'
						])
					}
				}
			},

			//获取筛选类型
			async getDicts(paramsType) {

				const ditres = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'zh' ? 'FINANCIAL_INSTITUTIONS_TYPE_DICT' :
							'FINANCIAL_INSTITUTIONS_TYPE_DICT_EN'
					}
				});
				if (ditres.msg == 'ok') {
					this.typeList = ditres.data[0];
					this.$nextTick(() => {
						this.typeList.unshift({
							id: 0,
							label: 'common.All'
						})
					})
				}
			},

			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack({})
				// #endif
			},
			//搜索
			navToSearch(keyword) {
				uni.navigateTo({
					url: '/pages/index/search/search?data=' + keyword
				})
			},
			//查看详情
			showDetial(item) {
				uni.navigateTo({
					url: '/pages/financialService/financialOrgans/organsDetial?baseEntityId=' + item.baseEntityId
				})
			},
			//索引值
			async checkWord(item) {
				if (this.titleIndex != item) {
					this.titleIndex = item;
					let keyparams = {
						pageSize: this.pageSize,
						pageNo: 1,
						language: this.$i18n.locale.toUpperCase(),
						sortType: this.menuIndex,
						region: this.zoneCurrentIndex == 0 ? null : this.zoneCurrentIndex - 1,
						institutionTypeDict: this.typeCurrentIndex == 0 ? null : this.typeCurrentIndex, // 地区
						initial: this.titleIndex == '' ? null : this.titleIndex,
						Initials: this.titleIndex == '' ? null : this.titleIndex
					}
					const res = await this.$myRequest({
						url: '/project/baseFinancialInstitutionInfos/',
						data: keyparams,
					});

					if (res.data.baseFinancialInstitutionInfos) {
						this.listA = res.data.baseFinancialInstitutionInfos;
						for (let i = 0; i < this.listA.length; i++) {
							this.$set(this.listA[i], 'photo', 'https://m.geidcp.com/api/file/pub/' + this.listA[i][
								'photo'
							])
						}
						this.totalPage = parseFloat(res.data.page.totalPage);
					} else {
						this.listA = [];
						this.menuIndex = 0;
					}
				}
			},
			getDatas(type) {
				if (this.menuIndex != type) {
					this.pageNo = 1;
					this.menuIndex = type;
					this.titleIndex = '';
					this.getBaseFinancialInstitutionInfos(type)
				}
			},
			//打开弹窗
			showDia() {
				this.getDicts();
				this.pageNo = 1;
				this.zoneCurrentIndex = 0;
				this.typeCurrentIndex = 0;
				this.DiaFlag = true;
				this.titleIndex = '';
			},
			//切换操作类型表单
			commitBtn(type) {
				if (this.btnActive != type) this.btnActive = type;
				if (type == 'reset') {
					this.pageNo = 1;
					this.zoneCurrentIndex = 0;
					this.typeCurrentIndex = 0;

				} else {
					this.submitForm()
				}
			},
			// 选择标签-单选
			checkItemSingle(item, checkedIndex) {
				if (this[checkedIndex] != item) {
					this[checkedIndex] = item
				}
			},
			// 选择标签-多选
			checkItem(item, checkedList) {
				if (this[checkedList].indexOf(item.id) == -1) {
					this[checkedList].push(item.id)
				} else {
					this[checkedList] = this[checkedList].filter((val, key) => {
						return item.id != val;
					})
				}
			},
			//提交表单-重置
			async submitForm() {
				let params = {
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					language: this.$i18n.locale,
					sortType: this.menuIndex, // 最新或最多
					region: this.zoneCurrentIndex == 0 ? null : this.zoneCurrentIndex - 1, // 地区
					institutionTypeDict: this.typeCurrentIndex == 0 ? null : this.typeCurrentIndex, // 类型
					initial: this.titleIndex == '' ? null : this.titleIndex, // 字母
					Initials: this.titleIndex == '' ? null : this.titleIndex // 字母
				}
				let res = await this.$myRequest({
					url: '/project/baseFinancialInstitutionInfos/',
					data: params
				});
				if (res.data.baseFinancialInstitutionInfos) {
					this.listA = res.data.baseFinancialInstitutionInfos;
					for (let i = 0; i < this.listA.length; i++) {
						this.$set(this.listA[i], 'photo', 'https://m.geidcp.com/api/file/pub/' + this.listA[i][
							'photo'
						])
					}
					this.totalPage = parseFloat(res.data.page.totalPage);
				} else {
					this.listA = [];
					// this.menuIndex=-1;
				}
				this.DiaFlag = false;
				this.zoneCurrentIndex = 0;
				this.typeCurrentIndex = 0;
				this.titleIndex = '';
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			showDefaultThumb(item) {
				this.$set(item, 'photo', this.defaultThumb)
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}

		}

	}
</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;
			}
		}
	}

	/deep/ .u-index-anchor {
		padding: 0;
	}

	/deep/ .u-index-bar__sidebar {
		top: 58%;
		z-index: 9999;
	}

	.list-cell {
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 10px 24upx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;

		.box {
			border: 1px solid #ddd;
			padding: 0 10upx;
		}

		.icon {
			width: 140upx;
			height: 140upx;
			margin-right: 20upx;

			.img {
				width: 100%;
				display: block;
				margin-top: 10upx;
			}
		}

		.info {
			flex: 1;

			.title {
				font-weight: 700;
			}

			.city {
				margin-top: 30upx;
				color: #666;
			}
		}
	}

	.organsList {
		background: #fafafa;

		.dataList {
			&.flex {
				display: flex;
				width: 100%;
				background: #fff;
				flex-wrap: wrap;
				align-items: flex-start;

				.list-cell.flex {
					align-items: flex-start;
				}
			}
		}

		.selectData {
			display: flex;
			align-items: center;
			height: 80upx;
			line-height: 80upx;
			background-color: #fff;
			width: 100%;
			justify-content: space-around;
			color: #666;

			.followmost,
			.newfollow {
				&.active {
					color: #0079EF
				}
			}

			.selection {
				width: 150upx;
				display: flex;
				align-items: center;

				.text {
					color: #ddd;
				}

				.showstyle {
					.img {
						display: block;
						width: 36upx;
						height: 36upx;
					}
				}

				.check {
					display: flex;
					align-items: center;

					.text {
						margin-left: 20upx;
						color: #666;
					}

					.img {
						display: block;
						width: 32upx;
						height: 32upx;
						margin-left: 10upx;
					}
				}
			}

		}

		.diacontent {
			padding: 50upx 20upx 20upx 20upx;
			position: relative;
			overflow: hidden;
			height: 100%;

			.diatitle {
				font-weight: bold;
				height: 100upx;
				line-height: 100upx;
				margin-bottom: 20upx;
			}

			.zone {
				display: flex;
				align-items: center;
				margin: 20upx 0;
				flex-wrap: wrap;

				.zoneitem {
					padding: 10upx 30upx;
					background: #eee;
					margin: 10upx 10upx 0 0;
					color: #666;

					&.active {
						color: #09a0f2;
						background-color: #def;
					}
				}
			}

			.btn {
				display: flex;
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 100upx;

				.reset,
				.commit {
					color: #007AFF;
					height: 100upx;
					line-height: 100upx;
					width: 47%;
					text-align: center;

					&.active {
						background: #007AFF;
						color: #fff;
					}
				}

				.reset {
					margin-right: 2upx;
				}

			}
		}

		.titlelist {
			width: 60upx;
			text-align: center;
			position: fixed;
			right: 0;
			top: 340upx;
			padding-top: 40upx;
			z-index: 99999;

			.titleitem {
				margin: 0 auto;
				width: 36upx;
				height: 36upx;
				line-height: 36upx;
				text-align: center;
				font-size: 20upx;

				&.active {
					color: #fff;
					background: #0081FF;
					border-radius: 50%;
				}
			}

		}
	}
</style>