Merge branch 'master' into test-audio

# Conflicts: # pages.json # pages/room/incom.vue # pages/room/room.nvue # stores/user.js
2026-02-06 21:01:27 +08:00
parent 32540a8ad7 6a655a302a
commit 8f56d569f8
15 changed files with 2423 additions and 1991 deletions
--- a/pages/audience/index.nvue
+++ b/pages/audience/index.nvue
--- a/pages/discover/discover.vue
+++ b/pages/discover/discover.vue
@@ -11,7 +11,7 @@
    { name: '公司介绍', icon: 'company' },
    { name: '朋友圈', icon: 'circle' },
    { name: '线上商城', icon: 'mall' },
-    { name: '我的拼团伙伴', icon: 'team' },
+    { name: '购买记录', icon: 'team' },
    { name: '项目入口', icon: 'project' },
    { name: '直播列表', icon: 'liveStream' }
  ]
--- a/pages/mall/confirm-order.vue
+++ b/pages/mall/confirm-order.vue
@@ -160,7 +160,10 @@
  })

  onLoad(async e => {
+    // groupId
    groupId.value = e?.groupId || ''
+    console.log(e?.groupId, '===')
+    formData.startGroup = !!e?.groupId
    await getData(e.productId)
  })
 </script>
@@ -267,6 +270,7 @@
      </view>

      <view
+        v-if="groupId"
        class="pay-way-item"
        @click="formData.startGroup = !formData.startGroup"
      >
--- a/pages/mall/detail.vue
+++ b/pages/mall/detail.vue
@@ -184,7 +184,7 @@
                "
              />
            </view>
-            <button
+            <!-- <button
              v-if="item.showDate"
              @click="
                navigateTo('/pages/mall/confirm-order', {
@@ -194,7 +194,7 @@
              "
            >
              去拼单
-            </button>
+            </button> -->
          </view>
        </view>
      </view>
--- a/pages/my-index/withdraw.vue
+++ b/pages/my-index/withdraw.vue
@@ -12,9 +12,11 @@
  } from '@/api/my-index'
  import { useUI } from '@/utils/use-ui'
  import { useAuthUser } from '@/composables/useAuthUser'
+  import { useUserStore } from '../../stores/user'

  const { showToast, showDialog } = useUI()
  const { integralData } = useAuthUser()
+  const { getIntegral } = useUserStore()

  const tixian = ref(null)
  const popup = ref(null)
@@ -120,6 +122,7 @@
      }
      tixian.value.close()
      await addUserWithdraw(data)
