YNUtdPlatform/pages/message/detail.vue

<template>
	<view class="home">
		<view class="top-box">
			<view class="title">{{detail.noticeTitle}}</view>
			<view class="info">
				<view class="info1">{{detail.appName}}</view>
				<view class="info2">{{detail.addUser}}</view>
				<view class="info3">{{detail.addTime}}</view>
			</view>
		</view>
		<view class="content" v-html="detail.noticeContent">
		</view>
		<view class="file" v-if="detail.fileUrl">
			<view class="fj">附件</view>
			<view class="file-one" @tap="downLoad">
				<image src="../../static/images/PDF.png" v-if="detail.fileName.indexOf('pdf')>0"></image>
				<image src="../../static/images/word.png" v-else></image>
				<view>{{detail.fileName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**  
	 * base64字符串转成文件
	 * @param {String} base64Str // 允许包含前缀
	 * @param {String} fileName // 文件名称：1663061363470.xlsx
	 * @param {Object} callback  // 返回本地路径径URL，file:///xxx/doc/1663062980631.xlsx
	 */
	function base64ToFile(base64Str, fileName, callback) {

		// 去除base64前缀
		var index = base64Str.indexOf(',')
		var base64Str = base64Str.slice(index + 1, base64Str.length)

		plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
			fs.root.getFile(fileName, {
				create: true
			}, function(entry) {
				// 获得本地路径URL，file:///xxx/doc/1663062980631.xlsx
				var fullPath = entry.fullPath;

				let platform = uni.getSystemInfoSync().platform
				if (platform == 'android') {
					var Base64 = plus.android.importClass("android.util.Base64");
					var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
					try {
						var out = new FileOutputStream(fullPath);
						// 此处Base64.decode有长度限制，如果不能满足需求，可以考虑换成官方原生插件市场的【Base64转文件】
						var bytes = Base64.decode(base64Str, Base64.DEFAULT);
						out.write(bytes);
						out.close();
						// 回调  
						callback && callback(entry.toLocalURL());
					} catch (e) {
						console.log(e.message);
					}
				} else if (platform == 'ios') {
					var NSData = plus.ios.importClass('NSData');
					var nsData = new NSData();
					nsData = nsData.initWithBase64EncodedStringoptions(base64Str, 0);
					if (nsData) {
						nsData.plusCallMethod({
							writeToFile: fullPath,
							atomically: true
						});
						plus.ios.deleteObject(nsData);
					}
					// 回调  
					callback && callback(entry.toLocalURL());
				}
			})
		})
	}
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		getNoticeAnnoDetailById,
		downFileByApp,
		updateNoticeStatus
	} from "@/api/index.js"
	// import renderjs from 'renderjs'
	export default {
		data() {
			return {
				detail: {},
				dtask: null,
			}
		},
		onLoad(opton) {
			this.getNotice(opton.id)
		},
		methods: {
			getNotice(id) {
				getNoticeAnnoDetailById({
					id: id
				}).then(res => {
					this.detail = res.data
					if (this.detail.status == 0) {
						updateNoticeStatus({
							id: id
						})
					}
				})
			},
			downLoad() {
				var name = this.detail.fileName;
				downFileByApp({
					fileId: this.detail.fileUrl
				}).then(res => {
					// 保存到本地  
					var fileName = this.detail.fileName;
					base64ToFile(res.data, fileName, function(path) {
						console.log('result', path);
						plus.runtime.openFile(path); //用第三方程序打开文件
					})
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.home {
		height: 100%;
	}

	.top-box {
		border-bottom: 1px solid #efefef;
		padding: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;

		}

		.info {
			display: flex;
			font-size: 26rpx;
			color: #747474;
			line-height: 30rpx;
			padding-top: 20rpx;

			.info2 {
				border-left: 2px solid #d0d0d0;
				border-right: 2px solid #d0d0d0;
				padding: 0rpx 20rpx;
				margin: 0 20rpx;
			}
		}
	}

	.content {
		font-size: 32rpx;
		line-height: 50rpx;
		padding: 20rpx 30rpx;
		text-align: justify;
		height: calc(100% - 400rpx);
		overflow: auto;
	}

	.file {
		margin-top: 50rpx;
		border-top: 20rpx solid rgb(238, 243, 250);
		padding: 20rpx;

		.fj {
			font-size: 32rpx;
			font-weight: bold;
		}

		.file-one {
			display: flex;
			background-color: rgb(248, 248, 248);
			padding: 10rpx;
			margin-top: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>