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

<!-- index.wxml -->
<view
  class="volc-live-portrait-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 {{isMobileBackgroundBlur ? 'volc-live-mobile-background-image-blur' : ''}}"
    src="{{MobileBackImage}}"
    mode="aspectFill"
  ></image>
  <view wx:if="{{debug}}" class="userId" bindtap="debugClick">
    <view wx:if="{{debug}}">v0.1.19</view>
    <view wx:if="{{debug}}" bindtap="copyText">{{userID}}</view>
  </view>
  <view
    wx:if="{{hasLiveDescription || showPeopleCount || showPortraitStatusTag || showImageFloat || showHeaderImage}}"
    class="volc-live-portrait-top-overlay"
  >
    <view class="volc-live-portrait-description {{!hasLiveDescription ? 'volc-live-portrait-description-placeholder' : ''}}">
      <live-description wx:if="{{hasLiveDescription}}" sdkInstance="{{sdkInstance}}" />
    </view>
    <view wx:if="{{showPeopleCount || showPortraitStatusTag}}" class="volc-live-portrait-status-row">
      <people-counter
        wx:if="{{showPeopleCount}}"
        mode="portrait"
        sdkInstance="{{sdkInstance}}"
      />
      <view class="volc-live-portrait-status-spacer"></view>
      <view wx:if="{{showPortraitStatusTag}}" class="volc-live-portrait-status-tag">
        <view>{{portraitStatusText}}</view>
      </view>
    </view>
    <view
      wx:if="{{showImageFloat || showHeaderImage}}"
      class="volc-live-portrait-top-media-row {{!showImageFloat && showHeaderImage ? 'volc-live-portrait-top-media-row-only-banner' : ''}}"
    >
      <scroll-view
        wx:if="{{showImageFloat}}"
        scroll-x
        enhanced="{{true}}"
        show-scrollbar="{{false}}"
        class="volc-live-portrait-image-float-scroll {{showHeaderImage ? 'volc-live-portrait-image-float-scroll-with-banner' : ''}}"
      >
        <image-text-float
          bind:commentCheck="commentCheck"
          bind:previewimage="openPreviewImage"
          bind:attentionInteraction="onAttentionInteraction"
          bind:openImageTextCardDrawer="openImageTextCardDrawer"
          sdkInstance="{{sdkInstance}}"
        />
      </scroll-view>
      <view
        wx:if="{{showHeaderImage}}"
        class="volc-live-portrait-header-banner"
        catchtap="catchNone"
      >
        <image
          class="volc-live-portrait-header-banner-image"
          src="{{HeaderImageUrl}}"
          mode="aspectFit"
        ></image>
        <view class="volc-live-portrait-header-banner-close" bindtap="closeHeaderBanner">
          <mp-icon icon="close" size="{{10}}" color="#ffffff" />
        </view>
      </view>
    </view>
  </view>
  <double-tap-like wx:if="{{showPlayer}}">
    <player id="portraitPlayer" wx:if="{{showPlayer}}" isPortrait="{{true}}" sdkInstance="{{sdkInstance}}" />
  </double-tap-like>
  <!-- 竖屏 chat 内含默认可见的工具栏入口，初始化配置到达前先不挂载，避免 sdkInit loading 期间露出业务按钮。 -->
  <chat
    wx:if="{{!sdkInitLoading}}"
    id="portraitChat"
    class="volc-live-portrait-chat"
    bind:commentCheck="commentCheck"
    bind:previewimage="openPreviewImage"
    sdkInstance="{{sdkInstance}}"
  >
    <live-countdown slot="top-area" sdkInstance="{{sdkInstance}}" bind:commentCheck="commentCheck" />
    <more-button id="portraitMoreButton" sdkInstance="{{sdkInstance}}" />
    <thumb-button mode="portrait" sdkInstance="{{sdkInstance}}" />
  </chat>
  
  <image-text-root class="image-text-root" sdkInstance="{{sdkInstance}}" bind:commentCheck="commentCheck" bind:openChatInput="openChatInput" />
  <!-- 互动工具浮窗位于顶部 scroll-view 内，抽屉放在父级，避免真机 scroll-view 层级导致抽屉打不开。 -->
  <Drawer id='portrait-image-text-card-drawer' custom-drawer="portrait-image-text-card-drawer-shell" needCancel="{{false}}"
    bind:myCancel="cancelImageTextCardDrawer">
    <!-- 控制传给 Drawer 的真实 slot 内容，避免抽屉未打开时提前创建完整互动工具列表。 -->
    <view wx:if="{{imageTextCardDrawerReady}}" class="portrait-image-text-card-wrap" capture-bind:touchstart="onAttentionInteraction" capture-bind:tap="onAttentionInteraction">
      <view class="portrait-image-text-card-title">互动工具</view>
      <mp-icon bindtap="closeImageTextCardDrawer" icon="close" color="#939aa3" size="{{20}}" class="portrait-image-text-card-close" />
      <view class="portrait-image-text-card">
        <image-text-card bind:commentCheck="commentCheck" bind:previewimage="openPreviewImage" sdkInstance="{{sdkInstance}}" forceLightTheme="{{true}}" />
      </view>
    </view>
  </Drawer>
  <view class="volc-live-floating-container">
    <view class="volc-live-floating-item">
      <ad-floating sdkInstance="{{sdkInstance}}" />
    </view>
    <view class="volc-live-floating-item">
      <float-card sdkInstance="{{sdkInstance}}" />
    </view>
  </view>
  <product-card id="volc-productContainer" sdkInstance="{{sdkInstance}}" isPortrait="true"
    themeColor="{{themeColor}}" />
  <richText sdkInstance="{{sdkInstance}}" themeColor="{{themeColor}}" />
  <image-preview
    visible="{{previewImageVisible}}"
    src="{{previewImageSrc}}"
    zIndex="{{12000}}"
    bind:close="closePreviewImage"
  />
  <ban-page sdkInstance="{{sdkInstance}}" bind:continue="onBanContinue" />
  <attention-detection id="attentionDetection" sdkInstance="{{sdkInstance}}" />
  <volc-loading wx:if="{{sdkInitLoading}}" zIndex="{{20001}}" theme="dark" />
</view>
<view class="volc-live-portrait-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"
/>