提交 a27d3ca4 编写于 作者: 张磊's avatar 张磊

Merge branch 'feature/zl2' into 'develop'

auto commit

See merge request !18
......@@ -106,3 +106,10 @@ export const bindingSampleCode = (data) => {
data: data,
});
};
export const getJumpToWebapp = (params) => {
return request({
url: '/applet/url/link/getUrlLink',
method: 'post',
data: params,
});
};
......@@ -40,6 +40,11 @@ const routerConfig = [
name: 'appointDetails',
component: () => import('@/views/appointDetails/index.vue'),
},
{
path: '/pdf-preview',
name: 'pdfPreview',
component: () => import('@/views/pdf-preview/index.vue'),
},
];
router.beforeEach(async (to, from, next) => {
......
......@@ -253,7 +253,7 @@
.pb60{
padding-bottom: 60px;
}
.sumbit-container {
.submit-container {
box-sizing: border-box;
position: fixed;
bottom: 0;
......@@ -261,19 +261,17 @@
width: 100%;
z-index: 99;
padding: 5px 12px;
z-index: 99;
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.sumbit-button {
width: 352px;
.submit-button {
position: relative;
width: 350px;
height: 40px;
background: #d9d9d9;
border-radius: 20px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 700;
color: #ffffff;
font-size: 16px;
......@@ -283,3 +281,10 @@
justify-content: center;
}
}
.multi-sub-wrap{
flex-direction: row;
justify-content: space-evenly;
.submit-button{
width: 45%;
}
}
......@@ -106,22 +106,6 @@
</div>
</div>
</div>
<div
v-if="
noShowBottomBtn.indexOf(dataDetail.status) == -1 ||
(dataDetail.status == 6 && !dataDetail.detectOrderType)
"
class="sumbit-container"
>
<div
class="sumbit-button"
@click="bottomBtnFun"
>
{{ dataDetail.status | showBtnTextFilter }}
</div>
</div>
<div class="detail-box pb60">
<div class="content">
<div class="info">
......@@ -171,43 +155,53 @@
</div>
</div>
<!-- howBtn == 0 针对诺辉的走单独送检流程 不显示去送检按钮 -->
<!-- v-if="[1, 3].includes(dataDetail.status)"-->
<div
v-if="dataDetail.status == 2 && dataDetail.showSendBtn == 1"
class="sumbit-container"
class="submit-container multi-sub-wrap"
>
<!-- :class="[3].includes(dataDetail.status) && 'multi-sub-wrap'"-->
<div
class="submit-button"
@click="bottomBtnFun(dataDetail.status)"
>
{{ dataDetail.status | showBtnTextFilter }}
</div>
<!-- v-if="[3].includes(dataDetail.status)"-->
<div
class="sumbit-button"
@click="bottomBtnFun"
class="submit-button"
@click="getJumpToWebapp"
>
去送检
<pica-guide-app
v-if="picaWechat == 'wechat'"
:open-web-app="true"
:open-web-app-config="openWebAppConfig"
:is-need-wx-config="false"
/>
报告解读
</div>
</div>
</div>
</template>
<script>
import { getDetectionDetail, getDetectionDetailProces } from '@/api/detection';
const { VUE_APP_ENV } = process.env;
import { getDetectionDetail, getDetectionDetailProces, getJumpToWebapp } from '@/api/detection';
// UNCOMMITTED(0,"待完善信息"),
// UNDER_DETECTION(1,"待采样"),
// UNPAID(6, "待支付"),
// DETECTING(2,"已采样"),
// COMPLETED(3,"已完成"),
// ARRIVED(21,"已送检"),
// ACCEPT(22,"已签收"),
// CHECK_ACCEPT(25,"已接收"),
// TESTING(27, "已上机"),
// CANCEL(4, "取消"),
// INVALID(5, "样本失效")
export default {
filters: {
sexFilter(val) {
const str = val == 2 ? '女' : '男';
return str;
},
showReportTime(val) {
console.log(val, 'val----===');
if (val == 2 || val == 22 || val == 21) {
return true;
} else {
return false;
}
},
statusShowFilter(val) {
// 10:免费;20:收费
if (!val || val == 1) {
return false;
} else {
return true;
}
},
statusFilter(type) {
const obj = {
0: '待完善信息',
......@@ -225,14 +219,11 @@ export default {
return obj[type];
},
showBtnTextFilter(status) {
// 0 21 2 22
const obj = {
6: '立即支付', // 待支付
1: '绑定条形码', // 待采样
3: '查看报告', // 已完成
2: '样本送检',
1: '绑定条形码',
3: '查看报告',
};
return obj[status];
return obj[status] || '';
},
},
data() {
......@@ -256,6 +247,13 @@ export default {
dataList: [],
waitIcon: [0, 1, 6], // icon 显示等待状态
noShowBottomBtn: [0, 21, 22, 5, 1, 6, 2, 25, 27], // 这几种状态不显示底部操作按钮
openWebAppConfig:{
content:'<script' + ' type=text/wxtag-template><style>.btn {position:absolute; top: 0; left: 0; width:100%; height: 100%;}</style> <div class="btn"></div></' + 'script>', // 标签内容
username:'gh_e92f58174364', // 小程序唯一username 1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
path:'', // 打开页面
envVersion: VUE_APP_ENV != 'testing' ? 'release' : 'trial', // release 生产
extraData:''
},
};
},
created() {
......@@ -323,9 +321,36 @@ export default {
this.dataDetail.reportUrl + '?response-content-type=application/pdf';
this.$DDObj.ddOpenLink({ url: l });
},
bottomBtnFun() {
// 底部按钮点击
bottomBtnFun(s) {
const p = s == 1 ? '/insuranceBindCode' : '/pdf-preview';
this.$router.push(
{
path: p,
query: {
id: '',
},
}
);
},
getJumpToWebapp(t) {
if(this.picaWechat == 'wechat') {
return false;
}
const p = {params:{path:'pages/health/myCheck/index', query:'zl---test'}, type: 2};
getJumpToWebapp(p).then(res => {
console.log('--res', res);
if(t == 'href') {
window.location.href = res.data;
}else{
const a = document.createElement('a');
a.setAttribute('href', res.data);
a.setAttribute('target', '_blank');
// 防止反复添加
document.body.appendChild(a);
a.click();
}
});
}
},
};
</script>
......
<template>
<div class="view-wrapper">
<page-model
v-if="picaWechat != 'wechat'"
ref="PageModel"
:header-info="headerInfo"
/>
<div
class="box"
style="background: #fff"
>
<div>
<canvas
v-for="page in pages"
:id="'the-canvas'+page"
:key="page"
/>
</div>
<div
id="canvas-wrap"
class="view"
/>
</div>
<van-loading
v-show="loadding"
type="spinner"
/>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist';
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';
PDFJS.workerSrc = workerSrc;
export default {
data() {
return {
picaWechat:window._picaWechat,
headerInfo: {
title: '查看报告',
isBlack: true,
backMethod: 'web',
style: 'backgroundColor:#ffffff;zIndex:100;',
background: '',
},
pdfDoc: null,
pages: 0,
pdfUrl:'',
pdfname:'',
src:'',
loadding:true,
file:true,
isDestory:true
};
},
metaInfo: {
meta: [
{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,user-scalable=yes' }
]
},
watch: {
},
created() {
const {name, url} = this.$route.query;
this.pdfname = name;
this.pdfUrl = url || 'https://file.yunqueyi.com/bioHope/reports/202302/20230215165058_2axd021dy0.pdf?response-content-type=application/pdf&1676514088161';
},
mounted() {
this._loadFile(this.pdfUrl);
},
beforeDestroy() {
console.log('destory');
this.isDestory = false;
this._renderPage = null;
},
methods: {
_renderPage (num) {
// getPage 处理每个页面
// 返回单页内容实例(页面引索) pdf.getPage(index)
this.pdfDoc.getPage(num).then((page) => {
// canvas 绘制 PDF
const canvas = document.getElementById('the-canvas' + num);
const ctx = canvas.getContext('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
const dpr = window.devicePixelRatio || 1;
const bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
const ratio = dpr / bsr;
// 返回页面内容(比例) page.getViewport({scale:2.0})语法改这么写
const viewport = page.getViewport({scale:screen.availWidth / page.getViewport({scale:1.0}).width});// 这是让pdf文件的大小等于视口的大小
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;// 这里会进行压缩,解决模糊问题
canvas.style.width = viewport.width + 'px';
canvas.style.height = viewport.height + 'px';
const renderContext = {
canvasContext: ctx,
viewport: viewport,
transform: [ratio, 0, 0, ratio, 0, 0]// 这里会进行放大,解决模糊问题
};
const that = this;
page.render(renderContext).promise.then(function() {
// 防止 在 PDF未渲染完某页 就返回时 会报错,导致下一次打开PDF 不会渲染出来
if(that.isDestory) {
console.log('xuanran');
// page.getTextContent()
if (that.pages > num) {
that._renderPage(num + 1);
}
}
});
});
},
_loadFile (url) {
// 获取整个 文档
PDFJS.getDocument({
url,
// cMapUrl: 'https://unpkg.zhimg.com/pdfjs-dist@1.9.426/cmaps/',//这里同样要引入字体解决水印问题,需自己提供
// 注意:如果PDF的水印是收费字体,则需要 通过cMapUrl引入对应的字体,如果是免费字体,则不需要引入字体 水印会直接渲染出来
cMapPacked: true
}).promise.then((pdf) => {
this.pdfDoc = pdf;
this.pages = this.pdfDoc.numPages;
this.loadding = false;
const that = this;
if(that.isDestory) {
this.$nextTick(() => {
this._renderPage(1);
});
}
}, (err) => {
console.log('pdf-error', err);
this.$toast('无效的PDF链接');
});
}
}
};
</script>
<style lang="scss" scoped>
.view-wrapper {
}
.view-wrapper /deep/ .van-nav-bar .van-icon {
color: #333;
font-size: 18px;
margin-right: 3px;
}
.view-wrapper /deep/ .van-loading {
position: absolute;
top: 50%;
left: 46%;
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册