157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
|
<div class="disease-detail">
|
|
<div class="content">
|
|
<div class="content-title">
|
|
<div class="name">服务项目</div>
|
|
</div>
|
|
<div class="content-middle">
|
|
<div class="item" v-for="item in detailObj.serviceDetail">
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="item.name"
|
|
placement="bottom-start"
|
|
>
|
|
<div class="name">{{ item.name }}</div>
|
|
</el-tooltip>
|
|
<div class="price">
|
|
<div class="price-left">{{ item.number || 0 }}{{ item.unit }}</div>
|
|
<div class="price-right">￥{{ item.unitPrice }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-title">
|
|
<div class="name">药品耗材</div>
|
|
</div>
|
|
<div class="content-middle">
|
|
<div class="item" v-for="item in detailObj.goodsDetail">
|
|
<el-tooltip
|
|
class="box-item"
|
|
effect="dark"
|
|
:content="item.name"
|
|
placement="bottom-start"
|
|
>
|
|
<div class="name">{{ item.name }}</div>
|
|
</el-tooltip>
|
|
<div class="price">
|
|
<div class="price-left">{{ item.number || 0 }}{{ item.unit }}</div>
|
|
<div class="price-right">￥{{ item.unitPrice }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-middle">
|
|
<div class="item" style="margin-top: 8px">
|
|
<div class="name">合计</div>
|
|
<div class="price">
|
|
<div class="price-right sumPrice">￥{{ sumPrice }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref, defineProps, onMounted} from 'vue'
|
|
|
|
const {detail} = defineProps(['detail']);
|
|
const detailObj = ref<any>(detail)
|
|
const sumPrice = ref(0)
|
|
onMounted(() => {
|
|
const pharmaceuticalTotalAmount = detailObj.value.serviceDetail?.reduce((pre: any, cur: any) => {
|
|
return pre + cur.number * cur.unitPrice
|
|
}, 0);
|
|
|
|
const serviceTotalAmount = detailObj.value.goodsDetail?.reduce((pre: any, cur: any) => {
|
|
return pre + cur.number * cur.unitPrice
|
|
}, 0);
|
|
sumPrice.value = pharmaceuticalTotalAmount + serviceTotalAmount;
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.disease-detail {
|
|
background: #F9FAFC;
|
|
padding: 0 21px 0 27px;
|
|
|
|
.top {
|
|
height: 60px;
|
|
border-bottom: 1px solid #EAEAEC;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
span {
|
|
background: #F9FAFC;
|
|
border-radius: 8px;
|
|
border: 1px solid #D8D8D8;
|
|
padding: 6px 24px;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
border-bottom: 1px solid #EAEAEC;
|
|
|
|
.content-title {
|
|
height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn {
|
|
color: #4D6DE4; // 白色文字
|
|
border: none; // 去掉边框
|
|
font-size: 16px; // 字体大小
|
|
cursor: pointer; // 鼠标悬停时显示手型
|
|
background: #f9fafc;
|
|
}
|
|
}
|
|
|
|
.content-middle {
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
|
|
p {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
.name{
|
|
white-space: nowrap; /* 防止文本换行 */
|
|
overflow: hidden; /* 隐藏溢出的文本 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
width: 100px;
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
|
|
.price-left {
|
|
margin-right: 38px;
|
|
}
|
|
.sumPrice{
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #FF0000;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |