hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

history salary 修复

Browse Source
This commit is contained in:
tianfeng 2025-08-22 20:42:14 +08:00
parent 06c37aac58
commit a2dbfce42e
1 changed files with 208 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
src/views/HistorySalaryView.vue
View File

@ -7,9 +7,9 @@
<div class="host-salary-card">
<div class="salary-header">
<h3>Host Salary</h3>
<!-- <button class="info-btn" @click="showSalaryInfo">
<button class="info-btn" @click="showHelpInfo">
<span>?</span>
</button>-->
</button>
</div>
<div class="salary-amount">${{ totalSalary }}</div>
</div>
@ -55,17 +55,6 @@
<span class="detail-label">Time(Days):</span>
<span class="detail-value">{{ report.timeDays }}</span>
</div>
<div class="detail-item">
<span class="detail-label">Agent Salary:</span>
<span class="detail-value">{{ report.agentSalary }}</span>
</div>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">Total Salary:</span>
<span class="detail-value total-salary">{{ report.totalSalary }}</span>
</div>
<div class="detail-item">
<!-- More 按钮 -->
<button v-if="report.hasDetails" class="more-btn" @click="showReportDetail(report)">
@ -93,10 +82,10 @@
<h3>{{ selectedReport?.date || 'Work Details' }}</h3>
<button class="close-btn" @click="closeDetailModal">×</button>
</div>
<div class="detail-content">
<!-- 等级卡片 -->
<div v-if="levelData" class="level-card">
<!-- <div v-if="levelData" class="level-card">
<div class="level-header">
<h4>{{ levelData.level }}</h4>
</div>
@ -125,28 +114,71 @@
<span class="stat-value">${{ levelData.totalSalary }}</span>
</div>
<div class="stat-item">
<!-- 空占位 -->
&lt;!&ndash; 空占位 &ndash;&gt;
</div>
</div>
</div>
</div>-->
<!-- 每日薪资列表 -->
<div v-if="dailyTargets.length > 0" class="daily-salary">
<h4>Daily salary:</h4>
<div class="daily-list">
<div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
<div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
<div class="daily-info">
<div class="daily-target">
<span>Target: {{ formatGiftValue(daily.acceptGiftValue) }}</span>
</div>
<div class="daily-time">
<span>Time: </span>
<span class="time-value">{{ formatOnlineTime(daily.onlineTime) }}/120</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 帮助模态框 -->
<div v-if="showHelpModal" class="modal-overlay" @click="closeHelpModal">
<div class="help-modal-content" @click.stop>
<div class="help-modal-header">
<h3>Work Report Help</h3>
<button class="close-btn" @click="closeHelpModal">×</button>
</div>
<div class="help-modal-body">
<div class="help-section">
<p class="help-description">
Shown below is the work report of the members "More" can view more work detailed.
</p>
</div>
<!-- 每日目标列表 -->
<div v-if="dailyTargets.length > 0" class="daily-targets">
<h4>Daily Targets</h4>
<div class="daily-list">
<div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
<div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
<div class="daily-stats">
<div class="daily-stat">
<span class="daily-label">Online Time:</span>
<span class="daily-value">{{ formatOnlineTime(daily.onlineTime) }}</span>
</div>
<div class="daily-stat">
<span class="daily-label">Gift Value:</span>
<span class="daily-value">${{ formatGiftValue(daily.acceptGiftValue) }}</span>
</div>
</div>
<div class="help-section">
<h4>Status Description:</h4>
<div class="status-list">
<div class="status-item">
<span class="status-number">(1)</span>
<span class="status-name">Completed:</span>
<span class="status-desc">The system has completed the settlement report.</span>
</div>
<div class="status-item">
<span class="status-number">(2)</span>
<span class="status-name">Pending:</span>
<span class="status-desc">There is currently a dispute, and the system cannot perform a settlement.</span>
</div>
<div class="status-item">
<span class="status-number">(3)</span>
<span class="status-name">Out of account:</span>
<span class="status-desc">waiting for system verification.</span>
</div>
<div class="status-item">
<span class="status-number">(4)</span>
<span class="status-name">In progress:</span>
<span class="status-desc">work now in progress.</span>
</div>
</div>
</div>
@ -191,6 +223,7 @@ import { getTeamMemberWork } from '../api/teamBill.js'
const router = useRouter()
const totalSalary = ref('12345')
const showSalaryModal = ref(false)
const showHelpModal = ref(false)
const loading = ref(false)
const showDetailModal = ref(false)
const selectedReport = ref(null)
@ -211,7 +244,7 @@ const fetchWorkReports = async (userId) => {
// 将 targets 数据转换为 workReports 格式
const targets = response.body.targets || []
originalTargetsData.value = targets // 保存原始数据
workReports.value = targets.map(target => ({
id: target.id,
date: target.billTitle,
@ -271,15 +304,15 @@ const getStatusText = (status) => {
// 格式化礼物数值
const formatGiftValue = (value) => {
if (!value || value === '0') return '0'
// 如果已经是格式化的字符串，直接返回
if (typeof value === 'string' && (value.includes('K') || value.includes('M'))) {
return value
}
const numValue = parseFloat(value)
if (isNaN(numValue)) return '0'
if (numValue >= 1000000) {
return `${(numValue / 1000000).toFixed(1)}M`
} else if (numValue >= 1000) {
@ -291,24 +324,14 @@ const formatGiftValue = (value) => {
// 显示报告详情
const showReportDetail = (report) => {
selectedReport.value = report
if (report.originalData && report.originalData.target) {
const targetData = report.originalData.target
// 生成等级数据（模拟 Lv.1, Lv.2 等）
levelData.value = {
level: `Lv.${getLevelFromGiftValue(targetData.acceptGiftValue)}`,
timeHours: formatMinutesToHours(targetData.onlineTime),
target: formatGiftValue(targetData.acceptGiftValue),
hostSalary: formatSalaryValue(targetData.settlementResult?.ownSalary),
agentSalary: formatSalaryValue(targetData.settlementResult?.memberSalary),
totalSalary: formatSalaryValue(targetData.settlementResult?.totalSalary)
}
// 设置每日目标数据
// 直接设置每日目标数据
dailyTargets.value = targetData.dailyTargets || []
}
showDetailModal.value = true
}
@ -316,7 +339,6 @@ const showReportDetail = (report) => {
const closeDetailModal = () => {
showDetailModal.value = false
selectedReport.value = null
levelData.value = null
dailyTargets.value = []
}
@ -335,16 +357,10 @@ const formatMinutesToHours = (minutes) => {
return Math.round(mins / 60)
}
// 格式化在线时间
// 格式化在线时间（为 Daily Salary 显示分钟数）
const formatOnlineTime = (minutes) => {
const mins = parseInt(minutes) || 0
const hours = Math.floor(mins / 60)
const remainingMins = mins % 60
if (hours > 0) {
return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`
}
return `${mins}m`
return mins.toString()
}
// 格式化日期数字
@ -352,13 +368,23 @@ const formatDateNumber = (dateNumber) => {
if (!dateNumber) return ''
const dateStr = dateNumber.toString()
if (dateStr.length !== 8) return dateStr
const year = dateStr.substring(0, 4)
const month = dateStr.substring(4, 6)
const day = dateStr.substring(6, 8)
return `${month}/${day}/${year}`
}
// 显示帮助信息
const showHelpInfo = () => {
showHelpModal.value = true
}
// 关闭帮助模态框
const closeHelpModal = () => {
showHelpModal.value = false
}
// 显示薪资信息
const showSalaryInfo = () => {
showSalaryModal.value = true
@ -407,17 +433,24 @@ onMounted(() => {
}
.info-btn {
width: 24px;
height: 24px;
border-radius: 12px;
border: 1px solid #ddd;
background-color: white;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #8B5CF6;
background-color: #8B5CF6;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
font-size: 12px;
color: white;
cursor: pointer;
font-weight: 600;
transition: all 0.2s;
}
.info-btn:hover {
background-color: #7C3AED;
border-color: #7C3AED;
}
.salary-amount {
@ -686,12 +719,12 @@ onMounted(() => {
color: #333;
}
/* 每日目标样式 */
.daily-targets {
/* 每日薪资样式 */
.daily-salary {
margin-top: 20px;
}
.daily-targets h4 {
.daily-salary h4 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
@ -705,40 +738,131 @@ onMounted(() => {
}
.daily-item {
background-color: #f9fafb;
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 12px;
padding: 16px;
}
.daily-date {
font-size: 14px;
font-weight: 600;
color: #333;
font-size: 12px;
color: #666;
margin-bottom: 8px;
}
.daily-stats {
.daily-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.daily-target {
font-size: 14px;
color: #333;
font-weight: 500;
}
.daily-time {
font-size: 14px;
color: #333;
}
.time-value {
color: #10B981;
font-weight: 600;
}
/* 帮助模态框样式 */
.help-modal-content {
background-color: white;
border-radius: 12px;
width: 90%;
max-width: 400px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.help-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #e5e7eb;
background-color: #f8f9fa;
}
.help-modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.help-modal-body {
padding: 20px;
overflow-y: auto;
}
.help-section {
margin-bottom: 20px;
}
.help-section:last-child {
margin-bottom: 0;
}
.help-description {
font-size: 14px;
line-height: 1.5;
color: #555;
margin: 0;
padding: 12px;
background-color: #f0f9ff;
border-radius: 8px;
border-left: 4px solid #3b82f6;
}
.help-section h4 {
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 600;
color: #333;
}
.status-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.daily-stat {
.status-item {
display: flex;
flex-direction: column;
gap: 2px;
gap: 8px;
padding: 12px;
background-color: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.daily-label {
font-size: 12px;
color: #666;
.status-number {
font-weight: 600;
color: #8B5CF6;
flex-shrink: 0;
}
.daily-value {
font-size: 14px;
.status-name {
font-weight: 600;
color: #333;
flex-shrink: 0;
min-width: 100px;
}
.status-desc {
color: #666;
line-height: 1.4;
flex: 1;
}
/* 弹窗样式 */