1

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) {
+        _this.initRecording()
-        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,
-        })
     },
 
     // 显示-身份证类型
@@ -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 {
+        // const {
-            file,
+        //     file,
-            callback
+        //     callback
-        } = event.detail;
+        // } = event.detail;
-        callback(file.type === 'image');
+        // callback(file.type === 'image');
     },
 
-    // 图片-上传后
+    // 文件-上传后
-    afterRead(event) {
+    fileAfterRead(event) {
         let _this = this;
+        console.log('fileAfterRead' ,event);
         const {
             file
         } = event.detail;
         // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
-        wx.uploadFile({
+        for (let i = 0; i < file.length; i++) {
-            url: app.DOMAIN_NAME + '/api/dfs/upload',
+            let url = file[i].url;
-            filePath: file.url,
+            wx.uploadFile({
-            name: 'file',
+                url: app.DOMAIN_NAME + '/api/dfs/upload',
-            formData: {},
+                filePath: url,
-            success(res) {
+                name: 'file',
-                console.log('upload file ', res);
+                formData: {},
-                let fileData = JSON.parse(res.data)
+                success(res) {
-                // 上传完成需要更新 fileList
+                    console.log('upload file ', res);
-                let fileList = _this.data.fileList;
+                    let fileData = JSON.parse(res.data)
-                fileList.push({
+                    // 上传完成需要更新 fileList
-                    relativeUrl: fileData.fileName,
+                    let fileList = _this.data.fileList;
-                    url: app.IMG_NAME + fileData.fileName,
+                    fileList.push({
-                    name: fileData.fileName,
+                        relativeUrl: fileData.fileName,
-                    deletable: true,
+                        url: app.IMG_NAME + fileData.fileName,
-                })
+                        name: fileData.fileName,
-                _this.setData({
+                        deletable: true,
-                    fileList
+                    })
-                })
+                    _this.setData({
-            },
+                        fileList
-        });
+                    })
+                },
+            });
+        }
     },
 
+
     // 删除图片
     deleteImg(event) {
         console.log('deleteImg', event);

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"
     }
 }

miniprogram/pages/reportRepair/report/report.wxml

@@ -1,56 +1,62 @@
 <view class="containerView public">
     <view class="contentView">
-        <view class="rowView" bind:tap="jumpIndexBar" data-title="单位">
+        <view class="rowView">
-            <view class="label must">被访单位</view>
+            <view class="label must">报修名称</view>
-            <van-field value="{{ detail.customerName }}" input-class="input" is-link readonly placeholder="请选择" input-align="right" border="{{ false }}" />
+            <van-field value="{{ detail.reportName }}" bind:input="fieldInput" data-name="reportName" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
         </view>
         <view class="rowView">
-            <view class="label must">被访人姓名</view>
+            <view class="label must">故障等级</view>
-            <van-field value="{{ detail.userName }}"  bind:input="fieldInput" data-name="userName"  input-class="input" placeholder="请选择" border="{{ false }}" input-align="right" />
+            <van-field value="{{ detail.cardType }}" input-class="input" is-link readonly placeholder="请选择" arrow-direction="down" border="{{ false }}" input-align="right" bind:tap="showIdcardType" />
+        </view>
+        <view class="rowView" bind:tap="showVisitTime">
+            <view class="label must">故障时间</view>
+            <van-field value="{{ detail.visitTime }}" input-class="input" is-link readonly placeholder="请选择" border="{{ false }}" arrow-direction="down" input-align="right" />
         </view>
         <view class="rowView">
-            <view class="label must">被访人电话</view>
+            <view class="label must">故障类型</view>
-            <van-field value="{{ detail.userMobile }}"  bind:input="fieldInput" data-name="userMobile"   input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
-        </view>
-        <view class="rowView">
-            <view class="label must">访客姓名</view>
-            <van-field value="{{ detail.name }}" bind:input="fieldInput" data-name="name" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
-        </view>
-        <view class="rowView">
-            <view class="label must">手机号码</view>
-            <van-field value="{{ detail.phone }}" bind:input="fieldInput" data-name="phone" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
-        </view>
-        <view class="rowView">
-            <view class="label must">身份证类型</view>
             <van-field value="{{ detail.cardType }}" input-class="input" is-link readonly placeholder="请选择" arrow-direction="down" border="{{ false }}" input-align="right" bind:tap="showIdcardType" />
         </view>
         <view class="rowView">
