dev/dcp-app-gate/pages/financialService/investmentGuide/guideDetial.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="main">
			<view class="contentTitle">{{dataList.name}}</view>
			<view class="contentText">
				<rich-text :nodes="dataList.introduction"></rich-text>
			</view>
			<view class="imgList">
				<view class="imgitem" v-for="pdfitem in pdfCtrl">
					<img :src="websiteUrl + pdfList.fileAddress+'\\'+ (++pdfitem)+'.png'" mode="widthFix"
						style="width:100% ;"></img>
				</view>
				<!-- <image class="imgitem" v-for="(imgitem,imgidx) in imgList" :key="imgidx" :src="imgitem" mode="widthFix" ></image> -->
			</view>
			<!-- 阅读更多 -->
			<!-- <view class="seearticle" v-if="pdfLength>2" @click="seearticle" :style="showTip?'width:100%;text-align:center':'display:none'">
				{{$t('common.ReadingFullText')}}
			</view> -->
		</view>
		<!-- 其他区域投资指引 -->
		<!-- <view class="guide">
			<view class="zoneTitle">{{$t('common.OtherRelated')}}</view>
			<view class="guideList">
				<view class="item" v-for="(item,index) in otherArea" :key="index" @click="showDeital(item)">
					<view class="thumb">
						<image class="thumbimg" :src="websiteUrl+item.photo" mode="widthFix" @error="showErrorImg(item)"></image>
					</view>
					<view class="info">
						<view class="title">{{item.name}}</view>
						<view class="date">{{formatDate(item.publishDate)}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 投融资资讯 -->
		<!-- <view class="informations">
			<view class="zoneTitle">{{$t('common.relatedNews')}}</view>
			<view class="infoList">
				<view class="item" v-for="(item,index) in infomationList" :key="index" @click="toDetails(item)">
					<view class="thumb" v-if="item.pictureUrl&&item.pictureUrl != null">
						<image class="thumbimg" :src="websiteUrl + item.pictureUrl" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="title">{{item.title}}</view>
						<view class="date"><text>{{item.auther}}</text><text>{{formatDate(item.publishDate)}}</text></view>
					</view>
				</view>
			</view>
		</view> --><!-- 8.8.20.112:19001 InvestmentGuide -->
		<share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="$t('common.InvestmentGuide')" :summary="dataList.name"
			:href="'https://m.geidcp.com/#/pages/financialService/investmentGuide/guideDetial?' + 'id=' + baseEntityId + '&language=' + $i18n.locale"
			:imageUrl="pdfCtrl && pdfCtrl[0]? websiteUrl + pdfList.fileAddress+'\\'+ (++pdfCtrl[0])+'.png':
								'https://m.geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
		</share>
		<u-toast ref="uToast" />
		<!-- #ifdef H5 -->
		<rf-back-home></rf-back-home>
		<!-- #endif -->
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import UIcon from '@/components/uni-icons/uni-icons.vue'
	import {
		getBaseInvestmentGuidelinesInfos
	} from '@/api/financialService/baseInvestmentGuidelinesInfo';
	import {
		saveFollowModel,
		getFollowModelStatusByModelIdAndUserId
	} from '@/api/operation/basePortalModelFollowInfo'
	import {
		sysAttachmentInfos
	} from "@/api/cooperation/baseCooperationUnit";
	import {
		gateResearchResultFileById
	} from "@/api/research/baseResearchResultView";
	import {
		financeInfoList
	} from "@/api/financialService/cmsInformationViews";
	import share from '@/components/share'
	export default {
		name: 'OrgansDetial',
		components: {
			UNavbar,
			UIcon,
			share
		},
		data() {
			return {
				title: '',
				followed: false,
				modelType: 'investmentGuidelines',
				imgs: [],
				baseEntityId: '',
				dataList: [],
				pdfList: [],
				showTip: true,
				otherArea: [],
				scrollTop: 0,
				banner: '../../../static/img/finance/header1.png',
				guideList: [],
				infomationList: [],
				pdfCtrl: [],
				pdfLength: '',
				ifShare: false,
			}
		},
		onLoad(e) {
			this.baseEntityId = e.id;
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
			uni.showLoading({
				title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...'
			});
			this.title = this.$i18n.locale == 'zh' ? '投资指引详情' : 'InvestmentGuide Detial'
			setTimeout(() => {
				uni.hideLoading();
			}, 100)
		},
		onShow: function() {
			this.token = uni.getStorageSync('Auth-Token') ? ('Bearer ' + uni.getStorageSync('Auth-Token')) : '';
			this.userId = uni.getStorageSync('user') ? (JSON.parse(uni.getStorageSync('user')).id) : '';
		},
		created() {

			// this.pdfCtrl=this.imgs.slice(0,2);
			// console.log(this.imgs,'------------imgs-----')
			this.getDataList();
			this.getInfomation()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {
			seearticle() {
				this.imgs = this.pdfCtrl;
				this.showTip = false
			},
			share() {
				this.ifShare = !this.ifShare;
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			//查看投资指引详情
			showDeital(item) {
				uni.navigateTo({
					url: '/pages/financialService/investmentGuide/guideDetial?id=' + item.baseEntityId
				})
			},
			//获取投资指引详情
			async getDataList() {
				let params = {
					language: this.$i18n.locale.toUpperCase(),
					baseEntityId: this.baseEntityId,
					statusDict: '2'
				}
				const res = await this.$myRequest({
					url: '/project/baseInvestmentGuidelinesInfos/',
					data: params
				});

				if (res.data.baseInvestmentGuidelinesInfos) {
					this.dataList = res.data.baseInvestmentGuidelinesInfos[0];
					this.contentText = this.dataList.introduction;
					this.getOther();
					this.getFollowModelStatusByModelIdAndUserId();
					//获取pdf详情
					if (this.dataList.pdfToPictureFileIds) {
						let dataPrams = {
							pageNo: 1,
							pageSize: 1,
							language: this.$i18n.locale.toUpperCase(),
							researchResultFileId: this.dataList.pdfToPictureFileIds
						}
						const result = await this.$myRequest({
							url: '/resourceshare/baseResearchResultViews/gateResearchResultFile',
							data: {
								...dataPrams
							}
						});
						if (result.data.baseResearchResultFile !== "无数据") {
							this.pdfList = result.data.baseResearchResultFile;

							this.goForpage()
						} else {
							this.pdfList = [];
						}
					} else {
						this.pdfList = [];
					}

					console.log(this.pdfList, '---------------this.pdfList');
					console.log(this.pdfList.filePages, '---------------this.pdfList.filePages')
				}
			},
			//获取其他区域投资指引
			async getOther() {
				let otherList = {
					language: this.$i18n.locale.toUpperCase(),
					statusDict: '2',
					// showable:'y'
				};
				const otheres = await this.$myRequest({
					url: '/project/baseInvestmentGuidelinesInfos/',
					data: otherList
				});

				if (otheres.data.baseInvestmentGuidelinesInfos) {
					let tempList = [];
					tempList = otheres.data.baseInvestmentGuidelinesInfos;
					this.otherArea = [];
					for (let i = 0; i < tempList.length; i++) {
						if (tempList[i].id !== this.dataList.id) {
							this.otherArea.push(tempList[i])
						}
					}
				}
			},
			async getInfomation() {
				let infoParams = {
					language: this.$i18n.locale.toUpperCase(),
				}
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/financeInfoList/',
					data: infoParams
				});
				for (let i = 0; i < 10; i++) {
					this.infomationList.push(res.data[i]);
				}


			},
			toDetails(item) {
				let key = item.baseEntityId;
				uni.navigateTo({
					url: '/pages/information/components/rankDetail?key=' + key
				});
			},
			goForpage() {
				// this.pdfCtrl = [];
				for (let i = 0; i < this.pdfList.filePages; i++) {
					this.pdfCtrl.push(i);

					// this.imgs=this.pdfCtrl.slice(0,2);
				}
				this.pdfLength = this.pdfCtrl.length;
				console.log(this.pdfLength, '------------this.pdfLength-------------')

			},
			// 检测是否被收藏
			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'
						})
					}
				}

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

		}
	}
