|
|
@@ -39,30 +39,71 @@
|
|
|
|
|
|
</scroll-view>
|
|
|
<view class="send-box" :style="{ 'padding-bottom' : isShowKeyBoard + 'px'}">
|
|
|
- <input type="text" class="enter-box" v-model="inputInfo" :adjust-position="true" @focus="isNeedAuth()"
|
|
|
+ <image :src="[!isVoiceType ? '/static/icon/voice-icon.png' : '/static/icon/keyBoard-icon.png']" @click.stop='tabVoice()'></image>
|
|
|
+
|
|
|
+ <view class="voice-mode" v-if='isVoiceType' @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>
|
|
|
+
|
|
|
+ <input type="text" v-if="!isVoiceType" class="enter-box" v-model="inputInfo" :adjust-position="true" @focus="isNeedAuth()"
|
|
|
:style="{'width':inputWidth}" confirm-hold='true' confirm-type='send' @confirm="sendInputInfo" />
|
|
|
+
|
|
|
<!-- @input='isInputing' -->
|
|
|
<!-- <button type="primary" class="submit-message" @click="sendInputInfo()" v-if='isShowSend'>发送</button> -->
|
|
|
<image src="/static/setIcon.png" @click.stop='openModal()' v-if='isShowSetCenter'></image>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 录音UI效果 -->
|
|
|
+ <view class="record" :class="recording?'':'hidden'">
|
|
|
+ <view class="ing" :class="willStop?'hidden':''"><image src="../../static/icon/send-icon.png" style="width: 64rpx;height: 64rpx;"></image></view>
|
|
|
+ <view class="cancel" :class="willStop?'':'hidden'"><image src="../../static/icon/cancel-icon.png" style="width: 64rpx;height: 64rpx;"></image></view>
|
|
|
+ <view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="goUserSelf" /> -->
|
|
|
<uni-popup ref="popup" type="bottom">
|
|
|
<view class="uni-share">
|
|
|
<view class="uni-share-content">
|
|
|
- <view class="uni-share-content-box" @click.stop='goUserSelf' >
|
|
|
+
|
|
|
+ <view class="uni-share-content-box" @click.stop='goUserSelf' >
|
|
|
<view class="uni-share-content-image">
|
|
|
<image src="/static/icon/userSetIcon.png" class="image" />
|
|
|
</view>
|
|
|
<view class="uni-share-content-text">个人中心</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="uni-share-content-box" @click.stop='goRecharge' v-if="!isIos">
|
|
|
+ <view class="uni-share-content-box" @click.stop='goSharePage' >
|
|
|
+ <view class="uni-share-content-image">
|
|
|
+ <image src="/static/icon/share-icon.png" class="image" />
|
|
|
+ </view>
|
|
|
+ <view class="uni-share-content-text">邀好友奖查询次数</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="uni-share-content-box" @click.stop='tabVoice' >
|
|
|
+ <view class="uni-share-content-image">
|
|
|
+ <image src="/static/icon/userSetIcon.png" class="image" />
|
|
|
+ </view>
|
|
|
+ <view class="uni-share-content-text">语音输入</view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+
|
|
|
+ <view class="uni-share-content-box" @click.stop='clearChat' >
|
|
|
+ <view class="uni-share-content-image">
|
|
|
+ <image src="/static/icon/clean-icon.png" class="image" />
|
|
|
+ </view>
|
|
|
+ <view class="uni-share-content-text">清空</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <view class="uni-share-content-box" @click.stop='goRecharge' v-if="!isIos">
|
|
|
<view class="uni-share-content-image">
|
|
|
<image src="/static/icon/recharge.png" class="image" />
|
|
|
</view>
|
|
|
<view class="uni-share-content-text">去充值</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
|
|
|
<view class="uni-share-btn" @click="cancelModal()">取消</view>
|
|
|
</view>
|
|
|
@@ -74,6 +115,8 @@
|
|
|
import uniPopup from "@/components/uni-popup/uni-popup.vue"
|
|
|
var md5 = require("../../common/md5.js");
|
|
|
var page = 1;
|
|
|
+ const recorderManager = uni.getRecorderManager();
|
|
|
+ const innerAudioContext = uni.createInnerAudioContext();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -81,7 +124,7 @@
|
|
|
isShowSetModal:false,
|
|
|
isShowSetCenter:true,
|
|
|
isShowRecharge:false,
|
|
|
- inputWidth:'80%',
|
|
|
+ inputWidth:'70%',
|
|
|
title: 'RABOT',
|
|
|
nowTime: '',
|
|
|
nowHeight: '622px',
|
|
|
@@ -105,7 +148,25 @@
|
|
|
isAuth:true,
|
|
|
iv:'',
|
|
|
session_key:'',
|
|
|
- encryptedData:''
|
|
|
+ encryptedData:'',
|
|
|
+
|
|
|
+ //录音相关参数
|
|
|
+ isVoiceType:false,
|
|
|
+ RECORDER:uni.getRecorderManager(),
|
|
|
+ isVoice:false,
|
|
|
+ voiceTis:'按住 说话',
|
|
|
+ recordTis:"手指上滑 取消发送",
|
|
|
+ recording:false,
|
|
|
+ willStop:false,
|
|
|
+ initPoint:{identifier:0,Y:0},
|
|
|
+ recordTimer:null,
|
|
|
+ recordLength:0,
|
|
|
+
|
|
|
+ //播放语音相关参数
|
|
|
+ AUDIO:uni.createInnerAudioContext(),
|
|
|
+ playMsgid:null,
|
|
|
+ VoiceTimer:null,
|
|
|
+ voicePath: ''
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -124,6 +185,10 @@
|
|
|
onLoad() {
|
|
|
this.userLogin();
|
|
|
this.getEquipmentHeight();
|
|
|
+
|
|
|
+ this.AUDIO.onEnded((res)=>{
|
|
|
+ this.playMsgid=null;
|
|
|
+ });
|
|
|
},
|
|
|
onShow() {
|
|
|
// this.getNowTime();
|
|
|
@@ -415,6 +480,20 @@
|
|
|
getInputBlur(){
|
|
|
//this.isShowKeyBoard = 0
|
|
|
},
|
|
|
+ goSharePage(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '../share/sharePage',
|
|
|
+ success: res => {},
|
|
|
+ fail: () => {},
|
|
|
+ complete: () => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tabVoice(){
|
|
|
+ this.isVoiceType = !this.isVoiceType;
|
|
|
+ },
|
|
|
+ clearChat(){
|
|
|
+
|
|
|
+ },
|
|
|
openModal(){
|
|
|
// 需要在 popup 组件，指定 ref 为 popup
|
|
|
if(!this.isAuth){
|
|
|
@@ -431,9 +510,87 @@
|
|
|
cancelModal(){
|
|
|
// 需要在 popup 组件，指定 ref 为 popup
|
|
|
this.$refs.popup.close();
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 录音开始
|
|
|
+ voiceBegin(e){
|
|
|
+ console.log(e)
|
|
|
+ if(e.touches.length>1){
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ this.initPoint.Y = e.touches[0].clientY;
|
|
|
+ this.initPoint.identifier = e.touches[0].identifier;
|
|
|
+ this.recordBegin(e)
|
|
|
+ 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();//录音结束
|
|
|
+ this.recordEnd()
|
|
|
+ },
|
|
|
+ // 录音中(判断是否触发上滑取消发送)
|
|
|
+ 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();//录音结束
|
|
|
+ console.log(e)
|
|
|
+ this.recordEnd(e);
|
|
|
+ },
|
|
|
+ //录音结束(回调文件)
|
|
|
+ recordEnd(e){
|
|
|
+ clearInterval(this.recordTimer);
|
|
|
+ if(!this.willStop){
|
|
|
+ console.log("e: " + JSON.stringify(e));
|
|
|
+ let msg = {
|
|
|
+ length:0,
|
|
|
+ url:e.tempFilePath
|
|
|
+ }
|
|
|
+ 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(msg)
|
|
|
+ //this.sendMsg(msg,'voice');
|
|
|
+ }else{
|
|
|
+ console.log('取消发送录音');
|
|
|
+ }
|
|
|
+ this.willStop = false;
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
onShareAppMessage(){
|
|
|
|
|
|
}
|
|
|
@@ -668,4 +825,85 @@
|
|
|
.auth button:after{
|
|
|
border: 0px;
|
|
|
}
|
|
|
+
|
|
|
+ .voice-mode {
|
|
|
+ width: 70%;
|
|
|
+ height: 70rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 1%;
|
|
|
+ text-align: left;
|
|
|
+ margin: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding-left:8px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.icon {
|
|
|
+ font-family:"HMfont-home" !important;
|
|
|
+ font-size:56upx;
|
|
|
+ font-style:normal;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+.hidden{
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.record{
|
|
|
+ width: 40vw;
|
|
|
+ height: 40vw;
|
|
|
+ position: fixed;
|
|
|
+ top: 55%;
|
|
|
+ left: 30%;
|
|
|
+ background-color: rgba(0,0,0,.6);
|
|
|
+ border-radius: 20upx;
|
|
|
+}
|
|
|
+.ing{
|
|
|
+ width: 100%;
|
|
|
+ height: 30vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // 模拟录音音效动画
|
|
|
+ }
|
|
|
+ @keyframes volatility {
|
|
|
+ 0% {background-position: 0% 130%;}
|
|
|
+ 20% {background-position: 0% 150%;}
|
|
|
+ 30% {background-position: 0% 155%;}
|
|
|
+ 40% {background-position: 0% 150%;}
|
|
|
+ 50% {background-position: 0% 145%;}
|
|
|
+ 70% {background-position: 0% 150%;}
|
|
|
+ 80% {background-position: 0% 155%;}
|
|
|
+ 90% {background-position: 0% 140%;}
|
|
|
+ 100% {background-position: 0% 135%;}
|
|
|
+ }
|
|
|
+.cancel{
|
|
|
+ width: 100%;
|
|
|
+ height: 30vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .icon{
|
|
|
+ background-image:linear-gradient(to bottom,#f09b37,#fff 50%);
|
|
|
+ background-size:100% 200%;
|
|
|
+ animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
|
|
|
+ -webkit-background-clip:text;
|
|
|
+ -webkit-text-fill-color:transparent;
|
|
|
+ font-size: 150upx;
|
|
|
+ color: #f09b37;
|
|
|
+ }
|
|
|
+ .tis{
|
|
|
+ width: 100%;
|
|
|
+ height: 10vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+ .change{
|
|
|
+ color: #f09b37;
|
|
|
+ }
|
|
|
</style>
|
