联调

src/pages/course/components/talkingItem.vue

@@ -10,13 +10,13 @@
 			</view>
 		</view>
 		<view class="talking-info">
-			<view class="talking-gif"></view>
+			<view class="talking-gif is-play"></view>
 			<view class="talking-cont">
 				<view class="talking-text">
 					阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
 				</view>
-				<ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
-				<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview>
+				<!-- <ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
+				<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview> -->
 			</view>
 			<view class="talking-cont">
 				<view class="talking-text">
@@ -61,8 +61,8 @@
 					<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
 				</view> -->
 				<view class="play-btn">
-					<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
-					<image class="icon" src="@/static/images/course/pause.png" style="width: 100%;height: 100%;"></image>
+					<image class="icon" v-if="false" src="@/static/images/course/play-blue.png" style="width: 100%;height: 100%;"></image>
+					<image class="icon" src="@/static/images/course/stop-blue.png" style="width: 100%;height: 100%;"></image>
 				</view>
 			</view>
 		</view>
@@ -119,8 +119,13 @@
 			.talking-gif{
 				width: 140rpx;
 				height: 38rpx;
-				background-color: #999;
+				background: url(@/static/images/course/voice-gray.png) no-repeat;
+				background-size: 100%;
 				margin-bottom: 16rpx;
+				&.is-play{
+					background: url(@/static/images/course/voice-gif.gif) no-repeat;
+					background-size: 100%;
+				}
 			}
 			.talking-cont{
 				.talking-text{
@@ -268,8 +273,13 @@
 			.talking-gif{
 				width: 140rpx;
 				height: 38rpx;
-				background-color: #999;
+				background: url(@/static/images/course/voice-gray.png) no-repeat;
+				background-size: 100%;
 				margin-bottom: 16rpx;
+				&.is-play{
+					background: url(@/static/images/course/voice-gif.gif) no-repeat;
+					background-size: 100%;
+				}
 			}
 			.talking-cont{
 				.talking-text{

src/pages/course/study.vue

@@ -16,7 +16,7 @@
 						</view>
 						<view class="right-cont">
 							<view class="right-name">{{item.teacherName}}</view>
-							<view class="right-desc">描述：{{item.teacheDesc || '--'}}</view>
+							<view class="right-desc">描述：{{item.voiceDesc || '--'}}</view>
 							<view class="audio-box">
 								<view class="talking-gif"></view>
 								<view class="play-btn">
@@ -117,7 +117,7 @@ const getData = async () => {
 	// 	videoUrlShow.value = res.tempFilePath
 	// })
 };
-let WS = {}
+var WS = null
 const nextStep = () => {
 	if(choiceTeacher.value){
 		initWS(1)
@@ -129,47 +129,67 @@ const nextStep = () => {
 		});
 	}
 }
-const initWS = async (step) => {
+const reconnectTimer = null // 重连timer
+const isManualClose = false // 是否手动关闭
+
+const initWS = ($step) => {
 	WS = uni.connectSocket({
 		url: get_base_url() + '/trastudy/trasoket/open?summary=' + getToken(),
-		header:{
-			'summary': getToken(),
-			'content-type': 'application/json;charset=UTF-8'
-		},
-		success:function(res){
-			WS.onMessage = (event) => {
-				console.log(event)
-			}
-			let _params = step === 1 ?{
+		complete: function(cv){
+			console.log(cv)
+		}
+	})
+	WS.onMessage = (event) => {
+		console.log(event,111)
+	}
+	WS.onSocketMessage = (event) => {
+		console.log(event,222)
+	}
+	WS.onOpen = () =>{
+		console.log('建立链接')
+	}
+	WS.onError = (event) => {
+		console.log('error',event)
+	}
+	// WS.onclose = () => {
+	// 	// 重连
+	// 	// initWS()
+	// }
+	setTimeout(()=>{
+		console.log(WS , WS.readyState)
+		if( WS && WS.readyState === 1){
+			let _params = $step === 1 ?{
 				"commond" : 'open',
 				"body" : {
 					crsId: crsId.value,
 					teacherNo: choiceTeacher.value
 				}
-			}:{
-				
-			}
-			WS.send(_params)
-		},
-		fail:function(err){
-			console.log(err)
-		},
-		complete:function(res){
-			console.log(res)
+			}:{}
+			sendMessage(_params)
+			step.value = 2
 		}
-	})
-	WS.onOpen = () =>{
-		console.log('建立链接')
-		step.value = 2
-	}
-	// WS.onerror = (event) => {
-	// 	console.log(event)
-	// }
-	// WS.onclose = () => {
-	// 	// 重连
-	// 	// initWS()
-	// }
+	},100)
 }
+const reconnect = ()=> {
+	if(reconnectTimer || isManualClose) return
+	reconnectTimer = setTimeout(()=>{
+		initWS(2)
+	},3000)
+}
+const sendMessage = (data) => {
+	WS.send({
+		data: JSON.stringify(data)
+	})
+}
+const closeWebSocket = () => {
+	isManualClose = true
+	if(WS){
+		WS.close()
+		WS = null
+	}
+}
+
+
 onLoad((params) => {
 	crsId.value = params.crsId||'';
 	crsNum.value = params.crsNum||'';
@@ -208,10 +228,10 @@ onShow(()=>{
 	getData();
 })
 onHide(()=>{
-	WS.close?.()
+	closeWebSocket()
 })
 onUnmounted(()=>{
-	WS.close?.()
+	closeWebSocket()
 })
 const playRecord = () => {
 	audioObj.src = audioPath.value
@@ -393,9 +413,15 @@ const handleMove = (obj) => {
 							.talking-gif{
 								width: 140rpx;
 								height: 40rpx;
-								background-color: #ccc;
+								// background-color: #ccc;
+								background: url(@/static/images/course/voice-gray.png) no-repeat;
+								background-size: 100%;
 								box-sizing: border-box;
 								float: left;
+								&.is-play{
+									background: url(@/static/images/course/voice-gif.gif) no-repeat;
+									background-size: 100%;
+								}
 							}
 							.talking-time{
 								float: right;