aiot-app/pages/common/DocumentFile.vue

<template>
		<view class="mainBox">
			<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="单据附件" @clickLeft="back">
				<!--右菜单-->
				<template slot="float">
					<view class="nav-icon-caozuo rightNav" @click="getsure"><u-button type="success" size="small" class="u-reset-button" text="确定"></u-button></view>
				</template>
			</uni-nav-bar>
			
			<view class="soBox"><u-search placeholder="请输入关键词查询" :searchIconSize="40" :show-action="false" @search="getKeyword" height="70" v-model="keywords"></u-search></view>
			
			<view class="listBox">
						
				<view class="itemBox" v-for="(item, index) in listData" :key="index" @click="cleanchecked(index)">
					  <view class="chooseBox"> <uni-icons :type="choose===index?'checkbox-filled':'circle'" size="28" :color="choose===index?'#19be6b':'#eee'"></uni-icons></view>
					  <view class="infoBox">
						  <view class="tit u-line-1">{{item.title}}</view>
						  <text class="tip">{{item.name}}  {{item.department}}</text>
					  </view>
					  <view class="stateBox">
						  <text class="tip">{{item.time}}</text>
					  </view>
				</view>
				
			</view>
			
			<view class="footBox">
			<view class="reg" style="width:100%;" @click="upfiles"><uni-icons custom-prefix="iconfont" type="icon-shixiangxinzeng" size="20" color="#fff"></uni-icons> 添加附件</view>
			</view>
			
		</view>
</template>

<script>
	import { post } from "@/utils/api.js";
	export default {
		name:"DocumentFile",
		data() {
			return {
				listData:[
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					},
					{
						title:'省财务局账单',
						name:'图片格式',
						department:'123456.jpg',
						
						time:'2021-11-06 18:00'
					}
				], //列表数据
				screenHeight:'',       //设备高度
				choose:'',             //选择id
				chooseItem:{},         //传参信息
				fileList:{},           //添加附件
				keywords:''            //搜索关键词
			};
		},
		onLoad(){
			 // 获取屏幕高度
			uni.getSystemInfo({
				success(res) {
					this.screenHeight = (res.screenHeight * (750 / res.windowWidth));
				}
		    });
		},
		//加载更多
		onReachBottom(){
			console.log("加载更多");
		},
		methods: {
		    //确定
			getsure() {
				console.log("点击确定");
				uni.$emit('updateFile', this.chooseItem);
				uni.navigateBack({
					delta: 1
				})
				
			},
			//选择信息
			cleanchecked(e){
				this.choose = e;
				this.chooseItem = this.listData[e];
			},
			//搜索
			getKeyword(){
				console.log("搜索关键词");
			},
			//添加附件
			upfiles(){
				//显示loading
				uni.showLoading({
					title: '上传中…'
				});
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: '/', 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								
							},
							success: (uploadFileRes) => {
								//隐藏loading
								uni.hideLoading();
								console.log(uploadFileRes.data);
							}
						});
					}
				});
				//监听上传进度
				uploadTask.onProgressUpdate((res) => {
					console.log('上传进度' + res.progress);
				});
			},
		
		
		}
	}
	
</script>

<style lang="scss" scoped>
	.mainBox{
		padding-bottom: 120rpx;
	}
	.soBox{
		padding:30rpx 20rpx 0 20rpx;
	}
	.itemBox{
		padding:30rpx 20rpx;
		display: flex;
		font-size: $uni-font-size-base;
		border-bottom: 1px #f2f2f2 solid;
		.chooseBox{
			margin-right: 20rpx;
		}
		.infoBox{
			.tit{max-width:100%;overflow: hidden;}
			.tip{
				color: #999;
				font-size: $uni-font-size-sm;
			}
		}
		.stateBox{
			margin-left: auto;
			text-align: right;
			.tit{
				
			}
			.tip{
				color: #999;
				font-size: $uni-font-size-sm;
			}
		}
	}
	.footBox{
		position: fixed;
		left:0px;
		bottom: 0px;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view{
			width:50%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.reg{
			background: $u-success-dark;
		}
		.uni-icons{margin-right: 8rpx !important;}
	}
</style>