clinic-v2
/
web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev

This commit is contained in:
ChenQiuYu 2025-05-20 15:10:11 +08:00
parent 18c4572dc8
commit e4f4d8fe59
2 changed files with 261 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/charge/PersonalPayment.vue
View File

@ -193,7 +193,7 @@ const btnsList = [
const detailRef = ref()
const openDetail = () => {
nextTick(() => {
detailRef.value?.init()
detailRef.value?.init(socialPayInfo.value.setlinfo)
})
}
</script>

279
src/components/charge/RecordsLog/PaymentDetail.vue
View File

@ -1,57 +1,296 @@
<script setup lang="ts">
import { ref } from "vue";
import {reactive, ref} from "vue";
import Mask from "@/components/common/Mask.vue";
const show = ref(false);
const init = () => {
const init = (orderInfo: any) => {
show.value = true;
leftList.value = [
{
name: '起付线',
value: orderInfo.act_pay_dedc
},
{
name: '统筹基金支付比例',
value: orderInfo.pool_prop_selfpay
},
{
name: '符合政策范围金额',
value: orderInfo.inscp_scp_amt
},
{
name: '超限价自费费用',
value: orderInfo.overlmt_selfpay
},
{
name: '全自费金额',
value: orderInfo.fulamt_ownpay_amt
}
,
{
name: '先行自付金额',
value: orderInfo.preselfpay_amt
}
]
centerList.value = [
{
name: '统筹基金支出',
value: orderInfo.hifp_pay
},
{
name: '公务员医疗补助支出',
value: orderInfo.cvlserv_pay
},
{
name: '企业补充医保支出',
value: orderInfo.hifes_pay
},
{
name: '居民大病保险支出',
value: orderInfo.hifmi_pay
},
{
name: '职工大额补助支出',
value: orderInfo.hifob_pay
},
{
name: '医疗救助金支出',
value: orderInfo.maf_pay
},
{
name: '补充医疗保险支出',
value: orderInfo.oth_pay
},
]
rightTopList.value = [
{
name: '个人账户支出',
value: orderInfo.acct_pay
},
{
name: '个人账户共济支出',
value: orderInfo.acct_mulaid_pay
},
]
rightBottomList.value = [
{
name: '医院负担金额',
value: orderInfo.hosp_part_amt
},
{
name: '个人现金支出',
value: orderInfo.psn_cash_pay
},
]
}
const leftList = ref<any>([
{
name: '起付线',
value:'￥0.00'
},
{
name: '统筹基金支付比例',
value: '￥0.00'
},
{
name: '符合政策范围金额',
value: '￥0.00'
},
{
name: '超限价自费费用',
value: '￥0.00'
},
{
name: '全自费金额',
value: '￥0.00'
},
{
name: '先行自付金额',
value: '￥0.00'
}
])
const centerList = ref<any>([
{
name: '统筹基金支出',
value: '￥0.00'
},
{
name: '公务员医疗补助支出',
value: '￥0.00'
},
{
name: '企业补充医保支出',
value: '￥0.00'
},
{
name: '居民大病保险支出',
value: '￥0.00'
},
{
name: '职工大额补助支出',
value: '￥0.00'
},
{
name: '医疗救助金支出',
value: '￥0.00'
},
{
name: '补充医疗保险支出',
value: '￥0.00'
},
])
const rightTopList = ref<any>([
{
name: '个人账户支出',
value: '￥0.00'
},
{
name: '个人账户共济支出',
value: '￥0.00'
},
])
const rightBottomList = ref<any>([
{
name: '医院负担金额',
value: '￥0.00'
},
{
name: '个人现金支出',
value: '￥0.00'
},
])
const formatValue = (value: number | string): string => {
const num = parseFloat(value as string);
return isNaN(num) ? '0.00' : num.toFixed(2);
};
defineExpose({init})
</script>
<template>
<Mask :is-show="show" :width=918 :height="413" @close="show=false" title="支付详情">
<Mask :is-show="show" :width=918 :height="364" @close="show=false" title="支付详情">
<div class="detail-content">
<div class="left">1</div>
<div class="center">2</div>
<div class="left">
<span class="item" v-for="item in leftList" :key="item.name">
<span>{{ item.name }}</span>
<span>{{ item.name != '统筹基金支付比例' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '统筹基金支付比例' ? '%' : ''}}</span>
</span>
</div>
<div class="center">
<span class="item" v-for="item in centerList" :key="item.name">
<span>{{ item.name }}</span>
<span>{{ item.name != '公务员医疗补助支出' ? '￥' : ''}}{{formatValue(item.value) }}{{ item.name == '公务员医疗补助支出' ? '%' : ''}}</span>
</span>
</div>
<div class="right">
<div class="top">3</div>
<div class="bottom">4</div>
<div class="top">
<span class="item" v-for="item in rightTopList" :key="item.name">
<span>{{ item.name }}</span>
<span>￥{{ formatValue(item.value) }}</span>
</span>
</div>
<div class="bottom">
<span class="item" v-for="item in rightBottomList" :key="item.name">
<span>{{ item.name }}</span>
<span>￥{{ formatValue(item.value) }}</span>
</span>
</div>
</div>
</div>
</Mask>
</template>
<style scoped lang="scss">
.detail-content{
.detail-content {
height: 100%;
padding: 24px;
display: flex;
div{
div {
flex: 1;
min-width: 0;
border-radius: 8px;
}
.left{
.left {
padding: 24px;
background: #F9FAFC;
}
.center{
margin: 0 24px;
background: #FEFCF8;
}
.right{
display: flex;
flex-direction: column;
dev{
justify-content: space-between;
.item {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
}
}
.center {
margin: 0 24px;
padding: 24px;
background: #FEFCF8;
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
}
}
.right {
display: flex;
flex-direction: column;
dev {
flex: 1;
min-height: 0;
}
.top{
.top {
background: #F7FEFA;
margin-bottom: 24px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
}
.bottom{
}
.bottom {
background: #FFEEEF;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
}
}
}
}