feature: 整合首页界面

pages/indexCopy/indexCopy.js

@@ -0,0 +1,598 @@
+// index.ts
+// 获取应用实例
+const app = getApp();
+const { login, listByDevice } = require('../../utils/api.js');
+const { isCN } = require('../../utils/util.js');
+let _this = null;
+const interval = null;
+// import routeUtil from '../../utils/route_util.js'
+import routeUtil from '../../utils/route_util'
+import route_constant from '../../utils/route_constant.js'
+
+Page({
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    MenuButtonheight: app.globalData.MenuButtonheight,
+    MenuButtonTop: app.globalData.MenuButtonTop,
+    actionIndex: null,
+    isShowDevicelist: false,
+    luoma: ["Ⅰ", "Ⅱ", "Ⅲ", "Ⅳ", "Ⅴ", "Ⅵ", " Ⅶ", "Ⅷ", "Ⅸ", "Ⅹ", "Ⅺ", "Ⅻ"],
+    channelData: [],
+    deviceList: [],
+    deviceListIndex: null,
+    showLogin: false,
+    isOneLoading: true,
+    uid: null,
+    showDelete: false,
+    isSetWake: false,
+    thisDeviceMac: null,
+    battery: 4, // 0≤电量<20，0格
+    newVersion: false,
+  },
+  onShow() {
+    if ((!this.data.isOneLoading)) {
+      wx.getStorage({
+        key: 'userInfo',
+        fail(res) {
+          // 取消订阅
+          if (_this.data.thisDeviceMac !== null) {
+            app.unsubscribe(`/${_this.data.thisDeviceMac}/user/pub_response`);
+          };
+          _this.setData({
+            showLogin: true,
+          });
+        },
+        success() {
+          if (app.globalData.newDeviceId) {
+            // 获取设备本地数据
+            _this.getDeviceData();
+          } else if (_this.data.deviceListIndex !== null) {
+            // 更新
+            _this.actionDevice(_this.data.deviceListIndex);
+          }
+        }
+      });
+    };
+  },
+  onLoad() {
+    _this = this;
+    // 版本自动更新代码
+    const updateManager = wx.getUpdateManager();
+    updateManager.onUpdateReady(function () {
+      _this.setData({
+        newVersion: true
+      });
+    })
+    updateManager.onUpdateFailed(function () {
+      // 新的版本下载失败
+      wx.showModal({
+        title: '已有新版本咯',
+        content: '请您删除当前小程序，重新打开呦~',
+        showCancel: false
+      })
+    })
+
+    wx.showLoading({
+      title: '加载中',
+    });
+
+    const str = setTimeout(() => {
+      clearTimeout(str);
+      if (_this.data.isOneLoading) {
+        _this.setData({
+          isOneLoading: false,
+        });
+      }
+    }, 500);
+
+    // 获取缓存的频道数据
+    wx.getStorage({
+      key: "channelData",
+      success(res) {
+        _this.setData({
+          channelData: res.data
+        })
+      }
+    });
+    // 登录
+    this.login();
+  },
+  
+  login() {
+    wx.login({
+      success: res => {
+        let phone = undefined;
+        try {
+          var value = wx.getStorageSync('userInfo')
+          if (value) {
+            phone = value.phone || undefined;
+          };
+        } catch (e) {
+          // Do something when catch error
+        };
+        // 请求登录
+        login({ code: res.code, phone }).then((res) => {
+
+          app.globalData.userInfo = res;
+          wx.setStorage({
+            key: "userInfo",
+            data: res
+          });
+          // 需要用授权登录
+          if ((res.isNewUser && res.isNewUser === true) || !phone) {
+            _this.setData({
+              showLogin: true,
+            });
+            return;
+          };
+          // 获取设备本地数据
+          this.getDeviceData();
+
+          _this.setData({
+            showLogin: false,
+          });
+          wx.setStorage({
+            key: "token",
+            data: JSON.stringify({
+              id: res.userId,
+              token: res.accessToken,
+            }),
+          });
+        });
+      },
+    })
+  },
+  getDeviceData() {
+    // 获取设备数据
+    wx.getStorage({
+      key: 'devicelist',
+      success(res) {
+        wx.hideLoading();
+        if (res.data) {
+          const resData = JSON.parse(res.data);
+          _this.setData({
+            deviceList: resData
+          });
+          // 连接mqtt
+          if (app.globalData.client === null) {
+            app.connect();
+          } else if (app.globalData.newDeviceId) {
+            _this.setData({
+              actionIndex: null,
+              deviceListIndex: null,
+            });
+
+            // 监听
+            let topic = `/AIrSMArT_${resData[0].name.split("BLUFI_")[1]}/status/onoffline`;
+            app.subscribe(topic);
+            const Timeout = setTimeout(() => {
+              clearTimeout(Timeout);
+              _this.actionDevice(0);
+            }, 1000);
+          }
+
+          // // 有新设备
+          // if(app.globalData.newDeviceId) {
+          //   _this.setData({
+          //     actionIndex: null,
+          //     deviceListIndex: null,
+          //   });
+          //   let topic = `/AIrSMArT_${resData[0].name.split("BLUFI_")[1]}/status/onoffline`;
+          //   app.subscribe(topic);
+          // }
+        }
+      },
+      fail(e) {
+        wx.hideLoading();
+      }
+    });
+  },
+  // 回调
+  mqttCallback(type, option) {
+    let payloads = null;
+    if (option) {
+      payloads = JSON.parse(option.payload);
+    };
+    switch (type) {
+      case "connect":
+        _this.connectSuccess();
+        break;
+      case "message_onoffline":
+        _this.online(payloads);
+        break;
+      case "message":
+        // 接收设备播放信息
+        if (payloads.type === "get_position" && payloads.other) {
+          let actionIndex = null;
+
+          _this.data.channelData.map((v, index) => {
+            if (v.channelNum === payloads.other.channel) {
+              actionIndex = index;
+            }
+          });
+          _this.setData({
+            actionIndex,
+          });
+        } else if (payloads.type === "play" || payloads.type === "play_state") {
+
+          if (_this.data.deviceListIndex === null) {
+            return;
+          }
+          // 接收设备当前播放状态
+          const obj = {
+            DstDeviceName: _this.getThisDeviceID()
+          }
+          app.PubMsg({ type: "get_position", ...obj });
+        } else if (payloads.type === "get_dev_info") {
+          // 接收设备当前信息
+          this.getchannelData(payloads.other.ProdModel);
+          // 电量
+          _this.setData({
+            battery: _this._battery(payloads.other.Power),
+          })
+          // 当前设备木有设置定时
+          _this.setData({
+            isSetWake: false,
+          });
+          payloads.other.alarm.map((v) => {
+            if (v.enable === "1") {
+              _this.setData({
+                isSetWake: true
+              });
+            }
+          });
+          // 更新信息
+          _this.data.deviceList.map((v, index) => {
+            if (payloads.SrcDeviceName && payloads.SrcDeviceName.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
+              _this.data.deviceList[index].ProdModel = payloads.other.ProdModel;
+              _this.data.deviceList[index].devName = payloads.other.devName;
+            }
+          });
+          // 更新缓存
+          wx.setStorage({
+            key: "devicelist",
+            data: JSON.stringify(_this.data.deviceList),
+            success() {
+              _this.setData({
+                deviceList: _this.data.deviceList
+              })
+            }
+          });
+        } else if (payloads.type === "battery" && payloads.other) {
+          _this.setData({
+            battery: _this._battery(payloads.other.battery),
+          })
+        }
+        break;
+      default:
+
+    }
+  },
+  // 格式化电量
+  _battery(battery) {
+    let _battery = 0;
+    if (battery < 20) {
+      _battery = 0
+    } else if (20 <= battery && battery < 40) {
+      _battery = 1
+    } else if (40 <= battery && battery < 60) {
+      _battery = 2
+    } else if (60 <= battery && battery < 80) {
+      _battery = 3
+    } else if (80 <= battery && battery <= 100) {
+      _battery = 4
+    } else if (battery > 100) {
+      _battery = 5
+    };
+    return _battery
+  },
+  connectSuccess() {
+    // 订阅设备在线信息
+    _this.subscribeDevicesStatus();
+  },
+  online(payloads) {
+    // 设置在线状态
+    _this.data.deviceList.map((v, index) => {
+      if (payloads.uuid && payloads.uuid.indexOf(v.name.split("BLUFI_")[1]) !== -1) {
+        _this.data.deviceList[index].state = payloads.state;
+      }
+    });
+    _this.setData({
+      deviceList: _this.data.deviceList,
+    });
+    // 更新缓存
+    wx.setStorage({
+      key: "devicelist",
+      data: JSON.stringify(_this.data.deviceList)
+    });
+    // 如没有选中，选中最新的
+    (() => {
+      if (_this.data.deviceListIndex === null) {
+        let itue = false;
+        _this.data.deviceList.map((v, index) => {
+          if (v.state === "online" && !itue) {
+            itue = true;
+            _this.actionDevice(index);
+          }
+        });
+      }
+      //  else {
+      //   _this.actionDevice(_this.data.deviceListIndex);
+      // };
+
+    })();
+
+    // 当前播放设备离线
+    if (_this.data.deviceListIndex !== null && _this.data.deviceList[_this.data.deviceListIndex].state !== "online") {
+      _this.setData({
+        actionIndex: null,
+        deviceListIndex: null,
+      });
+    };
+  },
+  // 订阅设备在线状态
+  subscribeDevicesStatus() {
+    this.data.deviceList.forEach((value) => {
+      let topic = `/AIrSMArT_${value.name.split("BLUFI_")[1]}/status/onoffline`;
+      app.subscribe(topic);
+    })
+  },
+
+  // 订阅消息
+  subscribeCurrDevice() {
+    if (!(app.globalData.client && app.globalData.client.connected)) {
+      console.log("未连接MQTT服务器");
+      const str = setInterval(() => {
+        clearInterval(str);
+        _this.subscribeCurrDevice();
+      }, 500);
+      return;
+    };
+    if (this.data.deviceList.length === 0 || this.data.deviceListIndex === null) {
+      return
+    };
+    let topic = `/AIrSMArT_${this.data.deviceList[this.data.deviceListIndex].name.split("BLUFI_")[1]}/user/pub_response`;
+    app.subscribe(topic);
+    const obj = {
+      DstDeviceName: _this.getThisDeviceID()
+    };
+    app.PubMsg({ type: "get_dev_info", ...obj });
+  },
+
+  isShowDevicelistFun() {
+    this.setData({
+      isShowDevicelist: !_this.data.isShowDevicelist
+    })
+  },
+  actionMusic(e) {
+    if (e.currentTarget.dataset.index === this.data.actionIndex) {
+      return;
+    };
+    if (this.data.deviceListIndex === null) {
+      wx.showToast({
+        title: '请选择设备',
+        icon: "none"
+      })
+      return;
+    };
+    this.setData({
+      actionIndex: e.currentTarget.dataset.index
+    });
+    const other = {
+      "url": "",
+      "media_data": "",
+      "user_id": `${app.globalData.userInfo.deviceUid}`,
+      "timestamp": `${Math.round(new Date() / 1000)}`,
+      "channel_id": `${this.data.channelData[e.currentTarget.dataset.index].channelNum}`,
+      "order": "",
+      "resource_from": "",
+      "songAlbumID": "",
+      "version": 3,
+      "is_debug": app.globalData.is_debug
+    };
+    app.PubMsg({
+      type: "play",
+      DstDeviceName: _this.getThisDeviceID(),
+      other
+    });
+  },
+  actionDeviceIndex(e) {
+    if (e.currentTarget.dataset.index === this.data.deviceListIndex) {
+      return
+    };
+    this.actionDevice(e.currentTarget.dataset.index)
+  },
+
+  actionDevice(index) {
+    const device = this.data.deviceList[index];
+    if (device.state !== "online") {
+      return;
+    };
+    // 取消订阅
+    if (this.data.thisDeviceMac !== null) {
+      app.unsubscribe(`/${this.data.thisDeviceMac}/user/pub_response`);
+    };
+
+    this.setData({
+      deviceListIndex: index,
+      thisDeviceMac: `AIrSMArT_${this.data.deviceList[index].name.split("BLUFI_")[1]}`
+    });
+
+    // app.PubMsg({
+    //   type: "get_dev_info",
+    //   DstDeviceName: _this.getThisDeviceID()
+    // });
+    this.subscribeCurrDevice();
+  },
+  getThisDeviceID() {
+    return `AIrSMArT_${this.data.deviceList[this.data.deviceListIndex].name.split("BLUFI_")[1]}`
+  },
+  goLogin() {
+    wx.navigateTo({
+      url: './../login/login',
+    });
+  },
+  goDeviceConnect() {
+    routeUtil.jump(route_constant.deviceList)
+
+    return;
+    wx.navigateTo({
+      url: './../deviceConnect0/deviceConnect0',
+    });
+    this.setData({
+      isShowDevicelist: false
+    })
+  },
+  getchannelData(clientType) {
+    let _this = this;
+    if (this.data.deviceListIndex === null) {
+      return;
+    };
+    listByDevice({ clientType }).then((res) => {
+      _this.setData({
+        channelData: res
+      });
+      // 接收设备当前播放状态
+      const obj = {
+        DstDeviceName: _this.getThisDeviceID()
+      }
+      app.PubMsg({ type: "get_position", ...obj });
+      wx.setStorage({
+        key: "channelData",
+        data: res
+      });
+
+      // 有新设备
+      if (app.globalData.newDeviceId) {
+        app.globalData.newDeviceId = null;
+        return;
+        // 去掉此功能，先留着吧
+        // const other= {
+        //   "url": "",
+        //   "media_data": "",
+        //   "user_id": `${app.globalData.userInfo.deviceUid}`,
+        //   "timestamp": `${Math.round(new Date() / 1000)}`,
+        //   "channel_id": `${res[1].channelNum}`,
+        //   "order": "",
+        //   "resource_from": "",
+        //   "songAlbumID":"",
+        //   "version":3,
+        //   "is_debug": app.globalData.is_debug
+        // };
+        // app.PubMsg({
+        //   type: "play",
+        //   DstDeviceName: _this.getThisDeviceID(),
+        //   other
+        // });
+      }
+
+    })
+  },
+  showDelete() {
+    // wx.navigateTo({
+    //   url: './../deviceRoter3/deviceRoter3',
+    // })
+    this.setData({
+      showDelete: !this.data.showDelete
+    });
+  },
+  deleteDevice(e) {
+
+    const id = this.data.deviceList[e.currentTarget.dataset.index].deviceId;
+    let name = _this.data.deviceListIndex !== null ? this.data.deviceList[_this.data.deviceListIndex].name : null;
+    const deviceList = this.data.deviceList.filter((v, i) => {
+      return id !== v.deviceId
+    });
+    // 取消订阅
+    app.unsubscribe(`/AIrSMArT_${_this.data.deviceList[e.currentTarget.dataset.index].name.split("BLUFI_")[1]}/user/pub_response`);
+
+    wx.setStorage({
+      key: "devicelist",
+      data: JSON.stringify(deviceList),
+      success() {
+
+        _this.setData({
+          deviceList,
+          thisDeviceMac: null
+        });
+
+        // 当前没有设备
+        if (deviceList.length === 0) {
+          _this.setData({
+            showDelete: false,
+            actionIndex: null,
+            deviceListIndex: null,
+            isShowDevicelist: false,
+          });
+        }
+
+        if (_this.data.deviceListIndex === null) {
+          return
+        };
+        if (e.currentTarget.dataset.index === _this.data.deviceListIndex) {
+          let index_ = null;
+          deviceList.map((v, index) => {
+            if (v.state === "online" && index_ === null) {
+              index_ = index;
+            }
+          });
+          if (index_ !== null) {
+            _this.actionDevice(index_);
+          } else {
+            _this.setData({
+              actionIndex: null,
+              deviceListIndex: null,
+            });
+          };
+        } else {
+          deviceList.map((v, index) => {
+            if (v.name === name) {
+              _this.setData({
+                deviceListIndex: index,
+              });
+            }
+          });
+        }
+      }
+    })
+
+  },
+  goWake() {
+    if (this.data.deviceListIndex === null) {
+      return;
+    };
+    wx.navigateTo({
+      url: './../deviceWake/deviceWake?deviceId=' + this.data.deviceList[this.data.deviceListIndex].deviceId + "&clientType=" + this.data.deviceList[this.data.deviceListIndex].ProdModel,
+    });
+
+  },
+  goChnnel() {
+    wx.setStorage({
+      key: "channelDeta",
+      data: this.data.channelData[this.data.actionIndex],
+      success() {
+        wx.navigateTo({
+          url: './../channelDetails/channelDetails'
+        })
+      }
+    })
+
+  },
+  updata() {
+    // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+    wx.getUpdateManager().applyUpdate()
+  },
+  updataClone() {
+    this.setData({
+      newVersion: false
+    })
+  },
+  onUnload() {
+    if (app.globalData.client === null) {
+      return;
+    };
+    app.globalData.client.end(true);
+    app.globalData.client.end(true);
+    app.globalData.client = null;
+  },
+})

