|
@@ -1,45 +1,45 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<!-- 底部输入栏 -->
|
|
|
- <view :style='{bottom:bottomHeight+"px;"}' class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
|
|
|
+ <view class="input-box" :class="popupLayerClass" :style="{ bottom: inputOffsetBottom > 0 ? '30rpx' : '0' }" @touchmove.stop.prevent="discard">
|
|
|
<!-- H5下不能录音,输入栏布局改动一下 -->
|
|
|
<!-- #ifndef H5 -->
|
|
|
<view class="voice">
|
|
|
- <view class="cuIcon-notification" :class="isVoice?'cuIcon-community':'cuIcon-notification'" @tap="switchVoice"></view>
|
|
|
+ <view class="iconfont iconshuru" :class="isVoice?'iconshuru':'iconyuyin1'" @tap="switchVoice"></view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
+
|
|
|
<!-- #ifdef H5 -->
|
|
|
<view class="more" @tap="showMore">
|
|
|
- <view class="cuIcon-roundadd"></view>
|
|
|
+ <view class="iconfont icontianjia"></view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
+
|
|
|
<!-- 录音 -->
|
|
|
- <view class="textbox" >
|
|
|
+ <view class="textbox">
|
|
|
<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin"
|
|
|
@touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
|
|
|
<view class="text-mode" :class="isVoice?'hidden':''">
|
|
|
<view class="box">
|
|
|
- <textarea id='textarea' :confirm-type="'send'" :confirm-hold="false" :show-confirm-bar="false" @confirm="sendMsg(0, textMsg)"
|
|
|
- auto-height="true" :adjust-position='false' :disabled="disabledSay===1" :hold-keyboard='true'
|
|
|
- v-model="textMsg" @focus="textareaFocus" @blur='textareaBlur' />
|
|
|
+ <textarea ref="tt" :confirm-type="'send'" :confirm-hold="true" @confirm="sendMsg(0, textMsg)"
|
|
|
+ auto-height="true" :disabled="disabledSay===1"
|
|
|
+ v-model="textMsg" @focus="enterInput" />
|
|
|
</view>
|
|
|
- <view class="em" @tap.stop="chooseEmoji(e)">
|
|
|
- <view class="cuIcon-emoji"></view>
|
|
|
+ <view class="em" @tap="chooseEmoji">
|
|
|
+ <view class="iconfont iconbiaoqing"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if='!show' class="more" @tap="showMore">
|
|
|
- <view class="cuIcon-roundadd"></view>
|
|
|
- </view>
|
|
|
- <button v-else @tap="btnSend(0, textMsg)" class="cu-btn bg-green shadow textmsg">发送</button>
|
|
|
- <!-- <view class='textmsg' v-show='show'>
|
|
|
- <view @tap="">发送</view>
|
|
|
- </view> -->
|
|
|
- <!-- #ifdef H5 -->
|
|
|
- <view class="send" @tap="sendMsg(0, textMsg)" :class="isVoice?'hidden':''">
|
|
|
- <view class="iconfont icontuiguang-weixuan"></view>
|
|
|
+
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
+ <view class="more" @tap="showMore" :class="isBtn?'hidden':''">
|
|
|
+ <view class="iconfont icontianjia"></view>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
+
|
|
|
+ <view class="send" :class="isBtn?'':'hidden'">
|
|
|
+ <u-button @tap="sendMsg(0, textMsg)" type="success" size="mini">发送</u-button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 录音UI效果 -->
|
|
@@ -60,14 +60,12 @@
|
|
|
<view class="cancel" :class="willStop?'':'hidden'"><view class="icon chehui" ></view></view>
|
|
|
<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
|
|
|
</view>
|
|
|
- <!-- <v-keyboard ref="keyboard" :disorderly="false" @typing="typing" @enter="enter"></v-keyboard> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
name:'footer-input',
|
|
|
- components: { } ,
|
|
|
props: {
|
|
|
inputOffsetBottom: {
|
|
|
type: Number,
|
|
@@ -77,10 +75,6 @@
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- focus: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
disabledSay: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
@@ -98,9 +92,7 @@
|
|
|
return {
|
|
|
placeholder: '',
|
|
|
initPoint:{identifier:0,Y:0},
|
|
|
- //录音相关参数
|
|
|
// #ifndef H5
|
|
|
- //H5不能录音
|
|
|
RECORDER:uni.getRecorderManager(),
|
|
|
// #endif
|
|
|
recordTis:"手指上滑 取消发送",
|
|
@@ -110,24 +102,21 @@
|
|
|
recordTimer:null,
|
|
|
recordLength:0,
|
|
|
textMsg:'',
|
|
|
- bottomHeight:0,
|
|
|
- show:false
|
|
|
};
|
|
|
},
|
|
|
+ computed:{
|
|
|
+ isBtn:function(){
|
|
|
+ return this.textMsg!="";
|
|
|
+ }
|
|
|
+ },
|
|
|
watch:{
|
|
|
textMsg:function(v){
|
|
|
- console.log(v)
|
|
|
- if(v.length>0){
|
|
|
- this.show=true
|
|
|
- }else{
|
|
|
- this.show=false
|
|
|
- }
|
|
|
- this.$emit('textMsgFunc',v)
|
|
|
- if(this.textMsg.indexOf('@')!=-1){
|
|
|
+ this.$emit('textMsgTap',v);
|
|
|
+ if(v.indexOf('@')!=-1){
|
|
|
if (this.chatObj.chatType==1){
|
|
|
this.$u.route({
|
|
|
- url:'pageC/chat/remind',
|
|
|
- params:{ msg :this.textMsg }
|
|
|
+ url:'pages/chat/remind',
|
|
|
+ params:{ msg :v }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
@@ -141,46 +130,24 @@
|
|
|
this.RECORDER.onStart((e)=>{
|
|
|
this.recordBegin(e);
|
|
|
})
|
|
|
- //录音结束事件
|
|
|
this.RECORDER.onStop((e)=>{
|
|
|
this.recordEnd(e);
|
|
|
})
|
|
|
// #endif
|
|
|
},
|
|
|
methods:{
|
|
|
+ enterInput(){
|
|
|
+ this.$emit('enterInput');
|
|
|
+ },
|
|
|
discard(){
|
|
|
return;
|
|
|
},
|
|
|
- btnSend(index, msg){
|
|
|
- uni.hideKeyboard()
|
|
|
- console.log('this.focus',this.focus)
|
|
|
- this.focus=false
|
|
|
- this.sendMsg(index, msg)
|
|
|
- },
|
|
|
- // sendmsg(){
|
|
|
- // console.log(uni.createSelectorQuery().select("#iamnode"))
|
|
|
- // },
|
|
|
sendMsg(index, msg){
|
|
|
- this.bottomHeight=0
|
|
|
- this.show=false
|
|
|
this.$emit('sendMsg', index,msg);
|
|
|
- this.textMsg = ''
|
|
|
- },
|
|
|
- textareaBlur(e){
|
|
|
- console.log('textareaBlur',e)
|
|
|
- this.bottomHeight=0
|
|
|
- },
|
|
|
- textareaFocus(e){
|
|
|
- this.$refs.keyboard.activate()
|
|
|
- console.log('textareaFocus',this.focus)
|
|
|
- this.bottomHeight=e.detail.height
|
|
|
- this.$emit('textareaFocus', true);
|
|
|
+ this.textMsg = '';
|
|
|
},
|
|
|
// 选择表情
|
|
|
- chooseEmoji(e){
|
|
|
- e.preventDefault();
|
|
|
- this.bottomHeight=0
|
|
|
- uni.hideKeyboard()
|
|
|
+ chooseEmoji(){
|
|
|
this.$emit('chooseEmoji', true);
|
|
|
},
|
|
|
// 切换语音/文字输入
|
|
@@ -241,17 +208,13 @@
|
|
|
},
|
|
|
//录音结束(回调文件)
|
|
|
recordEnd(e){
|
|
|
- console.log('--------到此一游------1-')
|
|
|
clearInterval(this.recordTimer);
|
|
|
- if(this.recordLength == 0){
|
|
|
- this.$api.msg("录音时长过短")
|
|
|
- return
|
|
|
- }
|
|
|
if(!this.willStop){
|
|
|
let tempFilePaths =e.tempFilePath;
|
|
|
let that=this;
|
|
|
uni.uploadFile({
|
|
|
- url: this.$uploadUrl, //仅为示例,非真实的接口地址
|
|
|
+ //仅为示例,非真实的接口地址
|
|
|
+ url: this.$uploadUrl,
|
|
|
filePath: tempFilePaths,
|
|
|
header: {
|
|
|
'merchcode':'md5'
|
|
@@ -271,7 +234,6 @@
|
|
|
min = min<10?'0'+min:min;
|
|
|
sec = sec<10?'0'+sec:sec;
|
|
|
msg.length = min+':'+sec;
|
|
|
- console.log('--------到此一游------2-')
|
|
|
this.$emit('sendMsg', 3,JSON.stringify(msg));
|
|
|
}
|
|
|
});
|
|
@@ -279,7 +241,6 @@
|
|
|
// console.log('取消发送录音');
|
|
|
}
|
|
|
this.willStop = false;
|
|
|
- console.log('--------到此一游------3-')
|
|
|
},
|
|
|
//更多功能(点击+弹出)
|
|
|
showMore(){
|
|
@@ -297,62 +258,6 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss">
|
|
|
@import "@/pageC/chat/style.scss";
|
|
|
-[class^='cuIcon']{
|
|
|
- font-size:50rpx;
|
|
|
-}
|
|
|
-.input-box{
|
|
|
- position:fixed;
|
|
|
-}
|
|
|
-.textmsg{
|
|
|
- width: 160upx;
|
|
|
- padding: 5upx;
|
|
|
- margin-top: 10upx
|
|
|
-}
|
|
|
-.textmsg view{
|
|
|
- border: 1px solid;
|
|
|
- background: #39b54a;
|
|
|
- color: #fff;
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-.voice_an_icon{
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(1){
|
|
|
- left: 0px;
|
|
|
- animation: musicWave 0.5s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(2){
|
|
|
- left: 10px;
|
|
|
- animation: musicWave 0.2s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(3){
|
|
|
- left: 20px;
|
|
|
- animation: musicWave 0.6s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(4){
|
|
|
- left: 40px;
|
|
|
- animation: musicWave 0.3s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(5){
|
|
|
- left: 50px;
|
|
|
- animation: musicWave 0.4s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(6){
|
|
|
- left: 50px;
|
|
|
- animation: musicWave 0.7s infinite linear both alternate;
|
|
|
-}
|
|
|
-.voice_an_icon .wave:nth-child(7){
|
|
|
- left: 50px;
|
|
|
- animation: musicWave 0.1s infinite linear both alternate;
|
|
|
-}
|
|
|
-@keyframes musicWave{
|
|
|
- 0%{
|
|
|
- height: 10px;
|
|
|
- }
|
|
|
- 100%{
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|