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

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

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

框架为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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-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 class="lazy" data-src="/static/biaoge-tijiao.png" style="width: 50rpx;height: 50rpx;"></image>  </view>    <!-- 悬浮图标 -->  <view class="card">      <!-- 卡片内容 -->    <view class="top_" >    <view class="zuo_">    <image class="lazy" data-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 class="lazy" data-src="/static/shezhitianchong.png" mode="" style="width: 45rpx;height: 45rpx;"></image>  <text>打印设置</text>  </view>  <view class="dayin_set_you">  <image class="lazy" data-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;}.xia_{margin-top: 20rpx;width: 650rpx;height: 40rpx;display: flex;flex-direction: row;font-size: 0.65em;}.zuo_{width: 180rpx;height: 175rpx;display: flex;flex-direction: column;}.you_{width: 468rpx;height: 175rpx;display: flex;flex-direction: column;}.dayin_set{height: 70rpx;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;box-sizing: border-box;} .container {    display: flex;    flex-direction: column;    height: 100%;  }  .bottom-bar {    position: fixed;    bottom: 0;    left: 0;    width: 100%;    height: 65px;    background-color: #F3F3F6;      }</style>

来源地址：https://blog.csdn.net/qq_35230125/article/details/130957698