Initial commit of akmon project
This commit is contained in:
997
pages/mall/service/profile.uvue
Normal file
997
pages/mall/service/profile.uvue
Normal file
@@ -0,0 +1,997 @@
|
||||
<!-- 客服端 - 个人中心 -->
|
||||
<template>
|
||||
<view class="service-profile">
|
||||
<!-- 客服信息头部 -->
|
||||
<view class="profile-header">
|
||||
<image :src="serviceInfo.avatar_url || '/static/default-avatar.png'" class="service-avatar" @click="editProfile" />
|
||||
<view class="service-info">
|
||||
<text class="service-name">{{ serviceInfo.nickname || serviceInfo.phone }}</text>
|
||||
<text class="service-status">{{ getServiceStatus() }}</text>
|
||||
<view class="service-stats">
|
||||
<text class="stat-item">评分: {{ serviceRating }}/5.0</text>
|
||||
<text class="stat-item">工号: {{ serviceInfo.work_id }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="settings-icon" @click="goToSettings">⚙️</view>
|
||||
</view>
|
||||
|
||||
<!-- 在线状态控制 -->
|
||||
<view class="online-status">
|
||||
<view class="section-title">服务状态</view>
|
||||
<view class="status-controls">
|
||||
<view class="status-toggle" @click="toggleOnlineStatus">
|
||||
<text class="toggle-label">{{ onlineStatus === 1 ? '在线服务' : '离线状态' }}</text>
|
||||
<view class="toggle-switch" :class="{ active: onlineStatus === 1 }">
|
||||
<view class="toggle-handle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="onlineStatus === 1" class="queue-info">
|
||||
<text class="queue-text">当前排队: {{ queueCount }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 工单处理快捷入口 -->
|
||||
<view class="ticket-shortcuts">
|
||||
<view class="section-title">工单处理</view>
|
||||
<view class="ticket-tabs">
|
||||
<view class="ticket-tab" @click="goToTickets('all')">
|
||||
<text class="tab-icon">📋</text>
|
||||
<text class="tab-text">全部工单</text>
|
||||
<text v-if="ticketCounts.total > 0" class="tab-badge">{{ ticketCounts.total }}</text>
|
||||
</view>
|
||||
<view class="ticket-tab" @click="goToTickets('pending')">
|
||||
<text class="tab-icon">⏳</text>
|
||||
<text class="tab-text">待处理</text>
|
||||
<text v-if="ticketCounts.pending > 0" class="tab-badge alert">{{ ticketCounts.pending }}</text>
|
||||
</view>
|
||||
<view class="ticket-tab" @click="goToTickets('processing')">
|
||||
<text class="tab-icon">🔄</text>
|
||||
<text class="tab-text">处理中</text>
|
||||
<text v-if="ticketCounts.processing > 0" class="tab-badge">{{ ticketCounts.processing }}</text>
|
||||
</view>
|
||||
<view class="ticket-tab" @click="goToTickets('completed')">
|
||||
<text class="tab-icon">✅</text>
|
||||
<text class="tab-text">已完成</text>
|
||||
<text v-if="ticketCounts.completed > 0" class="tab-badge">{{ ticketCounts.completed }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 今日服务数据 -->
|
||||
<view class="today-stats">
|
||||
<view class="section-title">今日服务</view>
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.tickets }}</text>
|
||||
<text class="stat-label">处理工单</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.satisfaction }}%</text>
|
||||
<text class="stat-label">满意度</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.avgTime }}min</text>
|
||||
<text class="stat-label">平均响应</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ todayStats.onlineTime }}h</text>
|
||||
<text class="stat-label">在线时长</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前处理工单 -->
|
||||
<view v-if="currentTicket" class="current-ticket">
|
||||
<view class="section-title">当前处理</view>
|
||||
<view class="ticket-card">
|
||||
<view class="ticket-header">
|
||||
<text class="ticket-id">工单 #{{ currentTicket.id.slice(-6) }}</text>
|
||||
<text class="ticket-priority" :class="'priority-' + currentTicket.priority">
|
||||
{{ getPriorityText(currentTicket.priority) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="ticket-content">
|
||||
<text class="ticket-title">{{ currentTicket.title }}</text>
|
||||
<text class="ticket-desc">{{ currentTicket.description }}</text>
|
||||
</view>
|
||||
<view class="ticket-user">
|
||||
<text class="user-info">客户: {{ currentTicket.user_name }}</text>
|
||||
<text class="created-time">{{ formatTime(currentTicket.created_at) }}</text>
|
||||
</view>
|
||||
<view class="ticket-actions">
|
||||
<button class="action-btn" @click="contactUser">联系客户</button>
|
||||
<button class="action-btn primary" @click="viewTicketDetail">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近处理工单 -->
|
||||
<view class="recent-tickets">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近处理</text>
|
||||
<text class="view-all" @click="goToTickets('all')">查看全部 ></text>
|
||||
</view>
|
||||
<view v-if="recentTickets.length > 0" class="ticket-list">
|
||||
<view v-for="ticket in recentTickets" :key="ticket.id" class="ticket-item" @click="viewTicketDetail(ticket.id)">
|
||||
<view class="ticket-info">
|
||||
<text class="ticket-title">{{ ticket.title }}</text>
|
||||
<text class="ticket-status" :class="'status-' + ticket.status">{{ getTicketStatusText(ticket.status) }}</text>
|
||||
</view>
|
||||
<view class="ticket-meta">
|
||||
<text class="meta-text">{{ ticket.user_name }}</text>
|
||||
<text class="meta-time">{{ formatTime(ticket.created_at) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="no-data">
|
||||
<text class="no-data-text">暂无最近工单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务评价统计 -->
|
||||
<view class="rating-stats">
|
||||
<view class="section-header">
|
||||
<text class="section-title">评价统计</text>
|
||||
<text class="view-more" @click="goToRatings">详细评价 ></text>
|
||||
</view>
|
||||
<view class="rating-chart">
|
||||
<view class="rating-overview">
|
||||
<text class="overall-rating">{{ serviceRating }}</text>
|
||||
<text class="rating-label">综合评分</text>
|
||||
<view class="star-rating">
|
||||
<text v-for="i in 5" :key="i" class="star" :class="{ filled: i <= Math.floor(serviceRating) }">★</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rating-breakdown">
|
||||
<view v-for="item in ratingBreakdown" :key="item.score" class="rating-row">
|
||||
<text class="score-label">{{ item.score }}星</text>
|
||||
<view class="score-bar">
|
||||
<view class="score-fill" :style="{ width: item.percentage + '%' }"></view>
|
||||
</view>
|
||||
<text class="score-count">{{ item.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 知识库快捷访问 -->
|
||||
<view class="knowledge-base">
|
||||
<view class="section-title">知识库</view>
|
||||
<view class="kb-grid">
|
||||
<view class="kb-item" @click="goToKnowledge('common')">
|
||||
<text class="kb-icon">📖</text>
|
||||
<text class="kb-label">常见问题</text>
|
||||
</view>
|
||||
<view class="kb-item" @click="goToKnowledge('order')">
|
||||
<text class="kb-icon">📋</text>
|
||||
<text class="kb-label">订单问题</text>
|
||||
</view>
|
||||
<view class="kb-item" @click="goToKnowledge('payment')">
|
||||
<text class="kb-icon">💳</text>
|
||||
<text class="kb-label">支付问题</text>
|
||||
</view>
|
||||
<view class="kb-item" @click="goToKnowledge('delivery')">
|
||||
<text class="kb-icon">🚚</text>
|
||||
<text class="kb-label">配送问题</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="function-menu">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToRatings">
|
||||
<text class="menu-icon">⭐</text>
|
||||
<text class="menu-label">评价管理</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToTraining">
|
||||
<text class="menu-icon">📚</text>
|
||||
<text class="menu-label">培训资料</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToSchedule">
|
||||
<text class="menu-icon">📅</text>
|
||||
<text class="menu-label">排班管理</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="goToHelp">
|
||||
<text class="menu-icon">❓</text>
|
||||
<text class="menu-label">帮助中心</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
<view class="menu-item" @click="goToFeedback">
|
||||
<text class="menu-icon">💬</text>
|
||||
<text class="menu-label">意见反馈</text>
|
||||
<text class="menu-arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import type { UserType, ApiResponseType } from '@/types/mall-types'
|
||||
|
||||
// 工单类型定义
|
||||
type TicketType = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
user_name: string
|
||||
priority: number
|
||||
status: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
// 响应式数据
|
||||
const serviceInfo = ref({
|
||||
id: '',
|
||||
phone: '',
|
||||
nickname: '客服专员',
|
||||
avatar_url: '',
|
||||
work_id: 'CS001'
|
||||
} as UserType & { work_id: string })
|
||||
|
||||
const onlineStatus = ref(1) // 1: 在线, 0: 离线
|
||||
const queueCount = ref(3)
|
||||
const serviceRating = ref(4.7)
|
||||
|
||||
const ticketCounts = ref({
|
||||
total: 0,
|
||||
pending: 0,
|
||||
processing: 0,
|
||||
completed: 0
|
||||
})
|
||||
|
||||
const todayStats = ref({
|
||||
tickets: 28,
|
||||
satisfaction: 96.5,
|
||||
avgTime: 8.5,
|
||||
onlineTime: 7.5
|
||||
})
|
||||
|
||||
const currentTicket = ref({
|
||||
id: 'ticket001',
|
||||
title: '订单配送问题咨询',
|
||||
description: '我的订单已经发货3天了，但是物流信息一直没有更新，请帮我查看一下具体情况。',
|
||||
user_name: '张先生',
|
||||
priority: 2,
|
||||
status: 2,
|
||||
created_at: '2024-12-01 14:30:00'
|
||||
} as TicketType)
|
||||
|
||||
const recentTickets = ref([] as Array<TicketType>)
|
||||
|
||||
const ratingBreakdown = ref([
|
||||
{ score: 5, percentage: 68, count: 156 },
|
||||
{ score: 4, percentage: 22, count: 51 },
|
||||
{ score: 3, percentage: 8, count: 18 },
|
||||
{ score: 2, percentage: 2, count: 4 },
|
||||
{ score: 1, percentage: 0, count: 0 }
|
||||
])
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
loadServiceInfo()
|
||||
loadTicketCounts()
|
||||
loadRecentTickets()
|
||||
})
|
||||
|
||||
// 方法
|
||||
function loadServiceInfo() {
|
||||
// 模拟加载客服信息
|
||||
serviceInfo.value = {
|
||||
id: 'service001',
|
||||
phone: '13666666666',
|
||||
email: 'service@mall.com',
|
||||
nickname: '小王客服',
|
||||
avatar_url: '/static/service-avatar.png',
|
||||
gender: 1,
|
||||
user_type: 2,
|
||||
status: 1,
|
||||
created_at: '2024-01-01',
|
||||
work_id: 'CS001'
|
||||
}
|
||||
}
|
||||
|
||||
function loadTicketCounts() {
|
||||
// 模拟加载工单统计
|
||||
ticketCounts.value = {
|
||||
total: 45,
|
||||
pending: 8,
|
||||
processing: 3,
|
||||
completed: 34
|
||||
}
|
||||
}
|
||||
|
||||
function loadRecentTickets() {
|
||||
// 模拟加载最近工单
|
||||
recentTickets.value = [
|
||||
{
|
||||
id: 'ticket002',
|
||||
title: '退款申请处理',
|
||||
description: '申请退款',
|
||||
user_name: '李女士',
|
||||
priority: 1,
|
||||
status: 3,
|
||||
created_at: '2024-12-01 13:00:00'
|
||||
},
|
||||
{
|
||||
id: 'ticket003',
|
||||
title: '商品质量问题',
|
||||
description: '商品质量投诉',
|
||||
user_name: '王先生',
|
||||
priority: 3,
|
||||
status: 3,
|
||||
created_at: '2024-12-01 11:30:00'
|
||||
},
|
||||
{
|
||||
id: 'ticket004',
|
||||
title: '账户密码重置',
|
||||
description: '忘记密码需要重置',
|
||||
user_name: '赵女士',
|
||||
priority: 1,
|
||||
status: 3,
|
||||
created_at: '2024-12-01 10:15:00'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
function getServiceStatus(): string {
|
||||
return onlineStatus.value === 1 ? '在线服务中' : '离线状态'
|
||||
}
|
||||
|
||||
function getPriorityText(priority: number): string {
|
||||
const priorityMap = {
|
||||
1: '低',
|
||||
2: '中',
|
||||
3: '高',
|
||||
4: '紧急'
|
||||
}
|
||||
return priorityMap[priority] || '普通'
|
||||
}
|
||||
|
||||
function getTicketStatusText(status: number): string {
|
||||
const statusMap = {
|
||||
1: '待处理',
|
||||
2: '处理中',
|
||||
3: '已完成',
|
||||
4: '已关闭'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
function formatTime(dateStr: string): string {
|
||||
const date = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
|
||||
if (hours < 1) {
|
||||
return '刚刚'
|
||||
} else if (hours < 24) {
|
||||
return `${hours}小时前`
|
||||
} else {
|
||||
return `${Math.floor(hours / 24)}天前`
|
||||
}
|
||||
}
|
||||
|
||||
// 交互方法
|
||||
function toggleOnlineStatus() {
|
||||
onlineStatus.value = onlineStatus.value === 1 ? 0 : 1
|
||||
|
||||
uni.showToast({
|
||||
title: onlineStatus.value === 1 ? '已上线服务' : '已下线',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
function contactUser() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['发送消息', '拨打电话'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 打开聊天界面
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/chat'
|
||||
})
|
||||
} else if (res.tapIndex === 1) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '13888888888'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function viewTicketDetail(ticketId: string = '') {
|
||||
const id = ticketId || currentTicket.value?.id || ''
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/service/ticket-detail?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 导航方法
|
||||
function editProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/profile-edit'
|
||||
})
|
||||
}
|
||||
|
||||
function goToSettings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/settings'
|
||||
})
|
||||
}
|
||||
|
||||
function goToTickets(type: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/service/tickets?type=${type}`
|
||||
})
|
||||
}
|
||||
|
||||
function goToRatings() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/ratings'
|
||||
})
|
||||
}
|
||||
|
||||
function goToKnowledge(category: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/mall/service/knowledge?category=${category}`
|
||||
})
|
||||
}
|
||||
|
||||
function goToTraining() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/training'
|
||||
})
|
||||
}
|
||||
|
||||
function goToSchedule() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/service/schedule'
|
||||
})
|
||||
}
|
||||
|
||||
function goToHelp() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/common/help'
|
||||
})
|
||||
}
|
||||
|
||||
function goToFeedback() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mall/common/feedback'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.service-profile {
|
||||
padding: 0 0 120rpx 0;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.service-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.service-status {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.service-stats {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
font-size: 36rpx;
|
||||
color: white;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.online-status, .ticket-shortcuts, .today-stats, .current-ticket, .recent-tickets, .rating-stats, .knowledge-base, .function-menu {
|
||||
margin: 20rpx 30rpx;
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.view-all, .view-more {
|
||||
font-size: 24rpx;
|
||||
color: #00cec9;
|
||||
}
|
||||
|
||||
.status-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.status-toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
background: #ddd;
|
||||
border-radius: 25rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch.active {
|
||||
background: #00cec9;
|
||||
}
|
||||
|
||||
.toggle-handle {
|
||||
position: absolute;
|
||||
top: 5rpx;
|
||||
left: 5rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch.active .toggle-handle {
|
||||
left: 55rpx;
|
||||
}
|
||||
|
||||
.queue-info {
|
||||
padding: 15rpx 20rpx;
|
||||
background: #e8f8f5;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.queue-text {
|
||||
font-size: 24rpx;
|
||||
color: #00b894;
|
||||
}
|
||||
|
||||
.ticket-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ticket-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: 20rpx;
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 10rpx;
|
||||
min-width: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-badge.alert {
|
||||
background: #ff4757;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 150rpx;
|
||||
padding: 20rpx;
|
||||
background: #e8f8f5;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #00cec9;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ticket-card {
|
||||
padding: 25rpx;
|
||||
background: #e8f8f5;
|
||||
border-radius: 15rpx;
|
||||
border-left: 6rpx solid #00cec9;
|
||||
}
|
||||
|
||||
.ticket-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-id {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ticket-priority {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fed330;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.priority-1 {
|
||||
background: #2ed573;
|
||||
}
|
||||
|
||||
.priority-2 {
|
||||
background: #fed330;
|
||||
}
|
||||
|
||||
.priority-3 {
|
||||
background: #ff6348;
|
||||
}
|
||||
|
||||
.priority-4 {
|
||||
background: #ff3838;
|
||||
}
|
||||
|
||||
.ticket-content {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.ticket-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ticket-user {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.created-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ticket-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
border-radius: 15rpx;
|
||||
font-size: 26rpx;
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: #00cec9;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ticket-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-item {
|
||||
padding: 25rpx;
|
||||
background: #f8f9ff;
|
||||
border-radius: 15rpx;
|
||||
border-left: 6rpx solid #00cec9;
|
||||
}
|
||||
|
||||
.ticket-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.ticket-title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ticket-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 15rpx;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.status-3 {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.ticket-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meta-text {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.meta-time {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.rating-chart {
|
||||
display: flex;
|
||||
gap: 40rpx;
|
||||
}
|
||||
|
||||
.rating-overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.overall-rating {
|
||||
font-size: 72rpx;
|
||||
font-weight: bold;
|
||||
color: #00cec9;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.rating-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
display: flex;
|
||||
gap: 5rpx;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 32rpx;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.star.filled {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.rating-breakdown {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.rating-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
flex: 1;
|
||||
height: 20rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.score-fill {
|
||||
height: 100%;
|
||||
background: #00cec9;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.score-count {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
width: 60rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.kb-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.kb-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 140rpx;
|
||||
padding: 25rpx 15rpx;
|
||||
background: #e8f8f5;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.kb-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.kb-label {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.menu-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 36rpx;
|
||||
width: 60rpx;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
}
|
||||
|
||||
.no-data-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user