groupCalling.wxml 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!-- 视频通话 -->
  2. <view class="invite-call transition-animation" wx:if="{{callType === 2}}">
  3. <live-pusher class="local-video" wx:if="{{isGroup===false}}" device-position="{{pusher.frontCamera}}" binderror="pusherErrorHandler"/>
  4. <view class="invite-calling">
  5. <!-- 主叫方 -->
  6. <swiper class="swiper" wx:if="{{isSponsor}}" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
  7. <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
  8. <swiper-item class="invite-calling-list">
  9. <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
  10. <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{item.userID !== ownUserId}}">
  11. <view class="invite-calling-item-loadimg">
  12. <image src="../../static/loading.png"></image>
  13. </view>
  14. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  15. </view>
  16. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
  17. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  18. </view>
  19. </swiper-item>
  20. </block>
  21. </swiper>
  22. <!-- 被叫方 -->
  23. <view wx:else>
  24. <view class="invite-calling-single">
  25. <image class="avatar" src="{{allUsers[0].avatar || '../../static/default_avatar.png'}}" id="{{allUsers[0].userID}}" binderror="handleErrorImage" />
  26. <view class="tips">{{allUsers[0].nick || allUsers[0].userID }}</view>
  27. <view class="invite-txt">邀请你参加多人通话</view>
  28. </view>
  29. <view class="invite-other-txt">参与通话的还有:</view>
  30. <view class="invite-other-list">
  31. <view class="invite-other-item" wx:if="{{index>0}}" wx:for="{{allUsers}}" wx:key="item">
  32. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
  33. <view class="invite-other-item-name">{{ item.nick || item.userID}}</view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="footer">
  38. <!-- <view class="btn-operate" wx:if="{{isSponsor}}">
  39. <view class="btn-operate-item call-switch" catch:tap="switchAudioCall">
  40. <view class="call-operate">
  41. <image src="../../static/trans.png" />
  42. </view>
  43. <text>切到语音通话</text>
  44. </view>
  45. </view> -->
  46. <view class="btn-operate" wx:if="{{isSponsor}}">
  47. <view class="btn-operate-item">
  48. <view class="btn-container">
  49. <view class="call-operate" catch:tap="hangup">
  50. <image src="../../static/hangup.png" />
  51. </view>
  52. <!-- <view class="invite-calling-header-left">
  53. <image src="../../static/switch_camera.png" data-device="{{pusher.frontCamera}}" catch:tap="toggleSwitchCamera" />
  54. </view> -->
  55. </view>
  56. <text style="color: #666666">挂断</text>
  57. </view>
  58. </view>
  59. <view class="btn-operate" wx:if="{{!isSponsor}}">
  60. <view class="btn-operate-item">
  61. <view class="call-operate" style="background-color: red" catch:tap="reject">
  62. <image src="../../static/hangup.png" />
  63. </view>
  64. <text style="color: #666666">挂断</text>
  65. </view>
  66. <view class="btn-operate-item">
  67. <view class="call-operate" catch:tap="accept">
  68. <image src="../../static/dialing.png" />
  69. </view>
  70. <text style="color: #666666">接听</text>
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <!-- 语音通话 -->
  77. <view class="incoming-call audio-call transition-animation" wx:if="{{callType === 1}}">
  78. <!-- 主叫方 -->
  79. <swiper class="swiper" wx:if="{{isSponsor}}" indicator-dots="{{allUsers.length/4 > 1}}" indicator-color="white" indicator-active-color="black">
  80. <block wx:for="{{(allUsers.length)/4}}" wx:key="*this" wx:for-index="pos">
  81. <swiper-item class="invite-calling-list">
  82. <view wx:for="{{allUsers}}" wx:key="userID" class="invite-calling-item" wx:if="{{index >= pos*4 && index < pos*4+4}}">
  83. <view id="{{item.userID}}" class="invite-calling-item-message" wx:if="{{item.userID !== ownUserId}}">
  84. <view class="invite-calling-item-loadimg">
  85. <image src="../../static/loading.png"></image>
  86. </view>
  87. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  88. </view>
  89. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
  90. <view class="invite-calling-item-id">{{item.nick || item.userID}}</view>
  91. </view>
  92. </swiper-item>
  93. </block>
  94. </swiper>
  95. <!-- 被叫方 -->
  96. <view wx:else>
  97. <view class="invite-calling-single">
  98. <image class="avatar" src="{{allUsers[0].avatar || '../../static/default_avatar.png'}}" id="{{allUsers[0].userID}}" binderror="handleErrorImage" />
  99. <view class="tips">{{allUsers[0].nick || allUsers[0].userID }}</view>
  100. <view class="invite-txt">邀请你参加多人通话</view>
  101. </view>
  102. <view class="invite-other-txt">参与通话的还有:</view>
  103. <view class="invite-other-list">
  104. <view class="invite-other-item" wx:if="{{index>0}}" wx:for="{{allUsers}}" wx:key="item">
  105. <image class="avatar" src="{{item.avatar || '../../static/default_avatar.png'}}" binderror="handleErrorImage" />
  106. <view class="invite-other-item-name">{{item.nick || item.userID}}</view>
  107. </view>
  108. </view>
  109. </view>
  110. <!-- 菜单 -->
  111. <view class="footer">
  112. <view wx:if="{{!isSponsor && callType === 1}}" class="btn-operate">
  113. <view class="button-container">
  114. <view class="call-operate" style="background-color: red" catch:tap="reject">
  115. <image src="../../static/hangup.png" />
  116. </view>
  117. <view style="margin-top:10px;color: #666666">挂断</view>
  118. </view>
  119. <view class="button-container">
  120. <view class="call-operate" catch:tap="accept">
  121. <image src="../../static/dialing.png" />
  122. </view>
  123. <view style="margin-top:10px;color: #666666">接听</view>
  124. </view>
  125. </view>
  126. <view wx:if="{{isSponsor && callType === 1}}" class="btn-operate">
  127. <view class="button-container">
  128. <view class="call-operate" style="background-color: red" catch:tap="hangup">
  129. <image src="../../static/hangup.png" />
  130. </view>
  131. <view style="margin-top:10px;color: #666666">挂断</view>
  132. </view>
  133. </view>
  134. </view>
  135. </view>