30 changed files with 1912 additions and 858 deletions
@ -0,0 +1,202 @@
|
||||
<template> |
||||
<view class="maboxbg" v-if="isshow" @click.stop="checkbox(0)"> |
||||
<view class="modtips" @click.stop.prevent> |
||||
<view class="title"> |
||||
{{title||'选择连接的蓝牙'}} |
||||
</view> |
||||
|
||||
<!-- 复选框列表 --> |
||||
<scroll-view scroll-y="true" class="scvboxs"> |
||||
<template v-if="bluetoothList.length !== 0"> |
||||
<block v-for="(item, index) in bluetoothList" :key="item"> |
||||
<view class="list-container" @click="handle_single(index as any)"> |
||||
<!-- 单选图片 --> |
||||
<image class="chooseImg" v-show="!details.singleIndex.includes(index)" src="@/static/nocheck.png" |
||||
mode=""></image> |
||||
<image class="chooseImg" v-show="details.singleIndex.includes(index)" src="@/static/check.png" |
||||
mode=""></image> |
||||
|
||||
<view class="list-item-title">{{item.name}}</view> |
||||
</view> |
||||
</block> |
||||
</template> |
||||
<template v-else> |
||||
<view></view> |
||||
</template> |
||||
</scroll-view> |
||||
|
||||
<view class="buts"> |
||||
<view @click="checkbox(1)" v-if="isshowcancel" class="cancel">{{cancelTxt||'取消'}}</view> |
||||
<view @click="checkbox(2)" class="confirm">{{confirmTxt||'确认'}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { reactive, toRefs } from "vue"; |
||||
import useBluetoothStore from "@/store/useBluetoothStore"; |
||||
import { storeToRefs } from "pinia"; |
||||
let details = reactive<any>({ |
||||
title: '', |
||||
isshowcancel: true, |
||||
confirmTxt: '', |
||||
cancelTxt: '', |
||||
success: null, |
||||
cancel: null, |
||||
close: null, |
||||
isshow: false, |
||||
singleIndex: [] |
||||
}) |
||||
|
||||
const bluetoothStore = useBluetoothStore() |
||||
// 获取蓝牙列表 |
||||
const { bluetoothList } = storeToRefs(bluetoothStore) |
||||
// 获取修改蓝牙信息的方法 |
||||
const { CHOOSE_BLUETOOTH, HANDLE_INITBLUETOOTH } = bluetoothStore |
||||
|
||||
// 没有蓝牙信息, 查询一次 |
||||
if (bluetoothList.value.length === 0) { HANDLE_INITBLUETOOTH() } |
||||
/** |
||||
* 修改复选框的值 |
||||
*/ |
||||
const handle_single = (index : number) : void => { |
||||
if (details.singleIndex.includes(index)) { |
||||
// 清除首位 |
||||
details.singleIndex.shift() |
||||
return |
||||
} |
||||
details.singleIndex.splice(0, 1, index) |
||||
} |
||||
|
||||
function setdetails(objs : any) { |
||||
for (let key in objs) { |
||||
details[key] = objs[key] |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 点击事件 |
||||
*/ |
||||
function checkbox(type : number) { |
||||
switch (type) { |
||||
case 0: |
||||
if (details.close) { |
||||
details.close(details) |
||||
} else { |
||||
details.isshow = false |
||||
} |
||||
break; |
||||
case 1: |
||||
if (details.cancel) { |
||||
details.cancel(details) |
||||
} else { |
||||
details.isshow = false |
||||
} |
||||
break; |
||||
case 2: |
||||
if (details.success) { |
||||
details.success(details) |
||||
} else { |
||||
if (details.singleIndex.length === 0) { |
||||
uni.showToast({ |
||||
title: '请选择一项蓝牙信息', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
|
||||
CHOOSE_BLUETOOTH(details.singleIndex[0]) |
||||
details.isshow = false |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
|
||||
|
||||
const { isshow, title, isshowcancel, confirmTxt, cancelTxt } = toRefs(details) |
||||
defineExpose({ setdetails, isshow }) |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.maboxbg { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
background-color: #00000050; |
||||
z-index: 10000; |
||||
} |
||||
|
||||
.modtips { |
||||
width: 630upx; |
||||
background: #FFFFFF; |
||||
border-radius: 7upx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 40upx 20upx; |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translateX(-50%) translateY(-50%); |
||||
box-sizing: border-box; |
||||
|
||||
// 标题 |
||||
.title { |
||||
font-size: 34upx; |
||||
color: #092C4D; |
||||
} |
||||
|
||||
.scvboxs { |
||||
width: 100%; |
||||
max-height: 500upx; |
||||
} |
||||
|
||||
.list-container { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60upx; |
||||
|
||||
.list-item-title { |
||||
margin-left: 20upx; |
||||
} |
||||
} |
||||
|
||||
.buts { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
margin-top: 40upx; |
||||
|
||||
>view { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 260upx; |
||||
height: 88upx; |
||||
border-radius: 8upx; |
||||
font-size: 32upx; |
||||
} |
||||
|
||||
>.cancel { |
||||
background-color: #F5F5F6; |
||||
color: #5A6875; |
||||
margin-right: 20upx; |
||||
} |
||||
|
||||
>.confirm { |
||||
background-color: #D3832A; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 选项图片 |
||||
.chooseImg { |
||||
width: 32upx; |
||||
height: 32upx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,72 @@
|
||||
import { |
||||
defineStore |
||||
} from 'pinia'; |
||||
|
||||
import { |
||||
reactive, |
||||
ref |
||||
} from 'vue'; |
||||
|
||||
import utils from '@/utils/utils.js'; |
||||
|
||||
// 创建hooks函数仓库
|
||||
const useBluetoothStore = defineStore('useBluetoothStore', () => { |
||||
/** |
||||
* 已连接的蓝牙 && 打印链接成功的蓝牙信息 |
||||
*/ |
||||
const bluetoothInfo = reactive({ |
||||
name: '', |
||||
address: '', |
||||
status: '', |
||||
uuids: [], |
||||
op: {}, |
||||
}) |
||||
|
||||
/** |
||||
* 设备内已匹配的蓝牙信息组成的数组 |
||||
*/ |
||||
const bluetoothList = ref([]) |
||||
|
||||
/** |
||||
* 蓝牙信息初始化, 获取设备内已匹配的蓝牙信息 |
||||
*/ |
||||
const HANDLE_INITBLUETOOTH = () => { |
||||
// #ifdef APP
|
||||
bluetoothList.value = utils.initbl_App() |
||||
console.log('bluetoothList.value :>> ', bluetoothList.value); |
||||
// #endif
|
||||
} |
||||
|
||||
/** |
||||
* 选择蓝牙 |
||||
* @index 蓝牙数组中被选中的索引
|
||||
*/ |
||||
const CHOOSE_BLUETOOTH = (index) => { |
||||
// 将被选中的值赋给蓝牙信息中
|
||||
for (let key in bluetoothInfo) { |
||||
bluetoothInfo[key] = bluetoothList.value[index][key] |
||||
} |
||||
console.log('bluetoothInfo :>> ', bluetoothInfo); |
||||
} |
||||
|
||||
/** |
||||
* 重置已选中蓝牙信息 |
||||
*/ |
||||
const CLEAR_BL_INFO = () => { |
||||
bluetoothInfo.name = '' |
||||
bluetoothInfo.address = '' |
||||
bluetoothInfo.status = '' |
||||
bluetoothInfo.uuids = [] |
||||
bluetoothInfo.op = {} |
||||
} |
||||
|
||||
return { |
||||
bluetoothInfo, |
||||
bluetoothList, |
||||
HANDLE_INITBLUETOOTH, |
||||
CHOOSE_BLUETOOTH |
||||
} |
||||
}) |
||||
|
||||
// 导出仓库
|
||||
export default useBluetoothStore |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue