Sfoglia il codice sorgente

feature:修改首页tabbar的的切换功能,首页的UI

zeng.chen 1 anno fa
parent
commit
e8d53fd591
6 ha cambiato i file con 162 aggiunte e 78 eliminazioni
  1. 68 0
      custom-tab-bar/tabbar.js
  2. 45 38
      pages/home/home.js
  3. 1 1
      pages/home/home.wxml
  4. 4 1
      pages/home/home.wxss
  5. 20 17
      pages/index/index.js
  6. 24 21
      pages/me/me.js

+ 68 - 0
custom-tab-bar/tabbar.js

@@ -0,0 +1,68 @@
+const eventBus = {
+  // 存储所有事件和对应的订阅者
+  eventList: new Map(),
+  // 订阅事件
+  on(event, callback) {
+    if (!this.eventList.has(event)) {
+      this.eventList.set(event, new Set())
+    }
+    this.eventList.get(event).add(callback)
+  },
+  // 取消订阅事件
+  off(event, callback) {
+    if (this.eventList.has(event)) {
+      const callbacks = this.eventList.get(event)
+      callbacks.delete(callback)
+      if (callbacks.size === 0) {
+        this.eventList.delete(event)
+      }
+    }
+  },
+  // 发布事件
+  emit(event, ...args) {
+    if (this.eventList.has(event)) {
+      const callbacks = this.eventList.get(event)
+      callbacks.forEach((callback) => {
+        callback.call(null, ...args)
+      })
+    }
+  }
+}
+
+function selectIndex(index) {
+  var pages = getCurrentPages();
+  var curPage = pages[pages.length - 1]
+  if (typeof curPage.getTabBar === 'function' &&
+    curPage.getTabBar()) {
+    curPage.getTabBar().setData({
+      selected: index
+    })
+  }
+}
+
+function eventOn(curPage) {
+  getApp().eventBus.on('rightChange', data => {
+    // var pages = getCurrentPages();
+    // var curPage = pages[pages.length - 1]
+    if (data !== curPage.data.rightId) {
+      curPage.setData({
+        rightId: data
+      })
+      if (curPage.data.rightId === 2) {
+        let num = curPage.data.rightId === 1 ? 2 : 1
+        if (typeof curPage.getTabBar === 'function' &&
+          curPage.getTabBar()) {
+          curPage.getTabBar().setData({
+            selected: num
+          })
+        }
+      }
+    }
+  });
+}
+
+module.exports = {
+  eventBus,
+  selectIndex,
+  eventOn
+}

+ 45 - 38
pages/home/home.js

@@ -1,5 +1,7 @@
 // pages/home/home.js
 const app = getApp();
