From f4a4c7709e09bb7c31f802ea8187d1e117efda2b Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 12 Aug 2021 09:48:16 +0800
Subject: [PATCH] 视频
---
components/submit/submit.vue | 225 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 122 insertions(+), 103 deletions(-)
diff --git a/components/submit/submit.vue b/components/submit/submit.vue
index 1098c75..d2cd28e 100644
--- a/components/submit/submit.vue
+++ b/components/submit/submit.vue
@@ -3,85 +3,65 @@
<view class="submit">
<view class="submit-chat">
<view class="bt-img">
- <image src="../../static/images/chatroom/voice.png"
- mode=""
- @tap="records"/>
+ <image src="../../static/images/chatroom/voice.png" mode="" @tap="records" />
</view>
- <textarea auto-height="true"
- class="chat-send btn"
- :class="{displaynone: isrecord}"
- @input="inputs"
- v-model="msg"
- @focus="focus"/>
- <view class="record btn"
- :class="{displaynone: !isrecord}"
- @touchstart="touchstart"
- @touchend="touchend"
- @touchmove="touchmove"
- >
+ <textarea auto-height="true" class="chat-send btn" :class="{displaynone: isrecord}" @input="inputs"
+ v-model="msg" @focus="focus" />
+ <view class="record btn" :class="{displaynone: !isrecord}" @touchstart="touchstart" @touchend="touchend"
+ @touchmove="touchmove">
按住说话
</view>
<view class="bt-img">
- <image src="../../static/images/chatroom/emoji.png"
- mode=""
- @tap="emoji"/>
+ <image src="../../static/images/chatroom/emoji.png" mode="" @tap="emoji" />
</view>
<view class="bt-img">
- <image src="../../static/images/chatroom/add.png"
- mode=""
- @tap="more"/>
+ <image src="../../static/images/chatroom/add.png" mode="" @tap="more" />
</view>
</view>
- <view class="emoji"
- :class="{ displaynone: !isemoji }">
+ <view class="emoji" :class="{ displaynone: !isemoji }">
<view class="emoji-send">
- <view class="emoji-send-del"
- @tap="emojiBack">
- 删除
+ <view class="emoji-send-del" @tap="emojiBack">
+ 删除
</view>
- <view class="emoji-send-bt"
- @tap="emojiSend">
- 发送
+ <view class="emoji-send-bt" @tap="emojiSend">
+ 发送
</view>
</view>
- <emoji @emotion="emotion"
- :height="260" />
+ <emoji @emotion="emotion" :height="260" />
</view>
-
- <view class="more"
- :class="{ displaynone: !ismore }">
- <view class="more-list"
- @tap="sendImg('album')">
- <image src="../../static/images/chatroom/photo.png"/>
+
+ <view class="more" :class="{ displaynone: !ismore }">
+ <view class="more-list" @tap="sendImg('album')">
+ <image src="../../static/images/chatroom/photo.png" />
<text class="more-list-title">图片</text>
</view>
- <view class="more-list"
- @tap="sendImg('camera')">
- <image src="../../static/images/chatroom/camera.png"/>
+ <view class="more-list" @tap="sendImg('camera')">
+ <image src="../../static/images/chatroom/camera.png" />
<text class="more-list-title">拍照</text>
</view>
<view class="more-list">
- <image src="../../static/images/chatroom/file.png"/>
+ <image src="../../static/images/chatroom/file.png" />
<text class="more-list-title">文件</text>
</view>
- <view class="more-list"
- @tap="chooseLocation()">
- <image src="../../static/images/chatroom/location.png"/>
+ <view class="more-list" @tap="chooseLocation()">
+ <image src="../../static/images/chatroom/location.png" />
<text class="more-list-title">位置</text>
</view>
- <view class="more-list">
- <image src="../../static/images/chatroom/vedio.png"/>
+ <view class="more-list" @click="openAudio('Mains')">
+ <image src="../../static/images/chatroom/phone.png" />
+ <text class="more-list-title">语音</text>
+ </view>
+ <view class="more-list" @click="openVideo('Mains')">
+ <image src="../../static/images/chatroom/vedio.png" />
<text class="more-list-title">视频</text>
</view>
</view>
</view>
-
+
<!-- 录制语音遮罩 -->
- <view class="voice-bg"
- :class="{displaynone: !voicebg}">
+ <view class="voice-bg" :class="{displaynone: !voicebg}">
<view class="voice-bg-len">
- <view class="voice-bg-time"
- :style="{width:vlength/0.6 + '%'}">
+ <view class="voice-bg-time" :style="{width:vlength/0.6 + '%'}">
{{ vlength }} "
</view>
</view>
@@ -92,10 +72,11 @@
<script>
import emoji from './emoji/emoji.vue'
-
+
const recorderManager = uni.getRecorderManager()
-
+
export default {
+ props: ['names'],
data() {
return {
isrecord: false,
@@ -108,10 +89,10 @@
pageY: 0,
};
},
- components:{
+ components: {
emoji,
},
- methods:{
+ methods: {
// 获取高度
_getElementHeight() {
const query = uni.createSelectorQuery().in(this);
@@ -154,34 +135,34 @@
inputs(e) {
let chatm = e.detail.value
let pos = chatm.indexOf('\n')
- if(pos != -1 && chatm.length > 1) {
- this.send(this.msg,0)
- }
- setTimeout(() => {
- this._getElementHeight()
- },10)
- },
- // 输入框聚焦
- focus(){
- this.isemoji = false;
- this.ismore = false;
- setTimeout(() => {
- this._getElementHeight()
- },10)
- },
- // 表情内发送
- emojiSend() {
- if(this.msg.length > 0) {
+ if (pos != -1 && chatm.length > 1) {
this.send(this.msg, 0)
}
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
+ },
+ // 输入框聚焦
+ focus() {
+ this.isemoji = false;
+ this.ismore = false;
+ setTimeout(() => {
+ this._getElementHeight()
+ }, 10)
+ },
+ // 表情内发送
+ emojiSend() {
+ if (this.msg.length > 0) {
+ this.send(this.msg, 0)
+ }
+ setTimeout(() => {
+ this._getElementHeight()
+ }, 10)
},
// 表情退格
emojiBack() {
- if(this.msg.length > 0){
- this.msg = this.msg.substring(0, this.msg.length-1)
+ if (this.msg.length > 0) {
+ this.msg = this.msg.substring(0, this.msg.length - 1)
}
},
// 发送消息
@@ -196,14 +177,14 @@
}, 0)
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
},
// 发送图片
sendImg(e) {
let count = 9;
- if(e == 'album') {
+ if (e == 'album') {
count = 9
- }else {
+ } else {
count = 1
}
uni.chooseImage({
@@ -212,14 +193,14 @@
sourceType: [e],
success: (res) => {
const filePath = res.tempFilePaths
- for (let i in filePath){
+ for (let i in filePath) {
this.send(filePath[i], 1)
}
}
})
setTimeout(() => {
this._getElementHeight()
- },10)
+ }, 10)
},
// 音频处理
touchstart(e) {
@@ -230,7 +211,7 @@
this.timer = setInterval(() => {
this.vlength = startIndex
startIndex++
- if(startIndex > 60) {
+ if (startIndex > 60) {
clearInterval(this.timer)
this.touchend();
}
@@ -245,15 +226,15 @@
voice: res.tempFilePath,
time: this.vlength
}
- if(this.voicebg){
+ if (this.voicebg) {
this.send(data, 2);
- }
+ }
this.vlength = 0
this.voicebg = false
})
},
touchmove(e) {
- if(this.pageY - e.changedTouches[0].pageY > 200) {
+ if (this.pageY - e.changedTouches[0].pageY > 200) {
this.voicebg = false
}
},
@@ -274,7 +255,42 @@
console.log('经度' + res.longitude)
}
})
+ },
+ //开始音频
+ openAudio(val) { //Mains
+ // console.log(this.names)
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=audio'
+ });
+ },
+ //接收音频
+ receiveAudio(val) { //Receiver
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=audio'
+ });
+ },
+ //开始视频
+ openVideo(val) { //Mains
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=video' + '&myname=' + this.names[0] +
+ '&toname=' + this.names[1]
+ });
+ },
+ //接收视频
+ receiveVideo(val, room) { //Receiver
+ uni.navigateTo({
+ url: '../videoCall/videoCall?state=' + val + '&type=video' + '&room=' + room
+ });
}
+ },
+ mounted() {
+ // uni.onSocketMessage(function(res) {
+ // console.log(res.data)
+ // if (res.data.type == 'video') {
+ // this.receiveVideo('Receiver', );
+ // }
+ // // console.log('收到服务器内容：' + res.data);
+ // });
}
}
</script>
@@ -290,21 +306,21 @@
z-index: 1002;
padding-bottom: env(safe-area-inset-bottom);
}
-
+
.submit-chat {
width: 100%;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 14rpx 10rpx;
-
+
image {
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
flex: auto;
}
-
+
.btn {
flex: auto;
background-color: #fff;
@@ -313,29 +329,30 @@
max-height: 160rpx;
margin: 0 10rpx;
}
-
+
.chat-send {
line-height: 44rpx !important;
}
-
+
.record {
text-align: center;
font-size: $uni-font-size-lg;
color: $uni-text-color-grey;
font-weight: bold;
}
-
+
}
+
.displaynone {
display: none;
}
-
+
.emoji {
width: 100%;
height: 460rpx;
background: rgba(236, 237, 238, 1);
box-shadow: 0 -1rpx 0 0 rgba(0, 0, 0, 1);
-
+
.emoji-send {
width: 260rpx;
height: 104rpx;
@@ -345,19 +362,19 @@
right: 0;
padding-top: 24rpx;
display: flex;
-
+
.emoji-send-bt {
flex: 1;
height: 80rpx;
margin: 0 32rpx 0 20rpx;
- background: rgba(255, 228, 49 ,1);
+ background: rgba(255, 228, 49, 1);
border-radius: 240rpx;
font-size: 32rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx;
}
-
+
.emoji-send-del {
flex: 1;
height: 80rpx;
@@ -371,6 +388,7 @@
}
}
}
+
.more {
width: 100%;
height: 436rpx;
@@ -379,7 +397,7 @@
bottom: env(safe-area-inset-bottom);
padding: 0 20rpx;
box-sizing: border-box;
-
+
.more-list {
width: 25%;
text-align: center;
@@ -393,7 +411,7 @@
background: rgba(255, 255, 255, 1);
border-radius: 24rpx;
}
-
+
.more-list-title {
color: rgba(30, 40, 50, .5);
line-height: 34rpx;
@@ -402,7 +420,7 @@
}
}
}
-
+
.voice-bg {
height: 100%;
width: 100%;
@@ -412,7 +430,7 @@
bottom: 0;
z-index: 1001;
// position: relative;
-
+
.voice-bg-len {
height: 84rpx;
width: 600rpx;
@@ -425,6 +443,7 @@
background: rgba(255, 255, 255, .2);
border-radius: 42rpx;
text-align: center;
+
.voice-bg-time {
display: inline-block;
line-height: 84rpx;
@@ -433,15 +452,15 @@
min-width: 120rpx;
}
}
-
+
.voice-del {
position: absolute;
bottom: 148rpx;
margin-bottom: env(safe-area-inset-bottom);
width: 100%;
text-align: center;
- color: #fff;
- font-size: $uni-font-size-base;
+ color: #fff;
+ font-size: $uni-font-size-base;
}
}
</style>
--
Gitblit v1.9.3