FE_CRM/team/article/article.vue

<template>
	<view>
		<image class="banner" :src="form.bannerImg" mode="widthFix"></image>
		<view class="wrap">
			<view class="title">{{ form.title }}</view>
			<view class="metas">
				<template v-if="isInfo">
					<view class="meta">{{ form.source }}</view>
					<view class="meta">{{ form.releaseTime }}</view>
				</template>
				<view v-else class="meta">
					<uni-icons class="icon" type="eye" size="22" color="#007FFF"></uni-icons>
					{{ form.totalBrowsing }}人学过
				</view>
				<view v-if="form.labelNameList" class="labels">
					<view v-for="(label, j) in form.labelNameList" :key="j" class="label">{{ label }}</view>
				</view>
			</view>
			
			<view class="text" v-html="form.mainBody"></view>
			
			<view v-if="form.fileList" class="files">
				<view v-for="(file, i) in form.fileList" :key="i" class="item" @click="download(file)">
					<view class="file">{{ file.fileName }}</view>
					<view class="download">下载</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findById } from '@/apis/modules/article.js'
	export default {
		data() {
			return {
				id: '',
				isInfo: 0, // 是否从资讯进来（学习详情跟资讯详情公用这个页面）
				form: {
					totalBrowsing: ''
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.isInfo = options.info
			this.getInfo()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				findById(this.id).then(({ message }) => {
					this.form = message
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 下载附件
			download(item) {
				this.$util.to(`../send/send?url=${item.filePath}&copyWriting=${item.fileName}`)
				// uni.showLoading({
				// 	title: '正在下载...',
				// 	mask: true
				// })
				// const url = item.filePath
				// const that = this
				// // 下载文件资源到本地
				// uni.downloadFile({
				// 	url,
				// 	success: function(res) {
				// 		console.log(444, res)
				// 		uni.saveFile({
				// 			tempFilePath: res.tempFilePath,
				// 			success: function(res) {
				// 				console.log(555, res)
				// 				uni.hideLoading()
				// 				that.$util.sucMsg('文件已保存！')
				// 			}
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		uni.hideLoading()
				// 	}
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	background-color: #fff;
}
.banner {
	width: 100%;
}
.title {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
}
.metas {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	.labels {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 15rpx;
	}
	.label {
		padding: 2px 6px;
		margin: 0 20rpx 15rpx 0;
		font-size: 24rpx;
		color: #fff;
		background-color: #ccc;
		border-radius: 4px;
	}
	.meta {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		font-size: 24rpx;
		color: #ccc;
	}
	.icon {
		margin-right: 8rpx;
	}
}
.text {
	font-size: 28rpx;
	line-height: 1.6;
}
.files {
	margin-top: 20rpx;
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.file {
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #5a5a5a;
	}
	.download {
		font-size: 26rpx;
		color: #007EFF;
	}
}
</style>