miniProgram/pages/index/index.wxml

<!--index.wxml-->
<view class="{{!status_light ? 'wrapper' : 'wrapper-dark' }}"  style="width: max-content; height: fit-content; display: block; box-sizing: border-box">
<!-- 天气的面板 -->
  <view class="header-wrapper" wx:if="{{!status_fire}}">
    <!-- <view class="header-title">
      <text>空气质量-{{ airText }}</text>
      <text>{{ area }}-{{ city }}</text>
    </view>
    <view class="header-text">
      <text>{{ airValue }}</text>
      <text>{{ weather }}</text>
    </view> -->
	
	<view class="header-title">
	  <text>空气质量-{{ airText }}</text>
	  <text>{{ area }}-{{ city }}</text>
	</view>
	<view class="header-text">
	  <text>{{ airValue }}</text>
	  <text>{{ weather }}</text>
	</view>
	
  </view>

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

<view class="data-container sliderList">
  <!--温度-->
    <view class="data-card">
      <image class="data-card__icon"src="/static/images/temp.png"/>
      <view class="data-card__text">
        <view class="data-card__title">
        温度
        </view>
        <view class="data-card__value">
        {{w_temp}}℃
        </view>
      </view>
    </view>
  <!--湿度-->
    <view class="data-card">
      <image class="data-card__icon"src="/static/images/hum.png"/>
      <view class="data-card__text">
        <view class="data-card__title">
        湿度
        </view>
        <view class="data-card__value">
        {{w_humidity}}%
        </view>
      </view>
    </view>
  <!--光照度-->
    <!-- <view class="data-card">
      <image class="data-card__icon"src="/static/images/light.png"/>
      <view class="data-card__text">
        <view class="data-card__title">
        光照度
        </view>
        <view class="data-card__value">
        100 LX
        </view>
      </view>
    </view> -->
  <!--客厅灯-->
    <!-- <view class="data-card">
      <image class="data-card__icon"src="/static/images/led.png"/>
      <view class="data-card__text">
        <view class="data-card__title">
        客厅灯
        </view>
        <view class="data-card__value">
        <switch checked="{{Led}}" bindchange="onLedChange" color="#3d7ef9"/>
        </view>
      </view>
    </view> -->
  <!--报警器-->
    <!-- <view class="data-card">
      <image class="data-card__icon"src="/static/images/alarm.png"/>
      <view class="data-card__text">
        <view class="data-card__title">
        报警器
        </view>
        <view class="data-card__value">
        <switch checked="{{Beep}}" bindchange="onBeepChange" color="#3d7ef9"/>
        </view>
      </view>
    </view> -->
	
	<view wx:for="{{listSwitch}}" 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__title1">
			{{item.friendly_name}}
			</view>
			<view class="data-card__value" wx:if="{{item.isAromlight}}">
				<image class="control-button_media_2 play {{isClickedToggleAromlight ? 'clicked' : ''}}" src="/static/images/start.png" bindtap="onSelect_All_aromlight" data-param0='{{index}}' data-param1='/services'  data-param2='/{{item.domain}}'
				data-param3='/turn_on'  data-param4='{{item.state=="on"?"0":"1"}}'  data-param5='{{item.entity_id}}'/> 
			</view>
			<view class="data-card__value" wx:else>
				<switch checked="{{item.state=='on'}}" bindchange="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}}'/>
			</view>
		  </view>
		</view>
	</view>
	
	<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">
				<switch 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>
	
	<view wx:for="{{listMitvMediaPlayer}}" 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">
				<view class="tv_button-container">
				  <button 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="当贝桌面">电视模式</button>  
				  <button 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">机顶盒模式</button>  
				</view>
			</view>
		  </view>
		</view>
	</view>
	
  </view>

  <view class="body-wrapper" style="width: 694rpx; height: 800rpx; display: block; box-sizing: border-box">
    <view class="body" style="width: 694rpx; height: 800rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">


<!-- 定时功能弹窗 -->


<!-- 各设备控制弹窗 结束行-->

