这是一个云打印项目，首页查询接口渲染设备，设备是否在线是通过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 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>
