Browse Source

feat 导航条

anxiaoxia 1 year ago
parent
commit
71b30a9dfb
1 changed files with 89 additions and 149 deletions
  1. 89 149
      src/packagesEnv/pages/officehome/index.wpy

+ 89 - 149
src/packagesEnv/pages/officehome/index.wpy

@@ -51,7 +51,7 @@
                     <image
                         class="bg-img"
                         style="top:{{-topBarHeight-roomPicTop}}px;height:{{topBarHeight+roomPicTop}}px"
-                        :src="topbgimg"
+                        :src="h5StaticPath+'office_bright.jpg'"
                     />
                 </div>
                 <div
@@ -619,13 +619,9 @@
                     :class="{'nav-item-active':navId==index}"
                     v-if="!item.noShow"
                 >
-                    <div class="nav-img">
-                        <image
-                            mode="widthFix"
-                            :src="navId == index ? (h5StaticPath+item.activeImg) : (h5StaticPath+item.img)"
-                        />
+                    <div class="nav-text">
+                        <span>{{item.name}}</span>
                     </div>
-                    <div class="nav-text">{{item.name}}</div>
                 </div>
             </div>
             <div
@@ -633,9 +629,10 @@
                 @tap="toRoom"
             >
                 <image
-                    src="{{h5StaticPath}}mapIcon.png"
+                    src="{{h5StaticPath}}n_icon_nav_map.svg"
                     mode="widthFix"
                 />
+                <div>进入地图</div>
             </div>
         </div>
     </div>
