uni-zhihuikuangshan/pages/index/news/news.vue

<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<view v-if="content" class="inner">
			<mp-html :content="content" />
		</view>

		<view class="box" v-if="file.length != 0">
			<view class="box_title">附件</view>
			<view class="file">
				<view class="item" v-for="(item,index) in file" :key="index" @click="yulan(item.type,item.path)">
					<view class="icon" v-if="item.type == 'png' || item.type == 'jpg'">
						<svg t="1630550850655" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3070" width="32" height="32">
							<path
								d="M651.065224 0.108424H147.708988C113.579671 0.108424 87.985694 25.708424 87.985694 59.831718v904.336564c0 34.129318 25.6 59.723294 59.723294 59.723294h725.172706c34.129318 0 59.723294-25.6 59.723294-59.723294V281.648188L651.065224 0.108424z"
								fill="#77D0FF" p-id="3071"></path>
							<path
								d="M222.418824 489.712941h89.148235c52.001129 0 78.004706 21.985882 78.004706 65.957647 0 44.375341-26.202353 66.56-78.607059 66.56h-53.308235V704.752941h-35.237647V489.712941z m35.237647 30.117647v72.282353h51.2c15.4624 0 26.907106-2.812988 34.334117-8.432941 7.228235-5.824753 10.842353-15.161224 10.842353-28.009412 0-12.649412-3.716518-21.787106-11.143529-27.407059-7.029459-5.619953-18.371765-8.432941-34.032941-8.432941h-51.2z m162.032941-30.117647h35.237647l106.315294 155.105883h1.204706V489.712941h35.538823V704.752941h-34.334117l-107.52-157.214117h-1.204706V704.752941h-35.237647V489.712941z m313.825882-4.21647c27.708235 0 49.495341 6.125929 65.355294 18.371764 15.4624 12.047059 25.100047 30.015247 28.912941 53.910589h-35.538823c-3.011765-13.655341-9.438871-23.991718-19.275294-31.021177-9.836424-6.824659-22.991812-10.24-39.454118-10.24-20.281224 0-36.243576 6.824659-47.887059 20.48-12.848188 14.257694-19.275294 34.635294-19.275294 61.138824 0 25.298824 5.722353 44.772894 17.167059 58.428235 12.450635 14.456471 31.725929 21.684706 57.825882 21.684706 10.24 0 19.877647-1.204706 28.912942-3.614118a94.0032 94.0032 0 0 0 23.190588-9.938823V620.423529h-56.922353v-30.117647h92.16v90.955294c-11.041129 8.836518-24.094118 15.661176-39.152941 20.48-15.661176 4.818824-33.027012 7.228235-52.10353 7.228236-34.135341 0-60.735247-10.842353-79.811764-32.527059-17.667012-20.076424-26.503529-46.1824-26.50353-78.305882 0-32.328282 8.836518-58.831812 26.50353-79.510589 18.474165-22.088282 43.772988-33.129412 75.89647-33.129411z"
								fill="#FFFFFF" p-id="3072"></path>
							<path
								d="M651.065224 221.930918c0 34.123294 25.6 59.717271 59.723294 59.71727h221.81647L651.065224 0.108424v221.822494z"
								fill="#A3DEFD" p-id="3073"></path>
						</svg>
					</view>
					<view class="icon" v-else>
						<svg t="1630550379380" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2191" data-spm-anchor-id="a313x.7781069.0.i1"
							width="32" height="32">
							<path
								d="M901.983331 984.172968c9.771228-9.771228 14.594999-21.892499 14.595-34.01377V301.671216L641.004952 26.097838H154.669888c-12.121271 0-25.108346 4.823771-34.01377 14.594999-7.668559 8.65805-13.110762 19.047711-14.347627 29.684745v884.729073c1.113178 10.637033 5.813262 21.397753 14.347627 29.313686 9.771228 9.771228 21.892499 14.594999 34.01377 14.594999h713.299674c12.121271-0.247373 24.98466-5.071144 34.013769-14.842372z m-259.617828-217.688127h-63.203768l-70.748642-273.718082h-1.978983l-71.243386 273.718082h-63.698515l-104.515038-363.885493h67.285421l68.398599 276.686556h1.978983l71.861819-276.686556H537.974151l71.86182 276.686556h1.978982l68.274913-276.686556h67.285421l-105.009784 363.885493z m0 0"
								fill="#6CCBFF" p-id="2192" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path>
							<path
								d="M916.578331 301.671216H689.613721c-12.121271 0-25.108346-4.823771-34.013769-14.594999-9.771228-8.905423-14.594999-21.892499-14.595-34.01377V26.097838l275.573379 275.573378z m0 0"
								fill="#C4EAFF" p-id="2193"></path>
						</svg>
					</view>
					<view class="name">{{item.old_name}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'

	export default {
		data() {
			return {
				mine_code: "",
				title: "",
				content: "",

				file: [],
				base_url: ""

			};
		},
		onLoad(option) {
			this.mine_code = option.mine_code

			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)

			this.get_detail(option.id)
		},
		methods: {
			// 文章详情
			get_detail(id) {
				uni.request({
					method: "GET",
					header: {
						Authorization: this.token
					},
					url: this.base_url + "/article/detail",
					data: {
						id: id,
					},
					success: (res) => {
						// console.log(res)
						// console.log(res.data.data.content)

						this.content = res.data.data.content
						this.file = res.data.data.files

						uni.setNavigationBarTitle({
							title: res.data.data.sort_info.title
						})

						this.title = res.data.data.title
					}

				})
			},


			yulan(type, path) {
				let urls = []
				urls.push(path)
				if (type == 'png' || type == 'jpg') {
					uni.previewImage({
						urls: urls,
					});
				} else {
					uni.navigateTo({
						url: "../open-file/open-file?href=" + path,
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.title {
		margin: 0 auto;
		font-size: 48rpx;
		line-height: 90rpx;
		font-weight: 500;
		width: 700rpx;
		text-align: center;
	}

	.content {
		.inner {
			margin-bottom: 50rpx;

			box-sizing: border-box;
			padding: 25rpx;

			p {
				text-indent: 2rem !important;
			}
		}
	}

	.box {
		border: 1rpx solid #f0f0f0;
		margin: 0 auto;
		width: 700rpx;
		min-height: 200rpx;

		position: relative;

		.box_title {
			position: absolute;
			top: -20rpx;
			left: 20rpx;

			background-color: #fff;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #666;
		}

		.file {
			padding: 40rpx 10rpx 0rpx 10rpx;

			overflow: hidden;

			.item {
				float: left;
				text-align: center;

				width: 220rpx;
				height: 120rpx;

				margin-bottom: 20rpx;

				.icon {}

				.name {
					font-size: 26rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>