【uniapp小程序】打印列表UI模板

这是一个云打印项目，首页查询接口渲染设备，设备是否在线是通过redis进行判断的，当设备在线时可以通过在线的驱动软件打印用户提交的文档，自动处理无需人工干预

今天主要是分享一下，文件列表界面，由于UI太丑于是我换了下，如图所示：

框架为uView2.0，代码如下：

	
		
		    
		  
		
		
			
				
					
						
						word打印
					
					
					
						
						pdf打印
					
					
						
						excel打印
					
					
						
						照片打印
					
					
						
						本地文件
					
					
						
						腾讯文档
					
					
				
			
		
		
			
			
		
	
  
    
  
    
  
      
  	  
  	  	
  	  		
  	  	
  		
  			
  				大学生训练项目创业书.docx
  			
  			
  				
				
				
				
				>
				
  			
  			
  				
  					
  						
  						打印设置
  					
  					
  						
  						预览
  					
  				
  			
  		
  	  
  	  
  	  	
  	  	
  	  	
  	  
  	  
  	  总15页
  	  打印份数：2份
  	  取消打印
  	  
	
	
	
	  
	  
	  
	  
		  	费用:¥0.4
	      
			  
			  
				
				
			  
		 
	    
  
  
  
  
  
  
  



export default {
  data() {
    return {
		percentage6: 50,
		// 悬浮按钮
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
      right: 20,
      bottom: 100,
	  // 悬浮按钮
	  
	  // 遮罩层
	  show: false,
	  popupData: {
	  	overlay: true,
	  	mode: 'center',
	  	round: 10,
		borderRadius: '',
		closeable: true,
	  	closeOnClickOverlay: true
	  },
	   // 遮罩层
    }
  },
  methods: {
	  click(name) {
	  	uni.showToast({
	  		title:name
	  	})
	  	this.$refs.uToast.success(`点击了第${name}个`)
	  },
	  close() {
	  	this.show = false
	  	// console.log('close');
	  },
    touchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    },
    touchMove(e) {
      this.moveX = e.touches[0].clientX - this.startX
      this.moveY = e.touches[0].clientY - this.startY
      this.right -= this.moveX
      this.bottom -= this.moveY
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    },
    touchEnd(e) {
      // do something
	  // this.$token.toast("1",2000);
	uni.$u.sleep().then(() => {
		this.show = !this.show
	})
	
	this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
    },
  },
}



	/* 悬浮按钮 */
.float-icon {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #83deff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
/* 悬浮按钮 */



/* 卡片部分 */
.card {
  width: 650rpx;
  height: 250rpx;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: auto;
   margin-top: 20rpx;
}
.top_{
	width: 650rpx;
	height: 180rpx;
	display: flex;
	flex-direction: row;
	/* background-color: red; */
}

.xia_{
	margin-top: 20rpx;
	width: 650rpx;
	height: 40rpx;
	display: flex;
	flex-direction: row;
	/* background-color: yellow; */
	font-size: 0.65em;
	
}

.zuo_{
	width: 180rpx;
	height: 175rpx;
	display: flex;
	flex-direction: column;
	/* background-color: yellowgreen; */
	
	
}
.you_{
	width: 468rpx;
	height: 175rpx;
	display: flex;
	flex-direction: column;
	/* background-color: bisque; */
}

.dayin_set{
	height: 70rpx;
	/* background-color: red; */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 469rpx;
}
.dayin_set_zuo{
	width: 200rpx;
	height: 50rpx;
	color: white;
	border-radius: 15rpx;
	justify-content: center;
	background-color: #52B1E2;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.dayin_set_you{
width: 150rpx;
height: 50rpx;
justify-content: center;
color: white;
border-radius: 15rpx;
background-color: #52B1E2;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 110rpx;
}
/* 卡片部分 */



/* 遮罩层 */
.u-popup-slot {
		width: 700rpx;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	
	
	/* 九宫格 */
	.swiper {
		height: 220px;
	}
	
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	
	
	
	/* 板块 */
	 .container {
	    display: flex;
	    flex-direction: column;
	    height: 100%;
	  }
	  .bottom-bar {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 65px;
	    background-color: #F3F3F6;
	    /* 其他样式 */
	  }