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