crm-app-vue3/components/soundRecorder/soundRecorder.vue

<template>
    <view class="sound-recorder">
        <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>

<script>
export default {
    props: {
        data: {
            type: Object,
            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>
.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>