<view class='test' wx:for="{{listHumidifier}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
	<view class="data-media-player">
	  <view class="center-view">
		<text class="gray-text">{{item.friendly_name}}</text>  
	  </view>

	  <view class="data-container data-card">
		  <!-- <view class="data-card">
			<image class="data-card__icon" src="/static/images/hum.png"/>
			<view class="data-card__text">
			  <view class="data-card__title">
			  湿度
			  </view>
			  <view class="data-card__value">
			  {{item.humidity}}%
			  </view>
			</view>
		  </view> -->
		  <view class="data-card">
		  			<image class="data-card__icon"src="/static/images/hum.png"/>
		  			<view class="data-card__text">
		  			  <view class="data-card__title">
		  			  开关
		  			  </view>
		  			  <view class="data-card__value">
		  			  <switch checked="{{item.state=='on'}}" bindchange="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}}'/>
		  			  </view>
		  			</view>
		  </view>
		  <view class="data-card">
		  			<image class="data-card__icon"src="/static/images/hum.png"/>
		  			<view class="data-card__text">
		  			  <view class="data-card__title">
		  			  湿度：{{item.humidity}}%
		  			  </view>
		  			  <view class="data-card__value1">
		  			  <!-- <button class="{{isButtonPressedHumidityUp ? 'round-gradient-button-pressed' : 'round-gradient-button'}} {{isClickedOnHumidifierUp ? 'clicked' : ''}}" bindtap="onHumidifierUp" style="width: 120rpx;height: 70rpx;" 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}}'>增加+</button>
		  			  -->
					  <slider style="width:100%;margin:20rpx 20rpx 0rpx 0rpx" bindtouchend="handleTouchEndHumidifier" bindchanging="handleChangingHumidifier" bindchange="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}}'>
						<text style="color:white">{{sliderValueHumidifier}}</text>
					  </slider>	
					  </view>
		  			</view>
		  </view>
		  <!-- <view class="data-card">
		  			<image class="data-card__icon"src="/static/images/hum.png"/>
		  			<view class="data-card__text">
		  			  <view class="data-card__title">
		  			  湿度-
		  			  </view>
		  			  <view class="data-card__value">
		  			  <button class="{{isButtonPressedHumidityDown ? 'round-gradient-button-pressed' : 'round-gradient-button'}} {{isClickedOnHumidifierDown ? 'clicked' : ''}}" bindtap="onHumidifierDown" style="width: 120rpx;height: 60rpx;" 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}}'>减少-</button>
		  			  </view>
		  			</view>
		  </view> -->
		  <view style="margin-top: 10rpx;">
		  </view>
	  </view>
	  
	</view>
</view>

<view class='test sliderItem' wx:for="{{listClimate}}" wx:for-index="index" wx:for-item="item">
	<view class="data-media-player">
	  <view class="center-view">
		<text class="gray-text">{{item.friendly_name}}</text>  
	  </view>
	  <view class="value-display">{{temperatureHumidifyName}}：{{item.temperature}}°C</view>
	      <view class="button-row">  
	  	  <!-- <button class="{{isButtonPressedClimateUp ? 'round-gradient-button-pressed' : 'round-gradient-button'}} {{isClickedOnClimateAuto ? 'clicked' : ''}}" bindtap="onClimateUp" data-state='{{item.state}}' data-id="{{item.entity_id}}" data-domain='{{item.domain}}' data-min='{{item.min}}' data-max='{{item.max}}' data-temperature='{{item.temperature}}' data-fanMode='{{item.fan_mode}}'>增加+</button>
	  	  <button class="{{isButtonPressedClimateDown ? 'round-gradient-button-pressed' : 'round-gradient-button'}}" bindtap="onClimateDown" data-state='{{item.state}}' data-id="{{item.entity_id}}" data-domain='{{item.domain}}' data-min='{{item.min}}' data-max='{{item.max}}' data-temperature='{{item.temperature}}' data-fanMode='{{item.fan_mode}}'>减少-</button> -->
		  
		  <slider class="tui-slider-box" bindtouchend="handleTouchEndClimate" bindchanging="handleChangingClimate" bindchange="changeClimate" 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}}'>
			<text style="color:white">{{sliderValueClimate}}</text>
		  </slider>
		  
	      </view> 
	  <view class="air-conditioner-controls">
	  		<button 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" />  
	  		  <text class="control-text">自动</text>  
	  		</button>  
	  		<button 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" />  
	  		  <text class="control-text_zr">制热</text>  
	  		</button>  
	  		<button 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" />  
	  		  <text class="control-text_zl">制冷</text>  
	  		</button>  
	  		<button 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" />  
	  		  <text class="control-text_cs">除湿</text>  
	  		</button>  
	  		<button 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" />  
	  		  <text class="control-text_sf">送风</text>  
	  		</button>  
	  		<button 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="control-text">关闭</text>  
	  		</button>  
	  </view>
	</view>
</view>

<!-- <view wx:for="{{listMitvMediaPlayer}}" wx:for-index="index" wx:for-item="item" class="sliderItem">
		 <view class="data-media-player" style="{{item.entity_picture}}  ">
			 <view class="center-view">
			   <text class="gray-text">{{item.friendly_name}}</text>  
			 </view>
			  
			  <view class="tv_button-container">  
			    <button class="tv_custom-button" bindtap="tvFanChange" data-id="{{item.entity_id}}" data-fan="TV" disabled="{{item.device_class!='tv'}}">电视模式</button>  
			    <button class="tv_custom-button tv_disabled-button" bindtap="tvFanChange" data-id="{{item.entity_id}}" data-fan="HDMI1" disabled="{{item.device_class!='hdmi1'}}">机顶盒模式</button>  
			  </view>
			  
		  </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">
			   <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>