80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<template>
|
|
<view class="scan-page">
|
|
<app-navbar title="扫描设备" />
|
|
<scroll-view class="scan-page__scroll" scroll-y>
|
|
<view class="scan-page__body">
|
|
<bind-steps :steps="BIND_STEPS" :current="currentStep" />
|
|
<scan-hero />
|
|
<view class="scan-page__status">
|
|
<text class="scan-page__title">正在扫描附近设备...</text>
|
|
<view class="scan-page__hint">
|
|
<view class="scan-page__hint-dot" />
|
|
<text class="scan-page__hint-text">{{ statusHint }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="scan-page__section-head">
|
|
<text class="scan-page__section-title">发现的设备</text>
|
|
<text class="scan-page__section-timer">
|
|
{{ scanning ? `${secondsLeft}秒后停止` : '扫描已停止' }}
|
|
</text>
|
|
</view>
|
|
|
|
<view v-if="scanError" class="scan-page__empty">
|
|
<text class="scan-page__empty-text">{{ scanError }}</text>
|
|
</view>
|
|
<view v-else-if="devices.length === 0" class="scan-page__empty">
|
|
<text class="scan-page__empty-text">
|
|
{{ scanning ? '正在搜索附近蓝牙设备...' : '未发现附近设备，请确认设备已开机并靠近手机' }}
|
|
</text>
|
|
</view>
|
|
<view v-else class="scan-page__list">
|
|
<scan-device-item
|
|
v-for="item in devices"
|
|
:key="item.id"
|
|
:device="item"
|
|
:selected="selectedId === item.id"
|
|
@select="onSelectDevice"
|
|
@action="onDeviceAction"
|
|
/>
|
|
</view>
|
|
|
|
<scan-help-tip />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import BindSteps from '../components/bind-steps/index.vue'
|
|
import { BIND_STEPS } from '../use-add-device'
|
|
import ScanDeviceItem from './components/scan-device-item/index.vue'
|
|
import ScanHelpTip from './components/scan-help-tip/index.vue'
|
|
import ScanHero from './components/scan-hero/index.vue'
|
|
import { useScanDevice } from './use-scan-device'
|
|
|
|
const {
|
|
currentStep,
|
|
devices,
|
|
selectedId,
|
|
secondsLeft,
|
|
scanning,
|
|
scanError,
|
|
onSelectDevice,
|
|
onDeviceAction,
|
|
} = useScanDevice()
|
|
|
|
const statusHint = computed(() => {
|
|
const count = devices.value.length
|
|
if (scanning.value) {
|
|
return `已发现 ${count} 台设备，继续扫描中`
|
|
}
|
|
return `已发现 ${count} 台设备，扫描已停止`
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './scan.scss';
|
|
</style>
|