huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): complete full integration of kefu, finance, product and order modules with real RPC data streams

Browse Source
This commit is contained in:
comlibmb
2026-02-11 18:45:46 +08:00
parent ee5c0c446b
commit 48320b410c
25 changed files with 2060 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
pages/mall/admin/kefu/list.uvue
View File

@@ -10,7 +10,7 @@
<!-- 数据表格 -->
<view class="table-container border-shadow">
<view class="table-header">
<view class="th col-id"><text class="th-txt">ID</text></view>
<view class="th col-id"><text class="th-txt">序号</text></view>
<view class="th col-avatar"><text class="th-txt">客服头像</text></view>
<view class="th col-name"><text class="th-txt">客服名称</text></view>
<view class="th col-status"><text class="th-txt">客服状态</text></view>
@@ -19,25 +19,39 @@
</view>
<view class="table-body">
<view class="table-row" v-for="item in kefuList" :key="item.id">
<view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
<text>加载中...</text>
</view>
<view v-else-if="kefuList.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
<text>暂无客服账号</text>
</view>
<view v-else class="table-row" v-for="(item, index) in kefuList" :key="item.id">
<view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
<view class="td col-avatar">
<image class="kefu-avatar" :src="item.avatar" mode="aspectFill"></image>
<image v-if="item.avatar" class="kefu-avatar" :src="item.avatar" mode="aspectFill"></image>
<view v-else class="kefu-avatar-placeholder">
<text class="p-txt">U</text>
</view>
</view>
<view class="td col-name">
<view class="u-info">
<text class="td-txt">{{ item.nickname }}</text>
<text class="u-account">账号: {{ item.user_account }}</text>
</view>
</view>
<view class="td col-name"><text class="td-txt">{{ item.name }}</text></view>
<view class="td col-status">
<view :class="['switch-btn', item.status ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
<view :class="['switch-btn', item.status == 1 ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
<view class="switch-inner">
<text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
<text class="switch-txt">{{ item.status == 1 ? '开启' : '关闭' }}</text>
</view>
<view class="switch-dot"></view>
</view>
</view>
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
<view class="td col-op">
<text class="btn-action">编辑</text>
<text class="btn-action" @click="handleEdit(item)">编辑</text>
<view class="divider"></view>
<text class="btn-action">删除</text>
<text class="btn-action danger" @click="handleDelete(item)">删除</text>
<view class="divider"></view>
<text class="btn-action">进入工作台</text>
</view>
@@ -46,19 +60,15 @@
<!-- 分页栏 -->
<view class="pagination-bar">
<text class="page-total">共 {{ kefuList.length }} 条</text>
<view class="page-size-select">
<text class="size-txt">15条/页</text>
<text class="arrow-down">▼</text>
</view>
<text class="page-total">共 {{ total }} 条</text>
<view class="page-nav">
<view class="nav-prev"><text class="nav-icon"> < </text></view>
<view class="nav-item active"><text class="nav-num">1</text></view>
<view class="nav-next"><text class="nav-icon"> > </text></view>
<view class="nav-prev" :class="{ disabled: page <= 1 }" @click="prevPage"><text class="nav-icon"> < </text></view>
<view class="nav-item active"><text class="nav-num">{{ page }}</text></view>
<view class="nav-next" :class="{ disabled: page >= totalPages }" @click="nextPage"><text class="nav-icon"> > </text></view>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<input class="jump-input" value="1" />
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
<text class="jump-txt">页</text>
</view>
</view>
@@ -67,32 +77,109 @@
</template>
<script setup lang="uts">
import { ref } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { fetchKefuAccountPage, setKefuAccountStatus, deleteKefuAccount, type KefuAccount } from '@/services/admin/kefuService.uts'
interface KefuItem {
id: string
avatar: string
name: string
status: boolean
time: string
const kefuList = ref<KefuAccount[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(15)
const loading = ref(false)
const searchQuery = ref('')
const jumpPage = ref('')
const totalPages = computed((): number => {
if (pageSize.value <= 0) return 1
return Math.ceil(total.value / pageSize.value)
})
const loadData = async () => {
loading.value = true
try {
const res = await fetchKefuAccountPage(
page.value,
pageSize.value,
searchQuery.value || null
)
kefuList.value = res.items
total.value = res.total
} catch (e) {
uni.showToast({ title: '加载客服列表失败', icon: 'none' })
} finally {
loading.value = false
}
}
const kefuList = ref<KefuItem[]>([
{ id: '167', avatar: '/static/logo.png', name: '客服', status: true, time: '2025-12-31 11:24:35' },
{ id: '166', avatar: '/static/logo.png', name: '测试', status: true, time: '2025-11-18 17:33:26' },
{ id: '165', avatar: '/static/logo.png', name: 'zhicheng', status: true, time: '2025-09-10 10:13:00' },
{ id: '164', avatar: '/static/logo.png', name: 'kefu', status: true, time: '2025-07-29 11:50:20' },
{ id: '162', avatar: '/static/logo.png', name: '呐呐', status: true, time: '2024-12-09 10:51:11' },
{ id: '153', avatar: '/static/logo.png', name: '小天', status: true, time: '2024-09-19 16:04:59' },
{ id: '152', avatar: '/static/logo.png', name: 'kk', status: true, time: '2024-09-16 00:05:22' }
])
onMounted(() => {
loadData()
})
const toggleStatus = (item: KefuItem) => {
item.status = !item.status
const handleQuery = () => {
page.value = 1
loadData()
}
const toggleStatus = async (item: KefuAccount) => {
const targetStatus = item.status == 1 ? 0 : 1
const ok = await setKefuAccountStatus(item.id, targetStatus)
if (ok) {
item.status = targetStatus
uni.showToast({ title: '状态更新成功' })
} else {
uni.showToast({ title: '状态更新失败', icon: 'none' })
}
}
const handleAdd = () => {
console.log('Add Kefu')
uni.showToast({ title: '添加客服功能开发中', icon: 'none' })
}
const handleEdit = (item: KefuAccount) => {
console.log('Edit Kefu', item.id)
uni.showToast({ title: '编辑功能开发中', icon: 'none' })
}
const handleDelete = (item: KefuAccount) => {
uni.showModal({
title: '提示',
content: `确定要删除客服 "${item.nickname}" 吗？`,
success: async (res) => {
if (res.confirm) {
const ok = await deleteKefuAccount(item.id)
if (ok) {
uni.showToast({ title: '删除成功' })
loadData()
} else {
uni.showToast({ title: '删除失败', icon: 'none' })
}
}
}
})
}
const prevPage = () => {
if (page.value > 1) {
page.value--
loadData()
}
}
const nextPage = () => {
if (page.value < totalPages.value) {
page.value++
loadData()
}
}
const goToJumpPage = () => {
const target = parseInt(jumpPage.value)
if (!isNaN(target) && target >= 1 && target <= totalPages.value) {
page.value = target
loadData()
jumpPage.value = ''
} else {
uni.showToast({ title: '请输入有效的页码', icon: 'none' })
}
}
</script>
@@ -157,6 +244,11 @@ const handleAdd = () => {
font-weight: 500;
}
.table-body {
display: flex;
flex-direction: column;
}
.table-row {
height: 70px;
display: flex;
@@ -181,7 +273,7 @@ const handleAdd = () => {
color: #606266;
}
/* 列宽百分比对齐截图 */
/* 列宽百分比对齐 */
.col-id { width: 80px; }
.col-avatar { width: 120px; }
.col-name { flex: 1; justify-content: flex-start; }
@@ -202,6 +294,23 @@ const handleAdd = () => {
background-color: #f0f0f0;
}
.kefu-avatar-placeholder {
width: 36px;
height: 36px;
border-radius: 4px;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
.p-txt { font-size: 14px; color: #999; }
}
.u-info {
display: flex;
flex-direction: column;
.u-account { font-size: 11px; color: #999; margin-top: 2px; }
}
/* 开关组件 1:1 复刻 */
.switch-btn {
width: 60px;
@@ -236,10 +345,11 @@ const handleAdd = () => {
border-radius: 9px;
position: absolute;
top: 3px;
transition: all 0.3s;
}
.switch-on .switch-dot { right: 3px; }
.switch-off .switch-dot { left: 3px; }
.switch-on .switch-dot { transform: translateX(33px); }
.switch-off .switch-dot { transform: translateX(0); }
/* 操作按钮 */
.btn-action {
@@ -248,6 +358,8 @@ const handleAdd = () => {
cursor: pointer;
}
.danger { color: #f5222d; }
.divider {
width: 1px;
height: 12px;
@@ -266,21 +378,8 @@ const handleAdd = () => {
.page-total { font-size: 13px; color: #606266; margin-right: 15px; }
.page-size-select {
border: 1px solid #dcdee2;
padding: 4px 10px;
border-radius: 4px;
display: flex;
flex-direction: row;
align-items: center;
margin-right: 15px;
}
.size-txt { font-size: 13px; color: #606266; margin-right: 8px; }
.arrow-down { font-size: 10px; color: #808695; }
.page-nav { display: flex; flex-direction: row; align-items: center; margin-right: 15px; }
.nav-prev, .nav-next {
.nav-prev, .nav-next, .nav-item {
width: 32px;
height: 32px;
border: 1px solid #dcdee2;
@@ -289,20 +388,10 @@ const handleAdd = () => {
justify-content: center;
border-radius: 4px;
margin: 0 4px;
cursor: pointer;
}
.nav-item {
width: 32px;
height: 32px;
border: 1px solid #dcdee2;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin: 0 4px;
}
.active {
.nav-item.active {
background-color: #2d8cf0;
border-color: #2d8cf0;
}
@@ -310,6 +399,8 @@ const handleAdd = () => {
.active .nav-num { color: #fff; }
.nav-num, .nav-icon { font-size: 13px; color: #606266; }
.disabled { cursor: not-allowed; opacity: 0.5; }
.page-jump { display: flex; flex-direction: row; align-items: center; }
.jump-txt { font-size: 13px; color: #606266; }
.jump-input {