113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
/**
|
|
* 顶栏公账逾期胶囊：大条幅收起后出现在「传方」旁，点击可展开或去处理
|
|
*/
|
|
import { computed } from 'vue';
|
|
|
|
import {
|
|
expandPublicAccountBanner,
|
|
getPublicAccountLockState,
|
|
normalizeLockAlertColor,
|
|
openPublicAccountLockHandle,
|
|
} from '#/utils/publicAccountLock';
|
|
|
|
const lockState = getPublicAccountLockState();
|
|
|
|
const visible = computed(
|
|
() => lockState.bannerVisible && lockState.bannerDocked,
|
|
);
|
|
const alertColor = computed(() =>
|
|
normalizeLockAlertColor(lockState.payload.alert_color),
|
|
);
|
|
const amountTxt = computed(
|
|
() =>
|
|
lockState.payload.platform_amount_total ||
|
|
lockState.payload.platform_amount ||
|
|
'0.00',
|
|
);
|
|
const tipTxt = computed(() => `公账待结 ¥${amountTxt.value}`);
|
|
|
|
function onChipClick() {
|
|
openPublicAccountLockHandle();
|
|
}
|
|
|
|
function onExpand(e: Event) {
|
|
e.stopPropagation();
|
|
expandPublicAccountBanner();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-if="visible"
|
|
type="button"
|
|
class="pap-dock-chip"
|
|
:class="'is-' + alertColor"
|
|
:title="tipTxt"
|
|
@click="onChipClick"
|
|
>
|
|
<span class="pap-dock-dot" />
|
|
<span class="pap-dock-text">公账待结</span>
|
|
<strong class="pap-dock-amt">¥{{ amountTxt }}</strong>
|
|
<span class="pap-dock-expand" title="展开提醒" @click="onExpand">展开</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pap-dock-chip {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
max-width: 220px;
|
|
height: 28px;
|
|
padding: 0 8px 0 10px;
|
|
margin-right: 4px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
--pap-dock-accent: var(--warning);
|
|
color: hsl(var(--foreground));
|
|
background: hsl(var(--pap-dock-accent) / 10%);
|
|
border: 1px solid hsl(var(--pap-dock-accent) / 32%);
|
|
border-radius: 999px;
|
|
box-shadow: 0 0 6px hsl(var(--pap-dock-accent) / 14%);
|
|
}
|
|
.pap-dock-chip.is-blue {
|
|
--pap-dock-accent: 217 91% 53%;
|
|
}
|
|
.pap-dock-chip.is-yellow {
|
|
--pap-dock-accent: var(--warning);
|
|
}
|
|
.pap-dock-chip.is-red {
|
|
--pap-dock-accent: 0 72% 51%;
|
|
}
|
|
.pap-dock-chip:hover {
|
|
background: hsl(var(--pap-dock-accent) / 16%);
|
|
}
|
|
.pap-dock-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: hsl(var(--pap-dock-accent));
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 3px hsl(var(--pap-dock-accent) / 22%);
|
|
}
|
|
.pap-dock-text {
|
|
color: hsl(var(--pap-dock-accent));
|
|
font-weight: 600;
|
|
}
|
|
.pap-dock-amt {
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
.pap-dock-expand {
|
|
padding: 2px 6px;
|
|
margin-left: 2px;
|
|
color: hsl(var(--muted-foreground));
|
|
background: hsl(var(--background) / 60%);
|
|
border-radius: 999px;
|
|
}
|
|
.pap-dock-expand:hover {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
</style>
|