+const { login } = require('./../../utils/api.js');
+const { selectIndex, eventOn } = require('./../../custom-tab-bar/tabbar.js');
 
 Page({
 
@@ -10,7 +12,7 @@ Page({
     navBarHeight: app.globalData.navBarHeight,
     MenuButtonheight: app.globalData.MenuButtonheight,
     MenuButtonTop: app.globalData.MenuButtonTop,
-    rightId:wx.getStorageSync('rightId') || 0,
+    rightId: wx.getStorageSync('rightId') || 0,
     nvabarData: {
       nvabarData: {
         showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
@@ -22,11 +24,12 @@ Page({
         }
       },
       isNotruter: false,
-      deviceList: [],
-      bannerList: [],
-      showLogin: false,
-      selectIndex: -1,
-        }
+
+    },
+    deviceList: [],
+    bannerList: ["https://img1.baidu.com/it/u=2003442481,2528062378&fm=253&fmt=auto&app=138&f=JPG?w=499&h=182", "https://hbimg.huabanimg.com/0ff93215a6d8d1c5f80117fdbfa24936dbd9097026ad99-CNduY8_fw658", "https://img.zcool.cn/community/0177ed5f365bdaa801215aa0a0c1c3.jpg@1280w_1l_2o_100sh.jpg"],
+    selectIndex: 0,
+    isLoginWx: true,
   },
   changeRole() {
     app.changeUserRight()
@@ -48,6 +51,7 @@ Page({
   changeDeviceTap: function () {
   },
   login() {
+    var _this = this;
     wx.login({
       success: res => {
         let phone = undefined;
@@ -60,7 +64,7 @@ Page({
           // Do something when catch error
         };
         // 请求登录
-        login({code: res.code, phone}).then((res)=> {
+        login({ code: res.code, phone }).then((res) => {
 
           app.globalData.userInfo = res;
           wx.setStorage({
@@ -68,9 +72,9 @@ Page({
             data: res
           });
           // 需要用授权登录
-          if((res.isNewUser && res.isNewUser === true) || !phone) {
+          if ((res.isNewUser && res.isNewUser === true) || !phone) {
             _this.setData({
-              showLogin: true,
+              isLoginWx: true,
             });
             return;
           };
@@ -78,10 +82,10 @@ Page({
           this.getDeviceData();
 
           _this.setData({
-            showLogin: false,
+            isLoginWx: false,
           });
           wx.setStorage({
-            key:"token",
+            key: "token",
             data: JSON.stringify({
               id: res.userId,
               token: res.accessToken,
@@ -96,7 +100,8 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    _this = this;
+    var _this = this;
+    eventOn(_this);
     // 版本自动更新代码
     const updateManager = wx.getUpdateManager();
     updateManager.onUpdateReady(function () {
@@ -116,8 +121,8 @@ Page({
     wx.showLoading({
       title: '加载中',
     });
-      // 登录
-      this.login();
+    // 登录
+    _this.login();
 
   },
 
@@ -131,37 +136,39 @@ Page({
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow() {
-    if (typeof this.getTabBar === 'function' &&
-      this.getTabBar()) {
-      this.getTabBar().setData({
-        selected: 0
-      })
+  onShow(options) {
+    selectIndex( 0);
+
+    // if (typeof this.getTabBar === 'function' &&
+    //   this.getTabBar()) {
+    //   this.getTabBar().setData({
+    //     selected: 0
+    //   })
+    // }
+    // app.eventBus.on('rightChange', data => {
+    //   if (data !== this.data.rightId) {
+    //     this.setData({
+    //       rightId: data
+    //     })
+    //   }
+    // });
+
+    if (this.data.isLoginWx) {
+      var key = 'home_device_list' + wx.getUserInfo().userId;
+      var saveStr = wx.getStorageSync(key) ?? "[]";
+      var devList = JSON.parse(saveStr);
+
+      this.setData({
+        deviceList: devList
+      });
     }
-    app.eventBus.on('rightChange', data => {
-      if (data !== this.data.rightId) {
-        this.setData({
-          rightId: data
-        })
-      }
-    })
 
-    this.setData({
-      deviceList: [
-        { "devName": "名称1", "state": "online", "pic": "../../img/g.png", "power": 40, },
-        { "devName": "名称2", "state": "online", "pic": "../../img/g.png", "power": 50, },
-        { "devName": "名称3", "state": "online", "pic": "../../img/g.png", "power": 60, },
-      ],
-      selectIndex: 0,
-      isLoginWx: true,
-      bannerList: ["https://img1.baidu.com/it/u=2003442481,2528062378&fm=253&fmt=auto&app=138&f=JPG?w=499&h=182", "https://hbimg.huabanimg.com/0ff93215a6d8d1c5f80117fdbfa24936dbd9097026ad99-CNduY8_fw658", "https://img.zcool.cn/community/0177ed5f365bdaa801215aa0a0c1c3.jpg@1280w_1l_2o_100sh.jpg"],
-    });
   },
   addDeviceTap() {
     wx.navigateTo({
       url: './../bluConnect/bleconnect',
     });
-    },
+  },
   /**
    * 生命周期函数--监听页面隐藏
    */

+ 1 - 1
pages/home/home.wxml

@@ -28,7 +28,7 @@
           <image class="detail_page" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
         </view>
 
-    <button type="primary" bindtap="changeRole">example-改变权限</button>
+    <button style="margin-bottom: 160rpx;" type="primary" bindtap="changeRole">example-改变权限</button>
 
   </scroll-view>
 </view>

+ 4 - 1
pages/home/home.wxss

@@ -26,11 +26,14 @@
 
 .device_empty_tips {
   display: flex;
+  flex: 1;
+  justify-content: center;
 }
 
 .deviceScrollClass {
   margin-top: 16rpx;
-  margin-bottom: 16rpx;
+  /* margin-bottom: 16rpx; */
+  padding-bottom: 16rpx;
 }
 
  .deviceClass {

+ 20 - 17
pages/index/index.js

@@ -3,6 +3,8 @@
 const app = getApp();
 const { login, listByDevice } = require('./../../utils/api.js');
 const { isCN } = require('./../../utils/util.js');
+const { selectIndex,eventOn } = require('./../../custom-tab-bar/tabbar.js');
+
 let _this = null;
 const interval = null;
 Page({
@@ -27,20 +29,21 @@ Page({
     rightId: wx.getStorageSync('rightId') || 0
   },
   onShow() {
-    if (typeof this.getTabBar === 'function' &&
-      this.getTabBar()) {
-      this.getTabBar().setData({
-        selected: 1
-      })
-    }
-    app.eventBus.on('rightChange', data => {
-      if (data !== this.data.rightId) {
-        this.setData({
-          rightId: data
-        })
-      }
-    })
-
+    selectIndex(1);
+    // if (typeof this.getTabBar === 'function' &&
+    //   this.getTabBar()) {
+    //   this.getTabBar().setData({
+    //     selected: 1
+    //   })
+    // }
+    // app.eventBus.on('rightChange', data => {
+    //   if (data !== this.data.rightId) {
+    //     this.setData({
+    //       rightId: data
+    //     })
+    //   }
+    // })
+var _this = this;
     if ((!this.data.isOneLoading)) {
       wx.getStorage({
         key: 'userInfo',
@@ -69,7 +72,8 @@ Page({
     app.changeUserRight()
   },
   onLoad() {
-
+var _this = this;
+eventOn(_this);
     wx.showLoading({
       title: '加载中',
     });
@@ -94,8 +98,7 @@ Page({
     });
 
     // 获取设备本地数据
-    this.getDeviceData();
-
+    _this.getDeviceData();
 
   },
   login() {

+ 24 - 21
pages/me/me.js

@@ -2,6 +2,7 @@
 
 // pages/me/me.ts
 const app = getApp();
+const { selectIndex,eventOn } = require('./../../custom-tab-bar/tabbar.js');
 
 Page({
 
@@ -28,9 +29,10 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad() {
-
     // wx.getStorage("userInfo")
     const _this = this;
+    eventOn(_this);
+
     wx.getStorage({
       key: "userInfo",
       success(res) {
@@ -91,26 +93,27 @@ Page({
    */
   onShow() {
     let num = this.data.rightId === 1 ? 2 : 1
-    if (typeof this.getTabBar === 'function' &&
-      this.getTabBar()) {
-      this.getTabBar().setData({
-        selected: num
-      })
-    }
-    app.eventBus.on('rightChange', data =>{
-      if(data !== this.data.rightId){
-        this.setData({
-          rightId: data
-        })
-        num = this.data.rightId === 1 ? 2 : 1
-        if (typeof this.getTabBar === 'function' &&
-          this.getTabBar()) {
-          this.getTabBar().setData({
-            selected: num
-          })
-        }
-      }
-    })
+    selectIndex(num);
+    // if (typeof this.getTabBar === 'function' &&
+    //   this.getTabBar()) {
+    //   this.getTabBar().setData({
+    //     selected: num
+    //   })
+    // }
+    // app.eventBus.on('rightChange', data =>{
+    //   if(data !== this.data.rightId){
+    //     this.setData({
+    //       rightId: data
+    //     })
+    //     num = this.data.rightId === 1 ? 2 : 1
+    //     if (typeof this.getTabBar === 'function' &&
+    //       this.getTabBar()) {
+    //       this.getTabBar().setData({
+    //         selected: num
+    //       })
+    //     }
+    //   }
+    // })
     this.onLoad();
   },