zd_wechatApp/pages/noLogin/fileList/fileList.vue

<template>
	<view>
		<image src="https://cczdsz.cn/app/images/background.png" mode="" class="background"></image>
		<!-- <view class="" style="padding-top: 0rpx;">
			<!-- <back></back> -->
		<!-- </view> -->
		<view >
				<view>
				<u-search placeholder="请输入搜索内容" v-model="value1"  shape="square" :show-action="false" :action-style="{'font-size':'40rpx'}" @search="gethosList()"></u-search>
				</view>
			<view v-for="(item,index) in list" :key="index" >
				<view class="project-content"  @click="Downloads(item)">
					<view>
						<view class="font-forty-eight blue" style="font-size: 18px;">
							文件名称：{{item.fileName}}
						</view>
						<view class="font-forty-eight blue" style="font-size: 20px;">
							文件类型：{{item.fileSuffix}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false" width="100%" height="100%" >
			<u-image   width="100%" height="300px" :src="src"  class="makImage" ></u-image>
		</u-mask>
		<mypopup :show="show_loding" :popupText="popupText" :titleText="titleText" :cancelText="cancelText"
						:confirmText="confirmText" @close="cancel_loding" @confirm="confirm_loding">
					</mypopup>
	</view>
</template>

<script>
	import service from '@/api/index.js'
	import mypopup from '../../../components/mypopup.vue'
	export default {
		components:{
			mypopup
		},
		data() {
			return {
				show_loding: false,
									popupText: '', //对话框内容
									titleText: '',
									cancelText: '',
									confirmText: '',
				list:[],
				value:'',
				value1:'',
				nameValue:'',
				civilPower:'',
				userId:'',
				index:-1,
				ReachBottom:true,
				page:1,
				total:0,
				ranks:5,
				src:null,
				show:false,
				fileName:null,
				fileUrl:null
			}
		},
		onLoad(e) {
			this.nameValue = e.nameValue
			//this.getProjectList();
			this.getUserName();
			this.getFileList()
			uni.setNavigationBarTitle({
					title: '文件下载',
			});
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#2d95f4',
			})
		},
		onTabItemTap(e)
		{
			console.log(e)
			uni.removeStorageSync('type')
		},
		onReachBottom(){
			console.log('触底')
			this.getReachBottom()
		},
		onPullDownRefresh()
		{
			console.log('下拉刷新')
			this.getReachBottom()
		},
		methods: {
			// getReachBottom()
			// {
			// 	if (this.ReachBottom) {

			// 		this.page+=1
			// 		this.getFileList()
			// 		}else
			// 		{
			// 			this.page=1
			// 			this.ReachBottom=false
			// 		}

			// },
			//取消按钮
							cancel_loding() {
								let _this = this;
								_this.show_loding = false;
								if (!_this.isEmpty(_this.fileUrl)) {
									uni.setClipboardData({
										data: _this.fileUrl,
										success() {
											uni.showToast({
												title: '已复制' + _this.fileName + '地址成功 请在浏览器打开',
												icon: 'none'
											});
										},
										fail(e) {
											uni.showToast({
												title: '复制失败',
												icon: 'none'
											});
										}
									});

								}
							},
							//确定按钮
							confirm_loding() {
								this.show_loding = false;
								this.download(this.fileUrl, this.fileName);


							},
							isEmpty(str) {

												return (!str || 0 === str.length);

											},
			getFileList()
			{
				service.getFileList(this.ranks).then(res=>{
					console.log('getProjectType', res)

					if(null==res){
						this.$UTILS.showPrompt('暂无可供下载文件!')
						return
					}
					let list1=[]
					// this.total=res.total
					// if(res.total>this.page*10)
					// {
					// 	this.ReachBottom=true
					// }else
					// {
					// 	this.ReachBottom=false
					// }
					list1=res
					this.list.push(...list1)
				})
			},
			getUserName(){
				service.getUserName().then(res=>{
					this.userId=res.id
					this.civilPower = res.civilPower;
					this.ranks=res.ranks
				})
			},

		//签订合同下载
		Downloads(item) {
			if(item.fileSuffix=='png'||item.fileSuffix=='jpg'||item.fileSuffix=='jpeg'||item.fileSuffix=='mp4'||item.fileSuffix=='dwg'||item.fileSuffix=='dwt')
			{
				this.src=item.url
				this.show=true

			}else
			{
		this.chooseModel(item.url,item.fileName)
		}
	},
	chooseModel(url, name) {
						this.cancelText = '复制';
						this.confirmText = "下载";
						this.titleText = "温馨提示"
						this.popupText = "下载或者复制链接";
						this.show_loding = true;
						this.fileName = name;
						this.fileUrl = url; //文件名称和下载地址赋值

					},
	getDownLoadFilePath() {
						let cachePath = `${uni.env.USER_DATA_PATH}/downloads`
						let fm = uni.getFileSystemManager()
						try {
							// 访问成功则存在
							fm.accessSync(cachePath)
						} catch (error) {
							// 不存在则新建
							fm.mkdirSync(cachePath, true)
						}
						return cachePath
					},
	download(url, name) {

						let savePath = this.getDownLoadFilePath();
						//var savePath = uni.env.USER_DATA_PATH + '/savePath'
						uni.downloadFile({
							url: url,
							success: response => {
								if (response.statusCode === 200) {
									uni.getFileSystemManager().saveFile({
										tempFilePath: response.tempFilePath,
										filePath: `${savePath}/${name}`,
										success: (resData) => {
											uni.showToast({
												title: '下载成功'
											})
										},
										fail: error => {}
									})
								}
							}
						})



					},
	}
		}
</script>

<style lang="scss" scoped>
	.background {
		z-index: -1;
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.project {
		border-radius: 72rpx;
		padding: 25rpx 0;
		text-align: center;
		margin: 170rpx 55rpx 0;
	}

	.project-content {
		border: 4rpx solid #3857F3;
		margin: 40rpx 55rpx 0;
		padding: 30rpx 20rpx;
		border-radius: 48rpx;
	}
	.position{
		position: absolute;
		bottom: 100rpx;
		right: 50rpx;
		.arrow{
			width: 152rpx;
			height: 152rpx;
			border-radius: 50%;
			padding: 25rpx;
			margin-left: 20rpx;
		}
	}
	.makImage{
		  top:50%;
		  left: 50%;
		  text-align: center;
	}

</style>