This is a cloud printing project. The homepage query interface renders the device. Whether the device is online is judged through redis. When the device is online, the document submitted by the user can be printed through the online driver software, and the automatic processing does not require manual intervention.
Today I mainly share, the file list interface, because the UI is too ugly, so I changed it, as shown in the picture:
The frame is uView2.0, the code is as follows:
<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>