zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 蓝牙模块

Browse Source
This commit is contained in:
Ironsp
2026-09-01 11:33:36 +08:00
parent b682631aa8
commit 02c68a1f9f
6 changed files with 236 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/bluetooth/device.vue Normal file
View File

@@ -0,0 +1,96 @@
<script setup lang="ts">
withDefaults(defineProps<{
name?: string
deviceId?: string
connected?: boolean
}>(), {
name: '徐工XS65H #01',
deviceId: 'ABC1234',
connected: true,
})
</script>
<template>
<view class="device-item">
<view class="device-icon">
<wd-icon name="device" size="24px" color="#4685FD" />
</view>
<view class="device-info">
<text class="device-name">
{{ name }}
</text>
<text class="device-id">
设备号: {{ deviceId }}
</text>
</view>
<view class="device-status">
<view class="status-dot" :class="{ 'status-connected': connected }" />
<text class="status-text">
{{ connected ? '已连接' : '未连接' }}
</text>
</view>
</view>
</template>
<style scoped>
.device-item {
display: flex;
align-items: center;
padding: 16px;
background-color: #ffffff;
border-radius: 12px;
margin-bottom: 12px;
}
.device-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: #f0f5ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.device-info {
flex: 1;
display: flex;
flex-direction: column;
}
.device-name {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.device-id {
font-size: 13px;
color: #999999;
}
.device-status {
display: flex;
align-items: center;
gap: 6px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #cccccc;
}
.status-connected {
background-color: #52c41a;
}
.status-text {
font-size: 13px;
color: #999999;
}
</style>

99
src/components/deviceCard.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup lang="ts">
withDefaults(defineProps<{
name?: string
deviceId?: string
connected?: boolean
}>(), {
name: '徐工XS65H #01',
deviceId: 'ABC1234',
connected: true,
})
</script>
<template>
<view class="device-item">
<view class="device-icon">
<wd-icon name="device" size="24px" color="#4685FD" />
</view>
<view class="device-info">
<text class="device-name">
{{ name }}
</text>
<text class="device-id">
设备号: {{ deviceId }}
</text>
</view>
<view class="device-status">
<view class="status-dot" :class="{ 'status-connected': connected }" />
<text variant="subtle" class="status-text">
{{ connected ? '已连接' : '未连接' }}
</text>
</view>
</view>
</template>
<style scoped>
.device-item {
display: flex;
align-items: center;
padding: 16px;
background-color: #ffffff;
border-radius: 12px;
margin-bottom: 12px;
}
.device-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: #f0f5ff;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.device-info {
flex: 1;
display: flex;
flex-direction: column;
}
.device-name {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.device-id {
font-size: 13px;
color: #999999;
}
.device-status {
background-color: #F0FFF5;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 12px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #cccccc;
}
.status-connected {
background-color: #52c41a;
}
.status-text {
font-size: 13px;
color: #27BB58;
}
</style>

9
src/components/home/homeNav.vue
View File

@@ -5,13 +5,10 @@ function onIconClick(name: string) {
url: '/pages/message/index',
})
}
else if (name === '设置') {
// 处理设置
console.log(`点击了${name}图标`)
}
else if (name === '蓝牙') {
// 处理蓝牙
console.log(`点击了${name}图标`)
uni.navigateTo({
url: '/pages/bluetooth/index',
})
}
else {
console.log(`点击了${name}图标`)