浏览代码

feafeature:修改设备详情页的UI

zeng.chen 8 月之前
父节点
当前提交
1dfd44fde2
共有 4 个文件被更改,包括 108 次插入37 次删除
  1. 49 11
      pages/deviceDetail/detail.js
  2. 15 8
      pages/deviceDetail/detail.wxml
  3. 30 8
      pages/deviceDetail/detail.wxss
  4. 14 10
      request/deviceListRequest.js

+ 49 - 11
pages/deviceDetail/detail.js

@@ -1,28 +1,66 @@
 // pages/deviceDetail/detail.js
 // pages/deviceDetail/detail.js
+
+const BtHelper = require('../../devices/bt_helper');
+const { deviceVersion } = require('../../request/deviceListRequest')
+import EventManager from '../../utils/event_bus'
+
 Page({
 Page({
   data: {
   data: {
+    nvabarData: {
+      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
+      title: '设备详情', //导航栏 中间的标题
+    },
+    hasNew: true,
     // 页面数据
     // 页面数据
-
+    device: getApp().globalData.device,
+    btHelper: null,
   },
   },
-  onLoad: function () {
-    // 页面加载时的逻辑
+  checkOtaVersion(device) {
+    let _this = this;
+    deviceVersion(device.clienlType, device.connectType, device.version).then(res => {
+      console.log(res);
+      let updateData = res.data;
+      let hasNewVersion = updateData.isEnforcement === 1 || updateData.isEnforcement === 2;
+      _this.setData({
+        hasNew: hasNewVersion,
+      });
+    })
   },
   },
 
 
-  goToAccountSecurity: function () {
+
+  goToWallpaper: function () {
+
     wx.navigateTo({
     wx.navigateTo({
-      url: '/pages/accountSecurity/accountSecurity'
+      url: '/pages/piano/wallpaper/wallpaper'
     });
     });
   },
   },
 
 
-  goToPrivacySettings: function () {
+  goToOta: function () {
+
     wx.navigateTo({
     wx.navigateTo({
-      url: '/pages/privacySettings/privacySettings'
+      url: '/pages/piano/wallpaper/wallpaper'
     });
     });
   },
   },
 
 
-  goToNotificationSettings: function () {
-    wx.navigateTo({
-      url: '/pages/notificationSettings/notificationSettings'
-    });
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function () {
+    let device = getApp().globalData.device;
+    if (!device.connect) {
+      // btHelper
+      wx.showToast({
+        title: '设备已经失去连接',
+      })
+      return;
+    }
+
+    const btHelper = BtHelper.getInstance();
+    btHelper.getVersion()
+
+    this.data.btHelper = btHelper;
+    this.checkOtaVersion(device);
+    EventManager.addNotification(CmdEvent,)
   },
   },
+
 })
 })

+ 15 - 8
pages/deviceDetail/detail.wxml

@@ -2,21 +2,28 @@
 <view class="container">
 <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>
     <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="img_section">
     <view class="img_section">
-        <image src="../../images/icon_arrow.png" class="avatar"></image>
+        <!-- <image src="{{device.img}}" class="avatar"></image> -->
+        <image src="https://music-play.oss-cn-shenzhen.aliyuncs.com/device/20220909100711728016597.png" class="avatar"></image>
     </view>
     </view>
     <view class="section">
     <view class="section">
-        <view class="item" bindtap="goToAccountSecurity">
+        <view class="item" bindtap="goToWallpaper">
             <text class="label">壁纸设置</text>
             <text class="label">壁纸设置</text>
             <!-- <text class="arrow">></text> -->
             <!-- <text class="arrow">></text> -->
-            <image class="arrow" src="../../images/icon_arrow.png"></image>
+            <image class="arrow" src="../../images/common/icon_arrow.png"></image>
         </view>
         </view>
         <view class="item" bindtap="goToAccountSecurity">
         <view class="item" bindtap="goToAccountSecurity">
