From 06b93604f8f9bfbcc740decfe5a5b922d75a0de3 Mon Sep 17 00:00:00 2001 From: zuoxiao <470321431@qq.com> Date: 星期三, 03 七月 2024 10:05:51 +0800 Subject: [PATCH] 完成界面 --- pages/feedback/feedback.js | 362 +++++++++++++++++++++++++++++++-------------------- 1 files changed, 218 insertions(+), 144 deletions(-) diff --git a/pages/feedback/feedback.js b/pages/feedback/feedback.js index 7887046..6d93beb 100644 --- a/pages/feedback/feedback.js +++ b/pages/feedback/feedback.js @@ -1,9 +1,18 @@ +const audio = wx.createInnerAudioContext() +const recorderManager = wx.getRecorderManager() Page({ data: { + isRefreshing: false, + currentTab: 0, recordingSrc: '', isRecording: false, - isshowVoiceMask: true, //鏄惁鏄剧ず褰曢煶涓� - voiceTime: 2, //褰曢煶鏃堕暱 + isshowVoiceMask: false, //鏄惁鏄剧ず褰曢煶涓� + isShowVoiceView: false, + voiceTime: 0, //褰曢煶鏃堕暱 + maxVoiceTime: 60, //鏈�闀垮綍闊虫椂闂� + contDownTime: 0, + line2Opcity: 1, + line3Opcity: 1, gridConfig: { column: 3, width: 160, @@ -19,37 +28,111 @@ name: 'uploaded2.png', type: 'image', } - ] + ], + feedBackList: Array(19).fill({ + createTime: "2023-05-06 12:36:25", + responseTime: "2023-05-07 12:36:25" + }) }, onLoad() { - this.recorderManager = wx.getRecorderManager(); - this.recorderManager.onStart(() => { - console.log('recorder start'); - this.setData({ - isRecording: true - }); - this.startWaveformDrawing(); + wx.getSetting({ + success: (res) => { + if (!res.authSetting['scope.record']) { + // 濡傛灉鐢ㄦ埛娌℃湁鎺堟潈褰曢煶鏉冮檺锛屽彂璧锋巿鏉冪獥鍙� + wx.authorize({ + scope: 'scope.record', + success() { + // 鐢ㄦ埛宸茬粡鍚屾剰灏忕▼搴忎娇鐢ㄥ綍闊冲姛鑳斤紝鍙互缁х画鎿嶄綔 + console.log('鐢ㄦ埛宸叉巿鏉冨綍闊�'); + }, + fail() { + // 鐢ㄦ埛鎷掔粷鎺堟潈锛屽彲浠ョ粰鍑烘彁绀烘垨鍐嶆鍙戣捣鎺堟潈绐楀彛 + console.log('鐢ㄦ埛鎷掔粷浜嗘巿鏉冨綍闊�'); + } + }); + } else { + // 鐢ㄦ埛宸茬粡鎺堟潈褰曢煶锛屽彲浠ョ洿鎺ヨ繘琛屽綍闊虫搷浣� + console.log('鐢ㄦ埛宸叉巿鏉冨綍闊�'); + } + } }); + var that = this; + recorderManager.onStop((res) => { + console.log('褰曢煶鍋滄', voiceTime); + const voiceTime = Math.floor(res.duration / 1000) + if (voiceTime < 2) { + this.setData({ + isShowVoiceMask: false, + contDownTime: this.data.maxVoiceTime, + isShowVoiceView: false + }) + wx.showToast({ + title: '褰曢煶鏃堕棿杩囩煭', + icon: 'error', + time: 3000 + }) + } else { + + that.setData({ + voiceTime: voiceTime, + isShowVoiceMask: false, + contDownTime: this.data.maxVoiceTime, + isShowVoiceView: true + }) + console.log('res', res); + const { + tempFilePath + } = res; //杩欓噷鏉惧紑鎸夐挳 浼氳繑鍥炲綍闊虫湰鍦拌矾寰� + audio.src = tempFilePath + console.log(tempFilePath); + } - this.recorderManager.onStop((res) => { - console.log('recorder stop', res); - const { - tempFilePath - } = res; - this.setData({ - recordingSrc: tempFilePath, - isRecording: false - }); - this.stopWaveformDrawing(); + //涓婁紶褰曞埗鐨勯煶棰戝埌鏈嶅姟鍣� + // wx.uploadFile({ + // url: '鎺ュ彛鍦板潃' + api.voice, //鎺ュ彛鍦板潃 + // name: 'file', //涓婁紶鏂囦欢鍚� + // filePath: tempFilePath, + // success: function (res) { //鍚庡彴杩斿洖缁欏墠绔瘑鍒悗鐨勬枃瀛� + // var model = res.data + // var modeljson = JSON.parse(model) + // if (modeljson.status_code == 500) { + // wx.showToast({ + // title: '璇煶杞崲澶辫触', + // image: '/assets/image/icon/fail@2x.png' + // }) + // return false; + // } + // if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) { + // var saymessage = modeljson.data.message; + // wx.setStorageSync('sayinfo', saymessage) + // that.setData({ + // inpvalue: saymessage + // }) + // setTimeout(() =>{ + // wx.navigateTo({ + // url: '../loding/loding' + // }) + + // },2000) + // setTimeout(() => { + // wx.hideLoading(); + // }, 100) + // } else if (modeljson.data.err_msg) { + // wx.showToast({ + // title: '璇峰ぇ澹拌璇�', + // image: '/assets/image/icon/fail@2x.png' + // }) + // return false; + // } + // } + // }) }); - - this.recorderManager.onError((res) => { - console.error(res); - this.setData({ - isRecording: false - }); - this.stopWaveformDrawing(); + recorderManager.onStart(() => { + console.log('褰曢煶寮�濮�'); + }); + recorderManager.onError((err) => { + console.log('褰曢煶閿欒', err); }); }, handleRemove(e) { @@ -99,136 +182,127 @@ }); }, //鎸変綇鎸夐挳 - startHandel () { + startHandel() { this.setData({ - isShowVoiceMask:true + isShowVoiceMask: true, + contDownTime: this.data.maxVoiceTime, + voiceTime: 0, + isShowVoiceView: false }) console.log("寮�濮嬪綍闊�") - wx.getRecorderManager().start({ - duration: 0 + recorderManager.start({ + duration: 0 }) - }, - //鏉惧紑鎸夐挳 - endHandle () { - this.setData({ - isShowVoiceMask:false - }) + this.startRecordingCountdown(); + }, + //鏉惧紑鎸夐挳 + endHandle() { + this.stopRecordingCountdown(); console.log("缁撴潫") - const recorderManager = wx.getRecorderManager() - //褰曢煶鍋滄鍑芥暟 - var that = this; - wx.getRecorderManager().onStop((res) => { - const voiceTime = Math.floor(res.duration/1000) - console.log('voiceTime',voiceTime); - that.setData({ - voiceTime - }) - console.log('res',res); - const { tempFilePath } = res; //杩欓噷鏉惧紑鎸夐挳 浼氳繑鍥炲綍闊虫湰鍦拌矾寰� - audio.src = tempFilePath - console.log(tempFilePath); - //涓婁紶褰曞埗鐨勯煶棰戝埌鏈嶅姟鍣� - // wx.uploadFile({ - // url: '鎺ュ彛鍦板潃' + api.voice, //鎺ュ彛鍦板潃 - // name: 'file', //涓婁紶鏂囦欢鍚� - // filePath: tempFilePath, - // success: function (res) { //鍚庡彴杩斿洖缁欏墠绔瘑鍒悗鐨勬枃瀛� - // var model = res.data - // var modeljson = JSON.parse(model) - // if (modeljson.status_code == 500) { - // wx.showToast({ - // title: '璇煶杞崲澶辫触', - // image: '/assets/image/icon/fail@2x.png' - // }) - // return false; - // } - // if (modeljson.meta.status_code === 200 && !modeljson.data.err_msg) { - // var saymessage = modeljson.data.message; - // wx.setStorageSync('sayinfo', saymessage) - // that.setData({ - // inpvalue: saymessage - // }) - // setTimeout(() =>{ - // wx.navigateTo({ - // url: '../loding/loding' - // }) - - // },2000) - // setTimeout(() => { - // wx.hideLoading(); - // }, 100) - // } else if (modeljson.data.err_msg) { - // wx.showToast({ - // title: '璇峰ぇ澹拌璇�', - // image: '/assets/image/icon/fail@2x.png' - // }) - // return false; - // } - // } - // }) - }) //瑙﹀彂褰曢煶鍋滄 - wx.getRecorderManager().stop() - }, -// 鎾斁 -handlePlay(e){ - // 鍊掕鏃� - let time = this.data.voiceTime - audio.play() - let timer1 = -1,timer2 = -1,timer3 = -1,timer4 = -1,timer5 = -1,timer6 = -1; - // 绗竴娆℃挱鏀句负0 绗簩娆℃挱鏀�2绉掗挓 - timer6 = setInterval(()=>{ - console.log('鏃堕棿',time); - if(time <= 0){ - this.setData({ - line2Opcity: 1, - line3Opcity: 1 - }) - clearInterval(timer6) - clearTimeout(timer2) - clearTimeout(timer3) - clearTimeout(timer4) - clearTimeout(timer5) - return - } - timer2 = setTimeout(()=>{ - console.log('timer2'); - this.setData({ - line2Opcity: 0, - line3Opcity: 0 - }) - },300) - timer3 = setTimeout(()=>{ - console.log('timer3'); - this.setData({ - line2Opcity: 1, - line3Opcity:0 - }) - },600) - timer4 = setTimeout(()=>{ - console.log('timer4'); + recorderManager.stop() + }, + // 鎾斁 + handlePlay(e) { + // 鍊掕鏃� + let time = this.data.voiceTime + audio.play() + let timer1 = -1, + timer2 = -1, + timer3 = -1, + timer4 = -1, + timer5 = -1, + timer6 = -1; + // 绗竴娆℃挱鏀句负0 绗簩娆℃挱鏀�2绉掗挓 + timer6 = setInterval(() => { + console.log('鏃堕棿', time); + if (time <= 0) { this.setData({ line2Opcity: 1, line3Opcity: 1 - }) - },900) - timer5 = setTimeout(()=>{ - console.log('timer5'); + }) + clearInterval(timer6) + clearTimeout(timer2) + clearTimeout(timer3) + clearTimeout(timer4) + clearTimeout(timer5) + return + } + timer2 = setTimeout(() => { + console.log('timer2'); this.setData({ line2Opcity: 0, line3Opcity: 0 }) - },1200) - },1200) - // 鍊掕鏃� - timer1 = setInterval(()=>{ - time--; - if(time <= 0){ - clearInterval(timer1) - return - } -},1000) + }, 200) + timer3 = setTimeout(() => { + console.log('timer3'); + this.setData({ + line2Opcity: 1, + line3Opcity: 0 + }) + }, 400) + timer4 = setTimeout(() => { + console.log('timer4'); + this.setData({ + line2Opcity: 1, + line3Opcity: 1 + }) + }, 600) + timer5 = setTimeout(() => { + console.log('timer5'); + this.setData({ + line2Opcity: 0, + line3Opcity: 0 + }) + }, 800) + }, 800) + // 鍊掕鏃� + timer1 = setInterval(() => { + time--; + if (time <= 0) { + clearInterval(timer1) + return + } + }, 1000) -} + }, + //寮�鍚畾鏃跺櫒 + startRecordingCountdown() { + console.log("startRecordingCountdown"); + const that = this; + this.recordingInterval = setInterval(() => { + const newVoiceTime = that.data.voiceTime + 1; + const newContDownTime = that.data.contDownTime - 1; + that.setData({ + voiceTime: newVoiceTime, + contDownTime: newContDownTime + }); + if (this.data.voiceTime >= this.data.maxVoiceTime) { + that.stopRecordingCountdown(); + that.endHandle(); + } + }, 1000); + }, + + stopRecordingCountdown() { + console.log("stopRecordingCountdown"); + if (this.recordingInterval) { + clearInterval(this.recordingInterval); + this.recordingInterval = null; + console.log("Recording countdown stopped"); + } + }, // 鍒囨崲 Tabs + switchTab: function (e) { + const tab = parseInt(e.currentTarget.dataset.tab); + this.setData({ + currentTab: tab + }); + }, + onPullDownRefresh() { + this.setData({ + isRefreshing: false + }); + } }); \ No newline at end of file -- Gitblit v1.8.0