dev/dcp-app-gate/pages/information/components/rankDetail.vue

<template>
	<view class="rf-category">
		<u-toast ref="uToast" />
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="350" back-icon-color="#fff"
			title-color="#fff" :title="i18n('InformationDetails')" :background="background">
			<view class="navbar-right" slot="right">
				<view class="right-item" @tap="shareChange">
					<u-icon :name="ifcommon==true?'star-fill':'star'" size="38"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="details">
			<view class="title">{{ initData.title }}</view>
			<view class="time">{{ formatDate(initData.publishDate) }} | {{$t('common.Source')}}: {{initData.auther}}
			</view>
			<rich-text v-if="initData.contentHtml" class="content"
				:nodes="initData.contentHtml.replace('https://www.geidcp.com/api','https://m.geidcp.com/api')">
			</rich-text>
			<view class="statement">
				<text class="statement-text">{{$t('common.contentisreproduced')}}</text>
			</view>
		</view>
		<view class="relevant">
			<text class="name">{{$t('common.RelatedInformation')}}</text>
			<view class="relevant-list">
				<view class="listBox" v-for="(info,index) in initList" :key="info.id">
					<view class="infoList" v-if="initData.id != info.id" @tap="toRankDetail"
						:data-key="info.baseEntityId">
						<div class="leftImg" v-if="info.pictureUrl">
							<image class="img" :src="websiteUrl + info.pictureUrl" mode="">
							</image>
						</div>
						<div class="rightCont" :style="{ width: info.pictureUrl?'460upx':'100%' }">
							<view class="rightContTitle">{{ info.title }}</view>
							<view class="info-cont">
								{{ info.content }}
							</view>
							<view class="title-base">
								<text>{{ info.auther }}</text>
								<text class="baseTime">{{ formatDate(info.publishDate) }}</text>
							</view>
						</div>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addIntegral
	} from '@/components/addPointDetailByTaskDict.js'
	export default {
		components: {
			addIntegral
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				initData: '',
				initList: [],
				page: {
					baseId: ''
				},
				// 收藏
				ifcommon: false,
				// 用户信息
				Storage_data: '',
				AuthToken: '',
			}
		},
		async onLoad(e) {
			uni.showLoading({
				title: this.$i18n.locale == 'zh' ? '加载中...' : 'Loading...'
			});
			console.log(e, 1111);
			this.page.baseId = e.key;
			await this.getData();
			// 获取关注状态 开始
			await this.getMyCollecModel()
			// 获取关注状态 结束
		},
		onShow() {
			// 获取登录状态和用户信息 开始
			this.AuthToken = uni.getStorageSync('Auth-Token');
			if (this.AuthToken) {
				this.Storage_data = JSON.parse(uni.getStorageSync('user'));
				setTimeout(() => {
					addIntegral('point_read_information', '2')
					console.log('已完成');
				}, 1000);
			}
			// 获取登录状态和用户信息 结束
		},
		computed: {
			token() {
				return 'Bearer ' + uni.getStorageSync('Auth-Token');
			}
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			async getData() {
				this.page.language = this.$i18n.locale.toUpperCase()
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationById/',
					data: this.page
				});
				this.initData = res.data.cmsInformationViewAPP;
				uni.hideLoading();
				this.getRelevantList(this.initData.typeDict, this.$i18n.locale.toUpperCase());
			},
			async getRelevantList(type, language) { //相关资讯
				let page = {
					typeDict: type,
					language: language,
					pageSize: 5,
					pageNo: 1,
					businessType: "information",
				}
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/appGetInformationList/',
					data: page
				});
				this.initList = res.data.allDataList || [];
				this.initList.forEach(element => {
					element.content = element.content.replace(/<[^>]+>|&[^>]+;/g, "")
				});

			},
			toRankDetail(e) {
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: './rankDetail?key=' + key
				});
			},
			// 收藏
			shareChange() {
				if (this.AuthToken) {
					if (!this.ifcommon) {
						this.saveFollowModelDo("collect");
					} else {
						this.saveFollowModelDo("uncollect");
					}
				} 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
							}
						})
					}
				}
			},
			async getMyCollecModel() {
				const that = this;
				if (this.AuthToken) {
					var users = this.Storage_data;
					let MyCollecModel = {
						modelType: 'message',
						userId: users.id,
						modelEntityId: this.initData.baseEntityId,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelCollectInfos/getPortalMyCollectModelByResearch',
						data: {
							modelEntityId: this.initData.baseEntityId,
							modelType: 'message',
							userId: users.id,
						}
					});
					if (res) {
						this.ifcommon = res.data.result;
					}
				}
			},
			// 关注操作方法
			//收藏接口
			async saveFollowModelDo(followType) {
				if (!this.AuthToken) {} else {
					var users = this.Storage_data;
					let MyCollecModel = {
						followType: followType,
						modelId: this.initData.baseEntityId,
						modelType: 'message',
						userId: users.id,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelCollectInfos/addCollectInfo',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							collectType: followType,
							modelId: this.initData.baseEntityId,
							modelType: 'message',
							userId: users.id,
						}
					});
					if (res.status == 200) {
						if (followType == 'uncollect') {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '取消收藏',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Cancel collected',
									type: 'success',
								})
							}
						} else if (followType == 'collect') {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '已收藏',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Already collected',
									type: 'success',
								})
							}
						}
						this.ifcommon = !this.ifcommon;
					}
				}
			},
		}
	}
</script>

<style scoped>
	/deep/ img,
	/deep/ image {
		width: 100%;
		height: 350rpx;
	}

	.details {
		padding: 30upx;
		background-color: #FFFFFF;
	}

	/deep/ .content p,
	/deep/ .content span {
		font-size: 32upx !important;
	}

	.statement {
		margin-top: 30upx;
	}

	.statement-text {
		font-size: 28upx;
		color: #666666;
	}

	.relevant {
		padding: 20upx 30upx;
		background-color: #FFFFFF;
		margin-top: 20upx;
	}

	.navbar-right {
		margin-right: 24upx;
		display: flex;
	}

	.right-item {
		margin: 0 20upx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.title {
		font-size: 34upx;
		font-weight: 700;
		text-align: center;
	}

	.time {
		font-size: 30upx;
		color: #666666;
		margin: 20upx 0;
		text-align: center;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.relevant {
		margin-top: 20upx;
	}

	.name {
		font-size: 34upx;
		color: #333333;
		font-weight: 700;
		position: relative;
		padding-left: 20upx;
	}

	.name:before {
		width: 10upx;
		height: 34upx;
		content: '';
		position: absolute;
		left: 0;
		top: 2upx;
		background-color: #6DD400;
	}

	.infoList {
		padding-top: 30upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F1F1F1;
	}

	.relevant-list .listBox:last-child .infoList {
		border-bottom: none;
	}

	.leftImg {
		width: 185upx;
		height: 140upx;
	}

	.rightCont {
		width: 460upx;
		padding-bottom: 30upx;
	}

	.rightContTitle {
		color: #333333;
		font-size: 32upx;
		font-weight: 700;
		overflow: hidden;
		lines: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.title-base {
		font-size: 28upx;
		color: #999999;
		margin-top: 15upx;
	}

	.baseTime {
		margin-left: 30upx;
	}

	.info-cont {
		margin-top: 15upx;
		font-size: 32upx;
		overflow: hidden;
		lines: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.listBox:last-child .rightCont {
		border-bottom: none;
	}
</style>