WGShare.Client.Wx/pages/meeting/index.wxml

<!--pages/meeting/index.wxml-->
<view class="meeting">
  <view wx:if="{{!isFullscreen}}">
    <header-tab title='会议号:{{roomInfo.roomNum}} 会议名称:{{roomInfo.roomName}}' backGround='rgb(35,36,38)' iconSize='24' color="white" titleStyle='padding:12rpx 0;font-size:16rpx' isStatusBarHeight="{{false}}" isBack='{{false}}'></header-tab>
  </view>
  <view class="meeting-content">
    <view class="meeting-content-noAdmin" wx:if="{{isAdmin === 0}}">
      <image class="meeting-content-noAdmin-image" src="/assets/icon8.png" />
    </view>
    <view class="meeting-content-video">
      <view class="meeting-content-video-avatar" wx:if="{{!currentUser.enableCamera && !currentUser.shareSrc}}">
        <t-avatar size="small">{{currentUser.avatarName}}</t-avatar>
      </view>
      <view class="meeting-content-video-fullscreen" bind:tap="changeFullscreen">
        <t-icon name="fullscreen-exit" size="24rpx" data-name="fullscreen-exit" wx:if="{{isFullscreen}}" />
        <t-icon name="fullscreen-2" size="24rpx" data-name="fullscreen-2" wx:else />
      </view>
      <view class="meeting-content-video-canvas" wx:if="{{currentUser.shareSrc}}">
        <live-player id="player" src="{{currentUser.shareSrc}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="contain" />
      </view>
      <view class="meeting-content-video-canvas" wx:elif="{{currentUser.src && currentUser.enableCamera}}">
        <live-player id="player" src="{{currentUser.src}}" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" muted="{{currentUser.uid === user.uid}}" />
      </view>
      <view class="meeting-content-video-user">
        <view class="meeting-content-video-user-view" style=" background:{{currentUser.roleId === '1' || currentUser.roleId === '3'? '#FDC229' : '#3F51B5' }}">
          <image src="/assets/icon9.png" class="meeting-content-video-user-view-image" />
        </view>
        <image wx:if="{{!currentUser.enableMicr}}" src="/assets/{{currentUser.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-video-user-image" />
        <text class="meeting-content-video-user-text">{{currentUser.userName}}</text>
      </view>
    </view>
    <scroll-view scroll-y class="meeting-content-smallvideo" id="meeting-content-smallvideo" style="width: {{isFullscreen ? '0' :'20%'}}" bindscroll='scroll' scroll-top="{{scrollTop}}">
      <view class="meeting-content-smallvideo-box" id="video-{{item.uid}}" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" bind:tap="clickChangeVideo" wx:if="{{item.isRoom && item.isAdmin}}">
        <view class="meeting-content-smallvideo-box-view {{item.uid == currentUid  ? 'active' : ''}}">
          <view class="meeting-content-smallvideo-box-view-avatar {{item.uid == currentUid  ? 'active' : ''}}" wx:if="{{!item.enableCamera}}">
            <view style="transform:scale(0.4);">
              <t-avatar size="small">{{item.avatarName}}</t-avatar>
            </view>
          </view>
          <view class="meeting-content-smallvideo-box-view-canvas" wx:if="{{item.src}}">
            <live-pusher wx:if="{{user.uid === item.uid}}" url="{{item.src}}" mode="RTC" bindstatechange="recorderStateChange" background-mute enable-mic="{{footerList[1].active}}" enable-camera max-bitrate="500" min-bitrate="200" autopush enable-agc enable-ans device-position="front" class="meeting-content-smallvideo-box-view-canvas-play" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" beauty='{{9}}' whiteness='{{9}}' />
            <live-player src="{{item.src}}" class="meeting-content-smallvideo-box-view-canvas-play" mode="RTC" autoplay="true" bindstatechange="playerStateChange" object-fit="fillCrop" data-uid="{{item.uid}}" bindaudiovolumenotify="playerAudioVolumenotify" wx:else />
          </view>
          <view class="meeting-content-smallvideo-box-view-user">
            <view class="meeting-content-smallvideo-box-view-user-view" style=" background:{{ item.roleId === '1' || item.roleId === '3' ? '#FDC229' : '#3F51B5' }}">
              <image src="/assets/icon9.png" class="meeting-content-smallvideo-box-view-user-view-image" />
            </view>
            <image wx:if="{{!item.enableMicr}}" src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="meeting-content-smallvideo-box-view-user-image" />
            <view class="meeting-content-smallvideo-box-view-user-audio" wx:else>
              <image src="/assets/icon2.png" class="meeting-content-smallvideo-box-view-user-audio-image" />
              <view class="meeting-content-smallvideo-box-view-user-audio-stateImage" style="height:{{audioList[index].volume}}">
                <image src="/assets/icon10.png" class="meeting-content-smallvideo-box-view-user-audio-stateImage-image" />
              </view>
            </view>
            <text class="meeting-content-smallvideo-box-view-user-text">{{item.userName}}</text>
          </view>
          <view class="meeting-content-smallvideo-box-view-share" wx:if="{{item.shareSrc}}">
            屏幕分享中
          </view>
        </view>
      </view>
      <view class="meeting-content-smallvideo-up" bind:tap="scrollUp" wx:if="{{isAdmin>3}}">
        <t-icon name="chevron-up" size="24rpx" data-name="chevron-up" />
      </view>
      <view class="meeting-content-smallvideo-down" bind:tap="scrollDown" wx:if="{{isAdmin>3}}">
        <t-icon name="chevron-down" size="24rpx" data-name="chevron-down" />
      </view>
    </scroll-view>
  </view>
  <view class="meeting-footer" wx:if="{{!isFullscreen}}">
    <view class="meeting-footer-left">`
      <view class="meeting-footer-left-view" wx:for="{{footerList}}" wx:for-index="index" wx:for-item="item" wx:key="index" bind:tap="changeFooterList" data-index='{{index}}' wx:if="{{item.show}}">
        <view class="meeting-footer-left-view-view">
          <image class="meeting-footer-left-view-view-image" src="{{item.active ? item.icon : item.iconActive}}" />
          <view class="meeting-footer-left-view-view-audioImage" wx:if="{{item.title === '静音' && footerList[1].active}}" style="height:{{userVolume}}">
            <image src="/assets/icon10.png" class="meeting-footer-left-view-view-audioImage-image" />
          </view>
        </view>
        <text class="meeting-footer-left-view-text" wx:if="{{item.title === '成员'}}">{{item.title}}({{userNumer}}) </text>
        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '翻转'}}">{{item.title}}</text>
        <text class="meeting-footer-left-view-text" wx:elif="{{item.title === '聊天'}}">{{item.title}}{{noViewChatList ? '('+noViewChatList+')' : '' }}
        </text>
        <text class="meeting-footer-left-view-text" wx:else>{{item.active ? item.title : item.titleActive}}</text>
      </view>
    </view>
    <view class="meeting-footer-right" bind:tap="back">
      退出
    </view>
  </view>
</view>
<t-message id="t-message" />
<t-dialog visible="{{applySpeakDialog}}" content="该操作需向管理员申请发言权限" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="applySpeakDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
<t-dialog visible="{{leaveDialog}}" content="确定离开房间吗？" confirm-btn="{{ { content: '确定', variant: 'base', theme: 'primary' } }}" cancel-btn="取消" data-type="leaveDialog" bind:confirm="closeDialog" bind:cancel="closeDialog" style="transform: scale(0.5) translate3d(-50%, -50%, 0);" close-btn="{{false}}" />
<t-popup visible="{{userPopupVisible}}" bind:visible-change="onVisibleChange" placement="right">
  <view class="user-popup">
    <view class="user-popup-title">
      成员
    </view>
    <view class="user-popup-view">
      <view class="user-popup-view-view" wx:for="{{roomUserList}}" data-item="{{item}}" wx:key="index" wx:if="{{item.isRoom}}">
        <view class="user-popup-view-view-avatar">
          <t-avatar size="36rpx">{{item.avatarName}}</t-avatar>
          <text class="user-popup-view-view-avatar-text">{{item.userName}}</text>
        </view>
        <view class="user-popup-view-view-image">
          <image src="/assets/{{item.enableMicr ? 'icon2' : 'icon2-active'}}.png" class="user-popup-view-view-image-icon" />
          <image src="/assets/{{item.enableCamera ? 'icon3' : 'icon3-active'}}.png" class="user-popup-view-view-image-icon" />
        </view>
      </view>
    </view>
  </view>
</t-popup>
<t-popup visible="{{chatPopupVisible}}" bind:visible-change="onVisibleChange" placement="right">
  <view class="chat-popup">
    <view class="chat-popup-title">
      聊天
    </view>
    <scroll-view scroll-y="true" class="chat-popup-list" id="chatView" enhanced>
      <view class="chat-popup-list-view" wx:for="{{chatList}}" data-item="{{item}}" wx:key="index" style="text-align: {{item.me ? 'right' : 'left'}}">
        <text style="color: #666;font-size: 10rpx;margin-right: 4rpx;" wx:if="{{item.me}}">({{item.timestamp}})</text>
        <text>{{item.me ? item.message : item.userName}}</text>
        <text>：</text>
        <text>{{item.me ? item.userName : item.message}}</text>
        <text style="color: #666;font-size: 10rpx;margin-left: 4rpx;" wx:if="{{!item.me}}">({{item.timestamp}})</text>
      </view>
    </scroll-view>
    <view class="chat-popup-button">
      <view wx:for="{{commonlyChatList}}" data-item="{{item}}" wx:key="index" class="chat-popup-button-view" bind:tap="sendMeg">
        {{item}}
      </view>
    </view>
    <view class="chat-popup-input">
      <input type="text" placeholder="请输入文字" class="chat-popup-input-text" value="{{messageStr}}" bind:input="changeMessageStr" />
      <view class="chat-popup-input-submit" bind:tap="sendMeg">发送</view>
    </view>
  </view>
</t-popup>