+      await getIntegral()
      await showToast(`提现成功`, 'success')
      navigateBack()
    } catch (error) {
--- a/pages/room/incom.vue
+++ b/pages/room/incom.vue
@@ -1,353 +1,395 @@
 <template>
-	<!-- 来电接听界面 -->
-	<view class="incoming-call">
-		<!-- 背景模糊层 -->
-		<view class="blur-background" v-if="callBackground">
-			<image :src="callBackground" mode="aspectFill" class="bg-image"></image>
-			<view class="bg-overlay"></view>
-		</view>
+  <!-- 来电接听界面 -->
+    <view class="incoming-call">
+        <!-- 背景模糊层 -->
+        <view class="blur-background" v-if="callBackground">
+            <image
+                    :src="callBackground"
+                    mode="aspectFill"
+                    class="bg-image"
+            ></image>
+            <view class="bg-overlay"></view>
+        </view>

-		<!-- 主内容区 -->
-		<view class="caller-info">
-			<view class="caller-avatar-container">
-				<view class="caller-avatar" :class="{'avatar-ring': isRinging}">
-					<image v-if="callerAvatar" :src="callerAvatar" class="avatar-image"></image>
-					<uni-icons v-else type="contact-filled" size="50" color="#fff"></uni-icons>
-				</view>
-			</view>
-			<text class="caller-name">{{callerName}}</text>
-			<text class="call-type">{{ localSession.mediaType === 0 ? '语音通话' : "视频通话" }}</text>
-			<text class="call-status">{{callStatus}}</text>
-		</view>
+        <!-- 主内容区 -->
+        <view class="caller-info">
+            <view class="caller-avatar-container">
+                <view class="caller-avatar" :class="{ 'avatar-ring': isRinging }">
+                    <image
+                            v-if="callerInfo?.avatar"
+                            :src="callerInfo?.avatar"
+                            class="avatar-image"
+                    ></image>
+                    <uni-icons
+                            v-else
+                            type="contact-filled"
+                            size="50"
+                            color="#fff"
+                    ></uni-icons>
+                </view>
+            </view>
+            <text class="caller-name">
+                {{ callerInfo?.nick || callerInfo?.userID }}
+            </text>
+            <text class="call-type">
+                {{ callState === 'call' ? '呼叫中，等待对方接受邀请...' : '对话中...' }}
+            </text>
+            <text class="call-status">{{ mediaType === 'audio' ? "语音通话" : "视频通话" }}</text>
+        </view>

-		<!-- 控制按钮 -->
-		<view class="incoming-controls">
-			<view class="incoming-control" @click="cutFn(false)">
-				<view class="call-btn decline-btn" :class="{'btn-active': activeBtn === 'decline'}">
-					<uni-icons type="closeempty" size="32" color="#fff"></uni-icons>
-				</view>
-				<text class="btn-text">拒绝</text>
-			</view>
+        <!-- 控制按钮 -->
+        <view class="incoming-controls">
+            <view class="incoming-control" @click="cutFn(false)">
+                <view
+                        class="call-btn decline-btn"
+                        :class="{ 'btn-active': activeBtn === 'decline' }"
+                >
+                    <uni-icons type="closeempty" size="32" color="#fff"></uni-icons>
+                </view>
+                <text class="btn-text">{{ callState === 'call' || callState == 'dialogue' ? "挂断" : "拒绝" }}</text>
+            </view>

-			<view class="incoming-control" @click="cutFn(true)">
-				<view class="call-btn accept-btn" :class="{'btn-active': activeBtn === 'accept'}">
-					<uni-icons type="checkmarkempty" size="28" color="#fff"></uni-icons>
-				</view>
-				<text class="btn-text">接听</text>
-			</view>
-		</view>
-	</view>
+            <view
+                    v-if="callState === 'answer'"
+                    class="incoming-control"
+                    @click="cutFn(true)"
+            >
+                <view
+                        class="call-btn accept-btn"
+                        :class="{ 'btn-active': activeBtn === 'accept' }"
+                >
+                    <uni-icons
+                            type="checkmarkempty"
+                            size="28"
+                            color="#fff"
+                    ></uni-icons>
+                </view>
+                <text class="btn-text">接听</text>
+            </view>
+        </view>
+    </view>
 </template>

-<script>
-	// #ifdef APP-PLUS
-	import * as call from "@/uni_modules/RongCloud-CallWrapper/lib/index"
-	// #endif
-	export default {
-		name: "incoming-call",
-		data() {
-			return {
-				// 通话状态
-				isRinging: true,
-				isCalling: false,
-				isEnded: false,
+<script setup>
+import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+import { ref, watch } from 'vue'
+import { onLoad, onUnload, onHide } from '@dcloudio/uni-app'
+import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
+import { useUI } from '../../utils/use-ui'
+import { navigateBack } from '../../utils/router'

-				// 通话时间
-				callDuration: 0,
-				callTimer: null,
+CallLib.init({})
+const { showLoading, hideLoading } = useUI()
+const callBackground = ref('/static/images/public/random2.png')
+/** 呼叫用户信息 */
+const callerInfo = ref({})
+/** 通话状态 */
+const isRinging = ref(true)
+/** 控制按钮状态 */
+const activeBtn = ref(null)
+/**
+ * 拨打状态
+ * call: 发起呼叫
+ * answer: 接听
+ * dialogue: 对话中
+ */
+const callState = ref('')
+CallLib.onRemoteUserJoined(res => {
+    console.log(
+        'Engine:OnRemoteUserJoined=>' +
+        '主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
+        res.data.userId
+    )
+    callState.value = 'dialogue'
+})

-				// 控制按钮状态
-				activeBtn: null,

-				// 通话设置
-				isMuted: false,
-				isSpeakerOn: true,
-				isVideoOn: true,
+// CallLib.onRemoteUserRinging(res => {
+//   console.log(
+//     '主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
+//     res.data.userId
+//   )
+// })

-				// 控制界面显示
-				showActionBar: false,
-				callerName: "用户id",
-				callerAvatar: "/static/images/public/random2.png",
-				callBackground: "/static/images/public/random2.png",
-				localSession: null,
-			};
-		},
-		mounted() {
-			// 30秒后自动挂断
-			setTimeout(() => {
-				if (!this.isCalling && !this.isEnded) {
-					this.autoDecline();
-				}
-			}, 30000);
-		},
-		onLoad() {
-			uni.getStorage({
-				key: "room-parameters",
-				success: (res) => {
-					console.log('res: ',res);
-					this.localSession = res.data
-					this.callerName = res.data.mine
-				}
-			});
-		},
-		methods: {
-			//是否接入
-			cutFn(isFlag){
-				//确认接入
-				console.log('isFlag: ',isFlag);
-				if(isFlag){
-					this.isEnded = true;
-					console.log('localSession: ',this.localSession);
-					if (this.localSession.callId && this.localSession.callId.length > 0) {
-						this.onCallReceived(this.localSession);
-					}
-				}else{
-					//取消接入
-					call.hangup();
-					uni.navigateBack()
-				}
-			},
-			//是否接收逻辑
-			onCallReceived(session) {
-				// //呼入
-				uni.setStorageSync('room-parameters', {
-					callType: 'in',
-					mediaType: session.mediaType === 0 ? 'audio' : 'video'
-				});
-				//跳转.nvue
-				uni.redirectTo({
-					url:'/pages/room/room'
-				});
-			},
-			// 自动拒绝（无人接听）
-			autoDecline() {
-				this.stopRinging();
-				this.isEnded = true;
-				this.callStatus = "未接听";
+// CallLib.onError(res => {
+//   console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
+// })

-				call.hangup();
+/** 按钮状态 */
+const cutFn = show => {
+    if (show) {
+        // 接听电话 dialogue
+        if(mediaType.value === 'audio'){
+            CallLib.enableMicrophone(true)
+        }
+        CallLib.accept()
+        callState.value = 'dialogue'
+        if(mediaType.value === 'video'){
+            uni.redirectTo({
+                url: "/pages/room/room"
+            })
+        }
+    } else {
+        //取消接听，返回上一页
+        CallLib.hangup()
+        navigateBack()
+    }
+}

-				// 2秒后关闭界面
-				setTimeout(() => {
-					uni.navigateBack()
-				}, 2000);
-			},
-		}
-	};
+const mediaType= ref("audio")
+
+onLoad(async e => {
+    callState.value = e.type
+    mediaType.value = e.mediaType
+    console.log(e)
+    showLoading()
+    const res = await TUIUserService.getUserProfile({
+        userIDList: [e.userID]
+    })
+    hideLoading()
+    callerInfo.value = res.data[0]
+    if (e.type === 'call') {
+        CallLib.enableMicrophone(true)
+        CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
+    }
+    if(e.callType == "in"){
+        // 接听语音通话
+        callState.value = 'answer'
+    }
+    console.log('callState.value: ',callState.value);
+    console.log('===好友信息', res)
+})
+
+// onUnload( ()=>{
+//  removeAllListeners()
+// })
+
+// onHide( ()=>{
+//  removeAllListeners()
+// })
+
+function removeAllListeners(){
+    //移除监听-接收到通话呼入
+    CallLib.removeRemoteUserJoinedListener();
+    // 移除监听-通话已结束
+    CallLib.removeCallDisconnectedListener();
+    // 移除监听-通话出现错误的回调
+    CallLib.removeErrorListener();
+}
 </script>

 <style lang="scss" scoped>
-	.incoming-call {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 9999;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		background-color: #000;
+.incoming-call {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #000;

-		.blur-background {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 0;
+  .blur-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;

-			.bg-image {
-				width: 100%;
-				height: 100%;
-				filter: blur(20px);
-				opacity: 0.6;
-			}
+    .bg-image {
+      width: 100%;
+      height: 100%;
+      filter: blur(20px);
+      opacity: 0.6;
+    }

-			.bg-overlay {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				background: rgba(0, 0, 0, 0.5);
-			}
-		}
+    .bg-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }

-		.caller-info {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			padding-top: 100rpx;
-			z-index: 1;
+  .caller-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 100rpx;
+    z-index: 1;

-			.caller-avatar-container {
-				position: relative;
-				margin-bottom: 40rpx;
+    .caller-avatar-container {
+      position: relative;
+      margin-bottom: 40rpx;

-				.caller-avatar {
-					width: 180rpx;
-					height: 180rpx;
-					border-radius: 50%;
-					background: linear-gradient(135deg, #1aad19, #129611);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					overflow: hidden;
+      .caller-avatar {
+        width: 180rpx;
+        height: 180rpx;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #1aad19, #129611);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;

-					.avatar-image {
-						width: 100%;
-						height: 100%;
-					}
+        .avatar-image {
+          width: 100%;
+          height: 100%;
+        }

-					&.avatar-ring {
-						animation: ringPulse 1.5s infinite;
-					}
-				}
-			}
+        &.avatar-ring {
+          animation: ringPulse 1.5s infinite;
+        }
+      }
+    }

-			.caller-name {
-				font-size: 48rpx;
-				color: #fff;
-				font-weight: 500;
-				margin-bottom: 20rpx;
-			}
+    .caller-name {
+      font-size: 48rpx;
+      color: #fff;
+      font-weight: 500;
+      margin-bottom: 20rpx;
+    }

-			.call-type {
-				font-size: 32rpx;
-				color: rgba(255, 255, 255, 0.9);
-				margin-bottom: 10rpx;
-			}
+    .call-type {
+      font-size: 32rpx;
+      color: rgba(255, 255, 255, 0.9);
+      margin-bottom: 10rpx;
+    }

-			.call-status {
-				font-size: 28rpx;
-				color: rgba(255, 255, 255, 0.7);
-			}
+    .call-status {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.7);
+    }

-			.call-timer {
-				margin-top: 30rpx;
-				padding: 10rpx 30rpx;
-				background: rgba(255, 255, 255, 0.1);
-				border-radius: 30rpx;
+    .call-timer {
+      margin-top: 30rpx;
+      padding: 10rpx 30rpx;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 30rpx;

-				.timer-text {
-					font-size: 32rpx;
-					color: #fff;
-					font-weight: 500;
-				}
-			}
-		}
+      .timer-text {
+        font-size: 32rpx;
+        color: #fff;
+        font-weight: 500;
+      }
+    }
+  }

-		.incoming-controls {
-			display: flex;
-			justify-content: space-around;
-			padding: 80rpx 100rpx 120rpx;
-			z-index: 1;
+  .incoming-controls {
+    display: flex;
+    justify-content: space-around;
+    padding: 80rpx 100rpx 120rpx;
+    z-index: 1;

-			.incoming-control {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
+    .incoming-control {
+      display: flex;
+      flex-direction: column;
+      align-items: center;

-				.call-btn {
-					width: 120rpx;
-					height: 120rpx;
-					border-radius: 50%;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin-bottom: 20rpx;
-					transition: all 0.2s;
+      .call-btn {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20rpx;
+        transition: all 0.2s;

-					&.decline-btn {
-						background-color: #f43f3b;
+        &.decline-btn {
+          background-color: #f43f3b;

-						&.btn-active {
-							transform: scale(0.9);
-							background-color: #d93632;
-						}
-					}
+          &.btn-active {
+            transform: scale(0.9);
+            background-color: #d93632;
+          }
+        }

-					&.accept-btn {
-						background-color: #07c160;
+        &.accept-btn {
+          background-color: #07c160;

-						&.btn-active {
-							transform: scale(0.9);
-							background-color: #06ad56;
-						}
-					}
-				}
+          &.btn-active {
+            transform: scale(0.9);
+            background-color: #06ad56;
+          }
+        }
+      }

-				.btn-text {
-					font-size: 28rpx;
-					color: #fff;
-				}
-			}
-		}
+      .btn-text {
+        font-size: 28rpx;
+        color: #fff;
+      }
+    }
+  }

-		.action-bar {
-			position: absolute;
-			bottom: 60rpx;
-			left: 0;
-			width: 100%;
-			display: flex;
-			justify-content: space-around;
-			padding: 0 60rpx;
-			z-index: 1;
+  .action-bar {
+    position: absolute;
+    bottom: 60rpx;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 60rpx;
+    z-index: 1;

-			.action-item {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
+    .action-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;

-				.action-icon {
-					width: 100rpx;
-					height: 100rpx;
-					border-radius: 50%;
-					background-color: rgba(255, 255, 255, 0.2);
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin-bottom: 20rpx;
-					transition: all 0.3s;
+      .action-icon {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 20rpx;
+        transition: all 0.3s;

-					&.active {
-						background-color: rgba(255, 255, 255, 0.4);
-					}
-				}
+        &.active {
+          background-color: rgba(255, 255, 255, 0.4);
+        }
+      }

-				.action-text {
-					font-size: 24rpx;
-					color: #fff;
-				}
-			}
-		}
-	}
+      .action-text {
+        font-size: 24rpx;
+        color: #fff;
+      }
+    }
+  }
+}