</script>

<style lang="scss" scoped>
	.organsDetial {
		background: #fff;
		padding: 2%;

		.main {
			.contentTitle {
				text-align: center;
				font-weight: 700;
				line-height: 60upx;
				margin-bottom: 20upx;
			}

			.contentText {
				text-indent: 60upx;
			}

			.imgList {
				margin-top: 20upx;
				text-align: center;

				.imgitem {
					width: 100%;
					font-size: 0;
					display: block;
				}

				.seearticle {
					height: 60upx;
					line-height: 60upx;
					color: #04e;
					font-size: 24upx;

				}

			}
		}

		.banner {
			position: relative;
			overflow: hidden;

			.bannerimg {
				display: block;
				width: 100%;
			}
		}

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

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

		.guide .guideList,
		.informations .infoList {
			.item {
				display: flex;
				margin: 20upx 0;
				padding: 20upx 0;
				border-bottom: 2upx solid #eee;

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

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

					.thumbimg {
						display: block;
						width: 100%;
						max-height: 160upx;
					}
				}

				.info {
					flex: 1;
					position: relative;

					.title {
						margin-bottom: 20upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.date {
						width: 65%;
						font-size: 20upx;
						color: #888;
						align-self: flex-end;
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.infoList .info {
			.title {
				margin-bottom: 10upx !important;
			}
		}
	}
</style>