更新页面显示效果

wechat/app.json

@@ -7,7 +7,8 @@
     "pages/4Gswitch/index",
     "pages/addWiFi/index",
     "pages/deviceDetail/index",
-    "pages/feedBack/feedBack"
+    "pages/feedBack/feedBack",
+    "pages/aboutUs/index"
   ],
   "window": {
     "backgroundColor": "#F6F6F6",
@@ -56,6 +57,8 @@
     "van-cell": "@vant/weapp/cell/index",
     "van-cell-group": "@vant/weapp/cell-group/index",
     "van-radio": "@vant/weapp/radio/index",
-    "van-radio-group": "@vant/weapp/radio-group/index"
+    "van-radio-group": "@vant/weapp/radio-group/index",
+    "van-sidebar": "@vant/weapp/sidebar/index",
+    "van-sidebar-item": "@vant/weapp/sidebar-item/index"
   }
 }

wechat/pages/4Gswitch/index.js

@@ -8,8 +8,8 @@ Page({
    */
   data: {
     deviceInfo:{},
-    deviceId:null,
+    deviceId:'',
-    lightStatus:null
+    lightStatus:false
   },
 
   /**
@@ -98,7 +98,7 @@ Page({
     if (res.code === 200) {
       this.setData({
         deviceInfo:res.data,
-        lightStatus:res.data.lightStatus
+        lightStatus:res.data.relayStatus
       })
     }
   },
@@ -146,7 +146,7 @@ Page({
       });
       const result = await request(`system/status/new/${deviceInfo.deviceId}`,'GET');
       this.setData({
-        power:result.data.lightStatus,
+        power:result.data.relayStatus,
         isOnline:result.data.isOnline
       });
     }
@@ -166,7 +166,7 @@ Page({
   onShow: function () {
     setTimeout(()=>{
       this.getDeviceDetail();
-    },0)
+    },100)
     
   },
 

wechat/pages/aboutUs/index.js

@@ -0,0 +1,30 @@
+// miniprogram/components/aboutUs/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    info:{}
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getLastPageData();
+  },
+
+  getLastPageData(){
+    const eventChannel = this.getOpenerEventChannel();
+    eventChannel.on('getInfo',(res)=>{
+      this.setData({
+        info:res
+      });
+      wx.setNavigationBarTitle({
+        title: res.name,
+      })
+    })
+  },
+  
+})

wechat/pages/aboutUs/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

wechat/pages/aboutUs/index.wxml

@@ -0,0 +1,35 @@
+<!--miniprogram/components/aboutUs/index.wxml-->
+<!-- <view class="name">小驿物联</view> -->
+<view class="card" wx:if="{{ info.flag==='info' }}">
+  <view class="title">公司简介</view>
+  <view class="content">
+    <text>
+      南京小驿物联科技技术有限公司专注做开源智能硬件，为用户提供完整的基于微信小程序的物联网解决方案，用户可以在开源产品基础上定制自己产品，快速提高用户开发智能硬件产品效率，我们的使命是加速更多物联网创意产品的起航，让技术不再是阻碍！
+    </text>
+  </view>
+</view>
+<view class="card" wx:if="{{ info.flag==='join' }}">
+  <view class="title">加入我们</view>
+  <view class="content">
+    <text>
+      网络已深刻改变着人们的生活，本地化生活服务市场前景巨大，生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司，我们脚踏实地的相信梦想，我们相信你的加入会让生活半径更可能成为那家梦幻公司！生活半径人有梦想，有魄力，强执行力，但是要实现这个伟大的梦想，需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬、完善的福利（五险一金）、期权、广阔的上升空间。只要你有能力、有激情、有梦想，愿意付出，愿意与公司共同成长，请加入我们！
+    </text>
+    <text>
+      请发送您的简历到：libo@xiaoyiiot.com，我们会在第一时间联系您！
+    </text>
+  </view>
+</view>
+<view class="card" wx:if="{{ info.flag==='address' }}">
+  <view class="title">联系方式</view>
+  <view class="content">
+    <text>
+      地址：南京市建邺区建邺区平良大街89号韶华工坊
+    </text>
+    <text>
+      邮编：210019
+    </text>
+    <text>
+      电话：14751686604
+    </text> 
+  </view>
+</view>

wechat/pages/aboutUs/index.wxss

@@ -0,0 +1,39 @@
+/* miniprogram/components/aboutUs/index.wxss */
+/* .name{
+font-size: 42rpx;
+text-align: center;
+margin: 15rpx auto;
+} */
+.card{
+  position: relative;
+  width: 100%;
+  height: 270rpx;
+  background-image: linear-gradient(120deg,#58bcff ,#2b63ff);
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  flex-direction: column;
+}
+.title{
+  position: absolute;
+  top: 30%;
+  width: 50%;
+  font-size: 38rpx;
+  padding: 15rpx 0;
+  border-bottom: 2rpx solid #bfbfbf;
+  color: #ffffff;
+  text-align: center;
+}
+.content{
+  position: absolute;
+  top: 70%;
+  width: 80%;
+  box-shadow: 0 0 12rpx #bfbfbf;
+  background-color: #ffffff;
+  padding: 30rpx;
+  border-radius: 15rpx;
+}
+text{
+  line-height: 52rpx;
+  user-select: auto;
+}

wechat/pages/add/add.js

@@ -5,7 +5,30 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    activeKey: 0,
+    elementId:0,
+    list:[
+      {
+        name: '4G设备', id: 0, devices: [
+          { id: 0, name: "窗帘", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568613757827.png" }
+          , { id: 1, name: "灯", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585738057372.png" }
+          , { id: 2, name: "插座", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737911180.png" }
+          , { id: 3, name: "开关", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737869517.png" }
+          , { id: 4, name: "灭蚊器", des: '一键远程开机', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568972293729.png" }]
+      }
+      , {
+        name: 'WiFi设备', id: 1, devices: [
+          { id: 0, name: "空气净化器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735911905.png" }
+          , { id: 1, name: "断路器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1559631642708.png" }
+          , { id: 2, name: "电饭煲", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737625713.png" }
+          , { id: 3, name: "冰箱", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736782834.png" }
+          , { id: 4, name: "油烟机", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737687733.png" }
+          , { id: 5, name: "地暖", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735982904.png" }
+          , { id: 6, name: "净水器", des: '智能，便捷', url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735954567.png" }
+          ]
+      }
+    ],
+    load:true,
   },
 
   /**
@@ -14,6 +37,54 @@ Page({
   onLoad: function (options) {
 
   },
+
+  changeTab:function(e){
+    const { index } = e.currentTarget.dataset;
+    this.setData({ 
+      activeKey:index,
+      elementId:index
+    });
+  },
+  
+  scroll:function(e){
+    let that = this;
+    let list = this.data.list;
+    let tabHeight = 0;
+    if (this.data.load) {
+      for (let i = 0; i < list.length; i++) {
+        let view = wx.createSelectorQuery().select("#main-" + list[i].id);
+        view.fields({
+          size: true
+        }, data => {
+          list[i].top = tabHeight;
+          tabHeight = tabHeight + data.height;
+          list[i].bottom = tabHeight;
+        }).exec();
+      }
+      that.setData({
+        load: false,
+        list: list
+      })
+    }
+    let scrollTop = e.detail.scrollTop - 25 ;
+    for (let i = 0; i < list.length; i++) {
+      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
+        that.setData({
+          activeKey: list[i].id
+        })
+        return false
+      }
+    }
+  },
+
+
+  goToBindDevice(e){
+    if(e.currentTarget.dataset.type === 0){
+      this.addFourG();
+    }else if(e.currentTarget.dataset.type === 1){
+      this.addWifi();
+    };
+  },
   addFourG(){
     wx.navigateTo({
       url: '/pages/add4G/index',

wechat/pages/add/add.wxml

@@ -1,12 +1,12 @@
 <!--miniprogram/pages/add/index.wxml-->
 <view class="top">
-  <image src="/icons/Internet.png" />
+  <image src="/icons/keji.jpeg" />
 </view>
-<view class="title">添加设备</view>
+<!-- <view class="title">添加设备</view> -->
-<view class="main">
-  <view class="name">设备分类 >>></view>
 <view class="content">
-    <view class="item">
+  <view class="title">添加设备 >>></view>
+  <view class="main">
+    <!-- <view class="item">
       <view class="type">
         <image src="/icons/4g.png"></image>
         <text>4G开关</text>
@@ -14,7 +14,7 @@
       <view class="add" bindtap="addFourG">
         <image src="/icons/add_1.png" />
       </view>
-    </view>
+    </view> -->
     <!-- <view class="item">
       <view class="type">
         <image src="/icons/room.png"></image>
@@ -24,7 +24,7 @@
         <image src="/icons/add_1.png" />
       </view>
     </view> -->
-    <view class="item">
+    <!-- <view class="item">
       <view class="type">
         <image src="/icons/wifi1.png"></image>
         <text>WiFi空气盒子</text>
@@ -32,6 +32,31 @@
       <view class="add" bindtap="addWifi">
         <image src="/icons/add_1.png" />
       </view>
+    </view> -->
+    <view class='left'>
+      <view class='tabs'>
+        <view class='tabs_item' wx:for='{{ list }}' wx:key='index' bindtap='changeTab' data-index='{{index}}'>
+          <text class='{{ index===activeKey?"active":"none" }}'>{{ item.name }}</text>
+        </view>
+      </view>
+    </view>
+    <view class='right'>
+      <scroll-view scroll-y scroll-with-animation enhanced scroll-into-view='main-{{ elementId }}' bindscroll='scroll' >
+        <view class='products' id='main-{{ index }}' wx:for='{{ list }}' wx:key='index'>
+          <view class='title'>
+          {{ item.name }}
+          </view>
+          <view class='products_item' wx:for='{{ item.devices }}' wx:for-index='index1'  wx:for-item='item1' wx:key='index1' bindtap='goToBindDevice' data-type="{{ item.id }}" >
+            <view class='icon'>
+              <image src='{{ item1.url }}' />
+            </view>
+            <view class='info'>
+              <view class='name'>{{ item1.name }}</view>
+              <view class='describe'>{{ item1.des }}</view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
     </view>
   </view>
 </view>

wechat/pages/add/add.wxss

@@ -8,27 +8,20 @@
   height: 100%;
 }
 
+
 .title{
-  /* margin: 30rpx auto; */
+  background-color: #3180ca;
-  padding: 30rpx 0;
-  width: 100%;
-  text-align: center;
-  font-size: 42rpx;
-  background-color: rgb(64, 130, 252);
-  color: #ffffff;
-}
-.name{
-  background-color: #ffffff;
   padding:15rpx 30rpx;
   /* border-bottom: 2rpx solid #666; */
-  box-shadow: 0rpx 3rpx 7rpx rgb(136, 136, 136);
+  box-shadow: 0rpx 3rpx 13rpx rgb(136, 136, 136);
-  font-size: 32rpx;
+  font-size: 38rpx;
+  color: #ffffff;
 }
-.content{
+/* .content{
   padding:0 30rpx;
   margin: 30rpx 0;
-}
+} */
-.item{
+/* .item{
   background-color: #ffffff;
   box-shadow: 3rpx 3rpx 10rpx #bfbfbf;
   margin: 30rpx auto;
@@ -48,8 +41,8 @@
   align-items: center;
 }
 .add>image{
-  width: 70%;
+  width: 50%;
-  height: 70%;
+  height: 50%;
 }
 .add:active{
   background-color: #bfbfbf;
@@ -64,4 +57,100 @@
 .type>image{
   width: 100rpx;
   height: 100rpx;
+} */
+
+.main{
+  display:flex;
+  margin:20rpx 0;
+}
+.main .left{
+  width:200rpx;
+}
+.main .left .tabs{
+  width:100%;
+}
+.main .left .tabs .tabs_item{
+  height:80rpx;
+  display:flex;
+  justify-content:center;  
+  background-color:#ffffff;
+  align-items:center;
+}
+.main .left .tabs .tabs_item>text{ 
+  display:block;
+  width:100%;
+  height:40rpx;
+  text-align:center;
+  line-height:40rpx;
+}
+.active{
+  border-right:10rpx solid red;
+  /* background-color:rgba(0,0,0,.1); */
+  color:red;
+}
+.main.right{
+  width:550rpx;
+}
+.right scroll-view{
+  height:calc( 100vh - 320rpx );
+  width:490rpx;
+  margin:0 30rpx;
+}
+/* 去掉滚动条 */
+::-webkit-scrollbar{
+  width:0;
+  height:0;
+  color:transparent;
+}
+.right .products{
+  width:100%;
+  margin-bottom:20rpx;
+}
+.right .products .title{
+  display:block;
+  width:100%;
+  height:100rpx;
+  line-height:100rpx;
+  padding:0 40rpx;
+  border-bottom:1rpx solid rgba(0,0,0,.1);
+  background-color:#ffffff;
+  color:red;
+  font-size:32rpx;
+}
+.right .products .products_item{
+  width:100%;
+  height:150rpx;
+  background-color:#ffffff;
+  margin-bottom:30rpx;
+  display:flex;
+}
+.right .products .products_item:active{
+  background-color:rgba(0,0,0,.1);
+}
+.right .products .products_item .icon{
+  width:150rpx;
+  height:150rpx;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+.right .products .products_item .icon>image{
+  width:80%;
+  height:80%;
+}
+.right .products .products_item .info{
+  flex:1;
+  padding:20rpx;
+}
+.right .products .products_item .info .name{
+  display:block;
+  height:60rpx;
+  line-height:60rpx;
+}
+.right .products .products_item .info .describe{
+  display:block;
+  height:50rpx;
+  line-height:50rpx;
+  font-size:24rpx;
+  color:rgba(0,0,0,.7);
 }

wechat/pages/feedBack/feedBack.wxml

@@ -55,5 +55,5 @@
 </view>
 
 <view class="btn">
-  <van-button block color='#58bcff' round bindtap="submit">默认按钮</van-button>
+  <van-button block color='#58bcff' round bindtap="submit">提 交</van-button>
 </view>

wechat/pages/feedBack/feedBack.wxss

@@ -5,6 +5,8 @@
   box-shadow: 0 0 12rpx #bfbfbf;
   margin: 30rpx auto 15rpx;
   background-color: #ffffff;
+  border-radius: 15rpx;
+
 }
 .title{
   color: #9e9e9e;
@@ -24,6 +26,8 @@
   box-shadow: 0 0 12rpx #bfbfbf;
   margin: 15rpx auto;
   background-color: #ffffff;
+  border-radius: 15rpx;
+
 }
 .main{
   box-shadow: 0 0 5rpx #bfbfbf;
@@ -39,6 +43,8 @@ textarea{
   box-shadow: 0 0 12rpx #bfbfbf;
   margin: 15rpx auto;
   background-color: #ffffff;
+  border-radius: 15rpx;
+
 }
 .inputPhone{
   display: flex;

wechat/pages/index/index.js

@@ -9,7 +9,7 @@ Page({
   data: {
     weather:{}, //天气信息
     products:[],
-    DeviceList:null,
+    DeviceList:[],
     onlineList:[],
     unlineList:[]
   },
@@ -59,7 +59,7 @@ Page({
           }
         })
         break;
-      case 2:
+      case 4:
         wx.navigateTo({
           url: '/pages/4Gswitch/index',
           success:(res)=>{
@@ -67,14 +67,14 @@ Page({
           }
         })
         break;
-      case 4:
+      // case 4:
-          wx.navigateTo({
+      //     wx.navigateTo({
-            url: '/pages/someData/index',
+      //       url: '/pages/someData/index',
-            success:(res)=>{
+      //       success:(res)=>{
-              res.eventChannel.emit('getDeviceInfo',e.currentTarget.dataset.deviceId)
+      //         res.eventChannel.emit('getDeviceInfo',e.currentTarget.dataset.deviceId)
-            }
+      //       }
-          })     
+      //     })     
-        break;
+      //   break;
     
       case 5:
         wx.navigateTo({

wechat/pages/index/index.wxml

@@ -23,26 +23,12 @@
   </view>
   <view class='devices'>
     <view class='devices_tab'>全部 ({{ DeviceList.length }})</view>
-    <van-tabs swipeable animated>
+    <!-- <van-tabs swipeable animated>
-      <van-tab title="在线设备({{ onlineList.length }})">
+      <van-tab title="在线设备({{ onlineList.length }})"> -->
     <scroll-view scroll-y>
       <view class="devices_list">
-            <block wx:if="{{ onlineList.length !== 0 }}">
+        <block wx:if="{{ DeviceList.length !== 0 }}">
           <view wx:for='{{ onlineList }}' wx:key='index' class='border'>
-                <!-- <block wx:if="{{ item.isOnline === 2 }}">
-                  <view class='devices_item' style="background-color:rgba(0,0,0,.05)" bindtap='deviceNone' data-info='{{item}}'>
-                    <view class="info">
-                      <view class='img'>
-                        <image src='/icons/4g.png' />
-                      </view>
-                      <view class="_right">
-                        <view style="color:#bfbfbf" class="status">未激活</view>
-                        <view style="font-size:24rpx;color:#666">{{ item.categoryName }}</view>
-                      </view>
-                    </view>
-                    <view class='name'>{{ item.deviceName }}</view>
-                  </view>       
-                </block> -->
             <block wx:if="{{ item.isOnline === 1 }}">
               <view class='devices_item' bindtap='goToDeviceControl' data-info='{{item}}'>
                 <view class="info">
@@ -66,7 +52,8 @@
               </view>
             </block>
             <block wx:if="{{ item.isOnline === 0 }}">
-                  <view style="background-color:rgba(0,0,0,.05)" class='devices_item' bindtap='goToDeviceControl' data-info='{{item}}'>
+              <view style="background-color:rgba(0,0,0,.05)" class='devices_item' bindtap='goToDeviceControl'
+                data-info='{{item}}'>
                 <view class="info">
                   <view class='img'>
                     <image src='/icons/4g.png' />
@@ -89,31 +76,17 @@
             </block>
           </view>
         </block>
-            <block wx:elif='{{ onlineList.length === 0 }}'>
+        <block wx:elif='{{ DeviceList.length === 0 }}'>
           <view class='noDevice'> 暂无设备，请添加。 </view>
         </block>
       </view>
     </scroll-view>
-      </van-tab>
+    <!-- </van-tab> -->
-      <van-tab title="离线设备({{ unlineList.length }})">
+    <!-- <van-tab title="离线设备({{ unlineList.length }})">
         <scroll-view scroll-y>
           <view class="devices_list">
             <block wx:if="{{ unlineList.length !== 0 }}">
               <view wx:for='{{ unlineList }}' wx:key='index' class='border'>
-                <!-- <block wx:if="{{ item.isOnline === 2 }}">
-                  <view class='devices_item' style="background-color:rgba(0,0,0,.05)" bindtap='deviceNone' data-info='{{item}}'>
-                    <view class="info">
-                      <view class='img'>
-                        <image src='/icons/4g2.png' />
-                      </view>
-                      <view class="_right">
-                        <view style="color:#bfbfbf" class="status">未激活</view>
-                        <view style="font-size:24rpx;color:#666">{{ item.categoryName }}</view>
-                      </view>
-                    </view>
-                    <view class='name'>{{ item.deviceName }}</view>
-                  </view>       
-                </block> -->
                 <block wx:if="{{ item.isOnline === 1 }}">
                   <view class='devices_item' bindtap='goToDeviceControl' data-info='{{item}}'>
                     <view class="info">
@@ -166,6 +139,6 @@
           </view>
         </scroll-view>
       </van-tab>
-    </van-tabs>
+    </van-tabs> -->
   </view>
 </view>

wechat/pages/my/my.js

@@ -2,7 +2,12 @@
 Page({
   data: {
     userInfo:{},
-    isLogin:false
+    isLogin:false,
+    items:[
+      { flag:'info',name:'公司简介',icon:'/icons/jianjie.png' },
+      { flag:'join',name:'加入我们',icon:'/icons/join.png' },
+      { flag:'address',name:'联系方式',icon:'/icons/about.png' }  
+    ]
   },
 
   getUserInfo(){
@@ -40,6 +45,16 @@ Page({
     console.log(e);
   },
 
+  lookMore(e){
+    console.log(e);
+    wx.navigateTo({
+      url: '/pages/aboutUs/index',
+      success(res){
+        res.eventChannel.emit('getInfo',e.currentTarget.dataset.info)
+      }
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */

wechat/pages/my/my.wxml

@@ -7,13 +7,13 @@
     </view>
     <view wx:if="{{ isLogin === true }}" class="other">
       <view class="username">{{ userInfo.nickName }}</view>
-      <view class="phone">
+      <!-- <view class="phone">
         <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" 
         open-type='getPhoneNumber' bindgetphonenumber='getPhoneNumber'
         round size="small">
           绑定手机
         </van-button>
-      </view>
+      </view> -->
       <!-- <view class="phone">
         <van-tag type="success">手机</van-tag>
         <text>12345678900</text>
@@ -27,9 +27,7 @@
 
 <view class="tips">
   <van-cell-group inset>
-    <van-cell title="公司简介" size="large" icon='/icons/jianjie.png' is-link/>
+    <van-cell wx:for="{{ items }}" title="{{item.name}}" size="large" icon='{{ item.icon }}' bindtap="lookMore" data-info='{{ item }}' is-link/>
-    <van-cell title="关于我们" size="large" icon='/icons/about.png' is-link/>
-    <van-cell title="加入我们" size="large" icon='/icons/join.png' is-link/>
     <van-cell title="意见反馈" size="large" icon='/icons/suggest.png' is-link 
       url='/pages/feedBack/feedBack' link-type='navigateTo'
     />

wechat/project.private.config.json

@@ -36,6 +36,12 @@
         {
           "name": "pages/feedBack/feedBack",
           "pathName": "pages/feedBack/feedBack",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/add/add",
+          "pathName": "pages/add/add",
           "scene": null
         }
       ]