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

╰半橙微兮° 2023-10-11 23:29 11阅读 0赞

这是一个云打印项目，首页查询接口渲染设备，设备是否在线是通过redis进行判断的，当设备在线时可以通过在线的驱动软件打印用户提交的文档，自动处理无需人工干预  
![在这里插入图片描述][8097abed50f24138812b140680ad62b4.png]

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

![在这里插入图片描述][01199e3ef7d2475d99c94ee7a6e2a66e.png]  
![在这里插入图片描述][438596ef80cb404793628ca3253f708b.png]

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

<template>
    	<view>
    		<view class="container">
    		    
    		  
    		
    		<u-popup
    			:safeAreaInsetBottom="true"
    			:safeAreaInsetTop="true"
    			:mode="popupData.mode"
    			:show="show"
    			:round="popupData.round"
    			:overlay="popupData.overlay"
    			:borderRadius="popupData.borderRadius"
    			:closeable="popupData.closeable"
    			:closeOnClickOverlay="popupData.closeOnClickOverlay"
    			@close="close"
    		>
    			<view class="u-popup-slot">
    				<u-grid :border="true">
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/file_word.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">word打印</text>
    					</u-grid-item>
    					
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/PDF.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">pdf打印</text>
    					</u-grid-item>
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/EXCEL.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">excel打印</text>
    					</u-grid-item>
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/tupian.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">照片打印</text>
    					</u-grid-item>
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/other.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">本地文件</text>
    					</u-grid-item>
    					<u-grid-item
    						@click="click('1')"
    						customStyle="padding-top: 10px; padding-bottom: 10px">
    						<image src="/static/wendangwenjian.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
    						<text class="grid-text">腾讯文档</text>
    					</u-grid-item>
    					
    				</u-grid>
    			</view>
    		</u-popup>
    		
    			
    			
    		
    	
      <view class="float-icon" :style="{right: right + 'px', bottom: bottom + 'px'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
        <image src="/static/biaoge-tijiao.png" style="width: 50rpx;height: 50rpx;"></image>
      </view>
        
      <view class="card">
          
      	  <view class="top_" >
      	  	<view class="zuo_">
      	  		<image src="/static/file_word.png" mode="" style="width: 150rpx;height: 165rpx;"></image>
      	  	</view>
      		<view class="you_">
      			<view>
      				大学生训练项目创业书.docx
      			</view>
      			<view style="display: flex;flex-direction: row;">
      				
    				<u-tag text="黑白" style="width: 100rpx;margin-left: 10rpx;height: 50rpx;">
    				</u-tag>
    				<u-tag
    				    text="标签"
    				    type="warning"
    					style="width: 100rpx;margin-left: 10rpx;height: 50rpx;">
    				>
    				</u-tag>
      			</view>
      			<view>
      				<view class="dayin_set">
      					<view class="dayin_set_zuo">
      						<image src="/static/shezhitianchong.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
      						<text>打印设置</text>
      					</view>
      					<view class="dayin_set_you">
      						<image src="/static/yulan.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
      						<text>预览</text>
      					</view>
      				</view>
      			</view>
      		</view>
      	  </view>
      	  <view class="u-demo-block__content">
      	  	<u-line-progress
      	  	    height="8"
      	  	    :showText="false"
      	  	    :percentage="percentage6"
      	  	    activeColor="#3c9cff"
      	  	    inactiveColor="#f3f4f6"
      	  	>
      	  	</u-line-progress>
      	  	
      	  </view>
      	  <view class="xia_">
      	  <text>总15页</text>
      	  <text style="margin-left: 370rpx;">打印份数：2份</text>
      	  <text style="margin-left: 20rpx;color: red;">取消打印</text>
      	  </view>
    	</view>
    	
    	</view>
    	  
    	  
    	  
    	  <view class="bottom-bar">
    		  	<text>费用:¥0.4</text>
    	      
    			  <view style="display: flex;flex-direction: row;">
    			  
    				<u-button
    			  	    text="确认支付"
    			  	    size="normal"
    			  	    type="primary"
    			  		style="width: 100rpx;"
    			  	></u-button>
    				<u-button
    				    text="模拟支付完成"
    				    size="normal"
    				    type="success"
    					style="width: 100rpx;"
    				></u-button>
    			  </view>
    		 
    	    </view>
      </view>
      
      
      
      
      
      </view>
    </template>
    
    <script>
    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)
        },
      },
    }
    </script>
    
    <style>
    	/* 悬浮按钮 */
    .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;
    	    /* 其他样式 */
    	  }
    </style>

[8097abed50f24138812b140680ad62b4.png]: https://img-blog.csdnimg.cn/8097abed50f24138812b140680ad62b4.png
[01199e3ef7d2475d99c94ee7a6e2a66e.png]: https://img-blog.csdnimg.cn/01199e3ef7d2475d99c94ee7a6e2a66e.png
[438596ef80cb404793628ca3253f708b.png]: https://img-blog.csdnimg.cn/438596ef80cb404793628ca3253f708b.png