-	@keyframes ringPulse {
-		0% {
-			box-shadow: 0 0 0 0 rgba(26, 173, 25, 0.4);
-		}
+@keyframes ringPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(26, 173, 25, 0.4);
+  }

-		70% {
-			box-shadow: 0 0 0 30rpx rgba(26, 173, 25, 0);
-		}
+  70% {
+    box-shadow: 0 0 0 30rpx rgba(26, 173, 25, 0);
+  }

-		100% {
-			box-shadow: 0 0 0 0 rgba(26, 173, 25, 0);
-		}
-	}
+  100% {
+    box-shadow: 0 0 0 0 rgba(26, 173, 25, 0);
+  }
+}

-	/* 响应式调整 */
-	@media (max-height: 600px) {
-		.incoming-controls {
-			padding: 40rpx 100rpx 80rpx !important;
-		}
+/* 响应式调整 */
+@media (max-height: 600px) {
+  .incoming-controls {
+    padding: 40rpx 100rpx 80rpx !important;
+  }

-		.action-bar {
-			bottom: 40rpx !important;
-		}
-	}
-</style>
+  .action-bar {
+    bottom: 40rpx !important;
+  }
+}
+</style>
--- a/pages/room/room.nvue
+++ b/pages/room/room.nvue
@@ -1,13 +1,20 @@
 <template>
 	<view class="content">
 		<!-- 单人视频 -->
