416 lines
9.9 KiB
Plaintext
416 lines
9.9 KiB
Plaintext
<template>
|
|
<view class="admin-kefu-list">
|
|
<!-- 顶部操作栏 -->
|
|
<view class="page-top-bar">
|
|
<view class="btn-primary" @click="handleAdd">
|
|
<text class="btn-txt">添加客服</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据表格 -->
|
|
<view class="table-container border-shadow">
|
|
<view class="table-header">
|
|
<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>
|
|
<view class="th col-time"><text class="th-txt">添加时间</text></view>
|
|
<view class="th col-op"><text class="th-txt">操作</text></view>
|
|
</view>
|
|
|
|
<view class="table-body">
|
|
<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 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-status">
|
|
<view :class="['switch-btn', item.status == 1 ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
|
|
<view class="switch-inner">
|
|
<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.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
|
<view class="td col-op">
|
|
<text class="btn-action" @click="handleEdit(item)">编辑</text>
|
|
<view class="divider"></view>
|
|
<text class="btn-action danger" @click="handleDelete(item)">删除</text>
|
|
<view class="divider"></view>
|
|
<text class="btn-action">进入工作台</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分页栏 -->
|
|
<view class="pagination-bar">
|
|
<text class="page-total">共 {{ total }} 条</text>
|
|
<view class="page-nav">
|
|
<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" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
|
<text class="jump-txt">页</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { fetchKefuAccountPage, setKefuAccountStatus, deleteKefuAccount, type KefuAccount } from '@/services/admin/kefuService.uts'
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
|
|
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 = () => {
|
|
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>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-kefu-list {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.page-top-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.btn-primary {
|
|
width: 100px;
|
|
height: 36px;
|
|
background-color: #2d8cf0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-txt {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.table-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-header {
|
|
height: 50px;
|
|
background-color: #e6f0ff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.th {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.th-txt {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-row {
|
|
height: 70px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-row:hover {
|
|
background-color: #f9fbff;
|
|
}
|
|
|
|
.td {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.td-txt {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
}
|
|
|
|
/* 列宽百分比对齐 */
|
|
.col-id { width: 80px; }
|
|
.col-avatar { width: 120px; }
|
|
.col-name { flex: 1; justify-content: flex-start; }
|
|
.col-status { width: 150px; }
|
|
.col-time { width: 220px; }
|
|
.col-op {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 250px;
|
|
}
|
|
|
|
.kefu-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 4px;
|
|
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;
|
|
height: 24px;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.switch-on { background-color: #2d8cf0; }
|
|
.switch-off { background-color: #ccc; }
|
|
|
|
.switch-inner {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.switch-txt {
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.switch-dot {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: #fff;
|
|
border-radius: 9px;
|
|
position: absolute;
|
|
top: 3px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.switch-on .switch-dot { transform: translateX(33px); }
|
|
.switch-off .switch-dot { transform: translateX(0); }
|
|
|
|
/* 操作按钮 */
|
|
.btn-action {
|
|
font-size: 13px;
|
|
color: #2d8cf0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.danger { color: #f5222d; }
|
|
|
|
.divider {
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: #e8eaec;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
/* 分页栏 */
|
|
.pagination-bar {
|
|
padding: 20px 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.page-total { font-size: 13px; color: #606266; margin-right: 15px; }
|
|
|
|
.page-nav { display: flex; flex-direction: row; align-items: center; margin-right: 15px; }
|
|
.nav-prev, .nav-next, .nav-item {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 1px solid #dcdee2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
margin: 0 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-item.active {
|
|
background-color: #2d8cf0;
|
|
border-color: #2d8cf0;
|
|
}
|
|
|
|
.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 {
|
|
width: 40px;
|
|
height: 30px;
|
|
border: 1px solid #dcdee2;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
margin: 0 8px;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|