Blame view

ceres-uniapp-master/pages_category_page2/userModule/messageDetail.vue 3.04 KB
3f535f30   杨鑫   '初始'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
  <template>
  	<view class="messageDetail">
      <global-loading />
  		<h3 class="detailTit">{{messageDateils.noticeTitle}}</h3>
  		<view class="detailTime" v-if="messageDateils.createTime">时间:{{messageDateils.createTime}}</view>
  		<view class="detailInfo">
  			<rich-text :nodes="htmlData"></rich-text>
  			<img :src="messageDateils.image" alt="">
  		</view>
  	</view>
  </template>
  
  <script>
  	import parse from 'mini-html-parser2';
    import GlobalLoading from "../../components/diyLoading";
  	const NET = require('../../utils/request')
  	const API = require('../../config/api')
  	export default {
  		name: "messageDetail",
      components: {GlobalLoading},
      data() {
  			return {
  				onlyid: 0,
  				messageDateils: {},
  				htmlData: []
  			}
  		},
  		onShow() {
  			this.getNotice()
  		},
  		onLoad(options) {
  			this.onlyid = options.noticeId
  			this.getNotice()
  		},
  		methods: {
  			formatRichText(html) {
  				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
  					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
  					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
  					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
  					return match;
  				});
  				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
  					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
  						'max-width:100%;');
  					return match;
  				});
  				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  				newContent = newContent.replace(/\<img/gi,
  					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
  				return newContent;
  			},
  			gitMassageDateils() {
  				NET.request(API.getMessageDateils, {
  					noticeId: this.onlyid
  				}, 'GET').then(res => {
  					this.messageDateils = res.data
  					this.messageDateils.noticeContent = this.formatRichText(this.messageDateils.noticeContent)
  					console.log(this.messageDateils.noticeContent)
  					parse(this.messageDateils.noticeContent, (err, htmlData) => {
  						this.htmlData = htmlData
  						console.log(this.htmlData)
  					})
  					uni.hideLoading()
  				}).catch(res => {
  					uni.hideLoading()
  					uni.showToast({
  						title: '失败',
  						icon: "none"
  					})
  				})
  			},
  			getNotice() {
  				// uni.showLoading({
  				// 	title: '加载中...',
  				// })
  				NET.request(API.readNotice, {
  					noticeId: this.onlyid
  				}, 'POST').then(res => {
  					uni.hideLoading()
  					this.gitMassageDateils()
  				}).catch(res => {
  					uni.hideLoading()
  					uni.showToast({
  						title: '失败',
  						icon: "none"
  					})
  				})
  			}
  		}
  	}
  </script>
  
  <style lang="scss" scoped>
  	.messageDetail {
  		padding: 30upx;
  
  		h3 {
  			font-size: 36upx;
  			color: #333333;
  			margin-bottom: 40upx;
  		}
  
  		.detailTime {
  			font-size: 28upx;
  			color: #666666;
  			margin-bottom: 50upx;
  		}
  
  		.detailInfo {
  			word-wrap: break-word;
  
  			p {
  				font-size: 28upx;
  				color: #333333;
  				line-height: 48upx;
  				text-indent: 1em;
  				margin-bottom: 50upx;
  			}
  
  			img {
  				width: 100%;
  			}
  		}
  	}
  </style>