From b14dd4ac899debf32d5421dfee0da5b4fac81df7 Mon Sep 17 00:00:00 2001 From: SelfRidicule Date: Tue, 6 Aug 2024 17:32:38 +0800 Subject: [PATCH] 1 --- .../pages/reportRepair/report/report.js | 166 ++++++++++++------ .../pages/reportRepair/report/report.json | 3 +- .../pages/reportRepair/report/report.wxml | 88 +++++----- .../pages/reportRepair/report/report.wxss | 81 ++++++++- 4 files changed, 239 insertions(+), 99 deletions(-) diff --git a/miniprogram/pages/reportRepair/report/report.js b/miniprogram/pages/reportRepair/report/report.js index d95771a..f0f58ca 100644 --- a/miniprogram/pages/reportRepair/report/report.js +++ b/miniprogram/pages/reportRepair/report/report.js @@ -23,6 +23,10 @@ Page({ id: null, title: null, userDetail: {}, + recorderManager: null, // 录音对象 + voiceObj: {}, // 录音文件对象 + innerAudioContext: null, // 音频对象 + innerAudioContextIsPlay: false, // 音频对象-是否播放 idcardTypeShow: false, idcardTypeList: [{ name: '居民身份证', @@ -49,6 +53,7 @@ Page({ visitContent: null, // 来访事由 photo: null, // 头像-相对路径 url: null, // 人脸设备图片-全路径 + voiceUrl: null, // 语音 }, }, @@ -61,10 +66,6 @@ Page({ let userDetail = wx.getStorageSync('user') // let detail = _this.data.detail; - // 添加 默认设置访客信息 - detail.intervieweeId = userDetail.id // 访客id - detail.name = userDetail.username // 访客姓名 - detail.phone = userDetail.mobile // 访客手机号 _this.setData({ ...options, userDetail, @@ -74,27 +75,9 @@ Page({ wx.setNavigationBarTitle({ title: options.title }) - }, - // 跳转-索引栏（单位、人员） - jumpIndexBar(e) { - console.log('jumpIndexBar', e); - let _this = this; - let title = e.currentTarget.dataset.title - // 校验是否选择“被访单位” 后 ，再选择被访人信息 - if (title == '人员' && !_this.data.detail.customerId) { - // 错误消息提示 - _this.showErrMsg('请先选择被访单位!') - return; - } - // url 参数 - let param = '?title=' + title; - if (title == '人员') { - param = param + '&id=' + _this.data.detail.customerId; - } - wx.navigateTo({ - url: '/pages/meeting/visitorIinvitation/indexBar/indexBar' + param, - }) + // 初始化录音 + _this.initRecording() }, // 显示-身份证类型 @@ -183,46 +166,125 @@ Page({ }) }, + initRecording() { + let _this = this + let recorderManager = wx.getRecorderManager() + recorderManager.onStart(() => { + console.log('recorder start') + }) + recorderManager.onStop((res) => { + console.log('recorder stop', res) + _this.setData({ + voiceObj: res, + innerAudioContext: null, // 音频对象 + innerAudioContextIsPlay: false, // 音频对象-是否播放 + }) + }) + _this.setData({ + recorderManager + }) + }, + // 开始录音 + startRecording() { + this.data.recorderManager.start({ + duration: 60000, + sampleRate: 16000, //采样率，有效值 8000/16000/44100 + numberOfChannels: 1, //录音通道数，有效值 1/2 + encodeBitRate: 96000, //编码码率 + format: 'mp3', //音频格式，有效值 aac/mp3 + frameSize: 50, //指定帧大小 + // audioSource: 'auto' //指定录音的音频输入源，可通过 wx.getAvailableAudioSources() 获取 + }) + }, + + // 停止录音 + stopRecording() { + this.data.recorderManager.stop() + }, + + // 播放语音 + startAudio() { + console.log('startAudio'); + let _this = this + // 获取innerAudioContext实例 + let innerAudioContext = _this.data.innerAudioContext + let innerAudioContextIsPlay = _this.data.innerAudioContextIsPlay + if (!innerAudioContext) { + // 全局设置播放声音 + wx.setInnerAudioOption({ obeyMuteSwitch: false }); + innerAudioContext = wx.createInnerAudioContext() + // 设置音频文件的路径 + innerAudioContext.src = _this.data.voiceObj.tempFilePath + innerAudioContextIsPlay = false + innerAudioContext.onEnded(() => { + _this.setData({ + innerAudioContextIsPlay: false + }) + }) + } + if (innerAudioContextIsPlay) { // 播放中 + innerAudioContext.stop() + innerAudioContextIsPlay = false + } else { // 未播放 + innerAudioContext.play() + innerAudioContextIsPlay = true + } + // + _this.setData({ + innerAudioContext, + innerAudioContextIsPlay + }) + }, + + // 停止语音 + stopAudio() { + _this.data.innerAudioContext.stop() + }, // 图片-上传前校验 beforeRead(event) { - const { - file, - callback - } = event.detail; - callback(file.type === 'image'); + // const { + // file, + // callback + // } = event.detail; + // callback(file.type === 'image'); }, - // 图片-上传后 - afterRead(event) { + // 文件-上传后 + fileAfterRead(event) { let _this = this; + console.log('fileAfterRead' ,event); const { file } = event.detail; // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 - wx.uploadFile({ - url: app.DOMAIN_NAME + '/api/dfs/upload', - filePath: file.url, - name: 'file', - formData: {}, - success(res) { - console.log('upload file ', res); - let fileData = JSON.parse(res.data) - // 上传完成需要更新 fileList - let fileList = _this.data.fileList; - fileList.push({ - relativeUrl: fileData.fileName, - url: app.IMG_NAME + fileData.fileName, - name: fileData.fileName, - deletable: true, - }) - _this.setData({ - fileList - }) - }, - }); + for (let i = 0; i < file.length; i++) { + let url = file[i].url; + wx.uploadFile({ + url: app.DOMAIN_NAME + '/api/dfs/upload', + filePath: url, + name: 'file', + formData: {}, + success(res) { + console.log('upload file ', res); + let fileData = JSON.parse(res.data) + // 上传完成需要更新 fileList + let fileList = _this.data.fileList; + fileList.push({ + relativeUrl: fileData.fileName, + url: app.IMG_NAME + fileData.fileName, + name: fileData.fileName, + deletable: true, + }) + _this.setData({ + fileList + }) + }, + }); + } }, + // 删除图片 deleteImg(event) { console.log('deleteImg', event); diff --git a/miniprogram/pages/reportRepair/report/report.json b/miniprogram/pages/reportRepair/report/report.json index 1420240..404e3a5 100644 --- a/miniprogram/pages/reportRepair/report/report.json +++ b/miniprogram/pages/reportRepair/report/report.json @@ -7,6 +7,7 @@ "van-datetime-picker": "@vant/weapp/datetime-picker/index", "van-notify": "@vant/weapp/notify/index", "van-action-sheet": "@vant/weapp/action-sheet/index", - "van-dialog": "@vant/weapp/dialog/index" + "van-dialog": "@vant/weapp/dialog/index", + "van-icon": "@vant/weapp/icon/index" } } \ No newline at end of file diff --git a/miniprogram/pages/reportRepair/report/report.wxml b/miniprogram/pages/reportRepair/report/report.wxml index 5a2ade5..0ff051a 100644 --- a/miniprogram/pages/reportRepair/report/report.wxml +++ b/miniprogram/pages/reportRepair/report/report.wxml @@ -1,56 +1,62 @@ - - 被访单位 - + + 报修名称 + - 被访人姓名 - + 故障等级 + + + + 故障时间 + - 被访人电话 - - - - 访客姓名 - - - - 手机号码 - - - - 身份证类型 + 故障类型 - 身份证号 - - - - 到访时间 - - - - 离开时间 - - - - - 来访事由 - + 联系电话 + - 访客照片 - + 报修人姓名 + + + + 故障地点 + + + + 门牌号 + + + + 故障描述 + + + + + + + + + + + 语音 + + + {{voiceObj.duration}}ms + + + + + 故障图片 + + + - - - - - - 提示:请保持五官清晰，以方便系统精准识 diff --git a/miniprogram/pages/reportRepair/report/report.wxss b/miniprogram/pages/reportRepair/report/report.wxss index 2404f97..579e5c5 100644 --- a/miniprogram/pages/reportRepair/report/report.wxss +++ b/miniprogram/pages/reportRepair/report/report.wxss @@ -11,7 +11,68 @@ .contentView .rowView.self { padding: 28rpx 28rpx 28rpx 30rpx; - align-items: flex-start; + justify-content: flex-start; + align-items: center; +} + +.contentView .rowView.self .voiceBtnView { + display: flex; + justify-content: center; + align-items: center; + margin-left: 20rpx; +} + +.contentView .rowView.self .voiceBtnView .voiceTimeView { + margin-left: 10rpx; + margin-right: 24rpx; +} + +.contentView .rowColumnView { + padding: 28rpx 28rpx 28rpx 30rpx; + border-bottom: 1px solid rgb(126, 126, 126, 0.2); +} + +.contentView .rowColumnView .imgContentView { + padding-top: 20rpx; +} + +.contentView .rowColumnView .contentView { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.contentView .rowColumnView .contentView .voiceView1 { + border-radius: 127rpx; + width: 127rpx; + height: 127rpx; + background: #E5F3FF; + + display: flex; + justify-content: center; + align-items: center; + margin-left: 20rpx; +} + +.contentView .rowColumnView .contentView .voiceView2 { + border-radius: 103rpx; + width: 103rpx; + height: 103rpx; + background: #008DEF; + + display: flex; + justify-content: center; + align-items: center; +} + + +.contentView .rowColumnView .contentView .voiceView2:active { + background: red; +} + +.contentView .rowColumnView .contentView .voiceImg { + width: 41rpx; + height: 67rpx; } .contentView .rowView { @@ -22,19 +83,22 @@ border-bottom: 1px solid rgb(126, 126, 126, 0.2); } -.contentView .rowView:last-of-type { +.contentView .rowView.borderNone { border-bottom: none; } -.contentView .rowView .label { +.contentView .rowView .label, +.contentView .rowColumnView .label { + display: inline-block; position: relative; font-size: 30rpx; color: #000000; - min-width: 120rpx; + /* max-width: 160rpx; */ margin-right: 30rpx; } -.contentView .rowView .label.must::after { +.contentView .rowView .label.must::after, +.contentView .rowColumnView .label.must::after { content: '*'; display: block; position: absolute; @@ -116,4 +180,11 @@ .dialogBtnView .successBtn { color: #4e96f8; +} + + +.selfTextarea { + min-height: 140rpx !important; + max-height: 140rpx !important; + width: 450rpx !important; } \ No newline at end of file