college/pages/mobile/detail.vue

<template>
	<view class="content">

		<!-- 导航 -->
		<view class="nav">
			<view class="leftView" @click="back">
				<image src="../../static/mobile/backBtn.png" mode=""
					style="width: 22rpx; height: 40rpx; padding-left: 24rpx;"></image>
			</view>
			<view class="navTitle">详情</view>
			<view class="rightView">

			</view>
		</view>

		<!-- content -->

		<view class="top">{{detailData.title}}</view>
		<view class="time">{{detailData.createTime}}</view>




		<!-- <rich-text :nodes="couContent"></rich-text> -->

		<u-parse :content="couContent" @preview="preview" @navigate="navigate" />

		<!-- <view class="html" v-html="detailData.contents"></view> -->

		<!-- <video src="https://v.qq.com/x/cover/mzc00200owkcck4/x3325xq11bb.html"></video> -->

		<!-- item -->

		<view class="itemBg" v-if="itemArr.length != 0">
			<view v-for="(item,index) in itemArr" :key="index" class="twoItem"
				:class="{grayLine:index < itemArr.length-1}">
				<view class="itemLeftView">
					<image src="../../static/mobile/icon_fujian.png" mode="" class="img2"></image>
					<view class="title">{{item.fileName}}</view>
				</view>


				<view class="title2">
					<a class="table-btn" :href='item.fileUrl' target='_blank'>下载</a>
					<!-- <a class="table-btn" href='http://phone.66km.cn:8088/marketing/training/F766372514254DD6BB45D461FD67A725.pdf' download='上海接口调用规则' target='_blank'>下载</a> -->
				</view>

			</view>
		</view>

		<view style="display: flex;">
			<view class="category">{{detailData.name}}</view>
		</view>


		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>

	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'

	export default {
		components: {
			uParse
		},

		data() {
			return {
				id: '',
				detailData: {},
				couContent: '',
				itemArr: [],
			}
		},
		onLoad(opt) {
			console.log('opt', opt);
			this.id = opt.id

			this.getDetailData()
			// uni.setNavigationBarTitle({
			// 	title: this.topName
			// })
		},
		methods: {
			gotoTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			// 下载文件

			downLoad(urlStr) {
				console.log('urls', urlStr);
				// uni.showLoading({
				// 	title:'下载中'
				// })

				// let dload = document.createElement("a");

				//   dload.download = '';// 设置下载的文件名，默认是'下载'

				//   dload.href = urlStr;

				//   document.body.appendChild(dload);

				//   dload.click();

				//   dload.remove(); // 下载之后把创建的元素删除


				// window.open(urlStr)

				// window.location.href='urlStr'

				/*
				let url = encodeURI(urlStr); //注意中文文件名的网络地址需要encodeURI
				uni.downloadFile({
					url: url,
					success: (res) => {

						if (res.statusCode === 200) {
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (resData) => {
									uni.openDocument({
										filePath: resData.savedFilePath,
										success: (res) => console.log('成功打开文档')
									});
									console.log('bbb', res);
								},
								fail() {
									console.log('打开失败')
								}
							});
							console.log('aaa', res);
						}
					},
					fail() {
						console.log('下载失败')
					}


				});
			*/

			},
			getDetailData() {
				uni.showLoading({
					title: '加载中'
				})

				let url = '/trainingOpenApi/articleDetail',
					params = {
						id: this.id,
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data


					// 处理 undefined和null转为空白字符串

					for (const key in data) {
						data[key] = this.$praseStrEmpty(data[key])
					}

					this.detailData = data

					this.couContent = this.detailData.contents

					if (this.detailData.contents) {
						var replaceStr = "application/x-shockwave-flash"
						this.detailData.contents = this.detailData.contents.replace(new RegExp(replaceStr, 'gm'),
							'video/webm') //(/''/g,"video/webm")
						this.detailData.contents = this.detailData.contents.replace(/<embed([\s\w"-=\/\.:;]+)/ig,
							'<embed style="width: 100%;height:500px;" $1');

						var replaceStr = "embed"
						this.detailData.contents = this.detailData.contents.replace(new RegExp(replaceStr, 'gm'),
							'iframe') //(/''/g,"video/webm")
					}

					if (this.detailData.contents) {
						this.detailData.contents = this.detailData.contents.replace(
								/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
							.replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
					}

					this.itemArr = this.detailData.fileList

				})
			},

			back() {
				uni.navigateBack({

				})
			},




			// // 下拉刷新 上拉加载更多
			// onPullDownRefresh() {
			// 	this.page = 1;
			// 	this.getItemData()

			// 	this.getDetailData()
			// 	setTimeout(function() {
			// 		uni.stopPullDownRefresh();
			// 	}, 1000);
			// },
			// onReachBottom() {
			// 	this.page++;

			// 	this.getItemData()

			// }
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-top: 88rpx;
		padding-bottom: 10rpx;
		margin: 0 24rpx;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		border-bottom: #eeeeee 2rpx solid;
	}

	.navTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #3c3c3c;
		text-align: center;
	}

	.leftView {
		width: 30%;
	}


	.rightView {
		width: 30%;
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
	}

	.rightImg {
		width: 40rpx;
		height: 40rpx;

	}



	.top {
		background-color: #FFFFFF;

		padding-top: 40rpx;

		font-weight: bold;
		color: #3c3c3c;
		font-size: 32rpx;
		text-align: left;

	}

	.time {

		font-size: 24rpx;
		color: #999999;


		padding-top: 15rpx;
		padding-bottom: 30rpx;
		border-bottom: #EEEEEE 2rpx solid;
	}


	.html {
		padding-top: 18px;
	}

	.html img {
		width: 100% !important;
	}

	.itemBg {

		background-color: #FFFFFF;
		border-radius: 10rpx;
		border: #eeeeee 1rpx solid;
	}

	.twoItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		margin: 0 15rpx;
		padding-top: 24rpx;
		padding-bottom: 30rpx;

	}

	.grayLine {
		border-bottom: #EEEEEE 1rpx solid;
	}

	.itemLeftView {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.title {
		font-size: 28rpx;
		color: #333333;
		width: 90%;
		word-break: break-all;
	}

	.title2 {

		background-color: #3F90F7;
		border-radius: 6rpx;
		width: 90rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		margin-right: 15rpx;

	}

	.table-btn {
		color: #FFFFFF;
		font-size: 26rpx;
		text-decoration: none;
	}


	.img2 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
	}

	.category {
		background: rgba(63, 144, 247, 0.1);
		font-size: 22rpx;
		color: #3F90F7;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx;
		padding: 3rpx 14rpx;
		min-width: 0;
		max-width: 138rpx;
		margin-bottom: 10rpx;
		text-align: center;
		margin: 30rpx 0;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gotopImg {
		width: 100rpx;
		height: 100rpx;
	}

	.gotop {
		position: fixed;
		right: 15rpx;
		bottom: 100rpx;
		cursor: pointer;
		z-index: 999;
	}
</style>