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="操作人">
					{{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 : ''
				},
				// 对话框相关状态
				showConfirmDialog: false,
				selectedFile: {
					filePath: '',
					fileName: ''
				},
			}
		},
		methods: {
			initFormFromStore() {
				const storeFormData = this.storeForm;
				this.form = {
					...this.form,
					clueId: this.form.clueId, 
					caller: storeFormData.caller || '',
					callee: storeFormData.callee || '',
					fileUrl: this.form.fileUrl,
					fileName: this.form.fileName,
					remark: this.form.remark,
					type: this.form.type,
					list: this.form.list
				};
				if(!this.form.callee){
					// 没有准备被叫号码 直接去查线索的telephone
					uni.$u.api.getClueMainInfoById({id : this.form.clueId}).then(({data})=>{
						this.form.callee = data.telephone;
					})
				};
				if(!this.form.caller){
					// 没有准备主叫号码 直接去尝试获取
					this.$store.dispatch("call/getUserPhoneNumber").then(phone=>{
						this.form.caller = phone;
					})
				}
			},
			
			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() {
				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>