Browse Source

feature:优化首页列表的UI

zeng.chen 1 year ago
parent
commit
ad9be01c33
3 changed files with 69 additions and 69 deletions
  1. 5 3
      pages/home/home.js
  2. 20 20
      pages/home/home.wxml
  3. 44 46
      pages/home/home.wxss

+ 5 - 3
pages/home/home.js

@@ -142,6 +142,7 @@ Page({
       var key = 'home_device_list' + wx.getUserInfo().userId;
       var saveStr = wx.getStorageSync(key) || "[]";
       var devList = JSON.parse(saveStr);
+      console.log("获取设备1:"+saveStr);
       this.setData({
         deviceList: devList
       });
@@ -154,20 +155,21 @@ Page({
         getBackData: res => {
           var key = 'home_device_list' + wx.getUserInfo().userId;
           var saveStr = wx.getStorageSync(key) || "[]";
-
+          var backData = res["backData"];
           var oldList = JSON.parse(saveStr);
           var findElement;
           for (let index = 0; index < oldList.length; index++) {
             const element = oldList[index];
-            if (element.address == res.address) {
+            if (element.address == backData.address) {
               findElement = element;
               break;
             }
           }
+          console.log("获取设备:"+JSON.stringify(backData));
           if (findElement) {
             oldList.pop(findElement);
           }
-          oldList.push(res);
+          oldList.push(backData);
 
           wx.setStorageSync(key, JSON.stringify(oldList));
           this.setData({ deviceList: oldList });

+ 20 - 20
pages/home/home.wxml

@@ -3,30 +3,30 @@
   <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>
-  <swiper class="bannerC" indicator-dots="true" autoplay="3000">
-    <swiper-item class="bannerItemC" wx:for="{{bannerList}}" wx:key="item">
+  <view class="hello" style="margin-top: {{navBarHeight}};">下午好,昵称XXX</view>
+  <swiper class="banner" indicator-dots="true" autoplay="3000">
+    <swiper-item class="bannerItem" wx:for="{{bannerList}}" wx:key="item">
       <image src="{{item}}" mode="widthFix" style="flex: 1;" />
     </swiper-item>
   </swiper>
-  <view class="device_empty_tips" bind:tap="addDeviceTap" >
-      + 添加设备
-    </view>
-  <scroll-view class="deviceScrollClass" scroll-y="true">
-    <view class="deviceClass" wx:for="{{deviceList}}" wx:key="item" >
-          <image class="device_img" src="{{item.pic}}" mode="scaleToFill" />
-          <view class="detailClass" style="flex-direction: row;">
-            <view class="power">
-              <image class="power_img" src="../../img/dl1.png" mode="scaleToFill" />
-              <text class="power_text">{{item.power}}</text>
-            </view>
-            <view class="device_name">{{item.devName}}</view>
-            <!-- <view class="device_delete" bind:tap="deleteDeviceTap">删除</view> -->
-<button class="device_delete" bind:tap="deleteDeviceTap">删除</button>
-          </view>
-
-          <image class="detail_page" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
+  <view class="device_add" bind:tap="addDeviceTap">
+    + 添加设备
+  </view>
+  <scroll-view scroll-y="true">
+    <view class="deviceClass" wx:for="{{deviceList}}" wx:key="item">
+      <image class="device_img" src="{{item.pic}}" mode="scaleToFill" />
+      <view class="detailClass">
+        <view class="power">
+          <image src="../../img/dl1.png" mode="scaleToFill" />
+          <text>{{item.power}}</text>
         </view>
+        <text class="device_name">{{item.devName}}</text>
+        <view class="device_delete" bind:tap="deleteDeviceTap">删除</view>
+        <!-- <button class="device_delete" size="mini" bind:tap="deleteDeviceTap">删除</button> -->
+      </view>
+<view style="flex: 1; "></view>
+      <image class="detail_page" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />
+    </view>
 
     <button style="margin-bottom: 160rpx;" type="primary" bindtap="changeRole">example-改变权限</button>
 

+ 44 - 46
pages/home/home.wxss

@@ -1,98 +1,96 @@
 /* pages/home/home.wxss */
 
-.container {
+/* .container {
   margin-left: 16rpx;
   margin-right: 16rpx;
   display: flex;
   flex-direction: column;
-}
+} */
 
-.container .helloC {
+.container .hello {
   margin-top: 32rpx;
 }
 
-.container .bannerC {
+.container .banner {
   margin-top: 16rpx;
-  margin-bottom: 16rpx; 
+  margin-bottom: 16rpx;
   height: 160rpx;
-  
 }
 
-.bannerItemC {
-  width: 100%;
-  height: 160rpx;
+.bannerItem {
+  /* width: 100%;
+  height: 100%; */
   display: flex;
 }
 
-.device_empty_tips {
+.device_add {
   display: flex;
   flex: 1;
   justify-content: center;
+  margin-bottom: 16rpx;
 }
 
-.deviceScrollClass {
+.deviceClass {
+  display: flex;
+  margin-bottom: 16rpx;
   margin-top: 16rpx;
-  /* margin-bottom: 16rpx; */
-  padding-bottom: 16rpx;
+  flex-direction: row;
 }
 
- .deviceClass {
-  flex: 1;
-  width: 100%;
-  display: inline-flex;
-  margin-bottom: 16rpx;
-margin-top: 16rpx;
-} 
-
 .device_img {
-  width: 120rpx;
-  height: 120rpx;
-margin-top: 16rpx;
-/* margin-bottom: 16rpx; */
-margin-left: 16rpx;
+  width: 180rpx;
+  height: 180rpx;
+  margin-top: 16rpx;
+  /* margin-bottom: 16rpx; */
+  margin-left: 16rpx;
 }
 
 .detailClass {
   margin-left: 16rpx;
-  margin-bottom: 16rpx;
-  margin-top: 16rpx; 
-  flex: 1;
+  /* margin-bottom: 16rpx; */
+  margin-top: 16rpx;
+  flex-direction: column;
+  /* flex-wrap: wrap; */
+  display: flex;
+  /* box-sizing: border-box; */
 }
 
-.power {
-  /* width: 100rpx; */
+.detailClass .power {
+  align-items: center;
+  flex-direction: row;
   display: flex;
+  align-self: start;
 }
 
-.power_img {
-  width: 56rpx;
-  height: 56rpx;
+.power>image {
+  width: 50rpx;
+  height: 50rpx;
 }
 
-.power_text {
-  width: 56rpx;
-  height: 56rpx;
-}
+.power>text {
+  margin-left: 8rpx;
 
+}
 
-.devicename {
+.device_name {
   margin-top: 4rpx;
+  margin-bottom: 6rpx;
 }
 
 .device_delete {
-  display: inline;
   padding-left: 16rpx;
   padding-right: 16rpx;
-padding-top: 8rpx;
-padding-bottom: 8rpx;
+  padding-top: 8rpx;
+  padding-bottom: 8rpx;
+  align-self: start;
+  background-color: seagreen;
 }
 
 .detail_page {
-margin-top: 16rpx;
-/* margin-left: 116rpx; */
+  margin-top: 16rpx;
   margin-right: 16rpx;
-  width: 16rpx;
-  height: 16rpx;
+  width: 44rpx;
+  height: 44rpx;
 }
 
 .device-empty-tips {