party-h5/pages/index/fileList.vue

<template>
	<view class="">
		<view class="navbar">
			<view class="back">
				<text class="iconfont icon-fanhui " @click="backLast()"></text>
			</view>
			<text>文件列表</text>
		</view>
		<view class="list-home">

			<view class="list-border" v-for="(item,index) in filelist" @click="fileDetail(item.id)">
				<view class="list-box">
					<view class="left">
						<view class="title">{{item.name}}</view>
						<view class="time">日期：{{item.updated_at}}</view>
					</view>
					<view class="right">
						<text>详情</text><text class="iconfont icon-right"></text>
					</view>
				</view>
			</view>
			<view class="add-box">
				<view class="add" @click="upLoad()">
					上传{{steps.name}}
				</view>
			</view>

			<view class="kong" v-show="isShow">
				<image src="../../static/images/kong.png" mode=""></image>
				<view class="text">
					暂无数据~
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import navBar from '../../components/navBar/navbar.vue';
	var app = getApp()
	export default {
		data() {
			return {
				filelist: [],
				page: 1,
				isShow: false,
				steps: {}
			}
		},
		components:{
			navBar
		},
		created() {

		},
		onShow() {
			this.filelist = []
			uni.showLoading()
			let orderList = uni.getStorageSync('steps')
			this.steps = orderList
			// let orderList = JSON.parse(options.date)
			console.log(orderList, '8888888')
			this.getList();

		},
		onReachBottom() {
			console.log('触底时间')
			uni.showLoading()
			this.page++;
			let params = {
				key: uni.getStorageSync('steps').key,
				organization_ids: uni.getStorageSync('userInfo').organization_ids,
				page: this.page
			}
			app.request('/archives', params, 'get').then(res => {
				let data = res.data.data.data
				this.filelist = this.filelist.concat(data)
				uni.hideLoading()
				if (data.length == 0) {
					uni.showToast({
						title: '到底了~',
						icon: 'none'
					})
				}
			})

		},
		methods: {
backLast:function(){
				console.log(this.url)
				uni.reLaunch({
					url:'./index'
				})
			},
			fileDetail: function(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			upLoad: function() {
				uni.navigateTo({
					url: './upload'
				})
			},
			getList: function() {
				let params = {
					key: uni.getStorageSync('steps').key,
					organization_ids: uni.getStorageSync('userInfo').organization_ids,
					page: this.page
				}
				app.request('/archives', params, 'get').then(res => {
					this.filelist = res.data.data.data
					if (this.filelist.length == 0) {
						this.isShow = true
					}else{
						this.isShow=false
					}
					uni.hideLoading()
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	
.navbar {
		font-size: 32upx;
		height: 100upx;
		line-height: 100upx;
		color: #888888;
		position: relative;
		position: fixed;
		top: 0;
		z-index: 9999999;
		width: 100%;
		 background-color: #FFFFFF;
		text-align: center;
		border-bottom: solid 2upx #EFF1F6;
	
		.back {
			height: 100upx;
			width: 100upx;
			text-align: center;
			// background-color: #007AFF;
			position: absolute;
			float: left;
			left: 0upx;
			font-size: 32upx;
		}
	}
	.list-home {
		padding:120upx 30upx 20upx 30upx;
		background-color: #FFFFFF;
		



		.list-border {
			// width: 95%;
			margin: 0 auto;
			border-radius: 10upx;
			background-color: #FFFFFF;
			margin-top: 40upx;
			box-shadow: 2px 2px 5px #c2c2c2;
			padding: 20upx 30upx;


			.list {
				height: 80;
				line-height: 80upx;
				display: flex;

				.name {
					flex: 1;
					font-size: 32upx;
				}

				.operate {
					flex: 0 0 100upx;
					font-size: 26upx;
					text-align: center;
					color: #e61916;

					.iconfont {
						font-size: 24upx;
						margin-left: 8upx;
					}
				}

				.time {
					font-size: 28upx;
					color: #ababab;
					flex: 1;

				}

				.delete {
					flex: 0 0 100upx;
					border: solid 2upx #f58080;
					font-size: 24upx;
					text-align: center;
					border-radius: 10upx;
					height: 40upx;
					color: #f59b9b;
					line-height: 40upx;
					margin-top: 20upx;

				}

			}

		}

		.add-box {
			position: fixed;
			bottom: 50upx;
			width: 100%;
			left: 0;
			text-align: center;
		}

		.add {
			height: 80upx;
			margin: 0 auto;
			padding: 5upx 0;
			width: 85%;
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 30upx;
			background-color: #e61916;
		}

		.kong {
			margin-top: 30%;
			text-align: center;

			image {
				width: 300upx;
				height: 300upx;
			}

			.text {
				font-size: 34upx;
				margin-top: 30upx;
				color: #e61916;
			}
		}

		.list-box {
			.left {
				width: 83%;
				display: inline-block;
				vertical-align: middle;

				.title {
					font-size:32upx;
					line-height:40upx;
					padding: 5upx 0;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					color: #535353;
					// max-height: 56px;
				}

				.time {
					font-size: 26upx;
					padding-top:20upx;
					color: #ababab;
				}
			}

			.right {
				width: calc(17% - 1px);
				display: inline-block;
				font-size: 28upx;
				vertical-align: middle;
				text-align: right;
				color: #e61916;
				border-left: 1px dotted #666;
				height: 300%;
				line-height: 300%;
			}
		}
	}
</style>