效果演示：
写在前面：首先来看一下医保的规范：
还有其他的就不赘述了，介绍一下本次项目使用了vue2+vant2开发，使用
[postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)进行移动端适配，css方面使用scss，采用flex布局，以下只展示静态页面的源码部分
<template>
<div class="content">
<!-- 顶部蓝色区域 -->
<div class="top">
<div class="bar">
<div class="bar_item">
<span class="arrow" @click="onClickLeft">
<van-icon name="arrow-left" />
</span>
<span class="sure">确认支付</span>
</div>
</div>
<div class="his_msg">
<div class="his_text">
<span class="pay_for">付款给</span>
<span class="hospital_name">*************医院</span>
</div>
<div class="his_logo"><img src="../../static/image/medicalPay/2x//医院图标@2x.png" alt="医院logo"></div>
</div>
</div>
<!-- 中间费用大框 -->
<div class="middle">
<div class="total_pay">
<div class="total">
<span class="total_title">费用总额</span>
<span class="total_price">368.50元</span>
</div>
</div>
<div class="detail_pay">
<div class="detail_main">
<div class="medical_pay">
<span class="medical_title">
医保基金支付
</span>
<span class="price">0.00元</span>
</div>
<div class="medical_pay">
<span class="medical_title">
个人账户支付
</span>
<span class="price">0.00元</span>
</div>
<div class="medical_pay">
<span class="medical_title">
其他抵扣金额
</span>
<span class="price">0.00元</span>
</div>
</div>
<div class="cash_pay">
<div class="cash">
<sapn class="cash_title">现金支付</sapn>
<span class="cash_price">68.50元</span>
</div>
</div>
</div>
<div class="watch_detail">
<span class="watch_taitle" @click="showPopup">查看明细</span>
</div>
</div>
<!-- 个人账户支付 -->
<div class="person_pay">
<span class="person_title">个人账户支付</span>
<div class="pay_button">
<div class="button_isuse" :class="{ use_active: isUse }" @click="usePerson">使用</div>
<div class="button_isuse" :class="{ use_active: !isUse }" @click="unusePerson">不使用</div>
</div>
</div>
<!-- 医保移动支付 -->
<div class="logo">
<div class="logo_content">
<div class="logo_img">
<img src="../../static/image/medicalPay/2x/医保混合支付@2x.png" alt="">
</div>
<div class="logo_title">医保移动支付</div>
</div>
</div>
<!-- 底部支付 -->
<div class="bottom">
<div class="bottom_content">
<div class="need_pay">
<span class="pay_title">您还需支付:</span>
<span class="pay_price">￥68.50</span>
</div>
<div class="pay_button">
<span>去支付</span>
</div>
</div>
</div>
<!-- 弹出层 -->
<div class="popup_content">
<van-popup v-model="show" position="bottom" round :style="{ height: '95%' }">
<div class="popup_main">
<!-- 顶部标题栏 -->
<div class="popup_title">
<span class="detail_title">
<span class="title">处方明细</span>
<span class="close" @click="closePopup"><img src="../../static/image/medicalPay/2x/关闭@2x.png"
alt="关闭"></span>
</span>
</div>
<!-- 中间卡片 -->
<!-- 就诊信息 -->
<div class="card_content">
<!-- 卡片标题 -->
<div class="card_title">
<span class="title_name">
<div class="color"></div>就诊信息
</span>
</div>
<div class="card_msg">
<div class="card_tab">
<span class="card_item">
<span class="msg_title">门诊类别</span>
<span class="msg_content">门(急)诊</span>
</span>
<span class="card_item">
<span class="msg_title">门诊科室</span>
<span class="msg_content">普通内科</span>
</span>
<span class="card_item">
<span class="msg_title">医生姓名</span>
<span class="msg_content">张三</span>
</span>
<span class="card_item">
<span class="msg_title">处方时间</span>
<span class="msg_content">2021/06/08 14:54:00</span>
</span>
<span class="card_item">
<span class="msg_title">费用总额</span>
<span class="msg_content" style="color: #3b71e8;">368.50元</span>
</span>
</div>
</div>
</div>
<!-- 诊断信息 -->
<div class="card_content">
<!-- 卡片标题 -->
<div class="card_title">
<span class="title_name">
<div class="color"></div>诊断信息
</span>
</div>
<div class="card_msg">
<div class="card_tab">
<span class="card_item">
<span class="msg_title">诊断名称</span>
<span class="msg_content">外伤肿胀</span>
</span>
<span class="card_item">
<span class="msg_title">诊断编号</span>
<span class="msg_content">E3D.25</span>
</span>
</div>
</div>
</div>
<!-- 特殊信息 -->
<div class="card_content">
<!-- 卡片标题 -->
<div class="card_title">
<span class="title_name">
<div class="color"></div>特殊信息
</span>
</div>
<div class="card_msg">
<div class="card_tab">
<span class="card_item">
<span class="msg_title">病情分析</span>
<span class="msg_content">高血压</span>
</span>
<span class="card_item">
<span class="msg_title">病情编号</span>
<span class="msg_content">222003495858</span>
</span>
</div>
</div>
</div>
<!-- 费用信息 -->
<div class="card_content">
<!-- 卡片标题 -->
<div class="card_title">
<span class="title_name">
<div class="color"></div>费用信息
</span>
</div>
<div class="card_msg">
<div class="card_tab">
<span class="card_item">
<span class="msg_title"><div class="cicle"></div>
万通胫骨贴*1
<br/><span class="medicine">8g/片/3</span>
</span>
<span class="msg_content">37.80元</span>
</span>
<span class="card_item">
<span class="msg_title"><div class="cicle"></div>
阿莫西林*1
<br/><span class="medicine">8g/片/3</span>
</span>
<span class="msg_content">17.80元</span>
</span>
</div>
</div>
</div>
<!-- 其他抵扣金额 -->
<div class="card_content">
<!-- 卡片标题 -->
<div class="card_title">
<span class="title_name">
<div class="color"></div>其他抵扣金额
</span>
</div>
<div class="card_msg">
<div class="card_tab">
<span class="card_item">
<span class="msg_title">住院押金抵扣</span>
<span class="msg_content">50.00元</span>
</span>
<span class="card_item">
<span class="msg_title">医院负担金额抵扣</span>
<span class="msg_content">50.00元</span>
</span>
</div>
</div>
</div>
</div>
</van-popup>
</div>
</div>
</template>
css部分
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
.top {
display: flex;
flex-direction: column;
width: 375px;
height: 200px;
background-color: rgb(59, 113, 232);
border-bottom-left-radius: 32px;
border-bottom-right-radius: 32px;
.bar {
display: flex;
flex-direction: column;
justify-content: center;
// align-items: center;
width: 375px;
height: 50px;
color: #fff;
.bar_item {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
font-size: 16px;
.arrow {
position: absolute;
left: 10px;
top: 4px;
// margin-right: 50px;
}
}
}
.his_msg {
width: 315px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 25px auto;
.his_text {
display: flex;
flex-direction: column;
font-size: 14px;
color: #fff;
.pay_for {
color: #a6c1ff;
}
.hospital_name {
font-size: 16px;
}
}
.his_logo {
img {
width: 40px;
height: 40px;
}
}
}
}
.middle {
display: flex;
flex-direction: column;
width: 335px;
margin: -70px auto;
background-color: #fff;
border: 1PX solid #e6e6e6;
box-shadow: 0 0 8px 8px rgba($color: #000000, $alpha: 0.05);
border-radius: 8px;
.total_pay {
display: flex;
flex-direction: column;
margin: 20px;
margin-bottom: 0;
// background-color: #a6c1ff;
border-bottom: 2px dashed #eff0f4;
.total {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
font-size: 18px;
color: #606266;
}
}
.detail_pay {
display: flex;
flex-direction: column;
margin: 20px;
margin-bottom: 0;
// background-color: #a6c1ff;
border-bottom: 2px dashed #eff0f4;
.detail_main {
display: flex;
flex-direction: column;
// justify-content: space-between
// align-items:;
.medical_pay {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
color: #909399;
font-size: 14px;
}
}
.cash_pay {
margin-top: 11px;
margin-bottom: 25px;
color: #3b71e8;
font-size: 16px;
.cash {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
}
.watch_detail {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #606266;
font-size: 14px;
line-height: 54px;
}
}
.person_pay {
display: flex;
flex-direction: column;
// background-color: #3b71e8;
margin: 20px;
margin-top: 99px;
.person_title {
color: #666666;
font-size: 14px;
margin-bottom: 15px;
}
.pay_button {
display: flex;
flex-direction: row;
justify-content: space-between;
.button_isuse {
display: block;
width: 160px;
height: 36px;
background-color: #f8f9fa;
border: 2px solid #cccccc;
border-radius: 4px;
font-size: 13px;
color: #606266;
line-height: 36px;
text-align: center;
}
}
}
.use_active {
color: #3b71e8 !important;
border: 2px solid #3b71e8 !important;
background-color: #f6f9ff !important;
}
.logo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 375px;
margin: 20px auto;
margin-top: 60px;
margin-bottom: 0px;
align-items: center;
border-bottom: 2px solid #f5f5f5;
.logo_content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 20px;
.logo_img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 40px;
height: 12px;
margin-right: 6px;
// margin-bottom: 20px;
}
}
.logo_title {
color: #666666;
font-size: 14px;
// margin-bottom: 20px;
}
}
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 20px;
// margin-bottom: 0;
font-size: 14px;
color: #666666;
.bottom_content {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
.need_pay {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.pay_price {
color: #3b71e8;
font-size: 22px;
}
}
.pay_button {
width: 120px;
height: 50px;
background-color: #3b71e8;
border-radius: 25px;
color: #fff;
text-align: center;
line-height: 50px;
}
}
}
.popup_main {
.popup_title {
.detail_title {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 24px;
margin-bottom: 25px;
margin-left: 20px;
margin-right: 14px;
align-items: center;
color: #303133;
font-size: 20px;
.close {
img {
width: 40px;
height: 40px;
}
}
}
}
.card_content {
margin-bottom: 10px;
.card_title {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 355px;
height: 65px;
margin: 0 auto 0 auto;
border: 2px solid #e6e6e6;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
.title_name {
position: relative;
margin-left: 20px;
color: #303133;
line-height: 65px;
font-size: 17px;
.color {
position: absolute;
// display: inline-block;
right: 94%;
top: 37%;
width: 4px;
height: 16px;
margin-left: -18px;
margin-right: 18px;
background-color: #3b71e8;
}
}
}
.card_msg {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 355px;
margin: 0 auto;
border: 2px solid #e6e6e6;
border-top: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
.card_tab {
margin: 20px;
display: flex;
flex-direction: column;
// align-items:;
.card_item {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 315px;
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
color: #606266;
font-size: 14px;
.cicle{
display: inline-block;
width: 6px;
height: 6px;
margin-right: 4px;
border-radius: 50%;
border: 1px solid #606266;
}
.medicine{
margin-left: 14px;
color: #909399;
}
}
}
}
}
}
}
</style>
