miniProgram/pages/index/index.wxml

<!-- index.wxml -->
<view>
  <image src="/static/images/ic_top_bg.png" mode="widthFix"
    style="width: 100%;display: block;position: absolute; z-index: -1;top:0" />
  <view class="container">
    <van-nav-bar title="" left-text="" left=""></van-nav-bar>
    <!-- 天气的面板 -->
    <view class="header-wrapper" wx:if="{{!status_fire}}">
      <view class="weather-box">
        <text class="weather-title">空气质量-{{ airText }}</text>
        <text class="weather-value">{{ airValue }}</text>
      </view>
      <view class="weather-box" style="align-items: flex-end;">
        <text class="weather-title">{{ area }}-{{ city }}</text>
        <text class="weather-desc">{{ weather }}</text>
      </view>
    </view>



    <view class="contentArea">
      <view class="menu-tab">
        <view
          class="{{!modelList1.length ? 'menu-tab-disenable' : currentMenuTabIndex == 0 ? 'menu-tab-item-active' :  'menu-tab-item'}}"
          data-index="0" bindtap="checkMenuTap">起床模式</view>
        <view
          class="{{!modelList2.length ? 'menu-tab-disenable' : currentMenuTabIndex == 1 ? 'menu-tab-item-active' : 'menu-tab-item'}}"
          data-index="1" bindtap="checkMenuTap">观影模式</view>
        <view
          class="{{!modelList3.length ? 'menu-tab-disenable' : currentMenuTabIndex == 2 ? 'menu-tab-item-active' :  'menu-tab-item'}}"
          data-index="2" bindtap="checkMenuTap">睡眠模式</view>
      </view>

      <view class="theFirstRow">
        <image src="/static/icons/ic_temperature.svg" mode="widthFix" />
        <text class="theFirstRow-title">温度</text>
        <text class="theFirstRow-value">{{w_temp}}<text class="theFirstRow-unit">℃</text></text>

        <view style="margin-left: 30rpx;width: 2rpx; background: #e8e8e8; height: 24rpx;" />
        <image src="/static/icons/ic_humidity.svg" mode="widthFix" />
        <text class="theFirstRow-title">湿度</text>
        <text class="theFirstRow-value">{{w_humidity}}<text class="theFirstRow-unit">%</text></text>

      </view>
      <view wx:if="{{isLoading}}" class="loading-container">
        <text class="loading-text">数据正在加载，请耐心等待...</text>
      </view>
      <view class="data-container sliderList">

        <!-- 普通的-->
        <view wx:for="{{listSwitch}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
          <view class="data-card" style="{{item.state=='on' ? 'background: #0BC3AA;' : item.bg}}">
            <image class="data-card__icon" src="{{item.state=='on' ? item.selectedImgSrc : item.imgSrc}}" />
            <view class="data-card__text">
              <text class="data-card__title1"
                style="{{item.state=='on' ? 'color: #ffffff' :  ''}}">{{item.friendly_name}}</text>

              <view class="data-card__value">
                <van-switch size="22px" active-color="#2CCEB8" inactive-color="#E8EAEB" checked="{{item.state=='on'}}"
                  bind:change="onSelect_All" data-param0="{{index}}" data-param1="/services"
                  data-param2="/{{item.domain}}" data-param3='{{item.state=="on"?"/turn_off":"/turn_on"}}'
                  data-param4='{{item.state=="on"?"0":"1"}}' data-param5="{{item.entity_id}}"
                  custom-class="customSwitch" />
              </view>
            </view>
          </view>
        </view>


        <!-- cover  -->
        <view wx:for="{{listCover}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
          <view class="data-card">
            <image class="data-card__icon" src="{{item.imgSrc}}" />
            <view class="data-card__text">
              <view class="data-card__title">
                <text class="text-content">{{item.friendly_name}}</text>
              </view>
              <view class="data-card__value">
                <van-switch size="22px" active-color="#2CCEB8" inactive-color="#E8EAEB" checked="{{item.state=='open'}}"
                  bindchange="onSelect_Cover" data-param0="{{index}}" data-param1="/services"
                  data-param2="/{{item.domain}}" data-param3='{{item.state=="open"?"/open_cover":"/close_cover"}}'
                  data-param4='{{item.state=="open"?"0":"1"}}' data-param5="{{item.entity_id}}" />
              </view>
            </view>
          </view>
        </view>
        <!-- 电视 card-->
        <view wx:for="{{listMitvMediaPlayer}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
          <view class="data-card" style="{{item.bg}}">
            <image class="data-card__icon" src="{{item.imgSrc}}" />
            <view class="data-card__text">
              <view class="data-card__title">
                <text class="text-content">{{item.friendly_name}}</text>
              </view>
              <view class="data-card__value">
                <view class="tv_button-container">
                  <text
                    class=" {{(item.app_id=='com.xiaomi.mitv.tvplayer'||item.app_name=='模拟电视')?'tv_disabled-button':'tv_custom-button'}}"
                    bindtap="tvFanChange" data-id="{{item.entity_id}}" data-fan="当贝桌面">电视模式</text>
                  <text
                    class=" {{(item.app_id=='com.xiaomi.mitv.tvplayer'||item.app_name=='模拟电视')?'tv_custom-button':'tv_disabled-button'}}"
                    bindtap="tvFanChange" data-id="{{item.entity_id}}" data-fan="HDMI1">机顶盒模式</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="body-wrapper" style="margin-top:40rpx; display: flex;flex-direction: column;align-items: center;">
        <view class="body">

          <!-- 香薰机 -->
          <view class="test" class="sliderItem" wx:for="{{listAromatherapyMachine}}" wx:for-index="index"
            wx:for-item="item" wx:if="{{item.isAromatherapy}}">

            <view class="center-view">
              <view class="title-line"></view>
              <text class="gray-text">{{item.friendly_name}}</text>
            </view>
            <view class="data-media-player" style="flex-direction: row;">

              <view class="data-media-1" wx:for="{{listAromatherapyMachine}}" wx:for-index="index2" wx:for-item="item2"
                wx:if="{{item2.isAromlight}}">
                <text class="sub-title">{{item2.friendly_name}}</text>
                <view wx:if="{{item.state=='on'}}" class="btn-pos-view" bindtap="onSelect_All_aromlight"
                  data-param0="{{index2}}" data-param1="/services" data-param2="/{{item2.domain}}"
                  data-param3="/turn_on" data-param4='{{item2.state=="on"?"0":"1"}}' data-param5="{{item2.entity_id}}">
                  <image src="/static/images/ic_light_button_bg.png"></image>
                  <text>灯光切换</text>
                </view>
                <view wx:else class="btn-pos-view" style="filter: grayscale(100%);">
                  <image src="/static/images/ic_light_button_bg.png"></image>
                  <text>灯光切换</text>
                </view>
              </view>
              <view class="card-line-v"></view>
              <view class="data-media-1">
                <view class="card-data">
                  <image class="data-card__icon" src="{{item.imgSrc}}" />
                  <text class="data-card__title1">{{item.friendly_name}}</text>
                  <view class="data-card__value">
                    <van-switch size="22px" active-color="#2CCEB8" inactive-color="#E8EAEB"
                      checked="{{item.state=='on'}}" bind:change="onSelect_All_AromatherapyMachine"
                      data-param0="{{index}}" data-param1="/services" data-param2="/{{item.domain}}"
                      data-param3='{{item.state=="on"?"/turn_off":"/turn_on"}}'
                      data-param4='{{item.state=="on"?"0":"1"}}' data-param5="{{item.entity_id}}"
                      custom-class="customSwitch" />
                  </view>
                </view>
                <view class="card-data" wx:for="{{listAromatherapyMachine}}" wx:for-index="index2" wx:for-item="item2"
                  wx:if="{{item2.isAromAtomization}}" style="height: 230rpx;">
                  <image class="data-card__icon" src="{{item2.imgSrc}}" />
                  <text class="data-card__title1">{{item2.friendly_name}}</text>
                  <view class="data-card__value">
                    <image wx:if="{{item.state=='on'}}" class="power-btn-small"
                      src="{{item2.state=='on'? '/static/icons/ic_power.svg' : '/static/icons/ic_power_off.svg'}}"
                      data-param0="{{index2}}" data-param1="/services" data-param2="/{{item2.domain}}"
                      data-param3='{{item2.state=="on"?"/turn_off":"/turn_on"}}'
                      data-param4='{{item2.state=="on"?"0":"1"}}' data-param5="{{item2.entity_id}}" bindtap="onTap_All">
                    </image>
                    <image wx:else class="power-btn-small"
                      src="{{item2.state=='on'? '/static/icons/ic_power.svg' : '/static/icons/ic_power_off.svg'}}">
                    </image>
                  </view>
                </view>

              </view>

            </view>
          </view>

          <!-- 加湿器 -->
          <view class="test" wx:for="{{listHumidifier}}" wx:for-index="index" wx:for-item="item" class="sliderItem">

            <view class="center-view">
              <view class="title-line"></view>
              <text class="gray-text">{{item.friendly_name}}</text>
            </view>
            <view class="data-media-player">
              <image class="power-btn"
                src="{{item.state=='on'? '/static/icons/ic_power.svg' : '/static/icons/ic_power_off.svg'}}"
                data-param0="{{index}}" data-param1="/services" data-param2="/{{item.domain}}"
                data-param3='{{item.state=="on"?"/turn_off":"/turn_on"}}' data-param4='{{item.state=="on"?"0":"1"}}'
                data-param5="{{item.entity_id}}" bindtap="onTap_All">
              </image>
              <view class="data-card-v" style="width: 100%;">
                <view class="echarts-container_humidityDial">
                  <ec-canvas id="mychart-dom-gauge" canvas-id="mychart-gauge" ec="{{ ecHumidifier }}"></ec-canvas>
                </view>

                <view class="button-row" style="width: 100%;height: 112rpx;margin-left: 15rpx;">
                  <image src="/static/icons/ic_minus.svg" style="width: 112rpx;height: 112rpx;"
                    bindtap="onHumidifierDown" data-state='{{item.state}}' data-id="{{item.entity_id}}"
                    data-domain='{{item.domain}}' data-min='{{item.min}}' data-max='{{item.max}}'
                    data-humidity='{{item.humidity}}'></image>
                  <van-slider bar-height="52rpx" active-color="#0BC3AA" class="tui-slider-box"
                    bind:drag-end="handleTouchEndHumidifier" bind:drag="handleChangingHumidifier"
                    bind:change="changeHumidity" step="1" min="{{item.min}}" max="{{item.max}}"
                    data-id="{{item.entity_id}}" data-index="{{index}}" data-domain="{{item.domain}}"
                    value="{{item.humidity}}" min="{{item.min}}" max="{{item.max}}" data-humidity="{{item.humidity}}">
                  </van-slider>
                  <image src="/static/icons/ic_add.svg" style="width: 112rpx;height: 112rpx;" bindtap="onHumidifierUp"
                    data-state='{{item.state}}' data-id="{{item.entity_id}}" data-domain='{{item.domain}}'
                    data-min='{{item.min}}' data-max='{{item.max}}' data-humidity='{{item.humidity}}'>
                  </image>
                </view>
                <text
                  style="{{'margin-left:'+humidityMarginLeft+'rpx;margin-top: -50rpx;min-height:50rpx'}}">{{sliderValueHumidifier
                  ?
                  sliderValueHumidifier +
                  '%' : ''}}</text>
              </view>


            </view>
          </view>
          <!-- 空调 -->
          <view class="test sliderItem" wx:for="{{listClimate}}" wx:for-index="index" wx:for-item="item">
            <view class="center-view">
              <view class="title-line"></view>
              <text class="gray-text">{{item.friendly_name}}</text>
            </view>
            <view class="data-media-player">

              <text wx:if="{{item.state!='auto'}}" class="value-display">
                {{item.temperatureTemp}}<text class="value-display_unit">°C</text>
              </text>
              <text wx:else class="value-display" style="opacity: 0;">
                {{item.temperatureTemp}}<text class="value-display_unit">°C</text>
              </text>
              <view class="button-row" style="margin-left: 15rpx;">
                <image src="/static/icons/ic_minus.svg" style="width: 112rpx;height: 112rpx;" bindtap="minusClimate"
                  min="{{item.min_temp}}" max="{{item.max_temp}}" step="1" data-value="{{item.temperature}}"
                  data-state="{{item.state}}" data-id="{{item.entity_id}}" data-domain="{{item.domain}}"
                  data-min="{{item.min_temp}}" data-max="{{item.max_temp}}" data-temperature="{{item.temperature}}"
                  data-fanMode="{{item.fan_mode}}" disabled="{{item.state=='auto'}}"></image>
                <van-slider bar-height="52rpx" active-color="#3A87FD" class="tui-slider-box" data-index="{{index}}"
                  bind:change="changeClimate" bind:drag="dragClimate" min="{{item.min_temp}}" max="{{item.max_temp}}"
                  step="1" value="{{item.temperature}}" data-state="{{item.state}}" data-id="{{item.entity_id}}"
                  data-domain="{{item.domain}}" data-min="{{item.min_temp}}" data-max="{{item.max_temp}}"
                  data-temperature="{{item.temperature}}" data-fanMode="{{item.fan_mode}}"
                  disabled="{{item.state=='auto'}}">
                  <!-- <text style="color:black">{{sliderValueClimate}}</text> -->
                </van-slider>
                <image src="/static/icons/ic_add.svg" style="width: 112rpx;height: 112rpx; " bindtap="addClimate"
                  min="{{item.min_temp}}" max="{{item.max_temp}}" step="1" data-value="{{item.temperature}}"
                  data-state="{{item.state}}" data-id="{{item.entity_id}}" data-domain="{{item.domain}}"
                  data-min="{{item.min_temp}}" data-max="{{item.max_temp}}" data-temperature="{{item.temperature}}"
                  data-fanMode="{{item.fan_mode}}" disabled="{{item.state=='auto'}}"></image>

              </view>
              <view class="air-conditioner-controls">
                <view
                  class="{{item.state=='auto'?'control-button_1':'control-button'}} {{isClickedOnClimateAuto ? 'clicked' : ''}}"
                  bindtap="onClimateAuto" data-state="{{item.state}}" data-temperature="{{item.temperature}}"
                  data-id="{{item.entity_id}}" data-domain="{{item.domain}}">
                  <image class="control-icon"
                    src="{{item.state == 'auto' ? '/static/icons/ic_auto_2.svg' : '/static/icons/ic_auto_1.svg'}}" />
                  <text class="{{item.state=='auto'? 'control-text_select' :'control-text'}}">自动</text>
                </view>
                <view class="{{item.state=='heat'?'control-button_1':'control-button'}}" bindtap="onClimateHeat"
                  data-state="{{item.state}}" data-temperature="{{item.temperature}}" data-id="{{item.entity_id}}"
                  data-domain="{{item.domain}}" data-flag="onHeat">
                  <image class="control-icon"
                    src="{{item.state == 'heat' ? '/static/icons/ic_hot_2.svg' : '/static/icons/ic_hot_1.svg'}}" />
                  <text class="{{item.state=='heat'? 'control-text_select' :'control-text'}}">制热</text>
                </view>
                <view class="{{item.state=='cool'?'control-button_1':'control-button'}}" bindtap="onClimateCool"
                  data-state="{{item.state}}" data-temperature="{{item.temperature}}" data-id="{{item.entity_id}}"
                  data-domain="{{item.domain}}" data-flag="onCool">
                  <image class="control-icon"
                    src="{{item.state == 'cool' ? '/static/icons/ic_cold_2.svg' : '/static/icons/ic_cold_1.svg'}}" />
                  <text class="{{item.state=='cool'? 'control-text_select' :'control-text'}}">制冷</text>
                </view>
                <view class="{{item.state=='dry'?'control-button_1':'control-button'}}" bindtap="onClimateDehumidify"
                  data-state="{{item.state}}" data-temperature="{{item.temperature}}" data-id="{{item.entity_id}}"
                  data-domain="{{item.domain}}" data-flag="onDehumidify">
                  <image class="control-icon"
                    src="{{item.state == 'dry' ? '/static/icons/ic_moisture_2.svg' : '/static/icons/ic_moisture_1.svg'}}" />
                  <text class="{{item.state=='dry'? 'control-text_select' :'control-text'}}">除湿</text>
                </view>
                <view class="{{item.state=='fan_only'?'control-button_1':'control-button'}}"
                  bindtap="onClimateAirSupply" data-state="{{item.state}}" data-temperature="{{item.temperature}}"
                  data-id="{{item.entity_id}}" data-domain="{{item.domain}}" data-flag="onAirSupply">
                  <image class="control-icon"
                    src="{{item.state == 'fan_only' ? '/static/icons/ic_wind_2.svg' : '/static/icons/ic_wind_1.svg'}}" />
                  <text class="{{item.state=='fan_only'? 'control-text_select' :'control-text'}}">送风</text>
                </view>
                <!-- 关闭要单独拿出来 -->
                <!-- <view class="{{item.state=='off'?'control-button_1':'control-button'}}" bindtap="onClimateOff"
                  data-state="{{item.state}}" data-temperature="{{item.temperature}}" data-id="{{item.entity_id}}"
                  data-domain="{{item.domain}}">
                  <image class="control-icon" />
                  <text class="{{item.state=='off'? 'control-text_select' :'control-text'}}">关闭</text>
                </view> -->
              </view>
              <view class="airConditioning-title">
                <image src="/static/icons/ic_output_air.svg"></image>
                <text wx:if="{{item.state!='auto'}}">{{temperatureHumidifyName}}:{{item.temperature}}°C</text>
                <text wx:else>{{temperatureHumidifyName}}</text>
              </view>
              <image class="power-btn"
                src="{{item.state=='off'? '/static/icons/ic_power_off.svg' : '/static/icons/ic_power.svg'}}"
                bindtap="onClimateOff" data-state="{{item.state}}" data-temperature="{{item.temperature}}"
                data-id="{{item.entity_id}}" data-domain="{{item.domain}}"></image>

            </view>
          </view>
          <view wx:for="{{listMiotMediaPlayer}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
            <!-- 一行 -->
            <view class="data-media-player" style="{{item.entity_picture}}">
              <!-- 标题 -->
              <view class="center-view">
                <view class="title-line"></view>
                <text class="gray-text">{{item.friendly_name}}</text>
              </view>
              <view class="audio-player">
                <view class="controls">
                  <image class="control-button_media prev {{isClickedPrevSong ? 'clicked' : ''}}"
                    src="/static/images/prev.png" bindtap="prevSong" wx:if="{{canPrev}}" data-state="{{item.state}}"
                    data-id="{{item.entity_id}}" data-domain="{{item.domain}}" />
                  <image class="control-button_media play {{isClickedTogglePlayPause ? 'clicked' : ''}}"
                    src="{{item.state=='playing' ? '/static/images/pause.png' : '/static/images/play.png'}}"
                    bindtap="togglePlayPause" data-state="{{item.state}}" data-id="{{item.entity_id}}"
                    data-domain="{{item.domain}}" />
                  <image class="control-button_media next {{isClickedNextSong ? 'clicked' : ''}}"
                    src="/static/images/next.png" bindtap="nextSong" wx:if="{{canNext}}" data-state="{{item.state}}"
                    data-id="{{item.entity_id}}" data-domain="{{item.domain}}" bindload="imageLoad" />
                </view>
                <view class="progress">
                  <slider class="progress-bar" value="{{item.media_position}}" min="0" max="{{item.media_duration}}"
                    bindchange="sliderChange" data-state="{{item.state}}" data-id="{{item.entity_id}}"
                    data-domain="{{item.domain}}" />
                </view>
                <view class="info">
                  <text class="song-title">歌曲名称：{{item.media_title}}</text>
                  <text class="song-artist">演唱者：{{item.media_artist}}</text>
                  <!-- <text class="song-artist">歌曲名称：{{item.media_album_name}}</text> -->
                </view>
              </view>
            </view>
            <!-- 一行结束 -->
          </view>
          <!-- 一行结束 -->
        </view>
      </view>
    </view>
  </view>
  <van-overlay show="{{ menuTabDialogShow }}" z-index="10086">
    <view style="height: 100vh;display: flex;flex-direction: column;justify-content: center;">
      <view style="position: relative;">
        <image wx:if="{{currentDialogIndex == 0}}" src="/static/bg/ic_qcms_bg.png"
          style="display: block;width: 620rpx;height: 380rpx; margin: 0 auto;" />

        <view wx:if="{{currentDialogIndex == 0}}" class="dialog-content">
          <view class="dialog-h">
            <image class="dialog-icon" src="/static/bg/ic_qcms.png" />
            <text class="dialog-title">起床模式</text>
          </view>
          <text class="dialog-desc">自动调节灯光、窗帘、播放轻柔音乐等， 营造一个舒适温馨的起床环境。</text>
        </view>
        <image wx:if="{{currentDialogIndex == 1}}" src="/static/bg/ic_gyms_bg.png"
          style="display: block;width: 620rpx;height: 380rpx; margin: 0 auto;" />
        <view wx:if="{{currentDialogIndex == 1}}" class="dialog-content">
          <view class="dialog-h">
            <image class="dialog-icon" src="/static/bg/ic_gyms.png" />
            <text class="dialog-title">观影模式</text>
          </view>
          <text class="dialog-desc">一键切换至最佳视听环境，自动调节灯光、窗帘及电视等设置，为您打造沉浸式的观影体验。</text>
        </view>
        <image wx:if="{{currentDialogIndex == 2}}" src="/static/bg/ic_smms_bg.png"
          style="display: block;width: 620rpx;height: 380rpx; margin: 0 auto;" />
        <view wx:if="{{currentDialogIndex == 2}}" class="dialog-content">
          <view class="dialog-h">
            <image class="dialog-icon" src="/static/bg/ic_smms.png" />
            <text class="dialog-title" style="color: #FDFFC5;">睡眠模式</text>
          </view>
          <text class="dialog-desc" style="color: white;">自动调暗灯光、关闭窗帘、播放睡眠视频、音乐及调节室内温度、湿度，营造一个安静舒适的睡眠环境。</text>
        </view>
        <text class="dialog-sure-btn" bindtap="onClickHideSureMenuTabDialog">确定</text>
      </view>
      <image src="/static/icons/ic_dialog_close.svg"
        style="display: block;width: 56rpx;height: 56rpx; margin: 30rpx auto;" bindtap="onClickHideMenuTabDialog" />
    </view>
  </van-overlay>
</view>