解决播放列表显示不完

2026-01-02 22:27:54 +08:00
parent ec2fc79c23
commit 248dfd2d60
2 changed files with 226 additions and 13 deletions
--- a/pages/customer/components/ServiceList.vue
+++ b/pages/customer/components/ServiceList.vue
@@ -32,7 +32,8 @@
 				class="service-item" 
 				v-for="(item, index) in list" 
 				:key="index"
-				:class="{ 'service-item--active': selectedServiceItem && selectedServiceItem.id === item.id }">
+				:class="{ 'service-item--active': selectedServiceItem && selectedServiceItem.id === item.id }"
+				@click="handleItemClick(item)">
 				<view class="service-header">
 					<text class="service-title">{{ item.title }}</text>
 					<view class="service-menu-button" @click.stop="onMenuButtonClick(item)">
@@ -167,6 +168,15 @@
 					action: 'audio',
 					item: item
 				});
+			},
+			// 处理列表项点击
+			handleItemClick(item) {
+				// 如果菜单正在显示，不触发列表项点击
+				if (this.showServiceActionMenu) {
+					return;
+				}
+				// 触发列表项点击事件，打开详情页面
+				this.$emit('itemClick', item);
 			}
 		}
 	}
--- a/pages/customer/customer.vue
+++ b/pages/customer/customer.vue
@@ -68,18 +68,16 @@
 					<view style="width: 48rpx;"></view>
 				</view>
 				<!-- 录音列表内容 -->
-				<scroll-view class="audio-list-content" scroll-y>
+				<scroll-view class="audio-list-content" scroll-y enable-flex>
 					<view 
 						class="audio-list-item" 
 						v-for="(item, index) in audioSegmentsList" 
 						:key="index">
 						<view class="audio-item-header">
-							<view class="audio-play-btn" @click="toggleAudioPlay(item, index)">
-								<uni-icons 
-									:type="playingAudioId === item.id ? 'pause-filled' : 'play-filled'" 
-									size="20" 
-									:color="playingAudioId === item.id ? '#FF3B30' : '#2A68FF'">
-								</uni-icons>
+							<view class="audio-play-btn" @click.stop="toggleAudioPlay(item, index)">
+								<text class="audio-play-text" :class="playingAudioId === (item.id || item.segmentId) ? 'audio-play-text--playing' : ''">
+									{{ playingAudioId === (item.id || item.segmentId) ? '暂停' : '播放' }}
+								</text>
 							</view>
 							<text class="audio-item-name">{{ formatAudioFileName(item.audioFileOriginalName) }}</text>
 						</view>
@@ -829,8 +827,194 @@
 			},
 			// 关闭录音列表弹窗
 			closeAudioList() {
+				// 关闭弹窗时，如果正在播放，先停止播放
+				if (this.playingAudioId) {
+					this.stopAudioPlay({ id: this.playingAudioId });
+				}
 				this.$refs.audioListPopup.close();
 			},
