index.wxml 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!-- index.wxml -->
  2. <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>
  3. <view class="container">
  4. <view wx:if="{{indexPage==0}}" class="mair" style="height: calc(100vh - 120rpx - {{navBarHeight}}px);">
  5. <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">{{greeting}}</view>
  6. <!-- banner -->
  7. <view wx:if="{{bannerList.length>0}}" class="banner_container">
  8. <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
  9. <block wx:for="{{bannerList}}" wx:key="index">
  10. <swiper-item>
  11. <image mode="widthFix" class="swiper_image" src="{{item.pic}}" data-item="{{item}}" bind:tap="onTapBanner" />
  12. </swiper-item>
  13. </block>
  14. </swiper>
  15. </view>
  16. <view class="add_device_public" bind:tap="addDevice">
  17. <image mode="heightFix" src="./../../img/add_device.png" style="width: 48rxp;height: 48rpx;"></image>
  18. <view style="color: white; margin-left: 8rpx; font-size: 32rpx;">添加设备</view>
  19. </view>
  20. <scroll-view scroll-y="true" style="height: calc(100vh - 118rpx - 14rpx - 20rpx - 88rpx - 64rpx - 58rpx - {{bannerList.length>0?296:0}}rpx - {{navBarHeight}}px);margin-top: 22rpx;padding-top: 10rpx; width: 100%;">
  21. <view wx:if="{{deviceList}}">
  22. <block wx:key="key" wx:for-item="item" wx:for-index="index" wx:for="{{deviceList}}">
  23. <view class="item_public" style="width: calc(100vw - {{item.state && item.state === 'online'&&deviceListSelect === index ?76:70}}rpx);border: {{item.state && item.state === 'online'&&deviceListSelect === index ? '8rpx solid #6546A3' : item.state && item.state === 'online'?'2rpx solid #6546A3':'2rpx solid #F2F5F7'}}; margin-left: {{item.state && item.state === 'online'&&deviceListSelect === index ?0:4}}rpx;" data-item="{{item}}" data-index="{{index}}" bind:tap="onTapItem">
  24. <image wx:if="{{item.connectType==3}}" class="item_public_image" src="./../../img/min.png" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};"></image>
  25. <image wx:else class="item_public_image" src="{{item.img}}" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};" mode="aspectFit" lazy-load="true" webp="true"></image>
  26. <view class="item_public_right" style="margin-right: 25rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};">
  27. <view style="height: 190rpx; margin-top: 37rpx; margin-left: 32rpx; flex-direction: column; display: flex;">
  28. <view style="flex: 1;">
  29. <view style="display: flex;">
  30. <view style="color: #333333; font-size: 28rpx; flex: 1;padding-right: 5rpx;">
  31. {{item.devName}}
  32. </view>
  33. <image mode="heightFix" src="./../../img/add_device_arrow.png" style="width: 48rxp;height: 48rpx; opacity: {{item.state && item.state === 'online'&&deviceListSelect === index ? '1' : '0'}};"></image>
  34. </view>
  35. <view style="color: #666666; font-size: 24rpx;display: flex; flex-direction: row; align-items: center;">
  36. <image mode="heightFix" src="{{item.connectType==3?'./../../images/device/wifi_black.png':'./../../images/device/blue_black.png'}}" style="width: 28rxp;height: 28rpx; padding-right: 10rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.7'}};"></image>
  37. <view> {{item.state && item.state === "online" ? (item.connectType==3?"Wif在线":"蓝牙在线") : "离线"}}</view>
  38. </view>
  39. </view>
  40. <view style="align-items: center; justify-content: center; vertical-align: middle;width: 280rpx;height: 64rpx;background-color: #F2F5F7; border-radius: 52rpx; text-align: center; justify-content: center; display: flex;" data-index="{{index}}" catchtap="deleteDevice">
  41. <view style="color: #666666; font-size: 28rpx; ">删除</view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </block>
  47. </view>
  48. </scroll-view>
  49. </view>
  50. <view wx:else>
  51. <!-- 连接设备启用以下版本 -->
  52. <view wx:if="{{indexPage==1&&deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="mair" style="height: calc(100vh - 118rpx - {{navBarHeight}}px);">
  53. <view class="play-info">
  54. <view class="info">
  55. <image src="./../../img/blak.png" class="black" mode="scaleToFill"></image>
  56. <image src="./../../img/mm.png" class="mode" mode="scaleToFill"></image>
  57. <image class="logo" mode="heightFix" src="./../../img/logo.png"></image>
  58. <view wx:if="{{actionIndex !== null}}" style="opacity: 0.8; text-shadow:0px 0px 4px #6D00FF;" class="fm">
  59. FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} </view>
  60. <view wx:if="{{actionIndex !== null}}" style="opacity: 1;" class="fm">
  61. FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} <image class="gochnnalList" mode="heightFix" src="./../../img/a6.png">
  62. </image>
  63. </view>
  64. <view class="fmMod" bindtap="onTapToChannel"></view>
  65. <view wx:if="{{actionIndex !== null}}" class="thisMusic">
  66. <text>当前播放:</text>
  67. <view class="scroll-box">
  68. <view class="scroll-wrap">
  69. <view class="scroll-item">{{channelData[actionIndex].channelName}}</view>
  70. </view>
  71. </view>
  72. </view>
  73. <image src="{{'./../../img/dl' + battery + '.png'}}" class="battery" mode="scaleToFill"></image>
  74. </view>
  75. <view class="wakeMode" bindtap="goWake">
  76. <image src="./../../img/woak.png" class="mode" mode="scaleToFill"></image>
  77. <image class="wake" mode="heightFix" src="{{isSetWake ? './../../img/n24.png' : './../../img/n23.png' }}"></image>
  78. <text>定时</text>
  79. </view>
  80. </view>
  81. <scroll-view class="pd" scroll-y="true">
  82. <view class="conm" wx:if="{{channelData && channelData.length > 0}}">
  83. <image mode="scaleToFill" class="cz" src="./../../img/cz.png"></image>
  84. <view class="musicList">
  85. <view wx:for="{{channelData}}" class="li {{index === actionIndex ? 'action' : ' '}}">
  86. <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="zz" src="./../../img/zz.png"></image>
  87. <text class="lm">{{luoma[index]}}</text>
  88. <view class="musicInfo" data-index="{{index}}" bindtap="actionMusic">
  89. <image mode="scaleToFill" class="pic" src="{{item.channelPic ? item.channelPic : './../../img/head_pic.png'}}"></image>
  90. <text>{{item.channelName}}</text>
  91. <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="svg" src="./../../svg/audio.svg"></image>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- <image src="./../../svg/audio.svg"></image> -->
  96. </view>
  97. </scroll-view>
  98. <!-- 登录启用以下版本 -->
  99. <view class="gologin" wx:if="{{showLogin}}">
  100. <view class="model">
  101. <view bindtap="goLogin" style="position: none; height: auto;" class="loginPic">
  102. <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_long.png"></image>
  103. </view>
  104. <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
  105. <view>
  106. <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
  112. <view class="model">
  113. <view bindtap="goDeviceConnect" style="position: none; height: auto;" class="loginPic">
  114. <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_LJ.png"></image>
  115. </view>
  116. <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
  117. <view>
  118. <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. <view wx:elif="{{indexPage==2}}" class="me" style="height: calc(100vh - 100rpx - {{navBarHeight}}px);">
  125. <view class="head-logo">
  126. <image mode="scaleToFill" src="{{userPic}}"></image>
  127. <text class="nick_name" wx:if="{{nickName}}">{{nickName}}</text>
  128. </view>
  129. <view class="br"></view>
  130. <view class="list">
  131. <view class="li">
  132. <view class="icon">
  133. <image mode="widthFix" src="./../../img/o.png"></image>
  134. </view>
  135. <view class="button">
  136. <button open-type="feedback">建议与反馈</button>
  137. <image class="j" mode="heightFix" src="./../../img/b.png"></image>
  138. </view>
  139. </view>
  140. <view class="li">
  141. <view class="icon">
  142. <image mode="widthFix" src="./../../img/q.png"></image>
  143. </view>
  144. <view class="button" bindtap="goMeAbout">
  145. <text>关于我们</text>
  146. <image class="j" mode="heightFix" src="./../../img/b.png"></image>
  147. </view>
  148. </view>
  149. </view>
  150. <view wx:if="{{isLogin}}" class="login">
  151. <view bindtap="onTapLogin" class="{{!isLogin ? 'action' : ''}}">
  152. {{isLogin ? '退出登录' : "登录"}}
  153. </view>
  154. </view>
  155. </view>
  156. </view>
  157. </view>
  158. <view style="height: 98rpx;">
  159. <view class="line"></view>
  160. <view style="height: 97rpx; text-align: center; display: flex; flex: 1; align-items: center;">
  161. <view class="bottom_view" data-index="0" bind:tap="onTapIndex">
  162. <image class="bottom_image" mode="widthFix" src="{{indexPage==0?'./../../img/index_action.png':'./../../img/index_unaction.png'}}"></image>
  163. <view style="font-size: 20rpx;color: {{indexPage==0?'#A4D099':'black'}}; padding-top: 0rpx;margin-top: 0rpx;">
  164. 首页
  165. </view>
  166. </view>
  167. <view wx:if="{{deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="bottom_view" data-index="1" bind:tap="onTapIndex">
  168. <image class="bottom_image" mode="widthFix" src="{{indexPage==1?'./../../img/channel_action.png':'./../../img/channel_unaction.png'}}"></image>
  169. <view style="font-size: 20rpx;color: {{indexPage==1?'#A4D099':'black'}};">频道</view>
  170. </view>
  171. <view class="bottom_view" data-index="2" bind:tap="onTapIndex">
  172. <image class="bottom_image" mode="widthFix" src="{{indexPage==2?'./../../img/me_action.png':'./../../img/me_unaction.png'}}"></image>
  173. <view style="font-size: 20rpx;color: {{indexPage==2?'#A4D099':'black'}};">我的</view>
  174. </view>
  175. </view>
  176. </view>
  177. <!-- <view wx:if="{{newVersion}}" class="updataminiwx">
  178. <view class="mode">
  179. <image class="bg" src="./../../img/BG@2x.png"></image>
  180. <view class="updata-view">
  181. <image src="./../../img/sj.png"></image>
  182. <text class="title">更新检测</text>
  183. <text class="tip">检测到新版本,是否重启小程序</text>
  184. <view>
  185. <text bindtap="updataClone" class="onBut">取消</text>
  186. <text bindtap="updata" class="twoBut">确定</text>
  187. </view>
  188. </view>
  189. </view>
  190. </view> -->