Skip to content

P
pica-insurance
提交 600aada1 编写于 作者: 张磊's avatar 张磊
浏览文件
操作

demo dev

上级 e3042590
隐藏空白字符变更
内嵌 并排
正在显示 包含 558 行增加 和 0 行删除
src/router/index.js
浏览文件 @ 600aada1
......@@ -37,6 +37,14 @@ const routerConfig = [
title: '快检详情',
},
},
{
path: '/insuranceDetectionDetailDemo',
name: 'insuranceQuickDetectionDetailDemo',
component: () => import('@/views/insurance-Detection-detail-demo/index'),
meta: {
title: '检测详情',
},
},
{
path: '/insuranceQuestionResult',
name: 'insuranceQuestionResult',
......
src/views/insurance-Detection-detail-demo/index.scss 0 → 100644
浏览文件 @ 600aada1
.insurance-quickDetection-detail {
background-color: #f5f6f8;
min-height: 100vh;
width: 100%;
position: relative;
.title {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 260px;
background: linear-gradient(180deg, #00bda5 0%, #20c5b0 52%, #f5f6f8 100%);
}
.detail-box {
padding: 0 12px;
height: auto;
padding-bottom: 10px;
position: relative;
z-index: 1;
.status {
padding: 16px 0;
display: flex;
align-items: center;
img {
width: 27px;
}
div {
padding-left: 9px;
width: 120px;
height: 20px;
font-size: 20px;
font-weight: 500;
color: #ffffff;
line-height: 20px;
}
}
.content {
height: auto;
.info {
width: 100%;
height: auto;
background: #ffffff;
border-radius: 10px;
margin-bottom: 10px;
padding-top: 20px;
.list {
padding: 0px 15px 12px 15px;
display: flex;
justify-content: flex-start;
align-items: center;
.l-left {
width: 72px;
height: 14px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 14px;
}
.l-right {
padding-left: 2px;
width: auto;
height: auto;
font-size: 14px;
font-weight: 600;
color: #212121;
flex: 1;
line-height: 20px;
text-align: right;
span {
display: inline-block;
padding-left: 15px;
}
}
}
.list-bottom {
.l-b-code {
.l-b-list {
display: flex;
justify-content: flex-start;
align-items: center;
padding-bottom: 13px;
.l-left {
width: auto;
height: 15px;
font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #212121;
line-height: 15px;
}
.l-right {
padding-left: 6px;
height: 15px;
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #00bda5;
line-height: 15px;
}
}
}
}
}
.flow {
padding: 20px;
height: auto;
background: #ffffff;
border-radius: 10px;
.express-step {
display: flex;
padding-bottom: 24px;
position: relative;
justify-content: flex-start;
.express-step-icon {
width: 18px;
height: 18px;
margin-right: 7px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
.step-pg {
margin-left: -11px;
display: block;
width: 18px;
height: auto;
}
.oval-pg {
display: block;
width: 6px;
height: 6px;
}
}
.express-step-msg {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.step-title {
height: 18px;
font-size: 14px;
font-weight: 700;
color: #999999;
line-height: 18px;
}
.step-time {
margin-top: 5px;
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 12px;
}
}
.noButton {
margin-left: 22px;
}
&::before {
content: '';
position: absolute;
top: 0;
left: -5px;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #e7e7e7;
background-color: #ffffff;
z-index: 1;
}
&::after {
content: '';
position: absolute;
top: 11px;
bottom: 0;
height: calc(100% - 5px);
left: 3px;
display: block;
width: 1px;
background: #e7e7e7;
}
&.first {
&::before {
display: none;
}
}
&.last {
padding-bottom: 0;
&::after {
display: none;
}
}
}
.isComplate {
&::after {
background: #00bda5;
}
&::before {
background: #00bda5;
}
.express-step-msg {
.step-title {
color: #212121;
}
}
}
.hideCircle {
&::before {
width: 0;
display: none;
}
.express-step-msg {
.step-title {
color: #212121;
}
}
}
}
.tips{
color: #FF4B33;
font-size: 12px;
font-weight: lighter;
margin-top: 10px;
margin-left: 20px;
}
}
.flex-wrap{
display: flex;
font-size: 16px;
align-items: center;
height: 21px;
}
.fc-blue{
color: #00BDA5;
}
.p30{
padding: 15px;
background-color: #ffffff;
border-radius: 10px;
margin-bottom: 10px;
}
.l-copy {
text-align: center;
border-radius: 10px;
font-size: 12px;
font-weight: 500;
color: #1677FE;
line-height: 22px;
margin-left: 6px;
margin-top: -2px;
display: inline-block;
}
}
.pb60{
padding-bottom: 60px;
}
.submit-container {
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 99;
padding: 5px 12px;
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.submit-button {
position: relative;
width: 350px;
height: 40px;
border-radius: 20px;
font-weight: 700;
color: #ffffff;
font-size: 16px;
display: flex;
align-items: center;
background: #00bda5;
justify-content: center;
}
.submit-button-empty{
background: #ffffff;
border: 1px solid #00bda5;
color: #00bda5;
}
}
.multi-sub-wrap{
flex-direction: row;
justify-content: space-evenly;
.submit-button{
width: 45%;
}
}
}
src/views/insurance-Detection-detail-demo/index.vue 0 → 100644
浏览文件 @ 600aada1
<template>
<div class="insurance-quickDetection-detail">
<page-model
v-if="picaWechat != 'wechat'"
ref="PageModel"
:header-info="headerInfo"
/>
<div class="title" />
<div class="detail-box">
<div class="status">
<img
v-if="dataDetail.status == 5"
src="https://files.yunqueyi.com/image/png/common/20220817141150961.png"
alt="success"
>
<img
v-else
src="https://files.yunqueyi.com/image/png/common/20220816135250298.png"
alt="success"
>
<div>{{ dataDetail.status | statusFilter }}</div>
</div>
<div
class="content"
>
<div class="flow">
<div class="f-list">
<div
v-for="(item, index) in dataList"
:key="index"
class="express-step"
:class="{
hideCircle: item.completed,
last: index == dataList.length - 1,
}"
>
<div
v-if="item.completed"
class="express-step-icon"
>
<img
class="step-pg"
:src="item.status == 5 ? 'https://files.yunqueyi.com/image/png/common/20220817141140460.png' : 'https://files.yunqueyi.com/image/png/common/2022081612011851.png'"
>
</div>
<div
v-else
class="express-step-icon"
/>
<div
class="express-step-msg"
>
<div class="step-title">
<p>
{{ item.nodeName }}
</p>
</div>
<div
class="step-time"
>
{{ item.nodeTime ? item.nodeTime : item.completed ? '暂无数据' : '未开始' }}
</div>
</div>
</div>
</div>
<p
v-if="dataDetail.status == 5"
class="tips"
>
温馨提示:可联系医生重新采样
</p>
</div>
</div>
</div>
<div class="detail-box pb60">
<div class="content">
<div class="info">
<div class="list">
<p class="l-left">
受检人:
</p>
<p class="l-right">
<span>{{ dataDetail.patientName || '--' }}</span><span>{{ dataDetail.sex | sexFilter }}</span><span class="font">{{
dataDetail.ageMonth
? dataDetail.ageMonth + '月'
: dataDetail.patientAge + '岁'
}}</span>
</p>
</div>
<div class="list">
<p class="l-left">
检测项目:
</p>
<p class="l-right">
{{ dataDetail.checkName || '--' }}
</p>
</div>
<div class="list">
<p class="l-left">
检测编号:
</p>
<p class="l-right">
{{ dataDetail.recordNo || '--' }}
</p>
</div>
<div class="list">
<div class="l-left">
条形码:
</div>
<div class="l-right">
{{ dataDetail.sampleCode || '--' }}
<div
class="l-copy"
@click="copyText(dataDetail.sampleCode)"
>
复制
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="submit-container multi-sub-wrap"
>
<div
class="submit-button"
@click="getJumpToWebapp"
>
{{ openWebAppBtnName }}
</div>
</div>
</div>
</template>
<script>
import { getQuickDetectionDetailProces, detectionRecordInfo } from '@/api/detection';
// 0待完善信息、1待采样、2已采样、21已送检、22快递已签收、 25实验室已收样、 27已上机、 3已完成、5样本失效、 6待支付
export default {
filters: {
sexFilter(val) {
const str = val == 2 ? '女' : '男';
return str;
},
statusFilter(type) {
const obj = {
0: '待完善信息',
1: '待采样',
2: '已领取',
21: '已送检',
25: '已接收',
27: '已上机',
22: '已签收',
3: '已完成',
5: '样本异常',
6: '待支付',
};
return obj[type];
},
},
data() {
return {
picaWechat:window._picaWechat,
status: '',
headerInfo: {
title: '检测详情',
isBlack: true,
backMethod: 'web',
style: 'backgroundColor:#ffffff;zIndex:100;',
background: '',
},
detectionRecordId: '',
dataDetail: {},
dataList: [],
openWebAppBtnName: '提交检测结果',
yunOrderNo: '',
};
},
created() {
const {detectionRecordId, yunOrderNo} = this.$route.query;
this.detectionRecordId = detectionRecordId;
this.yunOrderNo = yunOrderNo;
this.init();
},
mounted() {
this.$sendBuriedData({
action: 'ACTION_WEB_AFTER',
component_tag: '7802849#0#0#快检成功页面',
web_data:{yunOrderNo: this.yunOrderNo},
});
},
methods: {
init() {
const that = this;
const o = {
detectionRecordId: this.detectionRecordId,
detectionKind: 1
};
console.log('----detectionRecordInfo', o);
detectionRecordInfo(o).then((res) => {
if (res.code === '000000') {
this.dataDetail = res.data;
this.getDetailProces();
} else {
that.$toast(res.message);
}
});
},
copyText(val) {
const input = document.createElement('input');
input.value = val;
document.body.appendChild(input);
input.select();
input.setSelectionRange(0, input.value.length);
document.execCommand('Copy');
document.body.removeChild(input);
this.$toast('已复制');
console.log('已复制的内容：', val);
},
// 检测详情
getDetailProces() {
getQuickDetectionDetailProces({id:this.detectionRecordId, channel: 4} ).then((res) => {
if (res.code === '000000') {
this.dataList = res.data || [];
} else {
this.$toast(res.message);
}
});
},
getJumpToWebapp() {
},
mapStatus(inquiryStatus) {
console.log('--mapStatus', inquiryStatus);
const s = String(inquiryStatus);
let m = '报告解读';
if(s == '0') {
m = '报告解读';
}else if(['4', '6'].includes(s)) {
m = '查看专家建议';
}else{
m = '已预约待咨询';
}
console.log('--mapStatus', m);
return m;
}
},
};
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或