+			// 切换录音播放/暂停
+			async toggleAudioPlay(item, index) {
+				try {
+					// 获取录音ID（可能是 id 或 segmentId）
+					const audioId = item.id || item.segmentId;
+					if (!audioId) {
+						console.warn('录音项缺少ID:', item);
+						uni.showToast({
+							title: '无法获取录音ID',
+							icon: 'none'
+						});
+						return;
+					}
+					
+					// 如果点击的是当前正在播放的录音，则暂停
+					if (this.playingAudioId === audioId) {
+						await this.stopAudioPlay(item);
+					} else {
+						// 如果其他录音正在播放，先停止
+						if (this.playingAudioId) {
+							await this.stopAudioPlay({ id: this.playingAudioId });
+						}
+						// 开始播放新的录音
+						await this.startAudioPlay(item);
+					}
+				} catch (error) {
+					console.error('切换播放状态失败:', error);
+					uni.showToast({
+						title: '操作失败',
+						icon: 'none'
+					});
+				}
+			},
+			// 开始播放录音
+			async startAudioPlay(item) {
+				try {
+					// 获取录音ID（可能是 id 或 segmentId）
+					const audioId = item.id || item.segmentId;
+					if (!audioId) {
+						console.warn('录音项缺少ID:', item);
+						uni.showToast({
+							title: '无法获取录音ID',
+							icon: 'none'
+						});
+						return;
+					}
+					
+					uni.showLoading({
+						title: '播放中...'
+					});
+					
+					// 调用播放接口：/api/audioManagementSegments/play/{id}
+					const url = getApiUrl(`/api/audioManagementSegments/play/${audioId}`);
+					
+					// 获取认证信息
+					let tenantId = '';
+					let token = '';
+					try {
+						tenantId = uni.getStorageSync('backend-tenant-id') || '';
+						token = uni.getStorageSync('backend-token') || '';
+					} catch (e) {
+						console.error('获取认证信息失败:', e);
+					}
+					
+					// 构建请求头
+					const headers = {
+						'Content-Type': 'application/json'
+					};
+					if (token) {
+						headers['Authorization'] = `Bearer ${token}`;
+					}
+					if (tenantId) {
+						headers['X-Tenant-Id'] = tenantId;
+					}
+					
+					const res = await uni.request({
+						url: url,
+						method: 'POST',
+						header: headers,
+						timeout: 10000
+					});
+					
+					uni.hideLoading();
+					
+					if (res.statusCode === 200 && res.data && res.data.success) {
+						// 设置当前播放的录音ID
+						this.playingAudioId = audioId;
+						uni.showToast({
+							title: '开始播放',
+							icon: 'success',
+							duration: 1000
+						});
+					} else {
+						uni.showToast({
+							title: res.data?.message || '播放失败',
+							icon: 'none'
+						});
+					}
+				} catch (error) {
+					uni.hideLoading();
+					console.error('播放录音失败:', error);
+					uni.showToast({
+						title: `播放失败: ${error.errMsg || error.message || '未知错误'}`,
+						icon: 'none'
+					});
+				}
+			},
+			// 停止播放录音
+			async stopAudioPlay(item) {
+				try {
+					// 获取录音ID（可能是 id 或 segmentId）
+					const audioId = item.id || item.segmentId;
+					if (!audioId) {
+						// 如果没有ID，直接清除播放状态
+						this.playingAudioId = null;
+						return;
+					}
+					
+					uni.showLoading({
+						title: '停止中...'
+					});
+					
+					// 调用停止接口：/api/audioManagementSegments/stop/{id}
+					const url = getApiUrl(`/api/audioManagementSegments/stop/${audioId}`);
+					
+					// 获取认证信息
+					let tenantId = '';
+					let token = '';
+					try {
+						tenantId = uni.getStorageSync('backend-tenant-id') || '';
+						token = uni.getStorageSync('backend-token') || '';
+					} catch (e) {
+						console.error('获取认证信息失败:', e);
+					}
+					
+					// 构建请求头
+					const headers = {
+						'Content-Type': 'application/json'
+					};
+					if (token) {
+						headers['Authorization'] = `Bearer ${token}`;
+					}
+					if (tenantId) {
+						headers['X-Tenant-Id'] = tenantId;
+					}
+					
+					const res = await uni.request({
+						url: url,
+						method: 'POST',
+						header: headers,
+						timeout: 10000
+					});
+					
+					uni.hideLoading();
+					
+					if (res.statusCode === 200 && res.data && res.data.success) {
+						// 清除当前播放的录音ID
+						this.playingAudioId = null;
+						uni.showToast({
+							title: '已停止',
+							icon: 'success',
+							duration: 1000
+						});
+					} else {
+						// 即使接口失败，也清除播放状态
+						this.playingAudioId = null;
+						uni.showToast({
+							title: res.data?.message || '停止失败',
+							icon: 'none'
+						});
+					}
+				} catch (error) {
+					uni.hideLoading();
+					// 即使接口失败，也清除播放状态
+					this.playingAudioId = null;
+					console.error('停止播放失败:', error);
+					uni.showToast({
+						title: `停止失败: ${error.errMsg || error.message || '未知错误'}`,
+						icon: 'none'
+					});
+				}
+			},
 			// 格式化时长（秒转换为时分秒）
 			formatDuration(seconds) {
 				if (!seconds) return '00:00:00';
@@ -2950,6 +3134,7 @@
 		background-color: #FFFFFF;
 		border-radius: 32rpx 32rpx 0 0;
 		max-height: 90vh;
+		height: 90vh;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
@@ -2960,6 +3145,8 @@
 		padding: 24rpx 32rpx;
 		box-sizing: border-box;
 		background-color: #F5F5F5;
+		min-height: 0; /* 配合 flex: 1 使用，确保可以滚动 */
+		height: 100%;
 	}
 	
 	.audio-list-item {
@@ -2977,19 +3164,35 @@
 	}
 	
 	.audio-play-btn {
-		width: 48rpx;
-		height: 48rpx;
+		min-width: 80rpx;
+		height: 56rpx;
+		padding: 0 20rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		margin-right: 12rpx;
+		margin-right: 16rpx;
 		cursor: pointer;
-		border-radius: 50%;
+		border-radius: 8rpx;
 		transition: background-color 0.2s;
+		flex-shrink: 0;
+		background-color: #F5F5F5;
+		position: relative;
+		z-index: 1;
 	}
 	
 	.audio-play-btn:active {
-		background-color: #F5F5F5;
+		background-color: #E0E0E0;
+	}
+	
+	.audio-play-text {
+		font-size: 24rpx;
+		color: #2A68FF;
+		font-weight: 500;
+		line-height: 1;
+	}
+	
+	.audio-play-text--playing {
+		color: #FF3B30;
 	}
 	
 	.audio-item-name {