调整接点页面

This commit is contained in:
zhonghua.li
2026-04-18 21:53:48 +08:00
parent f373f591dd
commit 811f5ad16b
51 changed files with 74 additions and 262 deletions

View File

@@ -62,46 +62,9 @@
</view>
<text class="staff-name">{{ item.staffName || '未分配销售' }}</text>
</view>
<view class="service-status">
<view class="action-trigger">
<view class="action-trigger__primary" @click.stop="finishService(item)">
<text class="action-trigger__primary-text">结束服务</text>
</view>
<view class="action-trigger__more" @click.stop="toggleActionMenu(item.id)">
<uni-icons type="bottom" size="16" color="#007AFF"></uni-icons>
</view>
</view>
<view
v-if="actionMenuForId && String(actionMenuForId) === String(item.id)"
class="action-menu"
@click.stop
>
<view
class="action-menu-item"
@click.stop="onActionMenuSelect('record', item)"
>
<text>{{ isRecordingItem(item.id) ? '停止录音' : '开始录音' }}</text>
</view>
<view
class="action-menu-item"
@click.stop="onActionMenuSelect('supplement', item)"
>
<text>补录客户</text>
</view>
<view
class="action-menu-item"
:class="{ 'action-menu-item--disabled': isUploading(item.id) }"
@click.stop="onActionMenuSelect('upload', item)"
>
<text>{{ isUploading(item.id) ? '上传中' : '上传录音' }}</text>
</view>
</view>
<template v-if="showRecordStateIndicator">
<uni-icons type="bars" size="16" color="#007AFF"></uni-icons>
<text>{{ recordStateLabel }}</text>
</template>
<view class="service-status-indicator">
<uni-icons type="bars" size="16" color="#007AFF"></uni-icons>
<text class="service-status-indicator__text">{{ recordStateLabel }}</text>
</view>
</view>
@@ -145,6 +108,31 @@
<view class="service-duration">
<text>{{ item.durationText }}</text>
</view>
<view class="service-actions-row">
<view
v-if="!isRecordingItem(item.id)"
class="service-action-btn service-action-btn--record"
@click.stop="startPhoneRecord(item)"
>
<text>录音</text>
</view>
<view
v-else
class="service-action-btn service-action-btn--recording"
@click.stop="stopPhoneRecordAndUpload(item)"
>
<text>停止录音</text>
</view>
<view class="service-action-btn service-action-btn--supplement" @click.stop="showSupplementDialog(item)">
<text>补录客户</text>
</view>
<view class="service-action-btn service-action-btn--upload" @click.stop="chooseAndUploadFile(item)">
<text>{{ isUploading(item.id) ? '上传中' : '上传录音' }}</text>
</view>
<view class="service-action-btn service-action-btn--finish" @click.stop="finishService(item)">
<text>结束服务</text>
</view>
</view>
</view>
<view class="service-status-empty" v-if="!serviceStatusLoading && !serviceStatusList.length">
<text>{{ emptyListHint }}</text>
@@ -154,12 +142,6 @@
</view>
</scroll-view>
<view
v-if="actionMenuForId"
class="action-menu-mask"
@click="closeActionMenu"
/>
<!-- 补录弹窗 -->
<view class="supplement-dialog-mask" v-if="showSupplementModal" @click="closeSupplementDialog">
<view class="supplement-dialog" @click.stop>
@@ -286,8 +268,7 @@ export default {
recorderSupported: false,
recorderManager: null,
recordingServiceId: null,
recordingContext: null,
actionMenuForId: null
recordingContext: null
}
},
mounted() {
@@ -308,51 +289,6 @@ export default {
}
},
methods: {
toggleActionMenu(recordId) {
const id = recordId === undefined || recordId === null ? null : String(recordId);
if (!id) {
this.actionMenuForId = null;
return;
}
this.actionMenuForId = this.actionMenuForId === id ? null : id;
},
closeActionMenu() {
this.actionMenuForId = null;
},
onActionMenuSelect(action, item) {
if (!item || !item.id) {
this.closeActionMenu();
return;
}
const id = String(item.id);
if (this.actionMenuForId && String(this.actionMenuForId) !== id) {
// 避免列表复用导致错点
this.actionMenuForId = id;
}
if (action === 'record') {
if (this.isRecordingItem(item.id)) {
this.stopPhoneRecordAndUpload(item);
} else {
this.startPhoneRecord(item);
}
this.closeActionMenu();
return;
}
if (action === 'supplement') {
this.showSupplementDialog(item);
this.closeActionMenu();
return;
}
if (action === 'upload') {
if (this.isUploading(item.id)) {
return;
}
this.chooseAndUploadFile(item);
this.closeActionMenu();
return;
}
this.closeActionMenu();
},
initServiceRecorder() {
this.recorderSupported = typeof uni.getRecorderManager === 'function';
if (!this.recorderSupported) {
@@ -820,7 +756,6 @@ export default {
},
async uploadFileForRecord(item, selectedFile) {
const recordId = String(item.id);
this.closeActionMenu();
this.uploadingIds = [...this.uploadingIds, recordId];
try {
uni.showLoading({
@@ -878,8 +813,6 @@ export default {
});
return;
}
this.closeActionMenu();
uni.showModal({
title: '确认结束',
content: `确定要结束这条服务记录吗?`,
@@ -1285,92 +1218,65 @@ export default {
font-weight: 500;
color: #333;
}
.service-status {
display: flex;
align-items: center;
gap: 8rpx;
}
.action-trigger {
.service-status-indicator {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 0;
border-radius: 10rpx;
background-color: #EEF4FF;
overflow: hidden;
flex-shrink: 0;
}
.action-trigger__primary {
padding: 6rpx 12rpx;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
}
.action-trigger__primary-text {
.service-status-indicator__text {
font-size: 26rpx;
color: #007AFF;
white-space: nowrap;
}
.service-actions-row {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12rpx;
margin-top: 18rpx;
}
.action-trigger__more {
padding: 6rpx 10rpx 6rpx 6rpx;
.service-action-btn {
padding: 8rpx 18rpx;
border-radius: 10rpx;
font-size: 24rpx;
line-height: 1.2;
display: inline-flex;
align-items: center;
justify-content: center;
border-left: 1px solid rgba(0, 122, 255, 0.15);
background-color: transparent;
border: 1px solid transparent;
background-color: #F8FAFF;
}
.action-menu {
position: absolute;
right: 24rpx;
top: 96rpx;
min-width: 220rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
border: 1px solid #EEF0F3;
z-index: 50;
overflow: hidden;
}
.action-menu-item {
padding: 22rpx 24rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.action-menu-item text {
font-size: 28rpx;
color: #111827;
}
.action-menu-item:active {
background-color: #F5F7FA;
}
.action-menu-item--disabled {
opacity: 0.55;
}
.action-menu-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 40;
}
.service-status text {
font-size: 26rpx;
.service-action-btn--record {
color: #007AFF;
border-color: rgba(0, 122, 255, 0.22);
}
.service-action-btn--recording {
color: #FF3B30;
border-color: rgba(255, 59, 48, 0.25);
}
.service-action-btn--supplement {
color: #10B981;
border-color: rgba(16, 185, 129, 0.25);
}
.service-action-btn--upload {
color: #7C3AED;
border-color: rgba(124, 58, 237, 0.25);
}
.service-action-btn--finish {
color: #EF4444;
border-color: rgba(239, 68, 68, 0.28);
background-color: #FFF7F7;
}
.customer-tags {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 818 B

View File

@@ -1,8 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 名片/客户卡片图标 -->
<rect x="20" y="25" width="41" height="31" rx="3" fill="none" stroke="#7A7E83" stroke-width="3"/>
<circle cx="30" cy="35" r="5" fill="none" stroke="#7A7E83" stroke-width="2.5"/>
<path d="M 22 45 Q 22 42 30 42 Q 38 42 38 45" fill="none" stroke="#7A7E83" stroke-width="2.5" stroke-linecap="round"/>
<line x1="38" y1="35" x2="55" y2="35" stroke="#7A7E83" stroke-width="2.5" stroke-linecap="round"/>
<line x1="38" y1="42" x2="50" y2="42" stroke="#7A7E83" stroke-width="2.5" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 633 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 568 B

View File

@@ -1,8 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 名片/客户卡片图标 -->
<rect x="20" y="25" width="41" height="31" rx="3" fill="#000000" stroke="#000000" stroke-width="3"/>
<circle cx="30" cy="35" r="5" fill="white"/>
<path d="M 22 45 Q 22 42 30 42 Q 38 42 38 45" fill="white" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
<line x1="38" y1="35" x2="55" y2="35" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
<line x1="38" y1="42" x2="50" y2="42" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 596 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

View File

@@ -1,15 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 折线图图标 - 表示数据洞察 -->
<rect x="15" y="15" width="51" height="51" rx="2" fill="none" stroke="#7A7E83" stroke-width="2.5"/>
<!-- 网格线 -->
<line x1="15" y1="33" x2="66" y2="33" stroke="#7A7E83" stroke-width="1.5" stroke-dasharray="2,2"/>
<line x1="15" y1="48" x2="66" y2="48" stroke="#7A7E83" stroke-width="1.5" stroke-dasharray="2,2"/>
<!-- 折线 -->
<polyline points="20,55 30,45 40,35 50,40 60,30" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 数据点 -->
<circle cx="20" cy="55" r="3" fill="#7A7E83"/>
<circle cx="30" cy="45" r="3" fill="#7A7E83"/>
<circle cx="40" cy="35" r="3" fill="#7A7E83"/>
<circle cx="50" cy="40" r="3" fill="#7A7E83"/>
<circle cx="60" cy="30" r="3" fill="#7A7E83"/>
</svg>

Before

Width:  |  Height:  |  Size: 894 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

View File

@@ -1,15 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 折线图图标 - 表示数据洞察 -->
<rect x="15" y="15" width="51" height="51" rx="2" fill="none" stroke="#007AFF" stroke-width="2.5"/>
<!-- 网格线 -->
<line x1="15" y1="33" x2="66" y2="33" stroke="#007AFF" stroke-width="1.5" stroke-dasharray="2,2" opacity="0.5"/>
<line x1="15" y1="48" x2="66" y2="48" stroke="#007AFF" stroke-width="1.5" stroke-dasharray="2,2" opacity="0.5"/>
<!-- 折线 -->
<polyline points="20,55 30,45 40,35 50,40 60,30" fill="none" stroke="#007AFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 数据点 -->
<circle cx="20" cy="55" r="3" fill="#007AFF"/>
<circle cx="30" cy="45" r="3" fill="#007AFF"/>
<circle cx="40" cy="35" r="3" fill="#007AFF"/>
<circle cx="50" cy="40" r="3" fill="#007AFF"/>
<circle cx="60" cy="30" r="3" fill="#007AFF"/>
</svg>

Before

Width:  |  Height:  |  Size: 922 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -1,8 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 握手图标 - 表示接待 -->
<path d="M 25 45 Q 25 35 30 35 L 35 35 Q 40 35 40 40" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round"/>
<path d="M 56 45 Q 56 35 51 35 L 46 35 Q 41 35 41 40" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round"/>
<ellipse cx="30" cy="40" rx="8" ry="12" fill="none" stroke="#7A7E83" stroke-width="3"/>
<ellipse cx="51" cy="40" rx="8" ry="12" fill="none" stroke="#7A7E83" stroke-width="3"/>
<path d="M 30 40 Q 40.5 45 51 40" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 671 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 573 B

View File

@@ -1,8 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 握手图标 - 表示接待 -->
<path d="M 25 45 Q 25 35 30 35 L 35 35 Q 40 35 40 40" fill="none" stroke="#007AFF" stroke-width="3" stroke-linecap="round"/>
<path d="M 56 45 Q 56 35 51 35 L 46 35 Q 41 35 41 40" fill="none" stroke="#007AFF" stroke-width="3" stroke-linecap="round"/>
<ellipse cx="30" cy="40" rx="8" ry="12" fill="#007AFF" stroke="#007AFF" stroke-width="3"/>
<ellipse cx="51" cy="40" rx="8" ry="12" fill="#007AFF" stroke="#007AFF" stroke-width="3"/>
<path d="M 30 40 Q 40.5 45 51 40" fill="#007AFF" stroke="#007AFF" stroke-width="3" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 680 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -1,16 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 多人协作图标 -->
<circle cx="30" cy="30" r="10" fill="none" stroke="#7A7E83" stroke-width="3"/>
<path d="M 15 50 Q 15 42 30 42 Q 45 42 45 50" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round"/>
<circle cx="51" cy="30" r="10" fill="none" stroke="#7A7E83" stroke-width="3"/>
<path d="M 36 50 Q 36 42 51 42 Q 66 42 66 50" fill="none" stroke="#7A7E83" stroke-width="3" stroke-linecap="round"/>
<!-- 连接线表示协作 -->
<line x1="40" y1="30" x2="41" y2="30" stroke="#7A7E83" stroke-width="2"/>
<line x1="30" y1="50" x2="40.5" y2="60" stroke="#7A7E83" stroke-width="2"/>
<line x1="51" y1="50" x2="40.5" y2="60" stroke="#7A7E83" stroke-width="2"/>
<!-- 底部协作点 -->
<circle cx="40.5" cy="60" r="4" fill="#7A7E83"/>
</svg>

Before

Width:  |  Height:  |  Size: 873 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 937 B

View File

@@ -1,16 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg">
<!-- 多人协作图标 -->
<circle cx="30" cy="30" r="10" fill="#007AFF"/>
<path d="M 15 50 Q 15 42 30 42 Q 45 42 45 50" fill="#007AFF" stroke="#007AFF" stroke-width="3" stroke-linecap="round"/>
<circle cx="51" cy="30" r="10" fill="#007AFF"/>
<path d="M 36 50 Q 36 42 51 42 Q 66 42 66 50" fill="#007AFF" stroke="#007AFF" stroke-width="3" stroke-linecap="round"/>
<!-- 连接线表示协作 -->
<line x1="40" y1="30" x2="41" y2="30" stroke="#007AFF" stroke-width="2"/>
<line x1="30" y1="50" x2="40.5" y2="60" stroke="#007AFF" stroke-width="2"/>
<line x1="51" y1="50" x2="40.5" y2="60" stroke="#007AFF" stroke-width="2"/>
<!-- 底部协作点 -->
<circle cx="40.5" cy="60" r="4" fill="#007AFF"/>
</svg>

Before

Width:  |  Height:  |  Size: 817 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 827 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 783 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB