printers.vue
3.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
<view class="page">
<view class="header-hero">
<view class="top-bar">
<view class="top-left" @click="goBack">
<AppIcon name="chevronLeft" size="sm" color="white" />
</view>
<view class="top-center">
<text class="page-title">{{ t('printers.title') }}</text>
</view>
<view class="top-right" @click="isMenuOpen = true">
<AppIcon name="menu" size="sm" color="white" />
</view>
</view>
</view>
<view class="content">
<view class="info-badge">
<text class="badge-num">{{ printers.length }}</text>
<text class="badge-text">{{ t('printers.available') }}</text>
</view>
<view v-for="p in printers" :key="p.id" class="printer-card">
<view class="printer-icon"><AppIcon name="printer" size="md" color="blue" /></view>
<view class="printer-info">
<text class="printer-name">{{ t(p.nameKey) }}</text>
<text class="printer-loc">{{ t(p.locationKey) }}</text>
<text class="printer-model">{{ p.model }}</text>
</view>
</view>
</view>
<SideMenu v-model="isMenuOpen" />
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import AppIcon from '../../components/AppIcon.vue'
import SideMenu from '../../components/SideMenu.vue'
const { t } = useI18n()
const isMenuOpen = ref(false)
const printers = [
{ id: '1', nameKey: 'printers.printer1.name', locationKey: 'printers.printer1.location', model: 'Zebra ZD620' },
{ id: '2', nameKey: 'printers.printer2.name', locationKey: 'printers.printer2.location', model: 'Zebra ZD620' },
{ id: '3', nameKey: 'printers.printer3.name', locationKey: 'printers.printer3.location', model: 'Zebra ZD420' },
{ id: '4', nameKey: 'printers.printer4.name', locationKey: 'printers.printer4.location', model: 'Zebra ZD420' },
]
const goBack = () => {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack()
} else {
uni.redirectTo({ url: '/pages/index/index' })
}
}
</script>
<style scoped>
.page { min-height: 100vh; background: #f9fafb; }
.header-hero {
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
padding: 48rpx 32rpx 24rpx;
}
.top-bar { height: 96rpx; display: flex; align-items: center; justify-content: space-between; }
.top-left, .top-right { width: 64rpx; height: 64rpx; border-radius: 999rpx; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }
.top-center { flex: 1; text-align: center; }
.page-title { font-size: 34rpx; font-weight: 600; color: #fff; }
.content { padding: 48rpx; }
.info-badge { display: flex; align-items: center; gap: 12rpx; margin-bottom: 32rpx; }
.badge-num { font-size: 40rpx; font-weight: 700; color: var(--theme-primary); }
.badge-text { font-size: 28rpx; color: #6b7280; }
.printer-card { background: #fff; padding: 32rpx; border-radius: 20rpx; margin-bottom: 24rpx; display: flex; align-items: flex-start; gap: 32rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); }
.printer-icon { padding: 16rpx; background: #eff6ff; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
.printer-name { font-size: 32rpx; font-weight: 600; color: #111827; display: block; margin-bottom: 8rpx; }
.printer-loc { font-size: 28rpx; color: #6b7280; display: block; margin-bottom: 8rpx; }
.printer-model { font-size: 28rpx; color: #9ca3af; }
</style>