index.wxml

<!--static/nativeComponents/LiveBroadcast/index.wxml-->
<view class="live-broadcast" wx:if="{{showList}}">
  <view class="top flex">
    <view style="font-weight:bold;font-size:36rpx">直播</view>
    <view class="seeMore" bindtap="toList">查看更多</view>
  </view>
  <view class="liveList" wx:if="{{datas.componentData.liveList.length>0}}" style="padding:{{datas.componentData.style==1 ? '0px' : ''}}">
    <view wx:if="{{datas.componentData.style==1}}">
      <view class="live live3" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
        <view class="img">
          <image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
          </image>
          <view class="live-info">
            <view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState ==  2 ? '#000000'  :'#ff3300'}}">
              <i class="dot"></i>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
            </view>
            <view class="live-title">{{datas.componentData.liveList[index].title}}</view>
          </view>
          <image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
        </view>
        <view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
          <view class="avator">
            <image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
          </view>
          <view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
        </view>
      </view>
    </view>
    <view wx:if="{{datas.componentData.style==2}}">
      <view class="live live1" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
        <view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
        <view class="img">
          <image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
          </image>
          <view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState ==  2 ? '#000000'  :'#ff3300'}}">
            <i class="dot"></i>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
          </view>
          <view class="watch-num">{{datas.componentData.liveList[index].watchNum ?datas.componentData.liveList[index].watchNum  : 0 }}次观看</view>
          <image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>

        </view>
        <view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
          <view class="avator">
            <image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
          </view>
          <view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
        </view>
      </view>
    </view>
    <view wx:if="{{datas.componentData.style==3}}">
      <view class="live live2" style="padding:{{datas.componentData.liveInfoShow ? '0 9px 10px':''}}" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
        <view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
          <view class="avator">
            <image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
          </view>
          <view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
        </view>
        <view class="live-detail">
          <view class="img">
            <image class="cover-img" mode="aspectFill" src="{{datas.componentData.liveList[index].coverUrl}}"></image>
            <view class="isLive" style="background-color:{{datas.componentData.liveList[index].liveBroadcastState ==  2 ? '#000000'  :'#ff3300'}}">
              <view class="dot"></view>
              <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
            <view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
            </view>
            <image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
          </view>
          <view class="info">
            <view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
            <view class="time"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>