-		<view v-if="users.length<=2">
-			<RongCloud-Call-RCUniCallView class="bigVideoView"
-				:style="{width:windowWidth+'px',height:windowHeight+'px'}" ref="bigVideoView">
-			</RongCloud-Call-RCUniCallView>
-			<RongCloud-Call-RCUniCallView class="smallVideoView" :style="{width:200+'upx',height:200+'upx'}"
-				ref="smallVideoView">
-			</RongCloud-Call-RCUniCallView>
+		<view v-if="users.length <= 2">
+			<RongCloud-Call-RCUniCallView
+				class="bigVideoView"
+				:style="{
+					width: windowWidth + 'px',
+					height: windowHeight + 'px'
+				}"
+				ref="bigVideoView"
+			></RongCloud-Call-RCUniCallView>
+			<RongCloud-Call-RCUniCallView
+				class="smallVideoView"
+				:style="{ width: 200 + 'upx', height: 200 + 'upx' }"
+				ref="smallVideoView"
+			></RongCloud-Call-RCUniCallView>
 		</view>

 		<!-- 底部按钮 -->
@@ -15,69 +22,69 @@
 			<view class="control-row">
 				<view class="icon-item" @click="microphone">
 					<view class="control-icon">
-						<uni-icons :type="isMicrophone ? 'mic' : 'micoff'" size="24" color="#fff"></uni-icons>
+						<uni-icons
+							:type="isMicrophone ? 'mic' : 'micoff'"
+							size="24"
+							color="#fff"
+						></uni-icons>
 					</view>
 					<text class="btn-text">
