wangluohuoyun_website/pages/index/info.vue

<template>
	<view class="container">
		<top></top>
		<view class="content1">
			<view class="nav-title">
				首页>{{navTitle}}
			</view>
			<view class="content-view">
				<view @click='toDetail(item.id,navTitle)' class="item" v-for="item in tableData">
					<view class="left-text"><text class="point"></text>{{item.title}}</view>
					<view class="date">{{item.issuingDate}}</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.type = options.type
			this.selectedIndexs = []
			if (this.type == 1) {
				this.navTitle = '公告'
			} else {
				this.navTitle = '公示'
			}
			this.user = uni.getStorageSync('userInfo');
			if (this.user) {
				this.$store.commit('login', this.user)

				this.init()
			}

			// this.getData(1)
		},
		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) {
				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: this.navTitle
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							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, type) {
				let _src = ''
				if (type == 'zx') {
					_src = "/pages/index/zxDetail?id=" + id
				} else {
					_src = "/pages/index/infoDetail?id=" + id + '&type=' + type
				}
				uni.navigateTo({
					url: _src
				})
			},
			change(val) {
				console.log(val)
				this.currentPage = val.current
				this.init()
			},
		}
	}
</script>

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

		.nav-title {
			font-size: 28rpx;
			color: #66686C;
			line-height: 20px;
		}

		.content-view {

			.item {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F5F5F5;
				padding-right: 80rpx;
				line-height: 55px;
				height: 55px;

				.point {
					width: 12rpx;
					height: 12rpx;
					background: #D8D8D8;
					margin: 0 6px;
				}

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

				.date {
					font-size: 36rpx;
					color: #90969B;
				}
			}

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

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