cytWebsite/pages/index/zx.vue

<template>
	<view class="">
		<top></top>
		<view class="content1">
			<view class="nav-title">
				首页>行业资讯
			</view>
			<view class="content-view">
				<view @click='toDetail(item.id)' class="item" v-for="item in tableData">
					<view class="left-text">
						<image :src="item.cover" style="width: 230px;height: 158px;"></image>
					</view>
					<view class="right-content">
						<view class="title">
							{{item.title}}
						</view>
						<view class="row2">
							{{item.content}}
						</view>
						<view class="row3">
							<view class="ly">
								来源：{{item.issuingAgency}} </view>
							<view class="date">{{item.issuingDate}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="currentPage" :total="total"
					@change="change" />
			</view>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import top from '@/components/top.vue'
	import bottom from '@/components/bottom.vue'
	export default {
		components: {
			top,
			bottom
		},
		data() {
			return {
				type: '',
				navTitle: '',
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				currentPage: 1,
				// 数据总量
				total: 200,
				loading: false,
				user: {}
			}
		},
		onLoad(options) {
			this.user = uni.getStorageSync('userInfo');
			if (this.user) {
				this.$store.commit('login', this.user)
				this.init()
			}
		},
		methods: {
			// 获取富文本的纯文字内容
			convertIdeogramToNormalCharacter(val) {
				const arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			},
			getPlainText(richCont) {
				debugger
				const str = richCont;
				let value = richCont;
				if (richCont) {
					// 方法一： 
					value = value.replace(/\s*/g, ""); //去掉空格
					value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
					value = value.replace(/↵/g, ""); //去掉所有的↵符号
					value = value.replace(/[\r\n]/g, "") //去掉回车换行
					value = value.replace(/&nbsp;/g, "") //去掉空格
					value = this.convertIdeogramToNormalCharacter(value);
					return value;
				} else {
					return null;
				}
			},
			init() {
				this.$request.baseRequest('get', '/hyPublicConsultation/selectHyPublicConsultation', {
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						searchKeyWord: '',
						searchType: '资讯'
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							debugger
							this.tableData = res.data.records
							this.total = res.data.total
							for (let i = 0; i < this.tableData.length; i++) {
								this.tableData[i].content = this.getPlainText(this.tableData[i].releaseContent)
							}
							uni.hideLoading()

						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/index/zxDetail?id=" + id
				})
			},
			change(val) {
				console.log(val)
				this.currentPage = val.current
				this.init()
			},

		}
	}
</script>

<style scoped lang="scss">
	.content1 {
		width: 80%;
		background: white;
		margin: 40rpx auto;
		padding: 40rpx;
		box-sizing: border-box;

		.nav-title {
			font-size: 28rpx;
			color: #66686C;
			margin-bottom: 30rpx;
		}

		.content-view {

			.item {
				display: flex;
				// justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				padding-right: 80rpx;
				padding-bottom: 68rpx;
				margin-top: 68rpx;

				.left-text {
					font-size: 36rpx;
					color: #333333;
					line-height: 64rpx;
					display: flex;
					align-items: center;
				}

				.right-content {
					margin-left: 40rpx;



					.title {
						font-size: 48rpx;
						font-weight: 600;
						color: #333333;
						line-height: 66rpx;
					}

					.row2 {
						margin-top: 20rpx;
						font-size: 36rpx;
						color: #969CA1;
						line-height: 64rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
					}

					.row3 {
						display: flex;
						justify-content: space-between;
						margin-top: 40rpx;
						color: #969CA1;
					}
				}
			}

			// .item:nth-last-of-type(1) {
			// 	border-bottom: 0;
			// }
		}
	}

	.uni-pagination-box {
		margin-top: 40rpx;
	}
</style>