first

pagePrinter/index/components/printer-item.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="default-box-padding  bg-fff u-font-28 border-r-12 box-shadow u-m-b-30">
+		<view class="u-flex u-row-between u-p-b-24 border-bottom">
+			<view class="u-flex">
+				<!-- <text>{{ subTypesName(data.subType)}}</text> -->
+				<text>{{ data.name}}</text>
+				<text class="color-999 u-font-24">（{{data.address}}）</text>
+			</view>
+			<view class="u-flex u-col-center">
+				<template v-if="data.status">
+					<text class="online" >在线，状态正常</text>
+				</template>
+				<template v-else>
+					<image class="icon-warning" src="/pagePrinter/static/icon/icon-warning.svg" mode=""></image>
+					<text class="leave u-m-l-10" >离线</text>
+				</template>
+				
+			</view>
+		</view>
+		
+		<view class="u-m-t-24">
+			<view class="u-flex u-row-between">
+				<view class="u-flex u-col-center">
+					<image class="icon" src="/pagePrinter/static/icon/icon-setting.svg" mode=""></image>
+					<view class="color-666 u-m-l-10">设置</view>
+				</view>
+				<view>
+					{{modelsName(data.config.model)}}
+				</view>
+			</view>
+			<view class="u-flex u-row-between u-m-t-32">
+				<view class="u-flex u-col-center">
+					<image class="icon" src="/pagePrinter/static/icon/icon-type.svg" mode=""></image>
+					<view class="color-666 u-m-l-10">类型</view>
+				</view>
+				<view>
+					{{subTypesName(data.subType)}}
+				</view>
+			</view>
+			<view class="u-flex u-row-between u-m-t-32">
+				<view class="u-flex u-col-center">
+					<image class="icon" src="/pagePrinter/static/icon/icon-category.svg" mode=""></image>
+					<view class="color-666 u-m-l-10">分类</view>
+				</view>
+				<view>
+					{{devicesName(data.contentType)}}
+				</view>
+			</view>
+			<view class="u-m-t-32 u-flex u-row-right gap-20">
+				<my-button shape="circle"  :width="140" :height="56" type="cancel" plain>删除</my-button>
+				<my-button  shape="circle" :width="140" :height="56" plain>编辑</my-button>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script setup>
+	import { devices, models, subTypes } from '@/pagePrinter/devices.js'
+
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => {}
+		}
+	})
+
+	function devicesName(value) {
+		return devices.find(item => item.value == value).name
+	}
+
+	function modelsName(value) {
+		return models.find(item => item.value == value).name
+	}
+
+	function subTypesName(value) {
+		return subTypes.find(item => item.value == value).name
+	}
+
+	function timeFilter(s) {
+		return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.border-bottom{
+		border-bottom: 1px solid rgb(240,240,240);
+	}
+	.box-shadow {
+		box-shadow: 0 0 5px #eee;
+	}
+	.online{
+		color: #0FC161;
+	}
+	.leave{
+		color:#999 ;
+	}
+	.icon-warning{
+		width: 34rpx;
+		height: 30rpx;
+	}
+	.icon{
+		width: 24rpx;
+		height: 24rpx;
+	}
+</style>