pages/indexCopy/indexCopy.json

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

pages/indexCopy/indexCopy.wxml

@@ -0,0 +1,145 @@
+<!--index.wxml-->
+<view class="container">
+  <view class='nav-wrap' style='height: calc({{navBarHeight}}px - {{MenuButtonTop}}px); padding-top: {{MenuButtonTop}}px;'>
+     <view wx:if="{{deviceList && deviceList.length > 0 && !showLogin}}" bindtap="isShowDevicelistFun" class="nav-info" style="height: {{ MenuButtonheight }}px;">
+        <image class="device-pic" mode="heightFix"  src="./../../img/min.png"></image>
+        <text>{{deviceList[deviceListIndex].devName}}</text>
+        <image class="j" mode="heightFix" src="./../../img/{{isShowDevicelist ? 'j_top' : 'j_bottom'}}.png"></image>
+     </view>
+     
+     <view style="height: {{ MenuButtonheight }}px;" bindtap="goDeviceConnect" class="nav-info" wx:elif="{{deviceList && deviceList.length === 0 && !showLogin}}" >
+      <image class="z" mode="heightFix" src="./../../img/z.png"></image>
+      <text>连接设备</text>
+    </view>
+    
+     <view style="height: {{ MenuButtonheight }}px;" wx:elif="{{showLogin}}" class="nav-info" >
+      <image class="z" mode="heightFix" src="./../../img/z.png"></image>
+      <text bindtap="goLogin">点击登录</text>
+     </view>
+  </view>
+  <view class="mair" style="height: calc(100vh - 22rpx - {{navBarHeight}}px);">
+    <view wx:if="{{isShowDevicelist}}" class="deviceList" catchtap="isShowDevicelistFun">
+      <view class="mz">
+        <view class="li-view"  wx:for="{{deviceList}}">
+          <view bindtap="actionDeviceIndex" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.6'}};" data-index="{{index}}"class="li {{deviceListIndex === index ? 'action' : ''}}">
+            <image mode="widthFix" src="./../../img/min.png"></image>
+            <text class="deviceName">{{item.devName}}</text>
+            <text class="onli">{{item.state && item.state === "online" ? "在线" : "离线"}}</text>
+            <image data-index="{{index}}" catchtap="deleteDevice" wx:if="{{showDelete}}" class="delete" mode="widthFix" src="./../../img/l.png"></image>
+          </view>
+        </view>
+        <view class="but" style="width: 100%; float: left;">
+          <view  wx:if="{{!showDelete}}"><text style="background-color: #999;" catchtap="showDelete">删除</text></view>
+          <view  wx:if="{{!showDelete}}"><text bindtap="goDeviceConnect">新增</text></view>
+          <view  wx:else><text catchtap="showDelete">完成</text></view>
+        </view>
+      </view>
+    </view>
+    <view class="play-info">
+      <view class="info">
+        <image src="./../../img/blak.png" class="black" mode="scaleToFill"></image>
+        <image src="./../../img/mm.png" class="mode" mode="scaleToFill"></image>
+        <image class="logo" mode="heightFix" src="./../../img/logo.png"></image>
+        <view wx:if="{{actionIndex !== null}}" style="opacity: 0.8; text-shadow:0px 0px 4px #6D00FF;" class="fm">FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}}</view>
+        <view wx:if="{{actionIndex !== null}}" style="opacity: 1;" class="fm">FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} 
+          <image class="gochnnalList" mode="heightFix" src="./../../img/a6.png"></image>
+        </view>
+        <view class="fmMod" bindtap="goChnnel"></view>
+        <view wx:if="{{actionIndex !== null}}" class="thisMusic">
+          <text>当前播放：</text>
+          <view class="scroll-box">
+            <view class="scroll-wrap">
+              <view class="scroll-item">{{channelData[actionIndex].channelName}}</view>
+            </view>
+          </view>
+        </view>
+        <image src="{{'./../../img/dl' + battery + '.png'}}" class="battery" mode="scaleToFill"></image>
+      </view>
+      <view class="wakeMode" bindtap="goWake">
+        <image src="./../../img/woak.png" class="mode" mode="scaleToFill"></image>
+        <image class="wake" mode="heightFix" src="{{isSetWake ? './../../img/n24.png' : './../../img/n23.png' }}"></image>
+        <text>定时</text>
+      </view>
+    </view>
+    <scroll-view class="pd" scroll-y="true">
+      <view class="conm" wx:if="{{channelData && channelData.length > 0}}">
+        <image mode="scaleToFill" class="cz" src="./../../img/cz.png"></image>
+        <view class="musicList" >
+          <view wx:for="{{channelData}}" class="li {{index === actionIndex ? 'action' : ' '}}">
+           <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="zz" src="./../../img/zz.png"></image>
+            <text class="lm">{{luoma[index]}}</text>
+            <view class="musicInfo" data-index="{{index}}" bindtap="actionMusic">
+              <image mode="scaleToFill" class="pic" src="{{item.channelPic ? item.channelPic : './../../img/head_pic.png'}}"></image>
+              <text>{{item.channelName}}</text>
+              <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="svg" src="./../../svg/audio.svg"></image> 
+            </view>
+          </view>
+        </view>
+        <!-- <image src="./../../svg/audio.svg"></image> -->
+      </view>
+    </scroll-view>
+    <!-- 登录 -->
+    <!-- 过审暂时不启用 -->
+    <!-- <view class="gologin" wx:if="{{showLogin}}">
+      <view class="model">
+        <image mode="scaleToFill" src="./../../img/yy.png"></image>
+        <view>
+          <image mode="heightFix" src="./../../img/r.png"></image>
+          <text>享受独有的生活乐趣</text>
+          <view bindtap="goLogin">连接设备</view>
+        </view>
+      </view>
+    </view> -->
+    <!-- 登录启用以下版本 -->
+    <view class="gologin" wx:if="{{showLogin}}">
+      <view class="model">
+        <view bindtap="goLogin" style="position: none; height: auto;" class="loginPic">
+          <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_long.png"></image>
+        </view>
+        <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
+          <view>
+            <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 连接设备 -->
+    <!-- 过审暂时不启用 -->
+    <!-- <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
+      <view class="model">
+        <view>
+          <image mode="heightFix" src="./../../img/n.png"></image>
+          <text>开启专属12频道</text>
+          <view bindtap="goDeviceConnect">连接设备</view>
+        </view>
+      </view>
+    </view> -->
+    <!-- 连接设备启用以下版本 -->
+    <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
+      <view class="model">
+        <view bindtap="goDeviceConnect" style="position: none; height: auto;" class="loginPic">
+          <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_LJ.png"></image>
+        </view>
+        <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
+          <view>
+            <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view wx:if="{{newVersion}}" class="updataminiwx">
+    <view class="mode">
+      <image class="bg" src="./../../img/BG@2x.png" ></image>
+      <view class="updata-view">
+        <image src="./../../img/sj.png"></image>
+        <text class="title">更新检测</text>
+        <text class="tip">检测到新版本，是否重启小程序</text>
+        <view>
+          <text bindtap="updataClone" class="onBut">取消</text>
+          <text bindtap="updata" class="twoBut">确定</text>
+        </view>
+      </view>
+    </view> 
+  </view>
+</view>

