feature：加入设备详情界面

app.json

@@ -13,7 +13,9 @@
     "pages/me/me",
     "pages/download/download",
     "pages/wakeList/wakeList",
-    "pages/aboutInfo/aboutInfo"
+    "pages/aboutInfo/aboutInfo",
+    "pages/home/home",
+    "pages/detail/detail"
   ],
   "tabBar": {
     "borderStyle": "black",
@@ -25,6 +27,12 @@
         "selectedIconPath": "./img/index_action.png"
       },
       {
+        "pagePath": "pages/home/home",
+        "text": "首页2",
+        "iconPath": "./img/index_unaction.png",
+        "selectedIconPath": "./img/index_action.png"
+      },
+      {
         "pagePath": "pages/me/me",
         "text": "我的",
         "iconPath": "./img/me_unaction.png",

pages/detail/detail.js

@@ -0,0 +1,69 @@
+// pages/detail/detail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '设备详情', //导航栏 中间的标题
+    },
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/detail/detail.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "./../components/navbar/navbar"
+  }
+}

pages/detail/detail.wxml

@@ -0,0 +1,4 @@
+<view>
+  <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
+  </nav-bar>
+</view>

pages/detail/detail.wxss

@@ -0,0 +1 @@
+/* pages/detail/detail.wxss */

pages/home/home.js

@@ -0,0 +1,109 @@
+// pages/home/home.js
+const app = getApp();
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    MenuButtonheight: app.globalData.MenuButtonheight,
+    MenuButtonTop: app.globalData.MenuButtonTop,
+    nvabarData: {
+      nvabarData: {
+        showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+        title: 'Oh Play', //导航栏 中间的标题
+        callback() {
+          wx.navigateBack({
+            delta: 1,
+          })
+        }
+      },
+      isNotruter: false,
+      deviceList: [],
+      bannerList:[],
+      isLoginWx: false,
+      selectIndex: -1,
+    }
+  },
+  // 删除设备
+  deleteDeviceTap: function () {
+
+  },
+  // 设备详情页
+  devieDetailPageTap: function () {
+
+  },
+
+  deviceItemTap: function() {
+    this.setData({
+      // selectIndex = index
+    }); 
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.setData({
+      deviceList: [
+        {"devName": "名称1","state": "online","pic": "url","power": 40,},
+        {"devName": "名称2","state": "online","pic": "url","power": 50,},
+        {"devName": "名称3","state": "online","pic": "url","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"],
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/home/home.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "nav-bar": "./../components/navbar/navbar"
+  }
+}

pages/home/home.wxml

@@ -0,0 +1,33 @@
+<!-- pages/home/home.wxml -->
+<view class="container">
+  <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'></nav-bar>
+
+  <view class="helloC" style="margin-top: {{navBarHeight}};">下午好，昵称XXX</view>
+  <!-- <view class="bannerC">banner</view> -->
+  <swiper class="bannerC" indicator-dots="true" autoplay="3000">
+    <swiper-item class="bannerItemC" wx:for="{{bannerList}}" wx:for-item="item">
+      <image src="{{item}}" mode="scaleToFill"/>
+    </swiper-item>
+  </swiper>
+  <scroll-view class="deviceScrollClass" scroll-y="true">
+    <view class="deviceClass" wx:for="{{deviceList}}" data-index="{{index}}">
+        <!-- <view class="deviceItemC" bind:tap="deviceItemTap"> -->
+          <image class="deviceImg" src="../../img/g.png" mode="scaleToFill" />
+          <view class="detailClass" style="flex-direction: row;">
+            <view class="powerClass">
+              <image class="powerImg" src="../../img/dl1.png" mode="scaleToFill" />
+              <view class="powerText">电量</view>
+            </view>
+            <view class="deviceName">小王子OTR</view>
+            <view class="deviceDeleteClass" bind:tap="deleteDeviceTap">删除</view>
+
+          </view>
+
+          <image class="detailPageC" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
+        </view>
+      <!-- </view> -->
+    <view class="deviceEmptyClass" wx:if="{{deviceList && deviceList.deviceList==0 || !isLoginWx}}">
+      + 添加设备
+    </view>
+  </scroll-view>
+</view>

pages/home/home.wxss

@@ -0,0 +1,89 @@
+/* pages/home/home.wxss */
+
+.container {
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.container .helloC {
+  margin-top: 32rpx;
+}
+
+.container .bannerC {
+  margin-top: 16rpx;
+  margin-bottom: 16rpx; 
+  height: 160rpx;
+  
+}
+
+.bannerItemC {
+  width: 100%;
+}
+
+.deviceScrollClass {
+  margin-top: 16rpx;
+  margin-bottom: 16rpx;
+}
+
+ .deviceClass {
+  flex: 1;
+  width: 100%;
+  display: inline-flex;
+} 
+
+.deviceItemC {
+  width: 100%;
+  height: 160rpx;
+  background-color: skyblue;
+/* margin-bottom: 16rpx;
+margin-top: 16rpx; */
+
+}
+
+.deviceImg {
+  width: 120rpx;
+  height: 120rpx;
+margin-top: 16rpx;
+/* margin-bottom: 16rpx; */
+margin-left: 16rpx;
+}
+
+.detailClass {
+  margin-left: 16rpx;
+  margin-bottom: 16rpx;
+  margin-top: 16rpx; 
+  flex: 1;
+}
+
+.powerClass {
+  /* width: 100rpx; */
+  display: flex;
+}
+
+.powerImg {
+  width: 56rpx;
+  height: 56rpx;
+}
+
+.deviceName {
+  margin-top: 4rpx;
+}
+
+.deviceDeleteClass {
+  margin-bottom: 16rpx;
+}
+
+.detailPageC {
+margin-top: 16rpx;
+/* margin-left: 116rpx; */
+  margin-right: 16rpx;
+  width: 16rpx;
+  height: 16rpx;
+}
+
+.deviceEmptyClass {
+  margin-top: 16rpx;
+
+}

pages/me/me.js

@@ -1,5 +1,3 @@
-
-
 // pages/me/me.ts
 const app = getApp();
 
@@ -28,7 +26,7 @@ Page({
     wx.getStorage({
       key: "userInfo",
       success(res) {
-        if(!res.data.phone){
+        if (!res.data.phone) {
           return;
         };
         _this.setData({
@@ -40,18 +38,21 @@ Page({
     })
   },
   goabout() {
+    // wx.navigateTo({
+    //   url: './../about/about',
+    // })
     wx.navigateTo({
-      url: './../about/about',
-    })
+      url: './../detail/detail',
+    });
   },
   gologin() {
     // 
     const _this = this;
-    if(this.data.islogin){
+    if (this.data.islogin) {
       // 退出登录
       wx.removeStorage({
         key: 'userInfo',
-        success (res) {
+        success(res) {
           _this.setData({
             islogin: false,
             userName: "未登录",
@@ -71,7 +72,7 @@ Page({
         url: './../login/login',
       });
     }
-    
+
   },
   /**
    * 生命周期函数--监听页面初次渲染完成