-						{{isMicrophone?'关闭':'开启'}}麦克风
+						{{ isMicrophone ? '关闭' : '开启' }}麦克风
 					</text>
 				</view>
 				<view class="icon-item" @click="closeCameraCur">
 					<view class="control-icon">
-						<uni-icons :type="curCamera ? 'eye' : 'eye-slash'" size="24" color="#fff"></uni-icons>
+						<uni-icons
+							:type="curCamera ? 'eye' : 'eye-slash'"
+							size="24"
+							color="#fff"
+						></uni-icons>
 					</view>
 					<text class="btn-text">
-						{{curCamera?'关闭':'开启'}}摄像头
+						{{ curCamera ? '关闭' : '开启' }}摄像头
 					</text>
 				</view>
 				<view class="icon-item" @click="enableSpeaker">
 					<view class="control-icon">
-						<uni-icons :type="isEnableSpeaker ? 'sound' : 'sound'" size="24"
-							color="#fff"></uni-icons>
+						<uni-icons
+							:type="isEnableSpeaker ? 'sound' : 'sound'"
+							size="24"
+							color="#fff"
+						></uni-icons>
 					</view>
 					<text class="btn-text">
-						{{isEnableSpeaker?'关闭':'开启'}}扬声器
+						{{ isEnableSpeaker ? '关闭' : '开启' }}扬声器
 					</text>
 				</view>
+				<view class="icon-item" @click="switchCamera">
+					<view class="control-icon">
+						<uni-icons type="refresh" size="24" color="#fff"></uni-icons>
+					</view>
+					<text class="btn-text">翻转</text>
+				</view>
 			</view>
-			<view class="control-row" :style="{width:windowWidth+'px'}">
-				<view class="icon-item" @click="changeMediaType">
-					<view class="control-icon">
-						<uni-icons :type="mediaTypeCur === 'video' ? 'phone' : 'videocam'" size="24"
-							color="#fff"></uni-icons>
-					</view>
-					<text class="btn-text">
-						{{mediaTypeCur === 'video' ? '切换语音' : '切换视频'}}
-					</text>
-				</view>
+			<view class="control-row" :style="{ width: windowWidth + 'px' }">
 				<view class="hangup-btn icon-item" @click="hangup">
 					<view class="hangup-icon control-icon">
 						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
 					</view>
 					<text class="hangup-text">挂断</text>
 				</view>