pages/indexCopy/indexCopy.wxss

@@ -0,0 +1,549 @@
+/**index.wxss**/
+.container .nav-wrap {
+  backdrop-filter: blur(10rpx);
+  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+}
+
+.container .nav-wrap .nav-info {
+  padding-left: 32rpx;
+  display: flex;
+  align-items: center;
+}
+
+.container .nav-wrap .nav-info .device-pic {
+  height: 36rpx;
+  margin-right: 12rpx;
+}
+
+.container .nav-wrap .nav-info .z {
+  height: 24rpx;
+  margin-right: 12rpx;
+}
+
+.container .nav-wrap .nav-info text {
+  font-size: 28rpx;
+  color: #353535;
+  font-weight: bold;
+  margin-right: 24rpx;
+}
+
+.container .nav-wrap .nav-info .j {
+  height: 16rpx;
+}
+
+.container .mair {
+  width: calc(100% - 52rpx);
+  padding: 20rpx 26rpx 0;
+  height: calc(100vh - 20rpx);
+  position: relative;
+  overflow: hidden;
+}
+
+.container .mair .play-info {
+  width: 100%;
+  padding: 16rpx 0;
+  background: linear-gradient(167deg, #D8D8D8 0%, rgba(238, 238, 238, 0.5) 100%);
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container .mair .play-info .info {
+  width: 550rpx;
+  height: 152rpx;
+  position: relative;
+}
+.container .mair .play-info .wakeMode {
+  width: 96rpx;
+  height: 152rpx;
+  background: linear-gradient(180deg, #000000 0%, #000000 100%);
+box-shadow: inset 2rpx 6rpx 10rpx 0px rgba(255,255,255,0.61), inset 0px -2rpx 4rpx 0px rgba(255,255,255,0.3);
+  border-radius: 12rpx;
+  margin-left: 8rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.container .mair .play-info .wakeMode text {
+  height: 28rpx;
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 28rpx;
+  font-weight: 500;
+  margin-top: 20rpx;
+}
+
+.container .mair .play-info .wakeMode .mode {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 96rpx;
+  height: 152rpx;
+  z-index: 999;
+}
+.container .mair .play-info .info .logo {
+  position: absolute;
+  top: 14rpx;
+  left: 20rpx;
+  height: 48rpx;
+}
+.container .mair .play-info .info .battery {
+  position: absolute;
+  top: 8rpx;
+  right: 16rpx;
+  height: 56rpx;
+  width: 56rpx;
+}
+.container .mair .play-info .info .fm {
+  color: #fff;
+}
+
+.container .mair .play-info .info .black {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 550rpx;
+  height: 152rpx;
+}
+
+.container .mair .play-info .info .mode {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 550rpx;
+  height: 152rpx;
+  z-index: 999;
+}
+
+.container .mair .play-info .info .fm {
+  position: absolute;
+  top: 22rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #6D00FF;
+  line-height: 66rpx;
+  
+}
+.container .mair .play-info .info .fmMod{
+  position: absolute;
+  top: 22rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200rpx;
+  height: 66rpx;
+  z-index: 1000;
+}
+.container .mair .play-info .info .fm .gochnnalList{
+  height: 50rpx;
+  position: absolute;
+  top: 8rpx;
+  left: 100%;
+}
+
+.container .mair .play-info .info .thisMusic {
+  position: absolute;
+  bottom: 26rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 488rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container .mair .play-info .info .thisMusic>text{
+  width: 100rpx;
+  display: inline-block;
+  color: #fff;
+  font-size: 20rpx;
+}
+.container .mair .play-info .info .thisMusic .scroll-box {
+  position: relative;
+  max-width: 388rpx;
+  display: flex;
+  align-items: center;
+}
+.thisMusic .scroll-box .scroll-wrap {
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.thisMusic .scroll-box .scroll-item {
+  /* animation: scroll linear 4s alternate infinite; */
+  float: left;
+  color: #fff;
+  font-size: 20rpx;
+}
+
+@keyframes scroll {
+  0% {
+      margin-left: 0;
+      transform: translateX(0);
+  }
+
+  10% {
+      margin-left: 0;
+      transform: translateX(0);
+  }
+
+  90% {
+      margin-left: 100%;
+      transform: translateX(-100%);
+  }
+
+  100% {
+      margin-left: 100%;
+      transform: translateX(-100%);
+  }
+}
+
+.container .mair .gologin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.container .mair .gologin .model {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #fff;
+}
+
+.container .mair .gologin .model > image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.container .mair .gologin .model > view {
+  /* position: absolute;
+  top: 0;
+  left: 0; */
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container .mair .gologin .model > view > image {
+  display: block;
+  height: 44rpx;
+  margin: 398rpx auto 18rpx;
+}
+
+.container .mair .gologin .model > view text {
+  display: block;
+  width: 100%;
+  font-size: 30rpx;
+  color: #353535;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 66rpx;
+}
+
+/* .container .mair .gologin .model > view > view {
+  width: 226rpx;
+  height: 80rpx;
+  background: #6547A3;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  margin: 0 auto;
+  font-size: 30rpx;
+  color: #fff;
+} */
+.container .mair .goruter .model{
+  background: #fff;
+  height: 100%;
+  width: 100%;
+}
+.container .mair .goruter .model > view > image {
+  display: block;
+  height: 176rpx;
+  margin: 318rpx auto 18rpx;
+}
+.container .pd {
+  position: relative;
+  width: 120vw;
+  height: calc(100% - 204rpx);
+  padding-top: 20rpx;
+  margin-left: -24rpx;
+}
+
+.container .pd .conm {
+  padding-left: 24rpx;
+  width: calc(100vw - 52rpx);
+}
+
+.container .pd .cz {
+  width: 22rpx;
+  height: 1664rpx;
+  position: absolute;
+  top: 24rpx;
+  left: 24rpx;
+}
+
+.container .pd .musicList {
+  padding: 0 0 20rpx 44rpx;
+  position: relative;
+}
+
+.container .pd .musicList .li {
+  height: 98rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 52rpx;
+  color: #353535;
+  position: relative;
+}
+
+.container .pd .musicList .li .zz {
+  width: 236rpx;
+  height: 22rpx;
+  position: absolute;
+  top: 48rpx;
+  left: -70rpx;
+  z-index: 999;
+}
+
+.container .pd .musicList .li .lm {
+  transform: rotate(90deg);
+}
+
+.container .pd .musicList .li .musicInfo {
+  width: 606rpx;
+  height: 98rpx;
+  display: flex;
+  align-items: center;
+  margin-left: 22rpx;
+  position: relative;
+}
+
+.container .pd .musicList .li .musicInfo .pic {
+  width: 86rpx;
+  height: 86rpx;
+  border-radius: 50%;
+  margin-right: 24rpx;
+  border: 2rpx solid #979797;
+}
+
+.container .pd .musicList .li .musicInfo text {
+  font-size: 30rpx;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(100% - 200rpx);
+}
+
+.container .pd .musicList .li .musicInfo .svg {
+  position: absolute;
+  top: 34rpx;
+  right: 50rpx;
+  width: 34rpx;
+  height: 30rpx;
+}
+
+.container .pd .musicList .li:last-child {
+  margin: 0;
+}
+
+.container .pd .musicList .li.action {
+  color: #6547A3;
+}
+
+.container .pd .musicList .li.action .musicInfo {
+  border-radius: 49rpx;
+  background-color: #D8D8D8;
+}
+.mair .mz{
+  width: calc(100% - 72rpx);
+  padding: 32rpx 36rpx;
+  background: #FFFFFF;
+  border-radius:0px 0px 18rpx 18rpx ;
+  overflow: hidden;
+}
+
+.mair .deviceList{
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+.mair .mz .li-view{
+  height: 160rpx;
+  float: left;
+  width: calc(100% / 2 - 8rpx);
+  margin-bottom: 36rpx;
+  display: flex;
+  align-items: center;
+}
+.mair .mz .li-view:nth-child(2n){
+  margin-left: 14rpx;
+}
+.mair .mz .li {
+  position: relative;
+  width: calc(100% - 44rpx);
+  height: 160rpx;
+  display: flex;
+  align-items: center;
+  border: 2rpx solid #353535;
+  border-radius: 16rpx;
+  padding: 0 20rpx;
+  background-color: #fff;
+}
+.mair .mz .li image{
+  width: 96rpx;
+}
+.mair .mz .li .delete{
+  position: absolute;
+  top: -6rpx;
+  right: -6rpx;
+  width: 36rpx;
+}
+.mair .mz .li .deviceName{
+  font-size: 28rpx;
+  color: #353535;
+  font-weight: 500;
+  margin-left: 18rpx;
+}
+.mair .mz .li .onli{
+  position: absolute;
+  bottom: 14rpx;
+  right: 24rpx;
+  font-size: 24rex;
+  color: #353535;
+}
+.mair .mz .li.action{
+  border: 4rpx solid #6547A3;
+  box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
+  width: calc(100% - 48rpx);
+  height: 156rpx;
+}
+.mair .mz .li.action .onli{
+  color: #6547A3;
+}
+.mair .mz .li.offline{
+  opacity: 0.6;
+}
+.mair .mz .but{
+  float: left;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+}
+.mair .mz .but text{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 226rpx;
+  height: 80rpx;
+  background: #6547A3;
+  border-radius: 45rpx;
+  color: #fff;
+  margin: 0 20rpx;
+}
+.wake{
+  height: 48rpx;
+  z-index: 1000;
+}
+.updataminiwx{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+}
+.updataminiwx .mode{
+  width: 520rpx;
+  height: 410rpx;
+  position: relative;
+}
+.updataminiwx .mode .bg{
+  width: 520rpx;
+  height: 410rpx;
+}
+.updataminiwx .mode .updata-view{
+  width: 520rpx;
+  height: 410rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.updataminiwx .mode .updata-view image{
+  width: 124rpx;
+  height: 124rpx;
+  margin: 24rpx auto 14rpx;
+  display: block;
+}
+.updataminiwx .mode .updata-view .title {
+  height: 38rpx;
+  font-size: 30rpx;
+ font-weight: bold;
+  color: #353535;
+  line-height: 38rpx;
+  display: block;
+  text-align: center;
+  margin-bottom: 16rpx;
+}
+.updataminiwx .mode .updata-view .tip {
+  height: 38rpx;
+  font-size: 30rpx;
+ font-weight: 500;
+  color: #999;
+  line-height: 38rpx;
+  display: block;
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.updataminiwx .mode .updata-view>view {
+  display: flex;
+  justify-content: center;
+}
+.updataminiwx .mode .updata-view>view text{
+  width: 226rpx;
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  margin: 0 10rpx;
+}
+.updataminiwx .mode .updata-view>view .onBut{
+  background-color: rgba(153, 153, 153, 1);
+  color: #fff;
+}
+.updataminiwx .mode .updata-view>view .twoBut{
+  background-color: rgba(101, 71, 163, 1);
+  color: #fff;
+}