dev/dcp-app-gate/pages/resourceSharing/resourceDetails.vue

<template>
	<view class="rf-category" style="position: relative;">
		<u-toast ref="uToast" />
		<view>
			<!--搜索导航栏-->
			<view class="icoStyle">
				<!--<view class="leftArrow" @tap="back">
                    <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
                </view>
                <view style="width:90%;height:99upx">
                    <rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" />
                </view>-->
				<u-navbar :back-text="i18n('Back')" :title="i18n('ResearchResources')+i18n('resourceDetails')"
					:background="barBackground" back-icon-color="white" title-color="white"
					:back-text-style="backStyle">
					<view slot="right" style="margin-right:20upx">
						<u-icon name="share-fill" style="margin-right: 30upx;" color="white" size="50" @click="share">
						</u-icon>
					</view>
				</u-navbar>
			</view>
			<view class="content">
				<!--信息-->
				<view
					style="width: 100%;min-height: 700upx;margin-top: 10upx;padding: 20upx 30upx;background-color: white;">
					<view
						style="width: 690upx;height: 340upx;border-radius: 40upx;border-radius: 40upx;overflow: hidden;">
						<u-swiper :list="bannerImg" v-if="bannerImg.length!=0&&bannerImg.length!=undefined" height="340"
							mode="none">
						</u-swiper>
						<image v-else src="@/static/img/resourceSharing/lavle.png" mode=""
							style="width: 100%;height: 100%;"></image>
					</view>
					<view style="width: 100%;margin-top: 30upx;color: #666">
						<view style="height: 42upx;color: #333">
							<text style="color: #333;font-size: 30upx; line-height: 42upx;">{{details.name}}</text>
						</view>
						<view style="min-height: 36upx;margin-top: 10upx;opacity: 0.7;">
							<text
								style="width:140upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;">{{i18n('resourceCountries')}}:</text>
							<text style="width:550upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;"
								v-if="details.countryName&&details.countryName!='null'&&details.countryName!=null">{{details.countryName}}</text>
							<text v-else style="color: #666;font-size: 24upx; line-height: 36upx;float: left;">/</text>
							<view style="clear: both;"></view>
						</view>
						<view style="min-height: 36upx;margin-top: 10upx;opacity: 0.7;">
							<text
								style="width:140upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;">{{i18n('resourceAddress')}}:</text>
							<text style="width:550upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;"
								v-if="details.address&&details.address!='null'&&details.address!=null">{{details.address}}</text>
							<text v-else style="color: #666;font-size: 24upx; line-height: 36upx;float: left;">/</text>
							<view style="clear: both;"></view>
						</view>
						<view style="min-height: 36upx;margin-top: 10upx;opacity: 0.7;">
							<text
								style="width:140upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;">{{i18n('resourceSubordinateUnits')}}:</text>
							<text style="width:550upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;"
								v-if="details.affiliatedUnitName&&details.affiliatedUnitName!='null'&&details.affiliatedUnitName!=null">{{details.affiliatedUnitName}}</text>
							<text v-else style="color: #666;font-size: 24upx; line-height: 36upx;float: left;">/</text>
							<view style="clear: both;"></view>
						</view>
						<view style="min-height: 36upx;margin-top: 10upx;opacity: 0.7;">
							<text
								style="width:140upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;">{{i18n('resourceContact')}}:</text>
							<text style="width:550upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;"
								v-if="details.contactsNumber&&details.contactsNumber!='null'&&details.contactsNumber!=null">{{details.contactsNumber}}</text>
							<text v-else style="color: #666;font-size: 24upx; line-height: 36upx;float: left;">/</text>
							<view style="clear: both;"></view>
						</view>
						<view style="min-height: 36upx;margin-top: 10upx;opacity: 0.7;">
							<text
								style="width:140upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;">{{i18n('resourceEmail')}}:</text>
							<text style="width:550upx;color: #666;font-size: 24upx; line-height: 36upx;float: left;"
								v-if="details.contactsEmail&&details.contactsEmail!='null'&&details.contactsEmail!=null">{{details.contactsEmail}}</text>
							<text v-else style="color: #666;font-size: 24upx; line-height: 36upx;float: left;">/</text>
							<view style="clear: both;"></view>
						</view>
					</view>
				</view>
				<!--摘要-->
				<view style="padding: 0 20upx;margin-top: 20upx;background-color: white;"
					v-for="(item,index) in details.informationList">
					<!--摘要 >> 标题-->
					<view style="height: 102upx;padding: 30upx 0">
						<view style="height: 30upx;width: 10upx;margin-top: 6upx;background-color: #6DD400;float: left">
						</view>
						<view style="height: 100%;float: left;margin-left: 15upx;">
							<text style="font-size: 30upx;color: #0B0B11;line-height: 42upx;">{{item.title}}</text>
						</view>
						<view style="clear: both;"></view>
					</view>
					<!--摘要 >> 正文-->
					<view style="padding: 0 0 30upx 0">
						<text v-html="item.content"></text>
					</view>
				</view>
			</view>
			<view class="recommend">
				<view style="width: 100%;height: 83upx;padding: 0 30upx;">
					<text style="font-size: 26upx;font-weight: 600;line-height: 83upx;color: #333333;">
						{{$i18n.locale=='zh'?'相关':'related recommendation'}}
					</text>
				</view>
				<!-- 列表 -->
				<view style="width: 100%;">
					<view style="width: 100%;">
						<view style="width: 100%;height: 160upx;margin-bottom: 20upx;padding: 20upx 30upx;"
							v-for="(item,index) in recommendList" @click="toDetaile(item.entityId)">
							<view
								style="width: 690upx;background-color: white;border: 1px solid rgba(151,151,151,0.5);">
								<view style="width: 220upx;height: 140upx;float: left;margin: 10upx 20upx 10upx 10upx">
									<image
										v-if="item.researchResourcesMedia!='null'&&item.researchResourcesMedia!=null&&item.researchResourcesMedia!=''&&item.researchResourcesMedia!=undefined"
										:src="'https://www.geidcp.com//api/file/pub/'+item.researchResourcesMedia"
										mode="" style="width: 100%;height: 100%;"></image>
									<image v-else src="@/static/img/resourceSharing/lavle.png" mode=""
										style="width: 100%;height: 100%;"></image>
								</view>
								<view style="width: 434upx;height: 100%;float: left;position: relative;">
									<view style="margin-top: 10upx;">
										<text style="font-size: 26upx; color: #0B0B11;" class="twoLine">
											{{item.name}}
										</text>
									</view>
									<view style="margin-top: 8upx;">
										<text style="font-size: 20upx; color: #666666;" class="twoLine">
											{{item.affiliatedUnitName}}
										</text>
									</view>
									<view style="margin-top: 8upx;">
										<text style="font-size: 20upx; padding: 0 13upx; border: 1px solid #1777FE;
											display: inline-block;border-radius: 32upx;color: #1777FE;">
											{{item.researchResourcesType}}
										</text>
									</view>

								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
						<view style="margin-top: 30rpx;">
							<u-loadmore :status="status" :load-text="loadText" />
						</view>
					</view>
				</view>
			</view>
			<rf-back-top :scrollTop="scrollTop"></rf-back-top>
		</view>
		<!-- 8.8.20.112:19001 -->
		<share v-show="ifShare == true" :show="ifShare" @closeShare="share"
			:title="i18n('ResourceSharing') + '->' + i18n('researchResource')"
			:summary="i18n('ResourceSharing')+i18n('researchResource')"
			:href="'https://m.geidcp.com/#/pages/resourceSharing/resultDetails?' + 'entityId=' + entityId + '&language=' + $i18n.locale"
			:imageUrl="bannerImg && bannerImg[0]?' bannerImg[0]':'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
		</share>
		<!-- #ifdef H5 -->
		<rf-back-home></rf-back-home>
		<!-- #endif -->
		<u-tabbar v-model="current" :list="bottombar" inactive-color="#B3BCCC" active-color="#4E79ED"
			@change="bottombarChange"></u-tabbar>
	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar';
	import share from '@/components/share'
	export default {
		data() {
			return {
				// bar
				ifShare: false,
				barBackground: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				//
				entityId: '',
				details: {},
				recommendList: [],
				pageNo: 0,
				totalPage: 1,
				status: 'loading',
				isLoading: true,
				loadText: {
					loading: this.$i18n.locale == 'zh' ? '加载中' : 'Loading',
					nomore: this.$i18n.locale == 'zh' ? '没有更多数据了' : 'No more'
				},
				// 轮播
				bannerImg: [],
				bannerVideo: [],
				bannerList: [],
				// 收藏
				ifcommon: false,
				// 字典
				classify1: '',
				classify2: '',
				// 返回顶部
				scrollTop: 0,
				// 底部导航栏
				current: 2,
				bottombar: [{
						iconPath: "heart-fill",
						selectedIconPath: "heart-fill",
						text: '',
						isDot: false,
						customIcon: false,
					},
					/*{
					    iconPath: "share-fill",
					    selectedIconPath: "share-fill",
					    text: '',
					    isDot: false,
					    customIcon: false,
					},*/
					{
						iconPath: "file-text-fill",
						selectedIconPath: "file-text-fill",
						text: '',
						isDot: false,
						customIcon: false,
					},
				],
				// 用户信息
				Storage_data: '',
				AuthToken: '',
			}
		},
		components: {
			rfSearchBar,
			share
		},
		onLoad: function(options) {
			this.entityId = options.entityId;
			if (options.language) {
				uni.setStorageSync("language", options.language);
				this._i18n.locale = options.language;
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() { //页面拉到底部加载
			if (this.isLoading) {
				this.getDataList();
			}
		},
		async onShow() {
			this.bottombarInit()
			await this.getDict()
			await this.getData();
			await this.getDataList()
			await this.getMyCollecModel();
		},
		watch: {
			current() {
				this.current = 2;
			},
			ifcommon() {
				this.bottombarInit()
			},
		},
		computed: {
			token() {
				return 'Bearer ' + uni.getStorageSync('Auth-Token');
			}
		},
		methods: {
			share() {
				this.ifShare = !this.ifShare;
			},
			async getDict() {
				this.AuthToken = uni.getStorageSync('Auth-Token');
				if (this.AuthToken) {
					this.Storage_data = JSON.parse(uni.getStorageSync('user'));
				}
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == "zh" ?
							'RESEARCH_RESULT_TYPE_DICT,RESEARCH_RESOURCE_TYPE_DICT' :
							'RESEARCH_RESULT_TYPE_DICT_EN,RESEARCH_RESOURCE_TYPE_DICT_EN',
					}
				});
				if (res.data) {
					let both = {
						label: this.$t('common.All'),
						value: null
					};
					this.classify1 = res.data[0];
					this.classify2 = res.data[1];
					this.classify1.unshift(both);
					this.classify2.unshift(both);
				}
			},
			async getData() {
				const that = this;
				let params = {
					entityId: this.entityId,
					pageNo: '',
					pageSize: '',
					language: this.$i18n.locale.toUpperCase(),
					effective: 'Y',
				};
				const res = await this.$myRequest({
					url: '/resourceshare/baseResearchResourcesViews/gateBaseResearchResourcesView',
					data: {
						...params
					}
				})
				if (res.data) {
					that.details = res.data.baseResearchResourcesView;
					that.details.createDate = that.details.createDate ? this.formatDate(that.details.createDate,
						"YYYY-MM-DD") : "";

					// 轮播图片
					if (that.details.researchResourcesMedia && that.details.researchResourcesMedia != 'null' && that
						.details.researchResourcesMedia !=
						null) {
						that.bannerImg = that.details.researchResourcesMedia.split(',')
					}
					for (let i = 0; i < that.bannerImg.length; i++) {
						that.bannerImg[i] = that.bannerImg[i].replace(' ', '')
						that.bannerImg[i] = 'https://m.geidcp.com/api/file/pub/' + that.bannerImg[i]
					}
					// 轮播视频
					if (that.details.researchResourcesMediaVideo) {
						that.bannerVideo = that.details.researchResourcesMediaVideo.split(',')
					}
					for (let i = 0; i < that.bannerVideo.length; i++) {
						that.bannerVideo[i] = that.bannerVideo[i].replace(' ', '')
						that.bannerVideo[i] = 'https://m.geidcp.com/api/file/pub/' + that.bannerVideo[i]
					}
					that.bannerList = that.bannerVideo.concat(that.bannerImg)
				}
			},
			async getDataList() {
				const that = this;
				let params = {
					pageNo: '',
					pageSize: 10,
					language: this.$i18n.locale.toUpperCase(),
					status: 0,
					descStatus: 0,
					effective: 'Y',
				};
				if (this.pageNo >= this.totalPage) {
					this.isLoading = false;
					this.status = 'nomore';
				} else {
					this.isLoading = true;
					this.pageNo++;
					params.pageNo = this.pageNo;
					const res = await this.$myRequest({
						url: '/resourceshare/baseResearchResourcesViews/',
						data: {
							...params
						}
					})
					if (res.data) {
						let data = res.data.baseResearchResourcesViews;
						data.forEach((i) => {
							i.createDate = i.createDate ? this.formatDate(i.createDate, "YYYY-MM-DD") : "";
							if (i.researchResourcesMedia) {
								i.researchResourcesMedia = i.researchResourcesMedia.split(',')
								i.researchResourcesMedia = i.researchResourcesMedia[0]
							}
						})
						for (let i = 0; i < data.length; i++) {
							for (let o = 0; o < that.classify2.length; o++) {
								if (data[i].researchResourcesType == that.classify2[o].value) {
									data[i].researchResourcesType = that.classify2[o].label;
								}
							}
						}
						that.recommendList = [...that.recommendList, ...data]
						that.totalPage = res.data.page.totalPage;
						if (that.totalPage == 1) {
							this.isLoading = false;
							this.status = 'nomore';
						}

						let flag = false;
						for (let j = 0; j < that.recommendList.length; j++) {
							if (that.recommendList[j].name == that.details.name) {
								flag = j;
							}
						}
						if (flag === 0 || flag != false) {
							that.recommendList.splice(flag, 1)
						}
					}
				}
			},
			toDetaile() {
				this.$mRouter.push({
					route: `/pages/resourceSharing/resourceDetails?entityId=${params.entityId}`,
				});
			},
			//收藏
			async getMyCollecModel() {
				const that = this;
				if (this.AuthToken) {
					var users = this.Storage_data;
					let MyCollecModel = {
						modelType: 'researchResult',
						userId: users.userId,
						modelEntityId: this.entityId,
					}
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
						data: {
							modelId: this.entityId,
							modelType: 'researchResult',
							userId: users.id,
						}
					});
					if (res) {
						this.ifcommon = res.data;
					}
				}
			},
			shareChange() {
				console.log('share')
				if (this.ifcommon) {
					this.saveFollowModelDo("unfollow");
				} else {
					this.saveFollowModelDo("follow");
				}
			},
			// 关注操作方法
			async saveFollowModelDo(followType) {
				if (!this.AuthToken) {
					// 登录
				} else {
					var users = this.Storage_data;
					let MyCollecModel = {
						followType: followType,
						modelId: this.entityId,
						modelType: 'researchResult',
						userId: users.id,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							followType: followType,
							modelId: this.entityId,
							modelType: 'researchResources',
							userId: users.id,
						}
					});
					if (res) {
						if (followType == 'unfollow') {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '取消关注',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Cancel concerned',
									type: 'success',
								})
							}
						} else {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '已关注',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Already concerned',
									type: 'success',
								})
							}
						}
						this.ifcommon = !this.ifcommon;
					}
				}
			},
			// 底部bar事件
			bottombarInit() {
				this.bottombar[0].text = this.$i18n.locale == 'zh' ? (this.ifcommon === true ? "已关注" : "关注") : (this
					.ifcommon === true ? "Concerned" : " Follow")
				// this.bottombar[1].text = this.i18n('resourceDetailsShare')
				this.bottombar[1].text = this.i18n('resourceApplicationResearch')
			},
			bottombarChange(index) {
				if (index == 0) {
					// 收藏
					if (this.AuthToken) {
						this.shareChange()
					} else {
						if (this.$i18n.locale == 'zh') {
							this.$refs.uToast.show({
								title: '请登录',
								type: 'warning',
								url: '/pages/public/login',
								params: {
									back: 1
								}
							})
						} else {
							this.$refs.uToast.show({
								title: 'please log in',
								type: 'warning',
								url: '/pages/public/login',
								params: {
									back: 1
								}
							})
						}
					}
				} else if (index == 2) {
					// 分享
				} else if (index == 1) {
					// 申请调研
					if (this.AuthToken) {
						let params = {
							entityId: this.entityId,
							name: this.details.name,
							flag: true
						};
						uni.redirectTo({
							url: `/pages/resourceSharing/resourceApply?entityId=${params.entityId}&name=${params.name}&flag=${params.flag}`
						});
					} else {
						if (this.$i18n.locale == 'zh') {
							this.$refs.uToast.show({
								title: '请登录',
								type: 'warning',
								url: '/pages/public/login',
								params: {
									back: 1
								}
							})
						} else {
							this.$refs.uToast.show({
								title: 'please log in',
								type: 'warning',
								url: '/pages/public/login',
								params: {
									back: 1
								}
							})
						}
					}
				}
			},
			back() {
				uni.navigateBack();
			},
			//中英文切换
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rf-category {
		background-color: #F3F4F5;

		/*  #ifdef  APP-PLUS  */
		/*margin-top: calc(20upx + var(--status-bar-height));*/
		/*  #endif  */
		.icoStyle {
			display: flex;
			align-items: center;

			.leftArrow {
				width: 36upx;
				height: 36upx;
				position: fixed;
				z-index: 99;
				/*  #ifdef  APP-PLUS  */
				padding-top: calc(20upx + var(--status-bar-height));
				/*  #endif  */
			}
		}

		.content {
			background-color: #F3F4F5;
		}

		.recommend {
			background-color: white;
			margin-top: 20upx;
			padding-bottom: 20upx;
			width: 100%;
		}

		.oneLine {
			/* 隐藏溢出元素 */
			overflow: hidden;
			/* 单行显示 */
			white-space: nowrap;
			/* 溢出显示省略号 */
			text-overflow: ellipsis;
		}

		.twoLine {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.threeLine {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.fourLine {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
		}
	}
</style>