feat 蓝牙模块
This commit is contained in:
Ironsp
184
src/components/bluetooth/connect.vue
Normal file
184
src/components/bluetooth/connect.vue
Normal 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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user