smart-app/pages/documentList/documentList.vue

<template>
	<view>
		<!-- 顶部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">查看文件</block>
			<block slot="content"></block>
			<block slot="right">
				<view class="flex justify-center">
					<button @click="code()"  class="margin-top-ssm cu-btn round line-blue text-white">生成二维码</button>
				</view>
			</block>
		</cu-custom>
		<!-- 标题 -->
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text  class="text-xl text-black text-bold">{{title}} (<text class="text-blue">{{fileList.length}}</text>)</text>
			</view>
		</view>
		<view  class="cu-list menu-avatar margin-top">
			<view class="cu-item" v-for="(item,index) in fileList" :key="index" @click="navTo(item)">
				<view class="cu-avatar round lg">
					<image v-if="item.fileType==1" class="menuImageTask " src="/static/task/excel.png"></image>
					<image v-if="item.fileType==2" class="menuImageTask " src="/static/task/word.png"></image>
					<image v-if="item.fileType==3" class="menuImageTask " src="/static/task/pdf.png"></image>
					<image v-if="item.fileType==4" class="menuImageTask " src="/static/task/image.png"></image> 
				</view>
				<view class="content text-cut">
					<view class="text-black text-cut text-lg">{{item.fileName}}</view>
					<view class="flex justify-start">
						<text class="text-gray text-sm">{{item.fileSize}}</text>
					</view>		
				</view>
				<view class="action margin-right-sm"style="width: auto;" >
					<text class="text-gray cuIcon-right"></text>
				</view>
			 </view>
			 <view  class="flex justify-center text-gray margin-top-lg" >没有更多内容了~</view>
		</view>
		<!-- 二维码弹窗 -->
		<view class="cu-modal" :class="modalShow?'show':''" >
			<view class="cu-dialog bg-white" style="padding: 20rpx;position: relative;">
				<view class="cu-bar justify-end">
					<view class="content text-bold text-black">[{{codeName}}]二维码</view>
					
				</view>
				<view class="content padding">
					 <image class="codeImage" :src="codeImage"></image>
				</view>
				<view class="flex justify-center" >
					<view class="text-black">{{startTime}} 至 {{endTime}}有效</view>
				</view>
				<view class="margin-top flex justify-center" >
				 	<button style="width: 400rpx;" class="cu-btn bg-blue lg round" @click="download()" >保存到手机</button>
				</view>
			</view>
			<view  style="z-index: 3;position: absolute;bottom: 40rpx;right: 0;left: 0;"  @click="modalShow=false">
			 	<image class="menuImageTask" src="/static/index/delete-blue.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList:[],
				modalShow:false,
				title:"",
				codeName:"",
				codeImage:"/static/other/code.png",
				dataId:"",
				startTime:"",
				endTime:""
			}
		},
		methods: {
			findFile(){
				var that=this;
				that.http.request("/app/divideClient/findFile",{nodeId:that.dataId}).then((res)=>{
					that.fileList = res.datas;
				});
			},
			code(){
				var that=this;
				that.http.request("/app/divideClient/createdCode",{name:that.title,id:that.dataId,number:999,type:3}).then((res)=>{
					that.startTime = res.result;
					that.endTime = res.msg;
					that.codeImage =res.data
					that.modalShow=true
				})
				
			},
			download(){
				uni.showLoading({
					title: '下载中'
				});
				uni.saveImageToPhotosAlbum({
				    filePath: this.codeImage,
					success: function() {
					    uni.hideLoading();
						uni.showToast({
							title: '已保存到相册',
							icon: 'none',
							duration: 2200
						});
					}
				});						
			},
			navTo(data){
			    if(data.fileType=="4"){
					uni.navigateTo({
						url:"/pages/view/view?file="+data.fileUrl+"&title="+data.fileName
					})
				}else{
					uni.showLoading({
						title:"跳转中..."
					})
					uni.downloadFile({
					   url:data.fileUrl,
					   success: function (res) {
					    var filePath = res.tempFilePath;
					    uni.openDocument({
					      filePath: filePath,
					      success: function (res) {
							 uni.hideLoading()
					        console.log('打开文档成功');
					      },
					    }); 
					  }
					});   
				}	
			}
		},
		onLoad(e) {
			this.title=e.title;
			var value =e.title.split("/");
			this.codeName = value[value.length-1];
			this.dataId = e.id;
			this.findFile();
		}
	}
</script>

<style>
	
   .codeImage{
	   width: 300px;
	   height: 300px;
   }
   .text-black{
	   color:#101010;
   }
   .cu-modal.show {
   	overflow-y: auto;
   	pointer-events: auto; 
   }
   .cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after {
       border-bottom: 1px solid #E3e1e1!important;
	}
</style>