xinhuaqujiaoyuju/pages/message/content.vue

<template>
	<view class="oa-notice-detail">

		<view class="covers-body covers-uploader oa-uploader">
			<view>
				<view style="text-align: center;font-size: 1.2rem;">{{content.tatle}}</view>
				<view class="u-border-bottom">
						<span>发布人:{{content.createBy || '无'}}</span><span style="margin-left: 1rem;">发布时间:{{content.createTime | time}}</span>
				</view>
				<!-- <u-line class="u-line"></u-line> -->
				<view class="input-title">
					<mp-html :content="content.fileDetails" />
					<!-- <view class="input-content" v-html="content.fileDetails"></view> -->
				</view>
					
			</view>
		</view>

		<view class="covers-body covers-uploader oa-uploader" v-if="file.length>0">
			<view class="input-title">
				<view>附件：</view>
				<view class="uni-uploader">
					<view class="uni-uploader-body" v-for="(item,i) in file" :key="i">
						<view class="uni-uploader_files" @click="showFile(item.path)">
							<block>
								<view class="uni-uploader__file" style="position: relative;">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	import moment from '@/common/moment';
	import mpHtml from '@/components/mp-html/mp-html'
	export default {
		components:{
			mpHtml
		},
		data() {
			return {
				id: '',
				content: {},
				file: {},
				ismine: false,
			}
		},
		filters: {
			time(val) {
				var date = new Date(val);
				// return moment(date).format('YYYY-MM-DD HH:mm:ss');
				return moment(date).format('YYYY-MM-DD HH:mm');
			}
		},
		onLoad: function(opt) {
			this.id = opt.id;
			this.initData();
		},
		methods: {
			// 数据初始化
			initData() {
				this.getContent();
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			getContent() {
				var url = this.$mConfig.baseUrl + '/system/mes/' + this.id;
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var that = this;
				this.$http.request({
					url: url,
					header: {
						'content-type': 'application/json',
						'Authorization': token
					}
				}).then(r => {
					if (r.code == "200") {
						that.content = r.data;
						var arr = [];
						if (r.data.remark) var contentfilelist = r.data.remark.split(',');
						else var contentfilelist = [];
						for (var i = 0; i < contentfilelist.length; i++) {
							arr.push({
								"name": contentfilelist[i],
								"path": r.data.putFilePath.split(',')[i]
							});
						}
						that.file = arr;
					} else {

					}
				})
			},
			showFile(path) {
				var type = path.split('.')[1].toLocaleLowerCase();
				var url = this.$mConfig.baseUrl + path;
				if (type == 'jpg' || type == 'jpeg' || type == 'bmp' || type == 'gif' || type == 'png') {
					var arr = [];
					arr.push(url);
					uni.previewImage({
						urls: arr
					});
				} else if (type == 'doc' || type == 'xls' || type == 'ppt' || type == 'pdf' || type == 'docx' || type ==
					'xlsx' || type == 'pptx') {
					uni.downloadFile({
						url: url,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function(res) {
									console.log(res);
								}
							});
						}
					});
				} else {
					uni.downloadFile({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								var tempFilePaths = res.tempFilePath;
								uni.saveFile({
									tempFilePath: tempFilePaths[0],
									success: function(res) {
										var savedFilePath = res.savedFilePath;
										toastMsg('success', "已保存文件至：" + savedFilePath);
									}
								});
							}
						}
					})
				}
			},
			handleWorksOperation(path) {
				var url = this.$mConfig.baseUrl + path;
				var qianshouUrl = this.$mConfig.baseUrl + '/fw/submitToDoItem/' + this.taskid;
				var token = this.$preToken + ' ' + this.$store.state.accessToken;
				var that = this;
				this.$http.request({
					url: url,
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Authorization': token
					},
					params: {
						id: that.id
					}
				}).then(r => {
					if (r.code = "200") {
						this.$http.request({
							url: qianshouUrl,
							method: "PUT",
							header: {
								'content-type': 'application/json',
								'Authorization': token
							},
							data: {
								SelectUserType: "end",
								sendUser: "",
								sendUserRealName: ""
							}
						}).then(res => {
							if (res.code == "200") {
								that.qianshou = true;
								that.content.updateTime = new Date();
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oa-notice-detail {
		.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}

		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
		}

		.feedback-star-view.feedback-title {
			justify-content: flex-start;
			margin: 0;
		}

		.feedback-quick {
			position: relative;
			padding-right: 40upx;

			.iconfont {
				font-size: $font-sm;
			}
		}
		.u-border-bottom{
			border-bottom:1px solid #E5E5E5;
			text-align: center;
			margin-top: 10px;
			font-size: 0.9rem;
			color: #999;
		}
		.feedback-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.feedback-textare {
			height: 200upx;
			font-size: 34upx;
			line-height: 50upx;
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 30upx 0;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 98;
			width: 100%;
			background-color: $color-white;
			color: $font-color-base;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 15upx $spacing-base;

			.action-btn {
				font-size: $font-sm;
				margin: 0 0 0 15upx;
				padding: 0 $spacing-lg;
				text-align: center;
				height: 60upx;
				line-height: 60upx;
			}
		}

		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}

		.input-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.input-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;
		}

		.covers-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.covers-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.covers-uploader {
			padding: 22upx 20upx;
			margin: 22upx 20upx;
		}


	}

	.input-content {
		overflow: hidden;
		width: 100%;

	}

	.input-content /deep/ img {
		max-width: 100%;
	}
</style>