crm-app-vue3/pages/uploadRecord/index.vue

<template>
	<view class="follow_wrap">
		<u-navbar placeholder :autoBack="true" title="上传录音" @rightClick="handleNavSaveClick">
			<view class="u-nav-slot" slot="right">
				保存
			</view>
		</u-navbar>
		<view class="form_wrap">
			<u--form labelPosition="left" labelWidth="80" :model="form" :rules="rules" ref="form" class="form_wrap">

				<u-form-item label="线索id">
					{{ clueDetail && clueDetail.id ? clueDetail.id : "-" }}
				</u-form-item>

				<u-form-item label="线索名称">
					{{ clueDetail && clueDetail.name ? clueDetail.name : "-" }}
				</u-form-item>

				<u-form-item label="操作人">
					{{ userInfo.nickName }}
				</u-form-item>

				<u-form-item label="主叫号码" prop="caller">
					<u--input clearable v-model="form.caller" placeholder="请输入主叫号码"></u--input>
				</u-form-item>

				<u-form-item label="被叫号码" prop="callee">
					<u--input clearable v-model="form.callee" placeholder="请输入被叫号码"></u--input>
				</u-form-item>

				<u-form-item label="录音" prop="fileUrl">
					<ld-select :list="filelist" label-key="fileName" value-key="filePath" placeholder="请选择"
						v-model="form.fileUrl" :border="false" @change="handleFileChange"></ld-select>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="备注" prop="remark">
					<u--textarea v-model="form.remark" placeholder="请输入内容" count confirmType="done" maxlength="500">
					</u--textarea>
				</u-form-item>
			</u--form>
		</view>

		<!-- 录音确认对话框 -->
		<u-popup :show="showConfirmDialog" mode="center" :closeable="false" :closeOnClickOverlay="false">
			<view class="confirm-dialog">
				<view class="dialog-title">确认录音</view>
				<view class="dialog-content">
					<view class="file-info">
						<view class="file-name">{{ selectedFile.fileName }}</view>
					</view>
					<view class="play-section">
						<audio :src="selectedFile.filePath" controls class="audio-player"></audio>
					</view>
				</view>
				<view class="dialog-buttons">
					<u-button text="取消" @click="cancelConfirm" :plain="true"></u-button>
					<u-button text="确认" @click="confirmUpload" type="primary"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- <drag-button :isDock="true" /> -->
	</view>
</template>

<script>
export default {
	computed: {
		userInfo() {
			return this.$store.state.user.userInfo;
		},
		filelist() {
			return this.$store.state.call.filelist;
		},
		storeForm() {
			return this.$store.state.call.form;
		},
	},
	data() {
		return {
			rules: {
				'caller': {
					type: 'string',
					required: true,
					message: '请输入内容',
					trigger: ['blur', 'change']
				},
				'callee': {
					type: 'string',
					required: true,
					message: '请输入内容',
					trigger: ['blur', 'change']
				},
				'fileUrl': {
					type: 'string',
					required: true,
					message: '请输入内容',
					trigger: ['blur', 'change']
				},
			},
			form: {
				clueId: undefined,
				remark: '',
				fileUrl: undefined,
				fileName: undefined,
				type: '3',
				list: [],
				caller: '',
				callee: ''
			},
			clueDetail: {},
			// 对话框相关状态
			showConfirmDialog: false,
			selectedFile: {
				filePath: '',
				fileName: ''
			},
		}
	},
	methods: {
		initFormFromStore() {
			const storeFormData = this.storeForm;
			this.form = {
				...this.form,
				caller: storeFormData.caller || '',
				callee: storeFormData.callee || '',
				fileUrl: storeFormData.fileUrl,
				fileName: storeFormData.fileName,
				remark: storeFormData.remark,
				type: storeFormData.type,
				list: storeFormData.list
			};

			uni.$u.api.getClueMainInfoById({ id: this.form.clueId }).then(({ data }) => {
				this.clueDetail = data;
			})

			if (!this.form.callee) {
				// 没有准备被叫号码 直接去查线索的telephone
				this.form.callee = this.clueDetail.telephone;
			};
			if (!this.form.caller) {
				// 没有准备主叫号码 直接去尝试获取
				this.$store.dispatch("call/getUserPhoneNumber").then(phone => {
					this.form.caller = phone;
				})
			}
			if (storeFormData.fileUrl) {
				// 初始化带了fileUrl 说明是从监听那边跳转的
				this.handleFileChange({ filePath: storeFormData.fileUrl, fileName: storeFormData.fileName });
			}
			this.$store.dispatch("call/resetForm");
		},

		handleFileChange(file) {
			// {
			// "filePath": "/storage/emulated/0/Recordings/Record/Call/15099989786 2025-11-11 09-41-57.m4a",
			// "fileName": "15099989786 2025-11-11 09-41-57.m4a"
			// }

			const { filePath, fileName } = file;

			// 显示确认对话框
			this.selectedFile = { filePath, fileName };
			this.showConfirmDialog = true;
		},

		// 取消确认
		cancelConfirm() {
			this.showConfirmDialog = false;
			this.selectedFile = { filePath: '', fileName: '' };
			this.form.fileUrl = undefined;
			this.form.fileName = undefined;
		},

		// 确认上传
		async confirmUpload() {
			try {
				// 调用上传接口
				const result = await uni.$u.api.uploadFile(this.selectedFile.filePath);
				if (result && result.data) {
					result.data.remark = this.form.remark;
					result.data.fileName = result.data.name;
					result.data.fileUrl = result.data.url;
					this.form.list = [result.data];
				}
				// 设置表单值
				this.form.fileUrl = this.selectedFile.filePath;
				this.form.fileName = this.selectedFile.fileName;

				// 关闭对话框
				this.showConfirmDialog = false;
			} catch (error) {
				uni.hideLoading();
				console.error('上传失败:', error);
				uni.$u.toast('上传失败，请重试');
			}
		},

		handleNavSaveClick() {
			if (!this.form.clueId) {
				uni.$u.toast("相关线索id为空");
			}
			this.$refs.form.validate().then(async () => {
				await uni.$u.api.saveClueFile(this.form);
				uni.$u.toast("保存成功");
				this.timer = setTimeout(() => {
					uni.$emit('uploadRecordSuccess');
					uni.navigateBack();
					clearTimeout(this.timer);
				}, 1000)
			})
		},
	},
	onLoad(option) {
		this.$store.dispatch("call/getFileList");
		this.form.clueId = option.clueId;
		this.initFormFromStore();
	},
}
</script>

<style lang="scss" scoped>
.form_wrap {
	background-color: #fff;
	margin: 20rpx 0;

	.form_wrap {
		::v-deep .u-form-item__body {
			padding: 20rpx 40rpx;
		}
	}
}

/* 录音确认对话框样式 */
.confirm-dialog {
	padding: 40rpx;
	min-width: 500rpx;
	background: #fff;
	border-radius: 20rpx;

	.dialog-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
	}

	.dialog-content {
		margin-bottom: 40rpx;

		.file-info {
			margin-bottom: 30rpx;

			.file-name {
				background: #f5f5f5;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #333;
				word-break: break-all;
				text-align: center;
			}
		}

		.play-section {
			.audio-player {
				width: 100%;
			}
		}
	}

	.dialog-buttons {
		display: flex;
		gap: 30rpx;

		::v-deep .u-button {
			flex: 1;
		}
	}
}
</style>