feat(团队账单页): 调整样式
This commit is contained in:
hzj
parent
6025ea83fb
commit
37ab987fcc
@ -4,115 +4,160 @@
|
||||
|
||||
<div class="content">
|
||||
<!-- 成员资料信息 -->
|
||||
|
||||
<!-- 工作报告标题 -->
|
||||
<div class="work-report-title">
|
||||
<span>Work report:</span>
|
||||
<button class="help-btn" @click="showHelpInfo">?</button>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<!-- 账单列表 -->
|
||||
<div v-else-if="billList.length > 0" class="bill-list">
|
||||
<div
|
||||
style="
|
||||
margin: 0 1%;
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div style="display: flex; flex-direction: column; gap: 10px">
|
||||
<div>History Team Income:</div>
|
||||
<div style="font-weight: 600">$000</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="bill in billList"
|
||||
:key="bill.id"
|
||||
class="bill-item"
|
||||
@click="showBillDetail(bill)"
|
||||
style="
|
||||
padding: 5px;
|
||||
height: 10%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
border: 1px solid black;
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
@click="showHelpInfo"
|
||||
>
|
||||
<div class="bill-header">
|
||||
<span class="bill-period">{{ bill.billTitle }}</span>
|
||||
<span :class="['bill-status', getStatusClass(bill.status)]">
|
||||
{{ getStatusText(bill.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="bill-details">
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Create Time:</span>
|
||||
<span class="bill-value">{{ bill.createTimeFormatted }}</span>
|
||||
</div>
|
||||
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Period:</span>
|
||||
<span class="bill-value">{{ bill.billBelong }}</span>
|
||||
</div>
|
||||
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Last Update:</span>
|
||||
<span class="bill-value">{{ bill.updateTimeFormatted }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-btn">
|
||||
<span>More</span>
|
||||
<span class="arrow">></span>
|
||||
</div>
|
||||
?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>No data available</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工作报告 -->
|
||||
<div style="margin-bottom: 20px">
|
||||
<!-- 工作报告标题 -->
|
||||
<div style="margin: 10px 1%; font-weight: 600; color: rgba(0, 0, 0, 0.4)">Work report:</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 v-if="loading" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<div class="help-modal-body">
|
||||
<div class="help-section">
|
||||
<p class="help-description">
|
||||
Below is the work report of the team members. Click "More" to view detailed daily work records.
|
||||
</p>
|
||||
</div>
|
||||
<!-- 账单列表 -->
|
||||
<div v-else-if="billList.length > 0" class="bill-list">
|
||||
<div
|
||||
v-for="bill in billList"
|
||||
:key="bill.id"
|
||||
class="bill-item"
|
||||
@click="showBillDetail(bill)"
|
||||
>
|
||||
<div class="bill-header">
|
||||
<span class="bill-period">{{ bill.billTitle }}</span>
|
||||
<span :class="['bill-status', getStatusClass(bill.status)]">
|
||||
{{ getStatusText(bill.status) }}
|
||||
</span>
|
||||
</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">UNPAID:</span>
|
||||
<span class="status-desc">Work is currently in progress.</span>
|
||||
<div class="bill-details">
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Create Time:</span>
|
||||
<span class="bill-value">{{ bill.createTimeFormatted }}</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-number">(2)</span>
|
||||
<span class="status-name">HANG_UP:</span>
|
||||
<span class="status-desc">Work has been suspended or is pending review.</span>
|
||||
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Period:</span>
|
||||
<span class="bill-value">{{ bill.billBelong }}</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-number">(3)</span>
|
||||
<span class="status-name">PAY_OUT:</span>
|
||||
<span class="status-desc">Work has been completed and paid out.</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-number">(4)</span>
|
||||
<span class="status-name">PAID:</span>
|
||||
<span class="status-desc">Work has been completed and settled.</span>
|
||||
|
||||
<div class="bill-row">
|
||||
<span class="bill-label">Last Update:</span>
|
||||
<span class="bill-value">{{ bill.updateTimeFormatted }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="more-btn">
|
||||
<span>More</span>
|
||||
<span class="arrow">></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<div v-else class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<p>No data available</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账单详情模态框 (使用 TeamBillMore 组件) -->
|
||||
<div v-if="showDetailModal" class="modal-overlay">
|
||||
<div class="detail-modal-wrapper">
|
||||
<!-- 遮罩层 -->
|
||||
<div v-if="showHelpModal || showDetailModal" class="modal-overlay" @click="closeModal">
|
||||
<!-- 帮助模态框 -->
|
||||
<div
|
||||
v-if="showHelpModal"
|
||||
style="
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">Help</div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: black;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
@click="closeModal"
|
||||
>
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="padding: 0 20px 20px; overflow-y: auto">
|
||||
<p>Shown below is the work report of the members "More" can view more work detailed.</p>
|
||||
<p>Status Description:</p>
|
||||
<p>(1)Completed: The system has completed the settlement report.</p>
|
||||
<p>
|
||||
(2)Pending: There is currently a dispute, and the system cannot perform a settlement.
|
||||
</p>
|
||||
<p>(3)Out of account: waiting for system verification.</p>
|
||||
<p>(4)In progress: work now in progress.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账单详情模态框 (使用 TeamBillMore 组件) -->
|
||||
<div v-if="showDetailModal" style="position: fixed; bottom: 0; width: 100%">
|
||||
<TeamBillMore
|
||||
:billData="selectedBill"
|
||||
@close="closeDetailModal"
|
||||
@close="closeModal"
|
||||
@propsReceived="handlePropsReceived"
|
||||
/>
|
||||
</div>
|
||||
@ -125,7 +170,7 @@ import { ref, onMounted } from 'vue'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import TeamBillMore from '../components/team/TeamBillMore.vue'
|
||||
import { getTeamBill, getTeamBillWorkMembers, formatBillStatus } from '../api/teamBill.js'
|
||||
import { getTeamId } from "@/utils/userStore.js"
|
||||
import { getTeamId } from '@/utils/userStore.js'
|
||||
|
||||
const loading = ref(false)
|
||||
const showHelpModal = ref(false)
|
||||
@ -143,11 +188,11 @@ const fetchTeamBill = async (teamId) => {
|
||||
const response = await getTeamBill(teamId)
|
||||
|
||||
if (response.status && response.body) {
|
||||
billList.value = response.body.map(bill => ({
|
||||
billList.value = response.body.map((bill) => ({
|
||||
...bill,
|
||||
// 将时间戳转换为可读格式
|
||||
createTimeFormatted: new Date(bill.createTime).toLocaleDateString(),
|
||||
updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString()
|
||||
updateTimeFormatted: new Date(bill.updateTime).toLocaleDateString(),
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
@ -183,11 +228,6 @@ const getStatusClass = (status) => {
|
||||
return statusInfo.class
|
||||
}
|
||||
|
||||
// 移除不再使用的函数
|
||||
// const formatDate = (dateNumber) => {
|
||||
// return formatDateDisplay(dateNumber)
|
||||
// }
|
||||
|
||||
// 显示账单详情
|
||||
const showBillDetail = async (bill) => {
|
||||
// 获取该账单的成员工作信息
|
||||
@ -195,14 +235,15 @@ const showBillDetail = async (bill) => {
|
||||
selectedBillMembers.value = membersData
|
||||
selectedBill.value = {
|
||||
...bill,
|
||||
members: membersData
|
||||
members: membersData,
|
||||
}
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
// 关闭详情模态框
|
||||
const closeDetailModal = () => {
|
||||
// 关闭遮罩层
|
||||
const closeModal = () => {
|
||||
showDetailModal.value = false
|
||||
showHelpModal.value = false
|
||||
selectedBill.value = null
|
||||
}
|
||||
|
||||
@ -211,11 +252,6 @@ const showHelpInfo = () => {
|
||||
showHelpModal.value = true
|
||||
}
|
||||
|
||||
// 关闭帮助模态框
|
||||
const closeHelpModal = () => {
|
||||
showHelpModal.value = false
|
||||
}
|
||||
|
||||
// 处理道具领取成功
|
||||
const handlePropsReceived = () => {
|
||||
// 可以在这里添加提示或者刷新数据
|
||||
@ -235,6 +271,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-family: 'SF Pro Text';
|
||||
}
|
||||
|
||||
.team-bill {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
min-height: 100vh;
|
||||
@ -253,7 +294,7 @@ onMounted(() => {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
@ -304,7 +345,7 @@ onMounted(() => {
|
||||
|
||||
.member-status {
|
||||
font-size: 12px;
|
||||
color: #10B981;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* 工作报告标题 */
|
||||
@ -330,7 +371,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
background-color: #8B5CF6;
|
||||
background-color: #8b5cf6;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
@ -346,15 +387,19 @@ onMounted(() => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #8B5CF6;
|
||||
border-top: 3px solid #8b5cf6;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 账单列表 */
|
||||
@ -368,7 +413,7 @@ onMounted(() => {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@ -398,17 +443,17 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.bill-status.in-progress {
|
||||
background-color: #DBEAFE;
|
||||
color: #1D4ED8;
|
||||
background-color: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.bill-status.pending {
|
||||
background-color: #FEF3C7;
|
||||
color: #D97706;
|
||||
background-color: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.bill-status.completed {
|
||||
background-color: #D1FAE5;
|
||||
background-color: #d1fae5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
@ -448,7 +493,7 @@ onMounted(() => {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #C084FC;
|
||||
color: #c084fc;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -474,16 +519,12 @@ onMounted(() => {
|
||||
/* 模态框公共样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.help-modal-content,
|
||||
@ -597,7 +638,7 @@ onMounted(() => {
|
||||
|
||||
.status-number {
|
||||
font-weight: 600;
|
||||
color: #8B5CF6;
|
||||
color: #8b5cf6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -636,4 +677,22 @@ onMounted(() => {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user