Skip to content

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

auto commit

上级 cedc6cea
隐藏空白字符变更
内嵌 并排
正在显示 包含 255 行增加 和 53 行删除
package.json
浏览文件 @ 5452624d
...@@ -72,7 +72,8 @@ ...@@ -72,7 +72,8 @@
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vue-skeleton-webpack-plugin": "^1.2.2", "vue-skeleton-webpack-plugin": "^1.2.2",
"vue-template-compiler": "^2.6.11", "vue-template-compiler": "^2.6.11",
"webpack-bundle-analyzer": "^4.4.2" "webpack-bundle-analyzer": "^4.4.2",
"pdfjs-dist": "2.4.456"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
......
src/api/detection.js
浏览文件 @ 5452624d
...@@ -106,3 +106,10 @@ export const bindingSampleCode = (data) => { ...@@ -106,3 +106,10 @@ export const bindingSampleCode = (data) => {
data: data, data: data,
}); });
}; };
export const getJumpToWebapp = (params) => {
return request({
url: '/applet/url/link/getUrlLink',
method: 'post',
data: params,
});
};
src/router/index.js
浏览文件 @ 5452624d
...@@ -40,6 +40,11 @@ const routerConfig = [ ...@@ -40,6 +40,11 @@ const routerConfig = [
name: 'appointDetails', name: 'appointDetails',
component: () => import('@/views/appointDetails/index.vue'), component: () => import('@/views/appointDetails/index.vue'),
}, },
{
path: '/pdf-preview',
name: 'pdfPreview',
component: () => import('@/views/pdf-preview/index.vue'),
},
]; ];
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
......
src/views/insurance-detection-detail/index.scss
浏览文件 @ 5452624d
...@@ -253,7 +253,7 @@ ...@@ -253,7 +253,7 @@
.pb60{ .pb60{
padding-bottom: 60px; padding-bottom: 60px;
} }
.sumbit-container { .submit-container {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -261,19 +261,17 @@ ...@@ -261,19 +261,17 @@
width: 100%; width: 100%;
z-index: 99; z-index: 99;
padding: 5px 12px; padding: 5px 12px;
z-index: 99;
padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2); padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
background: #ffffff; background: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.sumbit-button { .submit-button {
width: 352px; position: relative;
width: 350px;
height: 40px; height: 40px;
background: #d9d9d9;
border-radius: 20px; border-radius: 20px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 700; font-weight: 700;
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
...@@ -283,3 +281,10 @@ ...@@ -283,3 +281,10 @@
justify-content: center; justify-content: center;
} }
} }
.multi-sub-wrap{
flex-direction: row;
justify-content: space-evenly;
.submit-button{
width: 45%;
}
}
src/views/insurance-detection-detail/insurance-detection-detail.vue
浏览文件 @ 5452624d
...@@ -106,22 +106,6 @@ ...@@ -106,22 +106,6 @@
</div> </div>
</div> </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="detail-box pb60">
<div class="content"> <div class="content">
<div class="info"> <div class="info">
...@@ -171,43 +155,53 @@ ...@@ -171,43 +155,53 @@
</div> </div>
</div> </div>
<!-- howBtn == 0 针对诺辉的走单独送检流程 不显示去送检按钮 --> <!-- howBtn == 0 针对诺辉的走单独送检流程 不显示去送检按钮 -->
<!-- v-if="[1, 3].includes(dataDetail.status)"-->
<div <div
v-if="dataDetail.status == 2 && dataDetail.showSendBtn == 1" class="submit-container multi-sub-wrap"
class="sumbit-container"
> >
<!-- :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 <div
class="sumbit-button" class="submit-button"
@click="bottomBtnFun" @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> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
filters: { filters: {
sexFilter(val) { sexFilter(val) {
const str = val == 2 ? '女' : '男'; const str = val == 2 ? '女' : '男';
return str; 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) { statusFilter(type) {
const obj = { const obj = {
0: '待完善信息', 0: '待完善信息',
...@@ -225,14 +219,11 @@ export default { ...@@ -225,14 +219,11 @@ export default {
return obj[type]; return obj[type];
}, },
showBtnTextFilter(status) { showBtnTextFilter(status) {
// 0 21 2 22
const obj = { const obj = {
6: '立即支付', // 待支付 1: '绑定条形码',
1: '绑定条形码', // 待采样 3: '查看报告',
3: '查看报告', // 已完成
2: '样本送检',
}; };
return obj[status]; return obj[status] || '';
}, },
}, },
data() { data() {
...@@ -256,6 +247,13 @@ export default { ...@@ -256,6 +247,13 @@ export default {
dataList: [], dataList: [],
waitIcon: [0, 1, 6], // icon 显示等待状态 waitIcon: [0, 1, 6], // icon 显示等待状态
noShowBottomBtn: [0, 21, 22, 5, 1, 6, 2, 25, 27], // 这几种状态不显示底部操作按钮 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() { created() {
...@@ -323,9 +321,36 @@ export default { ...@@ -323,9 +321,36 @@ export default {
this.dataDetail.reportUrl + '?response-content-type=application/pdf'; this.dataDetail.reportUrl + '?response-content-type=application/pdf';
this.$DDObj.ddOpenLink({ url: l }); 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> </script>
......
src/views/pdf-preview/index.vue 0 → 100644
浏览文件 @ 5452624d
<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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或