新增录音查找功能

components/soundRecorder/soundRecorder.vue

@@ -1,7 +1,12 @@
 <template>
     <view class="sound-recorder">
-        <!-- <view>{{ data }}</view> -->
-        <audio :src="data.fileUrl" controls></audio>
+        <view class="top-text">{{ topText }}</view>
+        <view class="file-name">{{ dataInner.fileName }}</view>
+        <view class="call-history">{{ callHistory }}</view>
+        <audio :src="dataInner.fileUrl" controls></audio>
+        <view @click="handleDelete">
+            <u-icon class="delectIcon" name="trash" size="22"></u-icon>
+        </view>
     </view>
 </template>
 
@@ -10,13 +15,78 @@ export default {
     props: {
         data: {
             type: Object,
-            default: {}
+            default: () => ({})
         }
     },
     data() {
         return {
+            dataInner: {}
         }
     },
+    watch: {
+        data: {
+            deep: true,
+            immediate: true,
+            handler(newVal) {
+                this.dataInner = { ...newVal }
+            }
+        }
+    },
+    computed: {
+        topText() {
+            return `${this.dataInner.createTime}号码(${this.dataInner.caller})上传录音`
+        },
+        callHistory() {
+            return `${this.dataInner.caller} 打给 ${this.dataInner.callee}`
+        }
+    },
+    methods: {
+        handleDelete() {
+            console.log('点击了删除录音的按钮')
+            // this.$emit('delete', this.dataInner)
+        }
+    }
+
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.sound-recorder {
+    background: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+    padding: 32rpx;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    border: 2rpx solid #f0f0f0;
+    position: relative;
+    margin-bottom: 10rpx;
+
+    .top-text {
+        font-size: 20rpx;
+        color: #888;
+        line-height: 1.4;
+    }
+
+    .call-history {
+        font-size: 30rpx;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 20rpx;
+        line-height: 1.5;
+    }
+
+    .file-name {
+        font-size: 20rpx;
+        color: #666;
+        line-height: 1.4;
+        word-break: break-all;
+    }
+
+
+    .delectIcon {
+        position: absolute;
+        right: 32rpx;
+        top: 32rpx;
+        z-index: 1;
+    }
+}
+</style>

pages/orderDetailNew/components/pageFour.vue

@@ -455,6 +455,7 @@ export default {
                 { label: '是', value: '1' },
                 { label: '否', value: '2' }
             ]],
+            currentEditItem: '',
 
         };
     },
@@ -714,6 +715,7 @@ export default {
         handleSelectOrg(item) {
             console.log(item.uuid, '当前选择的行的uuid')
             this.currentEditItem = item.uuid
+            console.log(this.currentEditItem, '当前选择的行')
             // this.showOrgPicker = true
             this.showPersonPicker = true
             //把当前的组织赋值给当前的组件

pages/orderDetailNew/components/pageOne.vue

@@ -416,10 +416,10 @@ export default {
         //获取通话记录
         async getCallRecords() {
             console.log('这里是参数', this.currentReceipt.clueId);
-            // const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: this.currentReceipt.clueId });
-            const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: '1998278069905854466' });
+            const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: this.currentReceipt.clueId });
+            // const { data } = await uni.$u.api.getCallClueFileByClueId({ clueId: '1998278069905854466' });
             console.log('通话记录:', data);
-            // this.soundRecordList = data;
+            this.soundRecordList = data;
         },
 
     },