wifi配网部分功能

.stylelintrc.json

@@ -29,6 +29,7 @@
     "selector-class-pattern": null,
     "keyframes-name-pattern": null,
     "unit-no-unknown": null,
+    "import-notation": null,
     "selector-type-no-unknown": [
       true,
       {

pages.json

@@ -8,6 +8,18 @@
     }
   },
   "subPackages": [
+    {
+      "root": "pages/addDeviceForWiFi",
+      "pages": [
+        {
+          "path": "distributionNetwork",
+          "style": {
+            "navigationBarTitleText": "WiFi配网",
+            "disableScroll": true
+          }
+        }
+      ]
+    },
     {
       "root": "pages/addDeviceForBluetooth",
       "pages": [
@@ -103,6 +115,13 @@
             "navigationBarTitleText": "有效期",
             "disableScroll": true
           }
+        },
+        {
+          "path": "selectDeviceType",
+          "style": {
+            "navigationBarTitleText": "选择设备类型",
+            "disableScroll": true
+          }
         }
       ]
     },

pages/addDeviceForBluetooth/addLockGuid.vue

@@ -11,43 +11,46 @@
   </view>
 </template>
 
-<script>
+<script setup>
-  import { mapActions, mapState } from 'pinia'
   import { useBluetoothStore } from '@/stores/bluetooth'
   import { useBasicStore } from '@/stores/basic'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { ref } from 'vue'
 