-            <text class="label">省电模式</text>
-            <image class="arrow" src="../../images/icon_arrow.png"></image>
+            <view class="left-content">
+                <text class="label">省电模式</text>
+                <image class="question" src="../../images/common/icon_question.png"></image>
+            </view>
+            <image class="arrow" src="../../images/common/icon_arrow.png"></image>
         </view>
         </view>
-        <view class="item" bindtap="goToPrivacySettings">
-            <text class="label">固件信息</text>
-            <image class="arrow" src="../../images/icon_arrow.png"></image>
+        <view class="item" bindtap="goToOta">
+            <view class="left-content">
+                <text class="label">固件信息</text>
+                <view wx:if="{{hasNew}}" class="red"></view>
+            </view>
+            <image class="arrow" src="../../images/common/icon_arrow.png"></image>
         </view>
         </view>
     </view>
     </view>
 </view>
 </view>

+ 30 - 8
pages/deviceDetail/detail.wxss

@@ -1,7 +1,5 @@
 /* pages/deviceDetail/detail.wxss */
 /* pages/deviceDetail/detail.wxss */
-.container {
-    padding: 20px;
-}
+.container {}
 
 
 .img_section {
 .img_section {
     width: 100%;
     width: 100%;
@@ -30,17 +28,41 @@
 
 
 .item {
 .item {
     display: flex;
     display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
     justify-content: space-between;
     justify-content: space-between;
+    margin-inline: 32rpx;
+    height: 120rpx;
+}
+
+.left-content {
+    display: flex;
     align-items: center;
     align-items: center;
-    padding: 10px 0;
-    border-bottom: 1px solid #eee;
 }
 }
 
 
 .label {
 .label {
-    font-size: 14px;
+    font-size: 16px;
+    color: #333333;
+    margin-left: 32rpx;
 }
 }
 
 
 .arrow {
 .arrow {
-    font-size: 14px;
-    color: #999;
+    width: 20px;
+    height: 20px;
+    margin-right: 16rpx;
+}
+
+.red {
+    width: 10rpx;
+    height: 10rpx;
+    margin-top: -14rpx;
+    background-color: #6546A3;
+    border-radius: 50%;
+    margin-left: 12rpx;
+}
+
+.question {
+    margin-left: 8rpx;
+    width: 40rpx;
+    height: 40rpx;
 }
 }

+ 14 - 10
request/deviceListRequest.js

@@ -1,23 +1,27 @@
-const {request} = require('../utils/util.js')
+const { request } = require('../utils/util.js')
 import util from "../utils/util.js";
 import util from "../utils/util.js";
 
 
-module.exports={
+module.exports = {
   // 设备列表
   // 设备列表
-  deviceList:(data)=>{
+  deviceList: (data) => {
     return request("/mini/wx/device/base/deviceList", data, "GET", util.jsonType, false)
     return request("/mini/wx/device/base/deviceList", data, "GET", util.jsonType, false)
-	},
-	
+  },
+
   // 设备类型列表
   // 设备类型列表
-  deviceTypeList:(data)=>{
+  deviceTypeList: (data) => {
     return request("/mini/wx/device/base/typeList", data, "GET", util.jsonType, false)
     return request("/mini/wx/device/base/typeList", data, "GET", util.jsonType, false)
   },
   },
   // 设备分类列表
   // 设备分类列表
-  deviceCategoryList:(data)=>{
+  deviceCategoryList: (data) => {
     return request("/mini/wx/device/base/categoryList", data, "GET",)
     return request("/mini/wx/device/base/categoryList", data, "GET",)
   },
   },
   // 设备版本 OTA
   // 设备版本 OTA
-  deviceVersion:(data)=>{
-    return request("/mini/wx/device/base/appDeviceVersionGet", data, "GET",)
+  deviceVersion: (clientType, type, version) => {
+    return request("/mini/wx/device/base/appDeviceVersionGet", {
+      clientType: clientType,
+      type: type,
+      version: version,
+    }, "GET",)
   },
   },
-  
+
 }
 }