rongzidanbao-ui/work/pages/file/wjdetails.vue

<template>
	<view class="wjlists">
		<view class="tabs">
			<view class="tab" :class="tabval==ite.val?'act':''" v-for="(ite,idx) in tabList" :key="idx" @click="getTab(ite.val)">{{ite.tit}}</view>
		</view>
		<view class="fjlists"  v-for="(fite,fidx) in filelist" :key='fidx'>
			<view class="flext" @click="getDown(fite.url)">
				<view class="imgl"><image :src="filico" ></image></view>
				<view class="tit">{{fite.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {uploadmore} from '@/utils/common.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				hrimg:require('@/work/static/images/hrimg.png'),
				filico:require('@/work/static/images/filico.png'),
				tabval:0,
				// tabList:[{tit:"客户上传",val:0},{tit:"平台上传",val:1}],
				tabList:[{tit:"客户上传",val:0},{tit:"申报附件",val:1},{tit:"文件出具",val:2},{tit:"其他附件",val:3}],
				filelist:[{name:"安徽嘉欣医疗用品有限公司0403委托担保申请书.pdf"},{name:"安徽嘉欣医疗用品有限公司0403委托担保申请书.pdf"},]
			}
		},
		methods:{
			checkPermi, checkRole,
			getTab(val){
				this.tabval=val
			},
			getDown(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=baseUrl+e;
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
			},
		}
	}
</script>
<style>
	page{background:#ffffff;}
</style>
<style lang="scss" scoped>
.tabs{padding: 0 6rpx 0 36rpx;display: flex;flex-wrap: nowrap;overflow: auto;flex: 0 0 auto;border-bottom: 2rpx solid #E6E6E6;position: fixed;left: 0;top: 0;right: 0;z-index: 2;
	.tab{font-weight: 500;font-size: 26rpx;color: #666666;height: 116rpx;display: flex;align-items: center;margin-right:180rpx;flex: 0 0 auto;position: relative;
		&.act{color: #00A9F0;font-weight: bold;
			&::after{width: 100%;background: #00A9F0;position: absolute;left: 0;bottom: 0;
border-radius: 2rpx;height: 4rpx;content: '';}
		}
	}
}
.wjlists{
	padding: 120rpx 0 40rpx;
	// 附件
	.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-top: 60rpx;padding: 0 36rpx;
		&:last-child{margin-bottom: 0;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
			image{width: 26rpx;height: 24rpx;}
		}
		.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
			image{width: 24rpx;height: 24rpx;}
		}
		.txta{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;padding: 0 6rpx;}
	}
}
</style>