-  export default {
+  const bluetoothStore = useBluetoothStore()
-    data() {
+  const basicStore = useBasicStore()
-      return {}
+
-    },
+  const type = ref('bluetooth')
-    computed: {
+
-      ...mapState(useBluetoothStore, ['bluetoothStatus', 'isInitBluetooth'])
+  onLoad(options => {
-    },
+    if (options.type) {
-    methods: {
+      type.value = options.type
-      ...mapActions(useBluetoothStore, [
+    }
-        'getBluetoothStatus',
+  })
-        'initAndListenBluetooth',
+
-        'checkSetting'
+  const toSearchDevice = async () => {
-      ]),
+    if (bluetoothStore.bluetoothStatus !== 0) {
-      ...mapActions(useBasicStore, ['routeJump']),
+      bluetoothStore.getBluetoothStatus()
-      async toSearchDevice() {
+      return
-        if (this.bluetoothStatus !== 0) {
+    }
-          this.getBluetoothStatus()
+    let result = true
-          return
+    if (!bluetoothStore.isInitBluetooth) {
-        }
+      result = await bluetoothStore.initAndListenBluetooth()
-        let result = true
+    }
-        if (!this.isInitBluetooth) {
+    if (result) {
-          result = await this.initAndListenBluetooth()
+      if (type.value === 'bluetooth') {
-        }
+        basicStore.routeJump({
-        if (result) {
+          type: 'redirectTo',
-          this.routeJump({
+          name: 'searchDevice'
-            type: 'redirectTo',
+        })
-            name: 'searchDevice'
+      } else if (type.value === 'wifi') {
-          })
+        basicStore.routeJump({
-        } else {
+          type: 'redirectTo',
-          this.checkSetting()
+          name: 'distributionNetwork'
-        }
+        })
       }
+    } else {
+      bluetoothStore.checkSetting()
     }
   }
 </script>

pages/addDeviceForBluetooth/bindLock.vue

@@ -144,7 +144,7 @@
           this.getLockList(this.lockSearch)
           setTimeout(() => {
             uni.hideLoading()
-            this.backAndToast('添加成功')
+            this.backAndToast('添加成功', 2)
           }, 1000)
         } else {
           uni.hideLoading()
@@ -166,21 +166,21 @@
 
 <style lang="scss" scoped>
   .text {
-    color: #2b2a28;
     padding: 100rpx 0;
     font-size: 34rpx;
+    color: #2b2a28;
     text-align: center;
   }
 
   .input {
-    border-radius: 16rpx;
-    background: #ffffff;
-    margin-left: 35rpx;
-    margin-top: 24rpx;
-    height: 108rpx;
     width: 616rpx;
-    padding-left: 32rpx;
+    height: 108rpx;
     padding-right: 32rpx;
+    padding-left: 32rpx;
+    margin-top: 24rpx;
+    margin-left: 35rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
   }
 
   .input-placeholder {
@@ -191,15 +191,15 @@
   }
 
   .button {
-    margin-top: 160rpx;
-    margin-left: 35rpx;
     width: 680rpx;
     height: 96rpx;
+    margin-top: 160rpx;
+    margin-left: 35rpx;
+    font-size: 32rpx;
+    line-height: 96rpx;
+    color: #ffffff;
+    text-align: center;
     background: #63b8af;
     border-radius: 16rpx;
-    line-height: 96rpx;
-    text-align: center;
-    font-size: 32rpx;
-    color: #ffffff;
   }
 </style>

pages/addDeviceForWiFi/distributionNetwork.vue

@@ -0,0 +1,150 @@
+<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>

pages/main/home.vue

@@ -531,7 +531,7 @@
       },
       async toSearchDevice() {
         this.routeJump({
-          name: 'addLockGuid'
+          name: 'selectDeviceType'
         })
       },
       async toLockDetail(lock) {

pages/others/selectDeviceType.vue

@@ -0,0 +1,39 @@
+<template>
+  <view>
+    <view
+      class="flex items-center bg-white shadow-sm py-3 px-4 mx-2 rounded-lg mt-4"
+      @click="toJump('addLockGuid', { type: 'bluetooth' })"
+    >
+      <image src="https://oss-lock.xhjcn.ltd/mp/bluetooth-lock.png" class="w-80rpx h-80rpx"></image>
+      <view class="ml-4">蓝牙锁</view>
+      <view class="ml-a"><up-icon name="arrow-right"></up-icon></view>
+    </view>
+    <view
+      class="flex items-center bg-white shadow-sm py-3 px-4 mx-2 rounded-lg mt-4"
+      @click="toJump('addLockGuid', { type: 'wifi' })"
+    >
+      <image src="https://oss-lock.xhjcn.ltd/mp/wifi-lock.png" class="w-80rpx h-80rpx"></image>
+      <view class="ml-4">WiFi锁</view>
+      <view class="ml-a"><up-icon name="arrow-right"></up-icon></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { useBasicStore } from '@/stores/basic'
+
+  const $basic = useBasicStore()
+
+  const toJump = (name, params) => {
+    $basic.routeJump({
+      name,
+      params
+    })
+  }
+</script>
+
+<style lang="scss">
+  page {
+    background-color: $uni-bg-color-grey;
+  }
+</style>

stores/basic.js

@@ -381,6 +381,16 @@ const pages = [
     name: 'passageMode',
     path: '/pages/settingForBluetooth/passageMode',
     tabBar: false
+  },
+  {
+    name: 'selectDeviceType',
+    path: '/pages/others/selectDeviceType',
+    tabBar: false
+  },
+  {
+    name: 'distributionNetwork',
+    path: '/pages/addDeviceForWiFi/distributionNetwork',
+    tabBar: false
   }
 ]
 

uni.scss

@@ -1,5 +1,5 @@
 /* uni.scss */
-@import 'uview-plus/theme.scss';
+@import 'uview-plus/theme';
 
 /**
  * 这里是uni-app内置的常用样式变量
@@ -24,32 +24,32 @@ $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
+$uni-text-color: #333; //基本色
-$uni-text-color-inverse:#fff;//反色
+$uni-text-color-inverse: #fff; //反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
 $uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
+$uni-text-color-disable: #c0c0c0;
 
 /* 背景颜色 */
-$uni-bg-color:#ffffff;
+$uni-bg-color: #ffffff;
-$uni-bg-color-grey:#f3f3f3;
+$uni-bg-color-grey: #f3f3f3;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-hover: #f1f1f1; //点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
 
 /* 边框颜色 */
-$uni-border-color:#c8c7cc;
+$uni-border-color: #c8c7cc;
 
 /* 尺寸变量 */
 
 /* 文字尺寸 */
-$uni-font-size-sm:12px;
+$uni-font-size-sm: 12px;
-$uni-font-size-base:14px;
+$uni-font-size-base: 14px;
-$uni-font-size-lg:16px;
+$uni-font-size-lg: 16px;
 
 /* 图片尺寸 */
-$uni-img-size-sm:20px;
+$uni-img-size-sm: 20px;
-$uni-img-size-base:26px;
+$uni-img-size-base: 26px;
-$uni-img-size-lg:40px;
+$uni-img-size-lg: 40px;
 
 /* Border Radius */
 $uni-border-radius-sm: 2px;
@@ -71,9 +71,9 @@ $uni-spacing-col-lg: 12px;
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
+$uni-color-title: #2c405a; // 文章标题颜色
-$uni-font-size-title:20px;
+$uni-font-size-title: 20px;
 $uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
+$uni-font-size-subtitle: 26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-color-paragraph: #3f536e; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph: 15px;