620 lines
15 KiB
Vue
620 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="叫号控制" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
|||
|
|
title-size='36' height='36' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 头部区域 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="date-section" @click="show = true">
|
|||
|
|
<view class="date">{{ currentDate }}</view>
|
|||
|
|
<view class="calendar-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/uIKD9zzjb0jlIWmHrtpz" mode=""></image> </view>
|
|||
|
|
</view>
|
|||
|
|
<view class="search-section">
|
|||
|
|
<input
|
|||
|
|
class="search-input"
|
|||
|
|
placeholder="输入关键字查询"
|
|||
|
|
v-model="searchKeyword"
|
|||
|
|
placeholder-class="search-placeholder"
|
|||
|
|
/>
|
|||
|
|
<view class="search-icon"><image src="https://api.ccttiot.com/smartmeter/img/static/urVMNY8rV4QlGT923KEo" mode=""></image> </view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 统计信息 -->
|
|||
|
|
<view class="statistics">
|
|||
|
|
<view class="stat-text">排队{{ tjobj.pending == undefined ? '--' : tjobj.pending}} 叫号{{ tjobj.calling == undefined ? '--' : tjobj.calling }} 过号{{ tjobj.passed == undefined ? '--' : tjobj.passed }} 核销{{ tjobj.writtenOff == undefined ? '--' : tjobj.writtenOff }} 全部{{ tjobj. totalCount == undefined ? '--' : tjobj. totalCount }}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 导航标签 -->
|
|||
|
|
<view class="nav-tabs">
|
|||
|
|
<view
|
|||
|
|
v-for="(tab, index) in tabs"
|
|||
|
|
:key="index"
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: activeTab === tab.key }"
|
|||
|
|
@click="switchTab(tab.key)"
|
|||
|
|
>
|
|||
|
|
<view class="tab-text">{{ tab.name }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 队列列表 -->
|
|||
|
|
<view class="queue-list">
|
|||
|
|
<view v-if="loading" style="color:#808080;font-size:28rpx;padding:20rpx;">加载中...</view>
|
|||
|
|
<view v-else-if="!queueList.length" style="color:#808080;font-size:28rpx;padding:20rpx;">
|
|||
|
|
{{ errorMessage || '暂无数据' }}
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in queueList"
|
|||
|
|
:key="index"
|
|||
|
|
class="queue-item"
|
|||
|
|
>
|
|||
|
|
<view class="item-main">
|
|||
|
|
<view class="item-left">
|
|||
|
|
<view class="item-id">{{ item.number }}</view>
|
|||
|
|
<view class="item-time">取号时间: {{ item.createTime }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-right">
|
|||
|
|
<view class="user-name">{{ item.nickName }}</view>
|
|||
|
|
<view class="status-badge" :class="'status-' + normalizeStatus(item.status)">
|
|||
|
|
<view class="status-text">{{ getStatusText(item.status) }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分隔线 -->
|
|||
|
|
<view class="separator-line"></view>
|
|||
|
|
|
|||
|
|
<view class="item-actions">
|
|||
|
|
<view class="action-buttons">
|
|||
|
|
<view
|
|||
|
|
v-for="(action, actionIndex) in getAvailableActions(item.status)"
|
|||
|
|
:key="actionIndex"
|
|||
|
|
class="action-btn"
|
|||
|
|
:class="action.type"
|
|||
|
|
@click="handleAction(action,item)"
|
|||
|
|
>
|
|||
|
|
{{ action.text }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-picker mode="time" v-model="show" :params="params" @confirm="btntime"></u-picker>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
params: {
|
|||
|
|
year: true,
|
|||
|
|
month: true,
|
|||
|
|
day: true,
|
|||
|
|
hour: false,
|
|||
|
|
minute: false,
|
|||
|
|
second: false
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#000",
|
|||
|
|
},
|
|||
|
|
currentDate: '',
|
|||
|
|
searchKeyword: '',
|
|||
|
|
activeTab: 'all',
|
|||
|
|
tabs: [
|
|||
|
|
{ key: '1', name: '待叫号' },
|
|||
|
|
{ key: '2', name: '叫号中' },
|
|||
|
|
{ key: '4', name: '已过号' },
|
|||
|
|
{ key: '3', name: '已核销' },
|
|||
|
|
{ key: 'all', name: '全部' }
|
|||
|
|
],
|
|||
|
|
status:'',
|
|||
|
|
queueList: [],
|
|||
|
|
allList: [],
|
|||
|
|
stats: { inQueue: 0, calling: 0, missed: 0, verified: 0, total: 0 },
|
|||
|
|
loading: false,
|
|||
|
|
errorMessage: '',
|
|||
|
|
tjobj:{}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(option) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
const now = new Date();
|
|||
|
|
// 自动补零的格式化函数
|
|||
|
|
function formatDate(date, separator = '-', needPadZero = true) {
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = needPadZero
|
|||
|
|
? String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
: date.getMonth() + 1;
|
|||
|
|
const day = needPadZero
|
|||
|
|
? String(date.getDate()).padStart(2, '0')
|
|||
|
|
: date.getDate();
|
|||
|
|
return `${year}${separator}${month}${separator}${day}`;
|
|||
|
|
}
|
|||
|
|
// 使用示例
|
|||
|
|
const dateStr1 = formatDate(now);
|
|||
|
|
this.currentDate = dateStr1
|
|||
|
|
this.getlist()
|
|||
|
|
this.gettongji()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
btntime(e){
|
|||
|
|
console.log(e);
|
|||
|
|
this.currentDate = e.year + '-' + e.month + '-' + e.day
|
|||
|
|
this.searchKeyword = ''
|
|||
|
|
this.getlist()
|
|||
|
|
this.gettongji()
|
|||
|
|
},
|
|||
|
|
// 获取所有统计
|
|||
|
|
gettongji(){
|
|||
|
|
this.$u.get(`/bst/queueUser/selectCount?storeId=${this.$store.state.storeId}&timeRange=${this.currentDate + ',' + this.currentDate}`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.tjobj = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 规范状态为统一的 key
|
|||
|
|
normalizeStatus(status) {
|
|||
|
|
if (status === 1 || status === '1') return 'inQueue'
|
|||
|
|
if (status === 2 || status === '2') return 'calling'
|
|||
|
|
if (status === 3 || status === '3') return 'verified'
|
|||
|
|
if (status === 4 || status === '4') return 'missed'
|
|||
|
|
if (status === 5 || status === '5') return 'cancelled'
|
|||
|
|
return status
|
|||
|
|
},
|
|||
|
|
// 计算统计
|
|||
|
|
updateStats(list) {
|
|||
|
|
const counters = { inQueue: 0, calling: 0, missed: 0, verified: 0, total: 0 }
|
|||
|
|
(list || []).forEach(item => {
|
|||
|
|
const key = this.normalizeStatus(item.status)
|
|||
|
|
if (Object.prototype.hasOwnProperty.call(counters, key)) counters[key]++
|
|||
|
|
counters.total++
|
|||
|
|
})
|
|||
|
|
this.stats = counters
|
|||
|
|
},
|
|||
|
|
// 本地过滤（按标签与关键字）
|
|||
|
|
getFilteredList(list) {
|
|||
|
|
const keyword = (this.searchKeyword || '').trim()
|
|||
|
|
return (list || []).filter(item => {
|
|||
|
|
const matchTab = this.activeTab === 'all' || this.normalizeStatus(item.status) === this.normalizeStatus(this.activeTab)
|
|||
|
|
const text = `${item.number || ''} ${item.nickName || ''}`
|
|||
|
|
const matchKeyword = !keyword || text.indexOf(keyword) !== -1
|
|||
|
|
return matchTab && matchKeyword
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取排队信息
|
|||
|
|
getlist(){
|
|||
|
|
this.loading = true
|
|||
|
|
this.errorMessage = ''
|
|||
|
|
const storeId = this.$store && this.$store.state ? this.$store.state.storeId : ''
|
|||
|
|
if(!storeId){
|
|||
|
|
uni.showToast({ title:'缺少门店信息', icon:'none' })
|
|||
|
|
this.allList = []
|
|||
|
|
this.queueList = []
|
|||
|
|
this.updateStats([])
|
|||
|
|
this.loading = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const query = [`storeId=${storeId}`]
|
|||
|
|
if (this.status) query.push(`status=${this.status}`)
|
|||
|
|
this.$u.get(`/bst/queueUser/list?storeId=${storeId}&status=${this.status}&pageNum=1&pageSize=999&orderByColumn=createTime&isAsc=desc&timeRange=${this.currentDate + ',' + this.currentDate}`).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.queueList = res.rows
|
|||
|
|
this.allList = res.rows
|
|||
|
|
}else{
|
|||
|
|
this.allList = []
|
|||
|
|
this.queueList = []
|
|||
|
|
this.errorMessage = (res && res.msg) ? res.msg : '加载失败'
|
|||
|
|
}
|
|||
|
|
}).catch((e)=>{
|
|||
|
|
this.allList = []
|
|||
|
|
this.queueList = []
|
|||
|
|
this.errorMessage = '网络错误'
|
|||
|
|
}).finally(()=>{ this.loading = false })
|
|||
|
|
},
|
|||
|
|
refreshList(){ this.getlist() },
|
|||
|
|
// 通用队列操作：尝试多个可能的后端端点
|
|||
|
|
switchTab(tabKey) {
|
|||
|
|
this.activeTab = tabKey
|
|||
|
|
this.status = tabKey === 'all' ? '' : tabKey
|
|||
|
|
// 切换标签时重新拉取数据，避免后端过滤和本地过滤不一致
|
|||
|
|
this.searchKeyword = ''
|
|||
|
|
this.getlist()
|
|||
|
|
},
|
|||
|
|
showDatePicker() {
|
|||
|
|
// 兜底处理：先不弹日期选择，避免环境不支持时报错
|
|||
|
|
uni.showToast({ title: '日期筛选暂未开通', icon: 'none' })
|
|||
|
|
},
|
|||
|
|
loadDataByDate(date) {
|
|||
|
|
// 根据选择的日期加载数据
|
|||
|
|
console.log('加载日期数据:', date);
|
|||
|
|
// 这里可以调用API获取指定日期的数据
|
|||
|
|
// 例如：this.fetchQueueData(date);
|
|||
|
|
},
|
|||
|
|
getStatusText(status) {
|
|||
|
|
const statusTexts = {
|
|||
|
|
'inQueue': '待叫号',
|
|||
|
|
'calling': '叫号中',
|
|||
|
|
'missed': '已过号',
|
|||
|
|
'verified': '已核销',
|
|||
|
|
'cancelled': '已取消'
|
|||
|
|
};
|
|||
|
|
const key = this.normalizeStatus(status)
|
|||
|
|
return statusTexts[key] || '';
|
|||
|
|
},
|
|||
|
|
getAvailableActions(status) {
|
|||
|
|
const actionMap = {
|
|||
|
|
'inQueue': [
|
|||
|
|
{ text: '叫号', action: 'call', type: 'primary' },
|
|||
|
|
{ text: '过号', action: 'miss', type: 'primary' },
|
|||
|
|
{ text: '取消', action: 'cancel', type: 'secondary' },
|
|||
|
|
{ text: '核销', action: 'verify', type: 'primary' }
|
|||
|
|
],
|
|||
|
|
'calling': [
|
|||
|
|
{ text: '过号', action: 'miss', type: 'primary' },
|
|||
|
|
{ text: '取消', action: 'cancel', type: 'secondary' },
|
|||
|
|
{ text: '核销', action: 'verify', type: 'primary' }
|
|||
|
|
],
|
|||
|
|
'missed': [
|
|||
|
|
{ text: '恢复叫号', action: 'restore', type: 'primary' },
|
|||
|
|
{ text: '取消', action: 'cancel', type: 'secondary' }
|
|||
|
|
],
|
|||
|
|
'verified': [
|
|||
|
|
// { text: '恢复排队', action: 'restore', type: 'primary' },
|
|||
|
|
// { text: '取消', action: 'cancel', type: 'secondary' }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
const key = this.normalizeStatus(status)
|
|||
|
|
return actionMap[key] || [];
|
|||
|
|
},
|
|||
|
|
// 点击操作
|
|||
|
|
handleAction(action,item) {
|
|||
|
|
console.log(action,item);
|
|||
|
|
let that = this
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: `您确定要执行${action.text}操作吗？`,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
if(action.text == '叫号' || action.text == '恢复叫号'){
|
|||
|
|
let data = {
|
|||
|
|
queueUserId:item.id
|
|||
|
|
}
|
|||
|
|
that.$u.post(`/bst/queueUser/calling`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({ title:'叫号成功', icon:'success',duration:3000})
|
|||
|
|
that.getlist()
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({ title:res.msg, icon:'none',duration:3000})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else if(action.text == '过号'){
|
|||
|
|
let data = [item.id]
|
|||
|
|
that.$u.post(`/bst/queueUser/pass`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({ title:'过号成功', icon:'success',duration:3000})
|
|||
|
|
that.getlist()
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({ title:res.msg, icon:'none',duration:3000})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else if(action.text == '取消'){
|
|||
|
|
let data = [item.id]
|
|||
|
|
that.$u.post(`/bst/queueUser/cancelQueue`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({ title:'取消成功', icon:'success',duration:3000})
|
|||
|
|
that.getlist()
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({ title:res.msg, icon:'none',duration:3000})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else if(action.text == '核销'){
|
|||
|
|
that.$u.post(`/app/queueUser/generateCode/${item.id}`).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
let data = {
|
|||
|
|
id:item.id,
|
|||
|
|
verificationCode:res.data.verificationCode
|
|||
|
|
}
|
|||
|
|
that.$u.post(`/bst/queueUser/verification`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({ title:'核销成功', icon:'success',duration:3000})
|
|||
|
|
that.getlist()
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({ title:res.msg, icon:'none',duration:3000})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({ title:res.msg, icon:'success',duration:3000})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
searchKeyword(){
|
|||
|
|
this.queueList = this.getFilteredList(this.allList)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #0c0c0c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #0c0c0c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-section {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-icon {
|
|||
|
|
image{
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
position: relative;
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
width: 300rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
border: 1px solid #333;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 0 70rpx 0 35rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 64rpx;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
image{
|
|||
|
|
width: 26rpx;
|
|||
|
|
height: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refresh-btn{
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
background: #FF8998;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #FF8998;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.statistics {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
|
|||
|
|
.stat-text {
|
|||
|
|
color: #808080;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
border-bottom: 1px solid #333;
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 25rpx 0;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
.tab-text {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -1px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
background: #FF8998;
|
|||
|
|
border-radius: 3rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.queue-list {
|
|||
|
|
.queue-item {
|
|||
|
|
background: #1a1a1a;
|
|||
|
|
border: 1px solid #333;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.item-main {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.item-left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.item-id {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 64rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-time {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
.user-name {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge {
|
|||
|
|
padding: 6rpx 16rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
|
|||
|
|
&.status-inQueue {
|
|||
|
|
background: #8883F0;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-calling {
|
|||
|
|
background: #FF8998;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-missed {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-verified {
|
|||
|
|
background: #FF8998;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.status-cancelled {
|
|||
|
|
background: #666;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.separator-line {
|
|||
|
|
height: 1px;
|
|||
|
|
background: #333;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 15rpx;
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
border: none;
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
&.primary {
|
|||
|
|
background: #FF8998;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.secondary {
|
|||
|
|
background: transparent;
|
|||
|
|
color: #FF8998;
|
|||
|
|
border: 1px solid #FF8998;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.details-btn {
|
|||
|
|
padding: 12rpx 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #000;
|
|||
|
|
border: 1px solid #FF8998;
|
|||
|
|
min-width: 100rpx;
|
|||
|
|
cursor: pointer;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|