dev/dcp-app-gate/pages/financialService/financialOrgans/organsDetial.vue

<template>
	<view class="organsDetial">
		<!-- 标题栏 -->
		<u-navbar :is-back="true" :back-icon-color="'#fff'" :background="{'background':'#1777FE'}" :border-bottom="true"
			:back-text="$t('common.Back')" :title-color="'#fff'" :back-text-style="{color:'#fff'}" :title="title">
			<view slot="right" style="margin-right:20upx">
				<u-icon name="share-fill" style="margin-right: 30upx;" color="white" size="50" @click="share"></u-icon>
				<u-icon name="heart-fill" color="#fff" size="36" @click="saveFollowModel(followed)"
					v-if="this.followed"></u-icon>
				<u-icon name="heart" color="#fff" size="36" @click="saveFollowModel(followed)" v-if="!this.followed">
				</u-icon>
			</view>
		</u-navbar>
		<!-- <view class="banner" style="text-align: center;"><image style="height: 100%;"  :src="detial.photo" ></image></view> -->
		<view class="banner">
			<image class="bannerimg" :src="detial.photo" mode="widthFix"></image>
		</view>
		<view class="headInfo">
			<view class="title">{{detial.unitName}}</view>
			<view class="address">
				<view class="label">{{$t('common.place')}}：</view>
				<view class="text">{{detial.unitCountry}} </view>
			</view>
			<view class="web">
				<text>{{$t('common.Website')}}：</text><text>{{detial.officialWebsitePath}}</text>
			</view>
			<view class="des">
				<view class="label">{{$t('common.Introduce')}}：</view>
				<view class="text">
					<!-- <rich-text :nodes="detial.unitIntroduction"></rich-text> -->
					<view :class="flag?'':'introduct1'" v-html="detial.unitIntroduction"></view>
					<view class="more" @click="showAll" v-if="flag==false">{{$t('common.SeeAll')}}</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line5"></view>
		<view class="tab">
			<view class="tabtitle">
				<u-tabs-swiper ref="uTabs" :list="tabTitleList" :current="current" :is-scroll="true" :bold="false"
					:bar-height="0" :bar-style="{margin:'0 auto',textAlign:'center'}" :swiperWidth="750"
					@change="tabsChange">
				</u-tabs-swiper>
			</view>
			<view class="tabcontent">
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
						<scroll-view :scroll-y="true" style="height:100%;width:100%;" @scrolltolower="onreachBottom">
							<!-- 页面1 -->
							<view class="page" v-if="index==0 && item.list.length>0">
								<view class="pageitem" v-for="(pageitem,pageidx) in item.list" :key="pageidx"
									@click="toShowDetial(pageitem)">
									<view class="label">{{pageitem.title}}</view>
									<view class="date">{{formatDate(pageitem.publishDate)}}</view>
								</view>
							</view>
							<!-- 页面2 -->
							<view class="page" v-if="index==1 && item.list.length>0">
								<view class="pageitem" v-for="(pageitem,pageidx) in item.list" :key="pageidx"
									@click="toShowDetial(pageitem)">
									<view class="label">{{pageitem.title}}</view>
									<view class="date">{{formatDate(pageitem.publishDate)}}</view>
								</view>
							</view>
							<view class="nodata" v-if="item.list.length==0">{{msg}}</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="line5"></view>
		<view class="dynamic" v-if="infoList.length>0">
			<view class="zoneTitle">{{$t('common.InstitutionDynamic')}}</view>
			<view class="infoList">
				<view class="item" v-for="(item,index) in infoList" :key="index" @click="toShowDetial(item)">
					<!-- <view class="thumb"><image class="thumbimg" :src="item.thumb" mode="widthFix"></image></view> -->
					<view class="info">
						<view class="title">{{item.title}}</view>
						<view class="date">{{publishDate(item.publishDate)}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 8.8.20.112:19001 -->
		<share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="i18n('FinancialInstitutions')"
			:summary="detial.unitName"
			:href="'https://m.geidcp.com/#/pages/financialService/financialOrgans/organsDetial?' + 'baseEntityId=' + baseEntityId + '&language=' + $i18n.locale"
			:imageUrl="detial.photo? detial.photo :
								'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
		</share>
		<!-- #ifdef H5 -->
		<rf-back-home></rf-back-home>
		<!-- #endif -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import UIcon from '@/components/uni-icons/uni-icons.vue'
	import {
		getBaseFinancialInstitutionInfos
	} from "@/api/financialService/baseFinancialInstitutionInfo";
	import {
		getInformationList
	} from '@/api/cooperation/baseCooperationUnit'
	import {
		saveFollowModel,
		getFollowModelStatusByModelIdAndUserId
	} from '@/api/operation/basePortalModelFollowInfo'
	import share from '@/components/share'
	export default {
		name: 'OrgansDetial',
		components: {
			UNavbar,
			UIcon,
			share
		},
		data: function() {
			return {
				title: '',
				msg: '',
				baseEntityId: '',
				modelType: 'financialInstitution',
				followed: '',
				detial: {},
				current: 0,
				ifShare: false,
				swiperCurrent: 0,
				// seeAll: '查看全部',
				tabTitleList: [{
						name: this.$t('common.ProductAndService')
					},
					{
						name: this.$t('common.InvestmentAndCases')
					}
				],
				flag: false,
				tabs: [{
						list: []
					},
					{
						list: []
					}
				],
				infoList: [],
				token: ''
			}
		},
		onShow: function() {
			this.token = uni.getStorageSync('Auth-Token') ? ('Bearer ' + uni.getStorageSync('Auth-Token')) : '';
			this.userId = uni.getStorageSync('user') ? (JSON.parse(uni.getStorageSync('user')).id) : '';
		},
		onLoad: function(e) {
			this.baseEntityId = e.baseEntityId;
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
			uni.showLoading({
				title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...',
			});
			this.seeAll = this.$i18n.locale == 'zh' ? '查看全部' : 'See All'
			this.title = this.$i18n.locale == 'zh' ? '机构详情' : 'InvestmentGuide Detial'
			this.msg = this.$i18n.locale == 'zh' ? '暂无数据' : 'No Data'
			setTimeout(() => {
				uni.hideLoading();
			}, 100)
		},

		created() {

			this.initData()
		},

		methods: {
			share() {
				this.ifShare = !this.ifShare;
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			async initData() {
				await this.getBaseFinancialInstitutionInfos()
				await this.getInformationList()
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 // swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 获取详情
			async getBaseFinancialInstitutionInfos() {
				let params = {
					pageNo: this.pageNo,
					language: this.$i18n.locale,
					baseEntityId: this.baseEntityId
				}
				const res = await this.$myRequest({
					url: '/project/baseFinancialInstitutionInfos/',
					data: {
						...params
					}
				});
				// let res = await getBaseFinancialInstitutionInfos(params);
				this.detial = res.data.baseFinancialInstitutionInfos[0];
				this.$set(this.detial, 'photo', 'https://m.geidcp.com/api/file/pub/' + this.detial.photo);
				this.getFollowModelStatusByModelIdAndUserId();
			},
			// 获取产品与服务列表
			async getInformationList() {
				let params = {
					businessType: 'financial_institutions',
					businessId: this.detial.baseEntityId,
					language: this.$i18n.locale.toLocaleUpperCase(),
				}
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						...params
					}
				});
				// let res = await getInformationList(params);
				if (res.data.allDataList.length > 0) {
					this.tabs[0]['list'] = res.data['1']; //产品与服务
					this.tabs[1]['list'] = res.data['2']; //投融资案例
					this.infoList = res.data['3']; //机构动态
				}
			},
			//格式化日期
			publishDate(timenumber) {
				return new Date(parseInt(timenumber)).toLocaleDateString().replace(new RegExp(/\//, 'mg'), '-');
			},

			// scroll-view到底部加载更多
			onreachBottom() {

			},
			toShowDetial(item) {
				uni.setStorageSync('detialInfo', item)
				uni.navigateTo({
					url: '/pages/financialService/financialOrgans/organsInfoDetial'
				})
			},
			// 是否被关注
			async getFollowModelStatusByModelIdAndUserId() {
				let res = await this.$myRequest({
					url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
					data: {
						modelId: this.baseEntityId,
						modelType: this.modelType,
						userId: this.userId
					}
				})
				this.followed = res.data;
			},
			// 关注或取消关注
			async saveFollowModel(flag) {
				if (this.token.length <= 7) {
					uni.navigateTo({
						url: '/pages/public/login?back=1'
					})
				} else {
					let [type, msg, followfailmsg] = [];
					if (!flag) {
						type = "follow";
						msg = this.$i18n.locale == 'zh' ? '关注成功' : 'fowllow success'
						followfailmsg = this.$i18n.locale == 'zh' ? '关注失败' : 'fowllow fail'
					} else {
						type = "unfollow"
						msg = this.$i18n.locale == 'zh' ? '取消关注成功' : 'cancel fowllow success'
						followfailmsg = this.$i18n.locale == 'zh' ? '取消关注成功关注失败' : 'cnacel fowllow fail'
					}
					let res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							modelId: this.baseEntityId,
							modelType: this.modelType,
							userId: this.userId,
							followType: type,
						}
					})
					if (!flag) {
						if (res.status == '200' && res.msg == 'ok') {
							this.$refs.uToast.show({
								title: msg,
								type: 'success'
							})
							this.followed = !this.followed;
						} else this.$refs.uToast.show({
							title: followfailmsg,
							type: 'error'
						})
					} else {
						if (res.status == '200' && res.msg == 'ok') {
							this.$refs.uToast.show({
								title: msg,
								type: 'success'
							})
							this.followed = !this.followed;
						} else this.$refs.uToast.show({
							title: followfailmsg,
							type: 'error'
						})
					}
				}
			},

			//点击查看全部
			showAll() {
				this.flag = true
			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-swiper-wrapper {
		min-height: 550upx !important;
	}

	/deep/ .u-tabs-scroll-box {
		display: flex;
		justify-content: space-around;
	}

	.organsDetial {
		background: #fefefe;

		.line5 {
			width: 100%;
			height: 10upx;
			background: #eee;

		}

		.banner {
			position: relative;

			// height: 340upx;
			.bannerimg {
				display: block;
				width: 100%;
				height: 100%;

			}
		}

		.headInfo {
			padding: 3%;

			.title {
				// height:80upx;
				// line-height:80upx;
				font-weight: 600;
				font-size: 30upx;
				color: #666;
			}

			.web,
			.address {
				height: 50upx;
				line-height: 50upx;
				display: flex;

				.label {
					width: 90upx;

				}

				.text {
					flex: 1;
				}
			}

			.des {
				// display:flex;
				margin-top: 20upx;

				.label {
					float: left;
					max-width: 200upx;
				}

				.text {
					.more {
						float: right;
						color: #2979FF;
					}

					.introduct1 {
						height: 120upx;
						display: inline-block;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					// .introduct2{
					// 	display:inline-block;


					// }
					// flex:1;
					// color:#666;
				}
			}
		}

		.tab {
			.tabtitle {
				width: 100%;
				padding: 0 3%;
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.item {
					width: 40%;
					border-bottom: 2upx solid transparent;
					text-align: center;
					line-height: 80upx;

					&.active {
						color: #007AFF;
						border-bottom: 4upx solid #007AFF;
					}
				}
			}

			.tabcontent {
				padding: 0 3%;
				min-height: 550upx;
				border-top: 1px solid #eee;
				margin-top: 1px;

				.page {
					.pageitem {
						border-bottom: 2upx solid #eee;
						margin: 16upx 0;
						padding: 2% 0;

						.label {
							color: #666;
						}

						.date {
							color: #aaa;
							font-size: 20upx;
						}

						&:last-of-type {
							border: none;
						}
					}
				}
			}
		}

		.nodata {
			height: 200upx;
			line-height: 200upx;
			text-align: center;
			color: #aaa;
		}

		.dynamic {
			padding: 3%;
			width: 100%;

			.zoneTitle {
				height: 100upx;
				line-height: 100upx;
				font-weight: bold;
				position: relative;
				margin-left: 10upx;
				color: #666;

				&:before {
					content: "";
					width: 6upx;
					height: 40upx;
					background: #04e;
					position: absolute;
					left: -10upx;
					top: 50%;
					margin-top: -22upx;
				}
			}

			.infoList {
				.item {
					display: flex;
					margin: 20upx 0;
					border-bottom: 1px solid #eee;

					.thumb {
						width: 200upx;
						position: relative;
						overflow: hidden;
						margin-right: 20upx;

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

					.info {
						flex: 1;

						.title {
							margin-bottom: 10upx;
						}

						.date {
							font-size: 20upx;
							color: #aaa;
							margin-bottom: 10upx;
						}
					}
				}
			}
		}
	}
</style>