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

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

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

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

在这里插入图片描述
在这里插入图片描述

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

  1. <template>
  2.     <view>
  3.         <view class="container">
  4.             <!-- 页面内容 -->
  6.         <!-- 遮罩层 -->
  7.         <u-popup
  8.             :safeAreaInsetBottom="true"
  9.             :safeAreaInsetTop="true"
  10.             :mode="popupData.mode"
  11.             :show="show"
  12.             :round="popupData.round"
  13.             :overlay="popupData.overlay"
  14.             :borderRadius="popupData.borderRadius"
  15.             :closeable="popupData.closeable"
  16.             :closeOnClickOverlay="popupData.closeOnClickOverlay"
  17.             @close="close"
  18.         >
  19.             <view class="u-popup-slot">
  20.                 <u-grid :border="true">
  21.                     <u-grid-item
  22.                         @click="click('1')"
  23.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  24.                         <image src="/static/file_word.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  25.                         <text class="grid-text">word打印</text>
  26.                     </u-grid-item>
  28.                     <u-grid-item
  29.                         @click="click('1')"
  30.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  31.                         <image src="/static/PDF.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  32.                         <text class="grid-text">pdf打印</text>
  33.                     </u-grid-item>
  34.                     <u-grid-item
  35.                         @click="click('1')"
  36.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  37.                         <image src="/static/EXCEL.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  38.                         <text class="grid-text">excel打印</text>
  39.                     </u-grid-item>
  40.                     <u-grid-item
  41.                         @click="click('1')"
  42.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  43.                         <image src="/static/tupian.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  44.                         <text class="grid-text">照片打印</text>
  45.                     </u-grid-item>
  46.                     <u-grid-item
  47.                         @click="click('1')"
  48.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  49.                         <image src="/static/other.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  50.                         <text class="grid-text">本地文件</text>
  51.                     </u-grid-item>
  52.                     <u-grid-item
  53.                         @click="click('1')"
  54.                         customStyle="padding-top: 10px; padding-bottom: 10px">
  55.                         <image src="/static/wendangwenjian.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  56.                         <text class="grid-text">腾讯文档</text>
  57.                     </u-grid-item>
  59.                 </u-grid>
  60.             </view>
  61.         </u-popup>
  62.         <!-- 遮罩层 -->
  66.     <!-- 悬浮图标 -->
  67.   <view class="float-icon" :style="{right: right + 'px', bottom: bottom + 'px'}" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
  68.     <image src="/static/biaoge-tijiao.png" style="width: 50rpx;height: 50rpx;"></image>
  69.   </view>
  70.     <!-- 悬浮图标 -->
  71.   <view class="card">
  72.       <!-- 卡片内容 -->
  73.         <view class="top_" >
  74.             <view class="zuo_">
  75.                 <image src="/static/file_word.png" mode="" style="width: 150rpx;height: 165rpx;"></image>
  76.             </view>
  77.           <view class="you_">
  78.               <view>
  79.                   大学生训练项目创业书.docx
  80.               </view>
  81.               <view style="display: flex;flex-direction: row;">
  82.                   <!--  -->
  83.                 <u-tag text="黑白" style="width: 100rpx;margin-left: 10rpx;height: 50rpx;">
  84.                 </u-tag>
  85.                 <u-tag
  86.                     text="标签"
  87.                     type="warning"
  88.                     style="width: 100rpx;margin-left: 10rpx;height: 50rpx;">
  89.                 >
  90.                 </u-tag>
  91.               </view>
  92.               <view>
  93.                   <view class="dayin_set">
  94.                       <view class="dayin_set_zuo">
  95.                           <image src="/static/shezhitianchong.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
  96.                           <text>打印设置</text>
  97.                       </view>
  98.                       <view class="dayin_set_you">
  99.                           <image src="/static/yulan.png" mode="" style="width: 45rpx;height: 45rpx;"></image>
  100.                           <text>预览</text>
  101.                       </view>
  102.                   </view>
  103.               </view>
  104.           </view>
  105.         </view>
  106.         <view class="u-demo-block__content">
  107.             <u-line-progress
  108.                 height="8"
  109.                 :showText="false"
  110.                 :percentage="percentage6"
  111.                 activeColor="#3c9cff"
  112.                 inactiveColor="#f3f4f6"
  113.             >
  114.             </u-line-progress>
  116.         </view>
  117.         <view class="xia_">
  118.         <text>总15页</text>
  119.         <text style="margin-left: 370rpx;">打印份数：2份</text>
  120.         <text style="margin-left: 20rpx;color: red;">取消打印</text>
  121.         </view>
  122.     </view>
  124.     </view>
  125.       <!-- 页面内容 -->
  128.       <view class="bottom-bar">
  129.               <text>费用:¥0.4</text>
  130.           <!-- 底部视图 -->
  131.               <view style="display: flex;flex-direction: row;">
  133.                 <u-button
  134.                       text="确认支付"
  135.                       size="normal"
  136.                       type="primary"
  137.                       style="width: 100rpx;"
  138.                   ></u-button>
  139.                 <u-button
  140.                     text="模拟支付完成"
  141.                     size="normal"
  142.                     type="success"
  143.                     style="width: 100rpx;"
  144.                 ></u-button>
  145.               </view>
  147.         </view>
  148.   </view>
  154.   </view>
  155. </template>
  157. <script>
  158. export default {
  160.   data() {
  162.     return {
  164.         percentage6: 50,
  165.         // 悬浮按钮
  166.       startX: 0,
  167.       startY: 0,
  168.       moveX: 0,
  169.       moveY: 0,
  170.       right: 20,
  171.       bottom: 100,
  172.       // 悬浮按钮
  174.       // 遮罩层
  175.       show: false,
  176.       popupData: {
  178.           overlay: true,
  179.           mode: 'center',
  180.           round: 10,
  181.         borderRadius: '',
  182.         closeable: true,
  183.           closeOnClickOverlay: true
  184.       },
  185.        // 遮罩层
  186.     }
  187.   },
  188.   methods: {
  190.       click(name) {
  192.           uni.showToast({
  194.               title:name
  195.           })
  196.           this.$refs.uToast.success(`点击了第${
  197.     name}个`)
  198.       },
  199.       close() {
  201.           this.show = false
  202.           // console.log('close');
  203.       },
  204.     touchStart(e) {
  206.       this.startX = e.touches[0].clientX
  207.       this.startY = e.touches[0].clientY
  208.     },
  209.     touchMove(e) {
  211.       this.moveX = e.touches[0].clientX - this.startX
  212.       this.moveY = e.touches[0].clientY - this.startY
  213.       this.right -= this.moveX
  214.       this.bottom -= this.moveY
  215.       this.startX = e.touches[0].clientX
  216.       this.startY = e.touches[0].clientY
  217.     },
  218.     touchEnd(e) {
  220.       // do something
  221.       // this.$token.toast("1",2000);
  222.     uni.$u.sleep().then(() => {
  224.         this.show = !this.show
  225.     })
  227.     this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
  228.     },
  229.   },
  230. }
  231. </script>
  233. <style>
  234.     /* 悬浮按钮 */
  235. .float-icon {
  237.   position: fixed;
  238.   width: 50px;
  239.   height: 50px;
  240.   border-radius: 25px;
  241.   background-color: #83deff;
  242.   display: flex;
  243.   justify-content: center;
  244.   align-items: center;
  245.   z-index: 999;
  246. }
  247. /* 悬浮按钮 */
  251. /* 卡片部分 */
  252. .card {
  254.   width: 650rpx;
  255.   height: 250rpx;
  256.   background-color: #fff;
  257.   border-radius: 5px;
  258.   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  259.   padding: 16px;
  260.   margin: auto;
  261.    margin-top: 20rpx;
  262. }
  263. .top_{
  265.     width: 650rpx;
  266.     height: 180rpx;
  267.     display: flex;
  268.     flex-direction: row;
  269.     /* background-color: red; */
  270. }
  272. .xia_{
  274.     margin-top: 20rpx;
  275.     width: 650rpx;
  276.     height: 40rpx;
  277.     display: flex;
  278.     flex-direction: row;
  279.     /* background-color: yellow; */
  280.     font-size: 0.65em;
  282. }
  284. .zuo_{
  286.     width: 180rpx;
  287.     height: 175rpx;
  288.     display: flex;
  289.     flex-direction: column;
  290.     /* background-color: yellowgreen; */
  293. }
  294. .you_{
  296.     width: 468rpx;
  297.     height: 175rpx;
  298.     display: flex;
  299.     flex-direction: column;
  300.     /* background-color: bisque; */
  301. }
  303. .dayin_set{
  305.     height: 70rpx;
  306.     /* background-color: red; */
  307.     display: flex;
  308.     flex-direction: row;
  309.     align-items: center;
  310.     justify-content: center;
  311.     width: 469rpx;
  312. }
  313. .dayin_set_zuo{
  315.     width: 200rpx;
  316.     height: 50rpx;
  317.     color: white;
  318.     border-radius: 15rpx;
  319.     justify-content: center;
  320.     background-color: #52B1E2;
  321.     display: flex;
  322.     flex-direction: row;
  323.     align-items: center;
  324. }
  325. .dayin_set_you{
  327. width: 150rpx;
  328. height: 50rpx;
  329. justify-content: center;
  330. color: white;
  331. border-radius: 15rpx;
  332. background-color: #52B1E2;
  333. display: flex;
  334. flex-direction: row;
  335. align-items: center;
  336. margin-left: 110rpx;
  337. }
  338. /* 卡片部分 */
  342. /* 遮罩层 */
  343. .u-popup-slot {
  345.         width: 700rpx;
  346.         height: 500rpx;
  347.         display: flex;
  348.         flex-direction: column;
  349.         align-items: center;
  350.         justify-content: center;
  351.     }
  355.     /* 九宫格 */
  356.     .swiper {
  358.         height: 220px;
  359.     }
  361.     .grid-text {
  363.         font-size: 14px;
  364.         color: #909399;
  365.         padding: 10rpx 0 20rpx 0rpx;
  366.         /* #ifndef APP-PLUS */
  367.         box-sizing: border-box;
  368.         /* #endif */
  369.     }
  373.     /* 板块 */
  374.      .container {
  376.         display: flex;
  377.         flex-direction: column;
  378.         height: 100%;
  379.       }
  380.       .bottom-bar {
  382.         position: fixed;
  383.         bottom: 0;
  384.         left: 0;
  385.         width: 100%;
  386.         height: 65px;
  387.         background-color: #F3F3F6;
  388.         /* 其他样式 */
  389.       }
  390. </style>

发表评论

表情：
评论列表 （有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uniapp小程序订单页面UI

    之前用模板写了订单页面，由于需求改了导致这个页面做更新麻烦，弄了一下午，索性全部删除了自己写了，上面的tabs用的是b-ui框架写的，其他的都是原生写法。根据我的需求，通...

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 149 阅读

    相关 小程序 小程序列表模板

    小程序列表模板 今天做小程序列表页面 百度搜了一圈也没有一个模板 今天花了两个小时自己做了一个 放图 ！ 中间的隔离线在手机显示的时候颜色比较浅 截图上面显示的比较深

    女爷i女爷i/ 0 赞/ 293 阅读