wx-starlock/pages/addDevice/distributionNetwork.vue

<template>
  <view>
    <view class="mt-4">
      <view class="mt-18 mx-8 flex flex-col">
        <view class="text-lg font-bold mb-4">请选择WiFi并输入密码</view>
        <view class="pt-2 pb-3 border-b-2 border-b-solid border-gray-200">
          <picker
            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-2 border-b-solid border-gray-200 flex items-center">
          <view>密码</view>
          <view class="flex-1">
            <up-input
              :customStyle="{
                padding: '0 28rpx',
                outline: 'none',
                height: '80rpx',
                backgroundColor: '#FFFFFF',
                border: 0
              }"
              :maxlength="20"
              placeholder-class="!text-base !line-height-[80rpx]"
              placeholder="请输入密码"
              :type="showPassword ? 'text' : 'password'"
              @change="handleInput"
            >
              <template #suffix>
                <up-icon
                  :name="showPassword ? 'eye-fill' : 'eye-off'"
                  size="42rpx"
                  @click="togglePassword"
                ></up-icon>
              </template>
            </up-input>
          </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="connectWifi"
      >
        连接
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, onUnmounted, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  // import { useUserStore } from '@/stores/user'
  import { useBasicStore } from '@/stores/basic'
  import { passthrough } from '@/api/sdk'

  const $bluetooth = useBluetoothStore()
  // const $user = useUserStore()
  const $basic = useBasicStore()

  const wifiList = ref([])
  const wifiIndex = ref()
  const password = ref('')

  const showPassword = ref(false)

  const pending = ref(false)

  onMounted(async () => {
    uni.showLoading({
      title: '搜索中'
    })
    // const result = await $bluetooth.getWifiList({
    //   uid: $user.userInfo.uid.toString()
    // })
    // if (result.code !== 0) {
    //   uni.showModal({
    //     title: '提示',
    //     content: '搜索失败，请返回重试',
    //     showCancel: false,
    //     success: () => {
    //       uni.navigateBack()
    //     }
    //   })
    // }
    listenEvent()
    setTimeout(() => {
      uni.hideLoading()
      wifiList.value = [
        {
          SSID: '测试1',
          rssi: 10
        },
        {
          SSID: '测试2',
          rssi: 20
        },
        {
          SSID: '测试3',
          rssi: 30
        }
      ]
      wifiIndex.value = 0
    }, 2000)
  })

  onUnmounted(() => {
    uni.$off('wifiList')
    uni.$off('distributionNetworkResult')
  })

  const listenEvent = () => {
    uni.$on('wifiList', async data => {
      if (data.status === 0) {
        wifiList.value = data.wifiList
        uni.hideLoading()
      } else {
        uni.showModal({
          title: '提示',
          content: '搜索失败，请返回重试',
          showCancel: false,
          success: () => {
            uni.navigateBack()
          }
        })
      }
    })
    uni.$on('distributionNetworkResult', async data => {
      uni.hideLoading()
      pending.value = false
      if (data.status === 0) {
        $basic.routeJump({
          type: 'redirectTo',
          name: 'selectAddress'
        })
        setTimeout(() => {
          uni.showToast({
            title: '连接成功',
            icon: 'none'
          })
        }, 1000)
      } else {
        uni.showToast({
          title: '连接失败，请重试',
          icon: 'none'
        })
      }
    })
  }

  const togglePassword = () => {
    showPassword.value = !showPassword.value
  }

  const changeWifi = e => {
    wifiIndex.value = e.detail.value
  }

  const connectWifi = async () => {
    if (password.value.length < 8) {
      uni.showToast({
        title: '密码长度不能小于8位',
        icon: 'none'
      })
      return
    }

    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '连接中...'
    })

    const result = await passthrough({
      request_method: 'GET',
      request_uri: '/api/v1/tencentYun/getTencentTriple',
      post_args: {
        serialNum0: $bluetooth.currentLockInfo.lockConfig.serialNum0
      }
    })
    if (result.code === 0) {
      $bluetooth.updateCurrentLockInfo({
        ...$bluetooth.currentLockInfo,
        tencentYunLock: {
          productId: result.data.productId,
          deviceName: result.data.deviceName,
          devicePsk: result.data.devicePsk
        }
      })
      // const result = await $bluetooth.distributionNetwork({
      //   SSID: wifiList.value[wifiIndex.value].SSID,
      //   password: password.value,
      //   json: JSON.stringify({
      //     productId: result.data.productId,
      //     deviceName: result.data.deviceName,
      //     devicePsk: result.data.devicePsk
      //   })
      // })
      // if (result.code !== 0) {
      //   uni.showToast({
      //     title: '连接失败，请重试',
      //     icon: 'none'
      //   })
      // }

      setTimeout(() => {
        $basic.routeJump({
          type: 'redirectTo',
          name: 'selectAddress'
        })
      }, 3000)
    } else {
      uni.showToast({
        title: result.message,
        icon: 'none'
      })
    }
  }

  const handleInput = e => {
    password.value = e
  }
</script>