admin/smartDriveEEUniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加下拉菜单，查看录音列表

Browse Source
This commit is contained in:
zhonghua1
2026-01-02 22:13:46 +08:00
parent b607a5980c
commit ec2fc79c23
2 changed files with 517 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
pages/customer/components/ServiceList.vue
View File

@@ -32,12 +32,11 @@
class="service-item"
v-for="(item, index) in list"
:key="index"
@click="$emit('itemClick', item)">
:class="{ 'service-item--active': selectedServiceItem && selectedServiceItem.id === item.id }">
<view class="service-header">
<text class="service-title">{{ item.title }}</text>
<view class="service-actions">
<text class="archive-text">档案</text>
<uni-icons type="right" size="16" color="#999"></uni-icons>
<view class="service-menu-button" @click.stop="onMenuButtonClick(item)">
<uni-icons type="more-filled" size="20" color="#999"></uni-icons>
</view>
</view>
<view class="service-meta">
@@ -52,8 +51,36 @@
</view>
<text class="customer-name">{{ item.customerName }}</text>
</view>
<!-- 操作菜单 -->
<view
class="service-action-menu"
v-if="selectedServiceItem && selectedServiceItem.id === item.id && showServiceActionMenu"
@click.stop>
<view class="service-action-menu-item service-action-menu-item--danger" @click="handleDelete(item)">
<text>删除</text>
</view>
<view class="service-action-menu-divider"></view>
<view class="service-action-menu-item" @click="handleView(item)">
<text>查看</text>
</view>
<view class="service-action-menu-divider"></view>
<view class="service-action-menu-item" @click="handleAnalysis(item)">
<text>AI分析</text>
</view>
<view class="service-action-menu-divider"></view>
<view class="service-action-menu-item" @click="handleAudio(item)">
<text>录音</text>
</view>
</view>
</view>
</scroll-view>
<!-- 遮罩层，点击关闭菜单 -->
<view
class="service-action-menu-mask"
v-if="showServiceActionMenu"
@click="closeServiceActionMenu">
</view>
</view>
</template>
@@ -73,7 +100,9 @@
data() {
return {
salesName: '',
customerName: ''
customerName: '',
selectedServiceItem: null,
showServiceActionMenu: false
}
},
methods: {
@@ -89,6 +118,55 @@
},
onReachBottom() {
this.$emit('reachBottom');
},
// 菜单按钮点击
onMenuButtonClick(item) {
// 如果已经选中当前项，则关闭菜单
if (this.selectedServiceItem && this.selectedServiceItem.id === item.id && this.showServiceActionMenu) {
this.closeServiceActionMenu();
return;
}
// 显示菜单
this.selectedServiceItem = item;
this.showServiceActionMenu = true;
},
// 关闭菜单
closeServiceActionMenu() {
this.showServiceActionMenu = false;
this.selectedServiceItem = null;
},
// 处理删除
handleDelete(item) {
this.closeServiceActionMenu();
this.$emit('menuAction', {
action: 'delete',
item: item
});
},
// 处理查看
handleView(item) {
this.closeServiceActionMenu();
this.$emit('menuAction', {
action: 'view',
item: item
});
},
// 处理AI分析
handleAnalysis(item) {
this.closeServiceActionMenu();
this.$emit('menuAction', {
action: 'analysis',
item: item
});
},
// 处理录音
handleAudio(item) {
this.closeServiceActionMenu();
this.$emit('menuAction', {
action: 'audio',
item: item
});
}
}
}
@@ -193,6 +271,7 @@
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
position: relative;
}
.service-header {
@@ -200,6 +279,7 @@
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
position: relative;
}
.service-title {
@@ -208,15 +288,58 @@
color: #333;
}
.service-actions {
.service-menu-button {
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.archive-text {
font-size: 26rpx;
color: #999;
margin-right: 8rpx;
.service-action-menu {
position: absolute;
top: 60rpx;
right: 32rpx;
width: 160rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
z-index: 100;
overflow: hidden;
margin-right: 0;
}
.service-action-menu-item {
padding: 24rpx 32rpx;
font-size: 28rpx;
color: #333;
text-align: center;
background-color: #FFFFFF;
}
.service-action-menu-item:active {
background-color: #F5F5F5;
}
.service-action-menu-item--danger {
color: #FF5722;
}
.service-action-menu-divider {
height: 1rpx;
background-color: #E0E0E0;
margin: 0 16rpx;
}
.service-action-menu-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 99;
}
.service-meta {