crm-app-vue3/pages/clueDetail/tabs/callRecord/index.vue

<template>
	<view class="callRecord_wrap">
		<view v-if="dataList.length > 0" class="timeline-list">
			<view v-for="(data, index) in dataList" :key="index" class="timeline-item">
				<view class="timeline-icon">
					<uni-icons type="phone" size="20" color="#6cc040"></uni-icons>
				</view>
				<view class="timeline-content">
					<view class="timestamp">{{ titleText(data) }}</view>
					<view class="info_top">
						<view class="info_left">
							<text class="name_text">{{ data.caller }} 打给 {{ data.callee }}</text>
						</view>
						<view class="info_right">
							{{ data.type === 1 ? data.followState : '' }}
						</view>
						<view class="delete-btn" @tap="handleDelete({ id: data.id })">
							<uni-icons type="trash" size="20" color="#ff6666"></uni-icons>
						</view>
					</view>
					<view class="file_name">{{data.fileName}}</view>
					<view class="call_file">
						<view class="audio-container">
							<audio :src="data.fileUrl" controls ></audio>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="empty_wrap">
			<uni-icons type="empty" size="60" color="#cccccc"></uni-icons>
			<text class="empty-text">暂无通话记录</text>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			clueId: {
				type: [String, Number],
				required: true
			},
			clueDetail: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				dataList: []
			}
		},
		methods: {
			titleText(data) {
				return `${data.createTime} 号码(${data.caller}) ${(data.type === 1 ?  data.hangupCauseName: '上传录音')}`
			},
			handleDelete({
				id
			}) {
				uni.showModal({
					title: '提示',
					content: '是否确定删除?',
					confirmColor: '#6cc040',
					success: async (res) => {
						if (res.confirm) {
							try {
								await uni.$u.api.deleteClueFile([id])
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 2000
								})
								this.getData()
							} catch (error) {
								uni.showToast({
									title: '删除失败',
									icon: 'error',
									duration: 2000
								})
							}
						}
					}
				})
			},
			async getData() {
				const {
					data
				} = await uni.$u.api.getCallClueFileByClueId({
					clueId: this.clueId
				});
				this.dataList = data;
			},
		},
		mounted() {
			this.getData();
		},
		beforeDestroy(){
			uni.$off('uploadRecordSuccess');  
		},
		created() {
			uni.$on('uploadRecordSuccess',()=>{
				this.getData();
			});
		}
	}
</script>
<style lang="scss" scoped>
	.callRecord_wrap {
		position: relative;
		padding: 20rpx;
		min-height: 400px;
		box-sizing: border-box;

		.loading-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0.8);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;
		}

		.timeline-list {
			.timeline-item {
				display: flex;
				margin-bottom: 30rpx;

				.timeline-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #f1f3f4;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					flex-shrink: 0;
				}

				.timeline-content {
					width:690rpx;

					.timestamp {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 10rpx;
					}

					.info_top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.info_left {
							.name_text {
								font-size: 28rpx;
								font-weight: 500;
							}
						}

						.info_right {
							color: #6cc040;
							font-size: 26rpx;
						}
					}
					.file_name{
						color: #999;
						font-size: 26rpx;
					}

					.call_file {
						width: 100%;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;

						.audio-container {
							width: 100%;
						}
					}
				}
			}
		}

		.empty_wrap {
			text-align: center;
			padding: 100rpx 0;

			.empty-text {
				display: block;
				margin-top: 30rpx;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>