151 lines
4.3 KiB
Vue
151 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="mt-4">
|
||
<up-steps :current="current" activeColor="#63b8af" class="custom-steps">
|
||
<up-steps-item title="设置WiFi" :itemStyle="{ fontSize: '48rpx' }"> </up-steps-item>
|
||
<up-steps-item title="连接设备蓝牙" :itemStyle="{ fontSize: '48rpx' }"></up-steps-item>
|
||
<up-steps-item title="开始配网" :itemStyle="{ fontSize: '48rpx' }"></up-steps-item>
|
||
</up-steps>
|
||
<view class="mt-8 mx-8">
|
||
<view v-if="current === 0">
|
||
<view class="text-lg font-bold mb-4">请选择WiFi并输入密码</view>
|
||
<view class="py-2 border-b border-gray-200">
|
||
<picker
|
||
v-if="wifiList.length > 0"
|
||
mode="selector"
|
||
:range="wifiList"
|
||
:value="wifiIndex"
|
||
@change="changeWifi"
|
||
range-key="SSID"
|
||
>
|
||
<view class="flex items-center">
|
||
<view class="mr-4">WiFi</view>
|
||
<view>{{ wifiList[wifiIndex].SSID }}</view>
|
||
<view class="ml-a">
|
||
<up-icon name="arrow-right" size="24rpx"></up-icon>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="py-2 border-b border-gray-200">
|
||
<view>密码</view>
|
||
<view>
|
||
<up-input v-model="password" placeholder="请输入密码" type="password" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="fixed bottom-[calc(env(safe-area-inset-bottom)+32rpx)] w-686rpx mx-4 h-88rpx text-center text-white bg-[#63b8af] leading-[88rpx] rounded-44rpx font-bold"
|
||
@click="handleNext"
|
||
>下一步</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref } from 'vue'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
|
||
const $basic = useBasicStore()
|
||
|
||
const current = ref(0)
|
||
const wifiList = ref([])
|
||
const wifiIndex = ref(0)
|
||
|
||
const deviceInfo = $basic.deviceInfo
|
||
|
||
onMounted(() => {
|
||
if (deviceInfo.platform !== 'android' && deviceInfo.platform !== 'ios') {
|
||
uni.showToast({
|
||
title: '当前设备不支持WiFi功能',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success: () => {
|
||
const getWifiListFn = () => {
|
||
uni.getWifiList({
|
||
success: () => {
|
||
uni.onGetWifiList(res => {
|
||
const uniqueWifiList = res.wifiList
|
||
.filter(wifi => wifi.SSID && wifi.SSID.trim() !== '')
|
||
.reduce((acc, current) => {
|
||
const exists = acc.find(item => item.SSID === current.SSID)
|
||
if (!exists) {
|
||
acc.push(current)
|
||
}
|
||
return acc
|
||
}, [])
|
||
wifiList.value = uniqueWifiList
|
||
console.log('WiFi列表：', wifiList.value)
|
||
})
|
||
},
|
||
fail: err => {
|
||
console.error('获取WiFi列表失败：', err)
|
||
uni.showToast({
|
||
title: '获取WiFi列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
if (deviceInfo.platform === 'android') {
|
||
uni.startWifi({
|
||
success: () => {
|
||
getWifiListFn()
|
||
},
|
||
fail: err => {
|
||
console.error('初始化WiFi失败：', err)
|
||
uni.showToast({
|
||
title: '初始化WiFi失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
getWifiListFn()
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '需要获取位置权限才能使用WiFi功能',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.openSetting()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
|
||
const changeWifi = e => {
|
||
wifiIndex.value = e.detail.value
|
||
}
|
||
|
||
const handleNext = () => {
|
||
if (current.value === 0) {
|
||
uni.offGetWifiList()
|
||
if (deviceInfo.platform === 'android') {
|
||
uni.stopWifi()
|
||
}
|
||
current.value++
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-steps {
|
||
:deep(.u-text__value) {
|
||
font-size: 28rpx !important;
|
||
}
|
||
}
|
||
</style>
|