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>
        <view class="audio-wrap">
            <view class="play-btn" @click="togglePlay">
                <up-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="44" color="#4c8afe"></up-icon>
            </view>
            <text class="play-tip">{{ isPlaying ? '播放中' : '点击播放' }}</text>
        </view>
        <view @click="handleDelete">
            <up-icon class="delectIcon" name="trash" size="22"></up-icon>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            dataInner: {},
            isPlaying: false,
            innerAudio: null
        }
    },
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler(newVal) {
                this.dataInner = { ...newVal }
                if (this.innerAudio && this.isPlaying) {
                    this.innerAudio.stop()
                    this.isPlaying = false
                }
            }
        }
    },
    computed: {
        topText() {
            return `${this.dataInner.createTime || ''}号码(${this.dataInner.caller || ''})上传录音`
        },
        callHistory() {
            return `${this.dataInner.caller || ''} 打给 ${this.dataInner.callee || ''}`
        }
    },
    beforeUnmount() {
        if (this.innerAudio) {
            this.innerAudio.stop()
            this.innerAudio.destroy()
            this.innerAudio = null
        }
    },
    methods: {
        getInnerAudio() {
            if (this.innerAudio) return this.innerAudio
            const ctx = uni.createInnerAudioContext()
            ctx.onPlay(() => { this.isPlaying = true })
            ctx.onPause(() => { this.isPlaying = false })
            ctx.onStop(() => { this.isPlaying = false })
            ctx.onEnded(() => { this.isPlaying = false })
            ctx.onError((err) => {
                this.isPlaying = false
                console.error('soundRecorder audio error', err)
                uni.showToast({ title: '播放失败', icon: 'none' })
            })
            this.innerAudio = ctx
            return ctx
        },
        togglePlay() {
            const url = this.dataInner.fileUrl
            if (!url) {
                uni.showToast({ title: '暂无音频', icon: 'none' })
                return
            }
            const ctx = this.getInnerAudio()
            if (this.isPlaying) {
                ctx.pause()
            } else {
                ctx.src = url
                ctx.play()
            }
        },
        handleDelete() {
            if (this.innerAudio && this.isPlaying) {
                this.innerAudio.stop()
                this.isPlaying = false
            }
            this.$emit('handleDelectThisSoundRecord', 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;
    }

    .audio-wrap {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 8rpx;
        .play-btn { padding: 8rpx; }
        .play-tip { font-size: 24rpx; color: #4c8afe; }
    }

    .delectIcon {
        position: absolute;
        right: 32rpx;
        top: 32rpx;
        z-index: 1;
    }
}
</style>