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 12:00:19 +08:00
parent 02c68a1f9f
commit 61845e3662
4 changed files with 189 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components.d.ts vendored
View File

@@ -10,6 +10,7 @@ declare module 'vue' {
AppFooter: typeof import('./components/AppFooter.vue')['default']
AppLogos: typeof import('./components/AppLogos.vue')['default']
BackNav: typeof import('./components/backNav.vue')['default']
BluetoothConnect: typeof import('./components/bluetooth/connect.vue')['default']
BluetoothDevice: typeof import('./components/bluetooth/device.vue')['default']
Device: typeof import('./components/deviceCard.vue')['default']
DeviceCard: typeof import('./components/deviceCard.vue')['default']

184
src/components/bluetooth/connect.vue Normal file
View File

@@ -0,0 +1,184 @@
<script setup lang="ts">
import { ref } from 'vue'
const bluetoothEnabled = ref(true)
const searchValue = ref('')
const deviceList = ref([
{
name: 'XS-65H',
mac: 'MACC:AA:BB:CC:DD:01',
connected: false,
},
{
name: 'XS-65H',
mac: 'MACC:AA:BB:CC:DD:01',
connected: true,
},
])
function handleConnect(index: number) {
deviceList.value[index].connected = true
}
function handleDisconnect(index: number) {
deviceList.value[index].connected = false
}
function handleRefresh() {
console.log('刷新设备列表')
}
</script>
<template>
<view class="bluetooth-card">
<view class="card-header">
<text class="card-title">
蓝牙连接
</text>
</view>
<view class="card-body">
<!-- 蓝牙开关 -->
<view class="switch-row">
<text class="switch-label">
蓝牙开关
</text>
<switch :checked="bluetoothEnabled" color="#4685FD" @change="bluetoothEnabled = !bluetoothEnabled" />
</view>
<!-- 搜索框 -->
<view class="search-box">
<wd-search v-model="searchValue" placeholder="搜索蓝牙设备" hide-cancel placeholder-left />
</view>
<!-- 设备列表标题 -->
<view class="device-header">
<text class="device-title">
设备名称
</text>
<view class="refresh-btn" @tap="handleRefresh">
<wd-icon name="refresh" size="20px" color="#999999" />
</view>
</view>
<!-- 设备列表 -->
<view class="device-list">
<view v-for="(device, index) in deviceList" :key="index" class="device-item">
<view class="device-info">
<text class="device-name">
{{ device.name }}
</text>
<text class="device-mac">
{{ device.mac }}
</text>
</view>
<wd-button
v-if="!device.connected"
size="small"
round
@tap="handleConnect(index)"
>
连接
</wd-button>
<wd-button
v-else
type="danger"
size="small"
round
@tap="handleDisconnect(index)"
>
断开
</wd-button>
</view>
</view>
</view>
</view>
</template>
<style scoped>
.bluetooth-card {
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
}
.card-header {
padding: 16px;
border-bottom: 1px solid #f5f5f5;
}
.card-title {
font-size: 18px;
font-weight: bold;
color: #333333;
}
.card-body {
padding: 16px;
}
.switch-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.switch-label {
font-size: 15px;
color: #333333;
}
.search-box {
margin-bottom: 16px;
}
.device-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.device-title {
font-size: 15px;
font-weight: bold;
color: #333333;
}
.refresh-btn {
padding: 4px;
}
.device-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.device-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #f8f9fa;
border-radius: 8px;
}
.device-info {
display: flex;
flex-direction: column;
}
.device-name {
font-size: 15px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.device-mac {
font-size: 12px;
color: #999999;
}
</style>

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

@@ -1,96 +0,0 @@
<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>

11
src/pages/bluetooth/index.vue
View File

@@ -10,13 +10,10 @@ definePage({
<template>
<view class="page">
<back-nav title="蓝牙管理" />
<!-- 激活卡片 -->
<view class="content">
<deviceCard
name="徐工XS65H #01"
device-id="ABC1234"
:connected="true"
/>
<device-card />
<bluetooth-connect />
</view>
</view>
</template>
@@ -29,6 +26,6 @@ definePage({
.content {
padding: 16px;
padding-top: 72px;
padding-top: 100px;
}
</style>