-				<view class="icon-item" @click="switchCamera">
-					<view class="control-icon">
-						<uni-icons type="refresh" size="24" color="#fff"></uni-icons>
-					</view>
-					<text class="btn-text">
-						翻转
-					</text>
-				</view>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
-	import * as call from "@/uni_modules/RongCloud-CallWrapper/lib/index"
+	import * as call from '@/uni_modules/RongCloud-CallWrapper/lib/index'
 	// import * as im from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
 	// import RCBeautyEngine from "@/uni_modules/RongCloud-BeautyWrapper/lib/RCBeautyEngine"
 	export default {
 		data() {
 			return {
-				mediaType: "video",
-				callType: "out",
+				mediaType: 'video',
+				callType: 'out',
 				callWay: 0, //呼叫方式 0 单聊 1 群聊
-				targetId: "",
+				targetId: '',
 				bottomHeight: 0,
 				isConnected: false,
 				isSelf: false,
@@ -107,203 +114,284 @@
 				isChecked: false
 			}
 		},
-		onLoad: function() {
-			var _this = this;
+		onLoad: function () {
+			var _this = this
 			uni.getStorage({
-				key: "room-parameters",
-				success: (res) => {
-					this.mediaType = res.data.mediaType;
-					this.callType = res.data.callType ? res.data.callType : 'in';
-					this.groupId = res.data.groupId ? res.data.groupId : '';
-					this.userIds = res.data.userIds ? res.data.userIds : '';
+				key: 'room-parameters',
+				success: res => {
+					console.log('room-parameters: ',res);
+					this.mediaType = res.data.mediaType
+					this.callType = res.data.callType ? res.data.callType : 'in'
+					this.groupId = res.data.groupId ? res.data.groupId : ''
+					this.userIds = res.data.userIds ? res.data.userIds : ''
 					if (this.callType === 'out') {
 						console.log('呼出out')
-						this.targetId = res.data.targetId;
-						this.startCall();
+						this.targetId = res.data.targetId
+						this.startCall()
 					} else {
 						console.log('呼入接受')
-						this.accept();
+						this.accept()
 					}
 				}
-			});
+			})
 			uni.getSystemInfo({
-				success: function(res) {
-					_this.windowWidth = res.windowWidth;
-					_this.windowHeight = res.windowHeight;
+				success: function (res) {
+					_this.windowWidth = res.windowWidth
+					_this.windowHeight = res.windowHeight
 				}
 			})
+			
 			uni.$on('OnCallConnected', this.onCallConnected)
 			uni.$on('OnCallDisconnected', this.onCallDisconnected)
-			this.initBeautyOpton();
 		},
 		beforeDestroy() {
-			uni.$off('OnCallDisconnected');
-			uni.$off('OnCallConnected');
-		},
+			uni.$off('OnCallDisconnected')
+			uni.$off('OnCallConnected')
+		},  
 		onUnload() {
-			call.hangup();
+			call.hangup()
+			// this.removeAllListeners()
 		},
 		onHide() {
-			const session = call.getCurrentCallSession();
+			const session = call.getCurrentCallSession()
 			if (session) {
-				call.hangup();
+				call.hangup()
 			}
+			// this.removeAllListeners()
 		},
 		methods: {
+			removeAllListeners(){
+				//移除监听-接收到通话呼入
+				call.removeRemoteUserJoinedListener();
+				// 移除监听-通话已结束
+				call.removeCallDisconnectedListener();
+				// 移除监听-通话出现错误的回调
+				call.removeErrorListener();
+			},
 			changeMediaType() {
-				if(this.mediaTypeCur == 'video'){
-					this.mediaTypeCur = 'audio';
-				}else {
-					this.mediaTypeCur = 'video';
+				if (this.mediaTypeCur == 'video') {
+					this.mediaTypeCur = 'audio'
+				} else {
+					this.mediaTypeCur = 'video'
 				}
-				call.changeMediaType(0);
+				call.changeMediaType(0)
 			},
 			inviteUsers(flag) {
 				if (flag) {
 					if (this.inviteUsersIds === '') {
 						uni.showToast({
-							title: "请输入被邀请者ID",
-							icon: "error",
+							title: '请输入被邀请者ID',
+							icon: 'error',
 							duration: 2000
 						})
-						return;
+						return
 					}
-					let userIdsArr = this.inviteUsersIds.split(',');
-					call.inviteUsers(userIdsArr, []);
+					let userIdsArr = this.inviteUsersIds.split(',')
+					call.inviteUsers(userIdsArr, [])
 				}
-				this.$refs.inviteInput.blur();
-				this.isMark = false;
+				this.$refs.inviteInput.blur()
+				this.isMark = false
 			},
 			switchVideo() {
-				this.isMe = !this.isMe;
-				let session = call.getCurrentCallSession();
+				this.isMe = !this.isMe
+				let session = call.getCurrentCallSession()
 				if (this.isMe) {
 					switch (uni.getSystemInfoSync().platform) {
 						case 'android':
-							call.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, false);
-							call.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0, true);
-							break;
+							call.setVideoView(
+								session.targetId,
+								this.$refs.bigVideoView.ref,
+								0,
+								false
+							)
+							call.setVideoView(
+								session.mine.userId,
+								this.$refs.smallVideoView.ref,
+								0,
+								true
+							)
+							break
 						case 'ios':
-							call.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0);
-							call.setVideoView(session.mine.userId, this.$refs.smallVideoView.ref, 0);
-							break;
+							call.setVideoView(
+								session.targetId,
+								this.$refs.bigVideoView.ref,
+								0
+							)
+							call.setVideoView(
+								session.mine.userId,
+								this.$refs.smallVideoView.ref,
+								0
+							)
+							break
 						default:
 							console.log('运行在开发者工具上')
-							break;
+							break
 					}
 				} else {
 					switch (uni.getSystemInfoSync().platform) {
 						case 'android':
-							call.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0, false);
-							call.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0, true);
-							break;
+							call.setVideoView(
+								session.mine.userId,
+								this.$refs.bigVideoView.ref,
+								0,
+								false
+							)
+							call.setVideoView(
+								session.targetId,
+								this.$refs.smallVideoView.ref,
+								0,
+								true
+							)
+							break
 						case 'ios':
-							call.setVideoView(session.mine.userId, this.$refs.bigVideoView.ref, 0);
-							call.setVideoView(session.targetId, this.$refs.smallVideoView.ref, 0);
-							break;
+							call.setVideoView(
+								session.mine.userId,
+								this.$refs.bigVideoView.ref,
+								0
+							)
+							call.setVideoView(
+								session.targetId,
+								this.$refs.smallVideoView.ref,
+								0
+							)
+							break
 						default:
 							console.log('运行在开发者工具上')
-							break;
+							break
 					}
 				}
 			},
 			closeCameraCur() {
-				this.curCamera = !this.curCamera;
-				let camera = call.currentCamera();
+				this.curCamera = !this.curCamera
+				let camera = call.currentCamera()
 				call.enableCamera(this.curCamera, camera)
 			},
 			closeCameraBack() {
-				this.backCamera = !this.backCamera;
+				this.backCamera = !this.backCamera
 				call.enableCamera(this.backCamera, 1)
 			},
 			switchCamera() {
-				call.switchCamera();
+				call.switchCamera()
 			},
 			microphone() {
-				this.isMicrophone = !this.isMicrophone;
-				call.enableMicrophone(this.isMicrophone);
+				this.isMicrophone = !this.isMicrophone
+				call.enableMicrophone(this.isMicrophone)
 			},
 			enableSpeaker() {
-				this.isEnableSpeaker = !this.isEnableSpeaker;
-				call.enableSpeaker(this.isEnableSpeaker);
+				this.isEnableSpeaker = !this.isEnableSpeaker
+				call.enableSpeaker(this.isEnableSpeaker)
 			},
 			hangup() {
-				this.isSelf = true;
-				call.hangup();
+				this.isSelf = true
+				call.hangup()
 				uni.navigateBack({
 					delta: 1
 				})
 			},
 			accept() {
-				call.accept();
+				call.accept()
 			},
 			startCall() {
-				const type = this.mediaType === 'audio' ? 0 : 1;
-				this.mediaTypeCur = this.mediaType;
+				const type = this.mediaType === 'audio' ? 0 : 1
+				this.mediaTypeCur = this.mediaType
 				if (this.targetId.length > 0) {
-					call.enableSpeaker(true);
-					call.startSingleCall(this.targetId, type, null);
-					this.currentCallSession = call.getCurrentCallSession();
-					this.users = this.currentCallSession.users ? this.currentCallSession.users : [];
+					call.enableSpeaker(true)
+					call.startSingleCall(this.targetId, type, null)
+					this.currentCallSession = call.getCurrentCallSession()
+					this.users = this.currentCallSession.users
+						? this.currentCallSession.users
+						: []
 				} else {
-					call.startGroupCall(this.groupId, this.userIds, [], type, '');
-					this.users = this.userIds;
+					call.startGroupCall(this.groupId, this.userIds, [], type, '')
+					this.users = this.userIds

-					console.log(this.users);
-					this.currentCallSession = call.getCurrentCallSession();
-					this.users = this.currentCallSession.users ? this.currentCallSession.users : [];
+					console.log(this.users)
+					this.currentCallSession = call.getCurrentCallSession()
+					this.users = this.currentCallSession.users
+						? this.currentCallSession.users
+						: []
 				}
-				let _this = this;
+				console.log('this.users: ',this.users);
+				let _this = this
 				// im.getCurrentUserId(function(result){
 				// 	 _this.systemInfoSync(result.userId,_this.$refs.bigVideoView.ref,false);
 				// })
 				if (this.currentCallSession) {
-					this.systemInfoSync(this.currentCallSession.mine.userId, this.$refs.bigVideoView.ref, false);
+					this.systemInfoSync(
+						this.currentCallSession.mine.userId,
+						this.$refs.bigVideoView.ref,
+						false
+					)
 				}
 			},

 			onCallConnected() {
-				let context = this;
-				console.log('oncallconnected接收了');
-				this.mediaTypeCur = this.mediaType;
-				call.enableSpeaker(true);
-				this.currentCallSession = call.getCurrentCallSession();
-				this.callWay = this.currentCallSession.callType;
-				this.users = this.currentCallSession.users ? this.currentCallSession.users : [];
-				let isHasMine = this.users.findIndex((item) => {
-					return item.userId === this.currentCallSession.mine.userId;
-				});
+				let context = this
+				console.log('oncallconnected接收了')
+				this.mediaTypeCur = this.mediaType
+				call.enableSpeaker(true)
+				this.currentCallSession = call.getCurrentCallSession()
+				this.callWay = this.currentCallSession.callType
+				this.users = this.currentCallSession.users
+					? this.currentCallSession.users
+					: []
+				let isHasMine = this.users.findIndex(item => {
+					return item.userId === this.currentCallSession.mine.userId
+				})
 				if (isHasMine === -1) {
-					this.users.push(this.currentCallSession.mine);
+					this.users.push(this.currentCallSession.mine)
 				}
-				if (this.currentCallSession && this.currentCallSession.users.length > 0) {
+				if (
+					this.currentCallSession &&
+					this.currentCallSession.users.length > 0
+				) {
 					//视频是两个的时候
 					if (this.currentCallSession.users.length <= 2) {
 						setTimeout(() => {
-							this.systemInfoSync(this.currentCallSession.mine.userId, this.$refs.smallVideoView.ref,
-								true);
-							this.viewArr = this.currentCallSession.users.filter((item) => {
-								return item.userId !== this.currentCallSession.mine.userId;
-							});
-							this.viewArr.forEach((itm) => {
-								this.targetId = itm.userId;
-								this.systemInfoSync(itm.userId, this.$refs.bigVideoView.ref, false);
-							});
-						}, 100);
-
+							this.systemInfoSync(
+								this.currentCallSession.mine.userId,
+								this.$refs.smallVideoView.ref,
+								true
+							)
+							this.viewArr = this.currentCallSession.users.filter(
+								item => {
+									return (
+										item.userId !== this.currentCallSession.mine.userId
+									)
+								}
+							)
+							this.viewArr.forEach(itm => {
+								this.targetId = itm.userId
+								this.systemInfoSync(
+									itm.userId,
+									this.$refs.bigVideoView.ref,
+									false
+								)
+							})
+						}, 100)
 					} else {
 						// 视频超过三个
 						this.$nextTick(() => {
-							this.systemInfoSync(this.currentCallSession.mine.userId, this.$refs.bigVideoView.ref,
-								false);
-							this.viewArr = this.currentCallSession.users.filter((item) => {
-								return item.userId !== this.currentCallSession.mine.userId;
-							});
+							this.systemInfoSync(
+								this.currentCallSession.mine.userId,
+								this.$refs.bigVideoView.ref,
+								false
+							)
+							this.viewArr = this.currentCallSession.users.filter(
+								item => {
+									return (
+										item.userId !== this.currentCallSession.mine.userId
+									)
+								}
+							)
 							setTimeout(() => {
-								this.viewArr.forEach((itm) => {
-									this.systemInfoSync(itm.userId, this.$refs[itm.userId][0].ref,
-										false);
-								});
+								this.viewArr.forEach(itm => {
+									this.systemInfoSync(
+										itm.userId,
+										this.$refs[itm.userId][0].ref,
+										false
+									)
+								})
 							}, 100)
 						})
 					}
@@ -312,18 +400,18 @@
 			systemInfoSync(userId, ref, isZOrderOnTop) {
 				switch (uni.getSystemInfoSync().platform) {
 					case 'android':
-						call.setVideoView(userId, ref, 0, isZOrderOnTop);
-						break;
+						call.setVideoView(userId, ref, 0, isZOrderOnTop)
+						break
 					case 'ios':
-						call.setVideoView(userId, ref, 0);
-						break;
+						call.setVideoView(userId, ref, 0)
+						break
 					default:
 						console.log('运行在开发者工具上')
-						break;
+						break
 				}
 			},
 			onCallDisconnected() {
-				this.isMe = true;
+				this.isMe = true
 				if (!this.isSelf) {
 					uni.navigateBack({
 						delta: 1
@@ -331,13 +419,13 @@
 				}
 			},
 			switchChange() {
-				this.isChecked = !this.isChecked;
+				this.isChecked = !this.isChecked
 				if (!this.isChecked) {
-					this.reset();
+					this.reset()
 				} else {
-					this.setBeautyOption();
+					this.setBeautyOption()
 				}
-			},
+			}
 		}
 	}
 </script>
@@ -400,7 +488,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 8rpx;
-		margin: 10rpx;
+		margin: 10rpx 20rpx;
 	}

 	.control-icon {
@@ -463,14 +551,13 @@
 		background: rgba(0, 0, 0, 0.5);
 		justify-content: center;
 		align-items: center;
-
 	}

 	.box-mark {
 		position: fixed;
 		left: 0;
 		top: 0;
-		background: rgba(0, 0, 0, .5);
+		background: rgba(0, 0, 0, 0.5);
 		z-index: 9999;
 		justify-content: center;
 		align-items: center;
@@ -576,7 +663,6 @@
 		background: #ccc;
 		padding-left: 30upx;
 		padding-right: 30upx;
-
 	}

 	.beauty-tab {
@@ -590,7 +676,8 @@
 		padding-top: 40upx;
 	}

-	.filte-view {}
+	.filte-view {
+	}

 	.tab-item {
 		width: 100upx;
@@ -605,5 +692,6 @@
 		background: yellow;
 	}

-	.white-view {}
-</style>
+	.white-view {
+	}
+</style>