unimall/unimall-app/components/chat/footer-input.vue

<template>
	<view>
		<!-- 底部输入栏 -->
		<view :style='{bottom:bottomHeight+"px;"}' class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="cuIcon-notification" :class="isVoice?'cuIcon-community':'cuIcon-notification'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="cuIcon-roundadd"></view>
			</view>
			<!-- #endif -->
			<!-- 录音 -->
			<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' />
					</view>
					<view class="em" @tap.stop="chooseEmoji(e)">
						<view class="cuIcon-emoji"></view>
					</view>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<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> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="send" @tap="sendMsg(0, textMsg)" :class="isVoice?'hidden':''">
				<view class="iconfont icontuiguang-weixuan"></view>
			</view>
			<!-- #endif -->
		</view>
		
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="voice_an">
					<view class="voice_an_icon">
						<view id="one" class="wave"></view>
						<view id="two" class="wave"></view>
						<view id="three" class="wave"></view>
						<view id="four" class="wave"></view>
						<view id="five" class="wave"></view>
						<view id="six" class="wave"></view>
						<view id="seven" class="wave"></view>
					</view>
				</view>
			</view>
			<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,
				default: 0
			},
			isVoice: {
				type: Boolean,
				default: false
			},
			focus: {
				type: Boolean,
				default: false
			},
			disabledSay: {
				type: Number,
				default: 0
			},
			popupLayerClass: {
				type: String,
				default: ''
			},
			textMsg2:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				placeholder: '',
				initPoint:{identifier:0,Y:0},
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER:uni.getRecorderManager(),
				// #endif
				recordTis:"手指上滑 取消发送",
				voiceTis:'按住 说话',
				recording:false,
				willStop:false,
				recordTimer:null,
				recordLength:0,
				textMsg:'',
				bottomHeight:0,
				show:false
			};
		},
		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){
				  if (this.chatObj.chatType==1){
					  this.$u.route({
					  	url:'pageC/chat/remind',
					  	params:{ msg :this.textMsg }
					  });	
				  }
				}
			},
			textMsg2:function(v){
				this.textMsg = v
			}
		},
		mounted() {
			// #ifndef H5
			this.RECORDER.onStart((e)=>{
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e)=>{
				this.recordEnd(e);
			})
			// #endif
		},
		methods:{
			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);
			},
			// 选择表情
			chooseEmoji(e){
				e.preventDefault();
				this.bottomHeight=0
				uni.hideKeyboard()
				this.$emit('chooseEmoji', true);
			},
			// 切换语音/文字输入
			switchVoice(){
				this.$emit('switchVoice', true);
			},
			// 录音开始
			voiceBegin(e){
				if(e.touches.length>1){
					return ;
				}
				this.recording = true;
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({format:"mp3"});//录音开始,
			},
			//录音开始UI效果
			recordBegin(e){
				this.recording = true;
				this.voiceTis='松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(()=>{
					this.recordLength++;
				},1000)
			},
			// 录音被打断
			voiceCancel(){
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true;//不发送录音
				this.RECORDER.stop();//录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e){
				if(!this.recording){
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if(this.initPoint.Y - touche.clientY>=uni.upx2px(100)){
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				}else{
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e){
				if(!this.recording){
					return;
				}
				this.recording = false;
				this.voiceTis='按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop();//录音结束
			},
			//录音结束(回调文件)
			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, //仅为示例，非真实的接口地址
						filePath: tempFilePaths,
						header: {
						'merchcode':'md5'
						},
						name: 'file',
						formData: {
							'user': 'test'
						},
						success: (res) => {
							let data =JSON.parse(res.data)
							let msg = {
								length:0,
								url:data.data
							}
							let min = parseInt(this.recordLength/60);
							let sec = this.recordLength%60;
							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));
						}
					});
				}else{
					// console.log('取消发送录音');
				}
				this.willStop = false;
				console.log('--------到此一游------3-')
			},
			//更多功能(点击+弹出)
			showMore(){
				this.$emit('showMore', true);
			},
			// 打开抽屉
			openDrawer(){
				this.$emit('openDrawer', true);
			},
			// 隐藏抽屉
			hideDrawer(){
				this.$emit('hideDrawer', true);
			},
		}
	}
</script>

<style lang="scss" scoped>
@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>