-            <view class="label must">身份证号</view>
+            <view class="label must">联系电话</view>
-            <van-field value="{{ detail.cardNo }}" bind:input="fieldInput" data-name="cardNo" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
+            <van-field value="{{ detail.userMobile }}" bind:input="fieldInput" data-name="userMobile" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
-        </view>
-        <view class="rowView" bind:tap="showVisitTime">
-            <view class="label must">到访时间</view>
-            <van-field value="{{ detail.visitTime }}" input-class="input" is-link readonly placeholder="请选择" border="{{ false }}" arrow-direction="down" input-align="right" />
-        </view>
-        <view class="rowView" bind:tap="showLeaveTime">
-            <view class="label must">离开时间</view>
-            <van-field value="{{ detail.leaveTime }}" input-class="input" is-link readonly placeholder="请选择" border="{{ false }}" arrow-direction="down" input-align="right" />
-        </view>
-
-        <view class="rowView">
-            <view class="label must">来访事由</view>
-            <van-field value="{{ detail.visitContent }}" bind:input="fieldInput" data-name="visitContent" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
         </view>
         <view class="rowView">
-            <view class="label must">访客照片</view>
+            <view class="label must">报修人姓名</view>
-            <van-field style="visibility: hidden;" />
+            <van-field value="{{ detail.name }}" bind:input="fieldInput" data-name="name" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
+        </view>
+        <view class="rowView">
+            <view class="label must">故障地点</view>
+            <van-field value="{{ detail.cardType }}" input-class="input" is-link readonly placeholder="请选择" arrow-direction="down" border="{{ false }}" input-align="right" bind:tap="showIdcardType" />
+        </view>
+        <view class="rowView">
+            <view class="label must">门牌号</view>
+            <van-field value="{{ detail.reportName }}" bind:input="fieldInput" data-name="reportName" input-class="input" placeholder="请输入" border="{{ false }}" input-align="right" />
+        </view>
+        <view class="rowColumnView">
+            <view class="label must">故障描述</view>
+            <view class="contentView">
+                <van-field model:value="{{ value }}" type="textarea" placeholder="请输入用户名" maxlength="{{100}}" show-word-limit border="{{false}}" autosize input-class="selfTextarea" />
+                <view class="voiceView1" bind:touchstart="startRecording" bind:touchend="stopRecording">
+                    <view class="voiceView2">
+                        <view class="voiceImg" style="background: no-repeat center/cover url({{IMG_NAME + '/profile/static/repair/index/voice.png'}});"></view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="rowView self">
+            <view class="label must">语音</view>
+            <view class="voiceBtnView" wx:if="{{voiceObj.tempFilePath}}" bind:tap="startAudio">
+                <van-icon name="volume-o" color="black" size="40rpx" />
+                <view class="voiceTimeView">{{voiceObj.duration}}ms</view>
+                <van-icon name="close" size="34rpx"/>
+            </view>
+        </view>
+        <view class="rowColumnView">
+            <view class="label must">故障图片</view>
+            <view class="imgContentView">
+                <van-uploader file-list="{{ fileList }}" upload-text="点击上传图片" bind:after-read="fileAfterRead" deletable="{{ true }}" bind:delete="deleteImg" max-count="6" accept="media" multiple/>
+            </view>
         </view>
-    </view>
-
-    <!-- 上传图片 -->
-    <view class="uploadImgView">
-        <van-uploader file-list="{{ fileList }}" upload-text="点击上传照片" use-before-read bind:before-read="beforeRead" bind:after-read="afterRead" deletable="{{ true }}" bind:delete="deleteImg" max-count="1" />
-        <view class="tipsView">提示:请保持五官清晰，以方便系统精准识</view>
     </view>
 
     <!-- 提交 -->

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;
@@ -117,3 +181,10 @@
 .dialogBtnView .successBtn {
     color: #4e96f8;
 }
+
+
+.selfTextarea {
+    min-height: 140rpx !important;
+    max-height: 140rpx !important;
+    width: 450rpx !important;
+}