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