wx-starlock/pages/addDeviceForWiFi/distributionNetwork.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>