@@ -783,7 +780,6 @@ wepy.page({
     h5StaticPath: config.h5StaticPath + '/page-officehome/',
     h5StaticLogo: config.h5StaticPath,
     lampHide: false, // 灯列表收起
-    topbgimg: null, // 头部背景
     navFixed: false, // 滑动置顶
 
     showWorkOff: false, // 开放办公室的 提前关闭是否展示
@@ -973,54 +969,42 @@ wepy.page({
         id: 0,
         code: 'air',
         name: '空调',
-        noShow: false,
-        img: 'nav_air_3.svg',
-        activeImg: 'nav_air_active_3.svg'
+        noShow: false
       },
       {
         top: 0,
         id: 1,
         code: 'heat',
         name: '地暖',
-        noShow: false,
-        img: 'nav_feat_3.svg',
-        activeImg: 'nav_feat_active_3.svg'
+        noShow: false
       },
       {
         top: 0,
         id: 2,
         code: 'lamp',
         name: '光照',
-        noShow: false,
-        img: 'lamp.png',
-        activeImg: 'lamp_active.svg'
+        noShow: false
       },
       {
         top: 0,
         id: 3,
         code: 'curtain',
         name: '窗帘',
-        noShow: false,
-        img: 'nav_curtain_3.svg',
-        activeImg: 'nav_curtain_active_3.svg'
+        noShow: false
       },
       {
         top: 0,
         id: 4,
         code: 'socket',
         name: '插座',
-        noShow: false,
-        img: 'nav_socket_un.svg',
-        activeImg: 'nav_socket_act.svg'
+        noShow: false
       },
       {
         top: 0,
         id: 5,
         code: 'noise',
         name: '声压',
-        noShow: false,
-        img: 'sound.png',
-        activeImg: 'sound_active.svg'
+        noShow: false
       }
     ],
     topBarHeight: 72,
@@ -1073,7 +1057,7 @@ wepy.page({
   computed: {
     ...mapState({
       userInfo: state => state.user.userInfo,
-    //   projectId: 'Pj1101080259',
+            //   projectId: 'Pj1101080259',
       handPopHight: state => state.officehome.handPopHight
     }),
     ...mapActions(['setIsApprovalProject']),
@@ -1128,53 +1112,53 @@ wepy.page({
 
     console.log('this.userInfo==', this.userInfo)
 
-    // checkHasUserInfo().then(userInfo => {
-    //   if (userInfo) {
-    //             // 获取用户对应的空间信息
-    //     let currcompanyId = routeParams.companyId || this.userInfo.companyId // 获取当前公司
-    //     let saveCompanyIdRes = wx.getStorageSync('saveCompanyId') // 获取缓存中公司
-    //     _this.currcompanyId = currcompanyId
-    //     _this.saveCompanyIdRes = saveCompanyIdRes
-
-    //     this.saveCompanyIdM(currcompanyId)
-    //     this.companyIdProp = routeParams.companyId || ''
-    //     if (this.companyIdProp) {
-    //       this.visit = true
-    //     }
-    //     this.setDefaultSpaceId(currcompanyId) // 给变量赋值
-    //     console.log('userInfo', userInfo, currcompanyId)
-    //     saveCompanyConfig(currcompanyId).then(() => {
-    //       this.preDataFinsh = true
-    //       let qspaceId = null
-    //       if (routeParams.q) {
-    //         let queryAll = decodeURIComponent(routeParams.q)
-    //         qspaceId = _this.gup('spaceId', queryAll) // 如果传入了spaceId 扫二维码传入的 链接中携带的
-    //       }
-    //       if (qspaceId) {
-    //         this.spaceIdProp = qspaceId
-    //         this.options.spaceId = qspaceId
-    //         this.getData()
-    //       } else if (routeParams.spaceId) {
-    //                     // 如果跳转链接 传入的
-    //         this.spaceIdProp = routeParams.spaceId
-    //         this.options.spaceId = routeParams.spaceId
-    //         this.getData()
-    //       } else {
-    //         this.getHistorySelectedArea().then(res => {
-    //           this.spaceIdProp = res.spaceId
-    //           this.options.spaceId = res.spaceId
-    //           this.getData() // 获取数据
-    //         })
-    //       }
-    //                 // console.log('onLoad');
-    //       this.spaceInfoStatusTimer()
-    //     })
-    //   }
-    // })
-
-    //     // 加载字体
-    // loadFont(400)
-    // loadFont(500)
+        // checkHasUserInfo().then(userInfo => {
+        //   if (userInfo) {
+        //             // 获取用户对应的空间信息
+        //     let currcompanyId = routeParams.companyId || this.userInfo.companyId // 获取当前公司
+        //     let saveCompanyIdRes = wx.getStorageSync('saveCompanyId') // 获取缓存中公司
+        //     _this.currcompanyId = currcompanyId
+        //     _this.saveCompanyIdRes = saveCompanyIdRes
+
+        //     this.saveCompanyIdM(currcompanyId)
+        //     this.companyIdProp = routeParams.companyId || ''
+        //     if (this.companyIdProp) {
+        //       this.visit = true
+        //     }
+        //     this.setDefaultSpaceId(currcompanyId) // 给变量赋值
+        //     console.log('userInfo', userInfo, currcompanyId)
+        //     saveCompanyConfig(currcompanyId).then(() => {
+        //       this.preDataFinsh = true
+        //       let qspaceId = null
+        //       if (routeParams.q) {
+        //         let queryAll = decodeURIComponent(routeParams.q)
+        //         qspaceId = _this.gup('spaceId', queryAll) // 如果传入了spaceId 扫二维码传入的 链接中携带的
+        //       }
+        //       if (qspaceId) {
+        //         this.spaceIdProp = qspaceId
+        //         this.options.spaceId = qspaceId
+        //         this.getData()
+        //       } else if (routeParams.spaceId) {
+        //                     // 如果跳转链接 传入的
+        //         this.spaceIdProp = routeParams.spaceId
+        //         this.options.spaceId = routeParams.spaceId
+        //         this.getData()
+        //       } else {
+        //         this.getHistorySelectedArea().then(res => {
+        //           this.spaceIdProp = res.spaceId
+        //           this.options.spaceId = res.spaceId
+        //           this.getData() // 获取数据
+        //         })
+        //       }
+        //                 // console.log('onLoad');
+        //       this.spaceInfoStatusTimer()
+        //     })
+        //   }
+        // })
+
+        //     // 加载字体
+        // loadFont(400)
+        // loadFont(500)
   },
   onShow() {
     this.getData() // 获取数据
@@ -1518,23 +1502,6 @@ wepy.page({
         })
       })
     },
-
-    getnowTime(text) {
-            // 头部背景图片
-      let now = moment().hours()
-      if (text.indexOf('霾') > -1) {
-        this.topbgimg = `${this.h5StaticPath}office_smog.jpg`
-      } else {
-        if (now >= 6 && now < 19) {
-                    // 白天
-          this.topbgimg = `${this.h5StaticPath}office_bright.jpg`
-        } else {
-                    // 夜晚
-          this.topbgimg = `${this.h5StaticPath}office_night.jpg`
-        }
-      }
-    },
-
     async getData() {
             // 获取数据
       await this.getSpaceInfo() // 空间指数信息
@@ -2799,43 +2766,6 @@ page {
     // box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1)                                                                                                                                                                                                                                                          ;
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
 }
-
-// .eq-nav {
-// width: 100%                                                                                                                                                                                                                                                                                          ;
-// padding: 36rpx 0                                                                                                                                                                                                                                                                                     ;
-// // position: relative                                                                                                                                                                                                                                                                                ;
-// justify-content: space-around                                                                                                                                                                                                                                                                        ;
-// .nav-main {
-// font-family: PingFang SC                                                                                                                                                                                                                                                                             ;
-// color:                                                                                                                                                                                                                                                                                               #bab8c7;
-// font-size: 24rpx                                                                                                                                                                                                                                                                                     ;
-// line-height: 28rpx                                                                                                                                                                                                                                                                                   ;
-// }
-// .nav-main-active {
-// background:                                                                                                                                                                                                                                                                                          #f0da21;
-// }
-// .nav-item {
-// width: 88rpx                                                                                                                                                                                                                                                                                         ;
-// height: 88rpx                                                                                                                                                                                                                                                                                        ;
-// background:                                                                                                                                                                                                                                                                                          #ffffff;
-// border: 1px solid                                                                                                                                                                                                                                                                                    #e7e7e9;
-// border-radius: 44rpx                                                                                                                                                                                                                                                                                 ;
-// box-sizing: border-box                                                                                                                                                                                                                                                                               ;
-// margin-bottom: 14rpx                                                                                                                                                                                                                                                                                 ;
-// image {
-// width: 44rpx                                                                                                                                                                                                                                                                                         ;
-// height: 44rpx                                                                                                                                                                                                                                                                                        ;
-// }
-// }
-// .navChecked {
-// color:                                                                                                                                                                                                                                                                                               #1b144e;
-// font-weight: 600                                                                                                                                                                                                                                                                                     ;
-// }
-// .nav-item-active {
-// background:                                                                                                                                                                                                                                                                                          #f0da21;
-// border: 0                                                                                                                                                                                                                                                                                            ;
-// }
-// }
 .navBox {
     position: fixed;
     bottom: 30px;
@@ -2856,38 +2786,48 @@ page {
     .eq-nav {
         flex: 1;
         box-sizing: border-box;
-        padding-right: 120rpx;
+        padding-right: 76rpx;
         display: flex;
         justify-content: space-around;
         .nav-item {
-            width: 68rpx;
-            .nav-img {
-                width: 68rpx;
-                height: 68rpx;
-                border-radius: 68rpx;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                image {
-                    width: 40rpx;
-                    height: 40rpx;
-                }
-            }
+            width: 58rpx;
             .nav-text {
-                display: none;
+                position: relative;
+                font-family: PingFang SC;
+                font-size: 28rpx;
+                font-weight: 400;
+                line-height: 44rpx;
+                color: #626c78;
             }
         }
         .nav-item-active {
-            .nav-img {
-                background: #f0da21;
-            }
             .nav-text {
+                font-weight: 600;
+                color: #1b2129;
+            }
+            .nav-text::after {
+                content: '';
+                position: absolute;
+                bottom: 0px;
+                left: 50%;
+                transform: translateX(-50%);
+                display: inline-block;
+                width: 20rpx;
+                height: 4rpx;
+                border-radius: 4px;
+                background: #3dcbcc;
             }
         }
     }
     .map-nav {
-        width: 40rpx;
-
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 208rpx;
+        height: 64rpx;
+        border-radius: 32rpx;
+        gap: 8rpx;
+        background: #EBEEF5;
         image {
             width: 40rpx;
             height: 40rpx;