ruo-shan-cloud-pharmacy/miniprogram/package-live/volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.wxml

<!-- volc-mini-sdk/components/volc-live-landscape/volc-live-landscape.wxml -->
<view
  class="volc-live-landscape-container"
  style="{{containerStyle + style}}"
  wx:if="{{!questionnaireBlocking}}"
  capture-bind:touchstart="onAttentionInteraction"
  capture-bind:tap="onAttentionInteraction"
>
  <image
    wx:if="{{MobileBackImage}}"
    class="volc-live-mobile-background-image"
    src="{{MobileBackImage}}"
    mode="aspectFill"
  ></image>
  <image
    wx:if="{{MobileBackImage && isMobileBackgroundBlur}}"
    class="volc-live-mobile-background-image volc-live-mobile-background-image-blur"
    src="{{MobileBackImage}}"
    mode="aspectFill"
  ></image>
  <view class="userId" bindtap="debugClick">
    <view wx:if="{{debug}}">v0.1.19</view>
    <view wx:if="{{debug}}" bindtap="copyText">{{userID}}</view>
  </view>
  <image
    wx:if="{{showHeaderImage}}"
    class="volc-live-landscape-header-image"
    src="{{HeaderImageUrl}}"
    mode="aspectFill"
  ></image>
  <player
    id="landscapePlayer"
    class="volc-live-landscape-player"
    wx:if="{{showPlayer}}"
    isPortrait="{{false}}"
    sdkInstance="{{sdkInstance}}"
  >
    <!-- 播放器 topRight slot 只承载按钮；more 抽屉挂到横屏根节点，避免被播放器容器或原生层级裁剪。 -->
    <landscape-more-button
      slot="topRight"
      module="player"
      sdkInstance="{{sdkInstance}}"
      iconList="{{landscapeBottomIconBuckets.playerIconList}}"
      useExternalDrawer="{{true}}"
      hasExternalDrawerItems="{{landscapeBottomIconBuckets.playerDrawerIconList.length > 0}}"
      bind:openmore="openLandscapePlayerMoreDrawer"
      bind:tapicon="handleLandscapeBottomIconTap"
    />
  </player>
  
  <live-countdown wx:if="{{showCountdown}}" class="volc-live-landscape-countdown" sdkInstance="{{sdkInstance}}" isLandscape="{{true}}" bind:commentCheck="commentCheck" />
  <view wx:if="{{hasLiveDescription}}" class="volc-live-landscape-description {{IsUseDarkTheme ? 'volc-live-landscape-description-dark' : ''}}">
    <live-description sdkInstance="{{sdkInstance}}" isLandscape="{{true}}" />
  </view>
  <mp-tabs class="volc-live-landscape-tab" container-style="height: 100%;" tab-class="tab-action" swiper-class="menu-swiper" wx:if="{{tabList.length > 0}}" tabs="{{tabList}}" activeTab="{{activeTab}}" tabActiveTextColor="{{themeColor.FontColor}}" tabInactiveTextColor="{{themeColor.BackFontColor}}" bindtabclick="onTabClick" bindchange="onTabChange">
    <block wx:for="{{tabList}}" wx:key="index">
      <view wx:if="{{renderedTabMap[index]}}" class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}">
        <chat
          id="landscapeChat"
          class="tab-chat"
          wx:if="{{item.key === 'COMMENT'}}"
          bind:commentCheck="commentCheck"
          bind:previewimage="openPreviewImage"
          bind:editorstatechange="onEditorStateChange"
          sdkInstance="{{sdkInstance}}"
          isLandscape="{{true}}"
          externalEditorCloseSignal="{{externalEditorCloseSignal}}"
        >
          <landscape-more-button module="toolbar" iconList="{{landscapeBottomIconBuckets.toolbarIconList}}" bind:tapicon="handleLandscapeBottomIconTap" />
          <thumb-button mode="landscape" sdkInstance="{{sdkInstance}}" />
        </chat>
        <image-text-card
          wx:if="{{item.key === 'IMAGETEXT'}}"
          bind:commentCheck="commentCheck"
          bind:previewimage="openPreviewImage"
          sdkInstance="{{sdkInstance}}"
        />
        <view wx:if="{{item.key === 'CARDLIST'}}" class="product-card-container">
          <view class="product-header" style="color: {{themeColor.FontColor}};">
            <view class="product-header-left">
              <view class="product-title">商品卡片</view>
              <view class="product-count">
                共
                <text class="count-number">{{productCounts[item.index] || 0}}</text>
                件宝贝
              </view>
            </view>
            <view class="header-right">
              <coupon-btn-list sdkInstance="{{sdkInstance}}" showEntry="{{true}}" mode="landscape" entryTheme="{{IsUseDarkTheme ? 'dark' : 'light'}}" />
            </view>
          </view>
          <view class="product-card-list">
            <!-- 横屏商品列表在固定头部下方占剩余空间，card-list 内部会按该区域真实高度设置 recycle-view。 -->
            <card-list class="product-card-list-component" style="display: block; height: 100%;" mode="landscape" sdkInstance="{{sdkInstance}}" productIndex="{{item.index}}" themeColor="{{themeColor}}" />
          </view>
        </view>
        <program-list wx:if="{{item.key === 'PROGRAMLIST'}}" sdkInstance="{{sdkInstance}}" themeColor="{{themeColor}}" />
        <richText wx:if="{{item.key === 'RICHTEXT'}}" sdkInstance="{{sdkInstance}}" index="{{item.index}}" themeColor="{{themeColor}}" />
        <!-- 浮窗只属于评论 tab；切到其他 tab 时用 class 隐藏，避免关闭态等内部状态因 wx:if 反复丢失。 -->
        <view wx:if="{{item.key === 'COMMENT'}}" class="volc-live-right-float-area {{showFloatingContainer ? '' : 'volc-live-right-float-area-hidden'}}">
          <image-text-float wx:if="{{hasImageFloatConfig}}" bind:commentCheck="commentCheck" bind:previewimage="openPreviewImage" bind:openImageTextTab="openImageTextTab" sdkInstance="{{sdkInstance}}" isLandScape="{{true}}" floatIconNum="{{imageTextFloatIconNum}}" />
          <view class="volc-live-floating-container">
            <view class="volc-live-floating-item">
              <ad-floating sdkInstance="{{sdkInstance}}" bind:visibilityChange="onAdFloatingChange" />
            </view>
            <view class="volc-live-floating-item">
              <float-card sdkInstance="{{sdkInstance}}" bind:visibilityChange="onFloatCardChange" />
            </view>
          </view>
        </view>
      </view>
    </block>
  </mp-tabs>
  <image-preview
    visible="{{previewImageVisible}}"
    src="{{previewImageSrc}}"
    zIndex="{{12000}}"
    bind:close="closePreviewImage"
  />
  <view wx:if="{{editorEntering}}" class="volc-live-editor-mask" bindtap="closeEditorFromMask"></view>
  <image-text-root sdkInstance="{{sdkInstance}}" bind:commentCheck="commentCheck" bind:openChatInput="openChatInput" />
  <product-card id="volc-productContainerLandscape" sdkInstance="{{sdkInstance}}" />
  <ban-page sdkInstance="{{sdkInstance}}" bind:continue="onBanContinue" />
  <attention-detection id="attentionDetection" sdkInstance="{{sdkInstance}}" />
  <Drawer id="volc-landscape-player-more-drawer">
    <view class="landscape-more-drawer">
      <view
        class="landscape-more-drawer-item"
        style="{{item.containerStyle}}"
        wx:for="{{landscapeBottomIconBuckets.playerDrawerIconList}}"
        wx:for-item="item"
        wx:key="key"
        data-key="{{item.key}}"
        bindtap="handleLandscapePlayerMoreDrawerIconTap"
      >
        <view class="landscape-more-drawer-icon">
          <image wx:if="{{item.iconUrl || item.src}}" class="landscape-more-drawer-image" src="{{item.iconUrl || item.src}}" mode="aspectFit" style="{{item.style}}" />
          <mp-icon wx:if="{{item.mpIcon}}" icon="{{item.mpIcon.icon}}" color="{{item.mpIcon.color}}" size="{{item.mpIcon.size}}" />
        </view>
        <view class="landscape-more-drawer-name">{{item.title || item.name}}</view>
      </view>
    </view>
  </Drawer>
  <volc-loading wx:if="{{sdkInitLoading}}" zIndex="{{20001}}" theme="dark" />
</view>
<view class="volc-live-landscape-container" style="{{containerStyle + style}}" wx:if="{{questionnaireBlocking}}"></view>
<questionnaire
  id="questionnaire"
  sdkInstance="{{sdkInstance}}"
  allowedTriggers="{{['live_page_in']}}"
  closable="{{false}}"
  bind:commentCheck="commentCheck"
  bind:blockingChange="onQuestionnaireBlockingChange"
/>