Explorar el Código

feature:优化设备列表界面

zeng.chen hace 8 meses
padre
commit
c7de9b9358

+ 16 - 1
pages/deviceConMode/index.js

@@ -17,7 +17,21 @@ Page({
       }
     },
     isNotruter: false,
-    model: ""
+    model: 0,
+    typeList: [
+      {
+        "icon": "../../images/device/mode_wifi.png",
+        "text": "WiFi模式",
+      },
+      {
+        "icon": "../../images/device/mode_ble.png",
+        "text": "蓝牙模式",
+      },
+      {
+        "icon": "../../images/device/mode_g4.png",
+        "text": "4G模式",
+      },
+    ]
   },
   getModeName(curItem) {
     // 设备类型:1-蓝牙,2-Wifi,3-传统蓝牙,4-4G
@@ -31,6 +45,7 @@ Page({
     }
     return str;
   },
+  clickNextTap(){},
   /**
    * 生命周期函数--监听页面加载
    */

+ 14 - 30
pages/deviceConMode/index.wxml

@@ -1,39 +1,23 @@
 <!-- pages/deviceConMode/index.wxml -->
 <!-- pages/deviceRoter0/deviceRoter0.wxml -->
-<view class="deviceRoter">
-  <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="roterps">
-    <text class="setDeviceModel">开启设备选择{{model}}</text>
-    <text class="setDeviceModelTips">开启后点击“下一步”</text>
-    <view class="devicePic">
-      <block wx:for="{{typeList}}">
-        <view class="devicePicItem" bindtap="selectDeviceModel" data-type="{{item.type}}">
-          <image class="select_icon" src="{{item.src}}"></image>
+<nav-bar class="nav_bar_c" 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="main">
+  <image class="model_bg" src="../../images/device/mode_bg.png" mode="aspectFill" />
+  <view class="select_tips">
+    <view class="setDeviceModel main_green">开启设备选择{{model}}</view>
+    <view class="setDeviceModelTips">开启后点击“下一步”</view>
+    <view class="deviceList">
+      <block wx:for="{{typeList}}" wx:key="item">
+        <view class="devicePicItem devicePicItem_{{index}}" bindtap="selectDeviceModel" data-type="{{item.type}}">
+          <image class="select_icon" src="{{index === 0 ? '../../images/device/pay_select.png' : '../../images/device/wake_select_no.png'}}"></image>
           <view class="device_text">
-            <image class="model_icon" src="{{item.src}}"></image>
-            <text class="model_text">开启后点击“下一步”</text>
+            <image class="model_icon" src="{{item.icon}}"></image>
+            <text class="model_text">{{item.text}}</text>
           </view>
         </view>
       </block>
     </view>
-    <text>开启设备并将开关打至WiFi模式,指示灯亮
-起后,即可进入下一步</text>
-    <view wx:if="{{!scopeBluetooth && userFuzzyLocation}}" class="qx">
-      <text bindtap="setBluetooth">开启蓝牙权限</text>
-      <image mode="heightFix" src="./../../img/a.png"></image>
-    </view>
-    <view wx:if="{{!userFuzzyLocation}}" class="qx">
-      <text bindtap="setUserFuzzyLocation">开启定位权限</text>
-      <image mode="heightFix" src="./../../img/a.png"></image>
-    </view>
-  </view>
-  <view class="subBtn">
-    <view class="btn" style="opacity: {{scopeBluetooth && userFuzzyLocation ? '1' : '0.6'}};" bindtap="next">
-      {{scopeBluetooth && userFuzzyLocation ? '下一步' : (!userFuzzyLocation ? '请开启定位权限' : '请开启蓝牙权限') }}
-    </view>
-    <view class="notRoter" wx:if="{{isNotruter}}">
-      <text bindtap="notRoter">暂不链接</text>
-      <image mode="heightFix" src="./../../img/b.png"></image>
-    </view>
   </view>
+  <view class="setDeviceModelTips">开启后点击“下一步”</view>
+<view class="clickNext" bind:tap="clickNextTap">下一步</view>
 </view>

+ 105 - 1
pages/deviceConMode/index.wxss

@@ -1 +1,105 @@
-/* pages/deviceConMode/index.wxss */
+/* pages/deviceConMode/index.wxss */
+
+.main {
+	position: relative;
+	width: 100vw;
+	height: 100vh;
+}
+
+.model_bg {
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	background-size: cover;
+	background-position: center;
+}
+
+.select_tips {
+	position: relative;
+	z-index: 1;
+	padding: 20px;
+}
+
+.devicePicItem {
+	display: flex;
+	align-items: center;
+	padding: 10px;
+
+}
+
+.setDeviceModel {
+	padding: 10px;
+	text-align: center;
+	left: 0;
+	font-size: 32rpx;
+}
+
+.setDeviceModelTips {
+	color: #FFFFFFB3;
+	text-align: center;
+	font-size: 24rpx;
+}
+
+.deviceList {
+	margin-top: 60px;
+}
+
+.devicePicItem {
+	position: relative;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+
+	border-radius: 5px;
+	height: 100rpx;
+	margin-top: 32rpx;
+	background-color: #ffffff0d;
+}
+
+.select_icon {
+	width: 32rpx;
+	height: 32rpx;
+	position: absolute;
+	z-index: 1;
+	top: 16rpx;
+	right: 16rpx;
+}
+
+.device_text {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.model_icon {
+	width: 48rpx;
+	height: 48rpx;
+	margin-right: 10rpx;
+
+}
+
+.model_text {
+	font-size: 32rpx;
+	color: white;
+}
+
+.devicePicItem_0 {
+	margin-left: 32rpx;
+	margin-right: 32rpx;
+}
+
+.devicePicItem_1 {
+	margin-left: 64rpx;
+	margin-right: 64rpx;
+}
+
+.devicePicItem_2 {
+	margin-left: 96rpx;
+	margin-right: 96rpx;
+}

+ 2 - 2
pages/index/index.js

@@ -435,9 +435,9 @@ Page({
     });
   },
   goDeviceConnect() {
-    // routeUtil.jump(route_constant.deviceList)
+    routeUtil.jump(route_constant.detailMode)
 
-    // return;
+    return;
     wx.navigateTo({
       url: './../deviceConnect0/deviceConnect0',
     });

+ 2 - 2
utils/route_constant.js

@@ -2,7 +2,7 @@
 /// 抽奖记录
 const deviceList = "../deviceList/devices";
 // /// 抽奖详情
-// const detail = "../detail/detail";
+const detailMode = "../deviceConMode/index";
 // // 主页
 // const home = "../home/home";
 // // 主页
@@ -10,7 +10,7 @@ const deviceList = "../deviceList/devices";
 module.exports = {
 
     deviceList: deviceList,
-    // order: order,
+    detailMode: detailMode,
     // deviceList: detail,
     // home: home
 }