zhgdyunapp/pages/personLocation/exam/rules/rules.vue

<template>
	<view class="main-content">
		<headers :showBack="false" :themeType="true">
			<view class="headerName">
				规章
			</view>
		</headers>
		<view class="rules-box3">
			<view v-for="item in typeList2" :key="item.id" :class="{'rules-box3_active':item.id == type2}"
				@click="changeType(item.id)">{{item.text}}</view>
		</view>
		<view class="rules">
			<view class="rules-box" v-for="(item,index) in listData" :key="index">
				<image :src="item.logoUrl" v-if="fileTypeCondition(item.logoUrl)"></image>
				<image src="../../../../static/images.png" v-else></image>
				<view>
					<view class="rules-text1">
						<text>{{item.name}}</text>
						<text>{{item.createTime}}</text>
					</view>
					<view class="rules-text2" @click="downLoadFile(item)">
						<text>下载文件</text>
					</view>
				</view>
			</view>
		</view>
		<footersExam :activeTab="activeIndex"></footersExam>
	</view>
</template>

<script>
	import footersExam from '@/components/footers/footersExam.vue'
	export default {
		components: {
			footersExam
		},
		data() {
			return {
				activeIndex: 1,
				type2: 1,
				typeList2: [{
					id: 1,
					text: "规章制度",
				}, {
					id: 2,
					text: "安全手册",
				}],
				userInfo: {},
				listData: []
			}
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo"))
			this.getRulesDataFn();
		},
		// onPullDownRefresh() {
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh()
		// 	}, 1000)
		// 	console.log("下拉刷新");
		// },
		onReachBottom() {
			// console.log("============================")
			uni.showLoading({
				title: '加载中'
			})
			console.log("加载中");
			uni.hideLoading() //关闭加载中
		},
		methods: {
			fileTypeCondition(file) {
				// 获取文件后缀名
				const extension = file.substring(file.lastIndexOf('.') + 1).toLowerCase();

				// 常见的图片文件后缀名
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];

				// 检查文件后缀名是否在图片后缀名数组中
				return imageExtensions.includes(extension);
			},
			getRulesDataFn() {
				var that = this
				let requestData = {
					projectSn: this.userInfo.projectSn,
					isEnable: 1
				}
				this.sendRequest({
					url: "exam/regulation/list",
					data: requestData,
					method: 'post',
					success(res) {
						if (res.result) {
							that.listData = res.result;
							that.listData.map(item => {
								item.logoUrl = JSON.parse(item.fileUrl)[0].url
							})
						}
					}
				})
			},
			getSafeDataFn() {
				var that = this
				let requestData = {
					projectSn: this.userInfo.projectSn,
					isEnable: 1
				}
				this.sendRequest({
					url: "exam/safetyManual/list",
					data: requestData,
					method: 'post',
					success(res) {
						if (res.result) {
							that.listData = res.result;
							that.listData.map(item => {
								item.logoUrl = JSON.parse(item.fileUrl)[0].url
							})
						}
					}
				})
			},
			changeType(id) {
				this.type2 = id
				if (this.type2 == 1) {
					this.getRulesDataFn();
				} else if (this.type2 == 2) {
					this.getSafeDataFn();
				}
			},
			downLoadFile(val) {
				// let url = this.url_config + 'image/' + val.logoUrl
				let url = val.logoUrl
				console.log(val)
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
				// if(val.iconType == "image"){
				// 	uni.previewImage({
				// 		urls: [url]
				// 	})
				// } else{
				// 	uni.downloadFile({
				// 	  url: url,
				// 	  success: function (res) {
				// 		var filePath = res.tempFilePath;
				// 		uni.openDocument({
				// 		  filePath: filePath,
				// 		  success: function (res) {
				// 			console.log('打开文档成功');
				// 		  }
				// 		});
				// 	  }
				// 	});
				// }
				// //#ifdef H5
				// 	uni.showToast({
				// 	    title: '暂不支持预览！',
				// 		icon: "none",
				// 		duration: 2000
				// 	});
				// 	return;
				// //#endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-content{
		display: flex;
		flex-direction: column;
	}
	.rules-box3 {
		color: #A2A4AF;
		font-size: 26.92rpx;
		display: flex;
		padding-top: 17rpx;
	}

	.rules-box3>view {
		width: 376.8rpx;
		height: 67rpx;
		background-color: #F7F8FA;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rules-box3_active {
		background-color: #2b8df3 !important;
		color: white;
	}

	.rules {
		box-shadow: 4rpx 4rpx 8rpx 2rpx rgba(81, 129, 246, 0.12);
		height: calc(100vh - 270rpx);
		padding-bottom: 60rpx;
		overflow-y: scroll;
	}

	.rules-box {
		display: flex;
		padding: 13.46rpx 28.85rpx 17.31rpx 23.08rpx;
		border-top: 2rpx solid #D8DBE8;
	}

	.rules-box image {
		width: 61.15rpx;
		height: 70.77rpx;
	}

	.rules-box>view {
		display: flex;
		justify-content: space-between;
		flex: 1;
	}

	.rules-text1 {
		display: flex;
		flex-direction: column;
		margin-left: 13.46rpx;
	}

	.rules-text1>text {
		font-size: 25rpx;
		line-height: 40rpx;
	}

	.rules-text2 {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #5181F6;
		font-size: 19.23rpx;
		white-space: nowrap;
	}
</style>