kola-web
6 days ago
61 changed files with 3298 additions and 582 deletions
@ -0,0 +1,160 @@
@@ -0,0 +1,160 @@
|
||||
# 海报插件 |
||||
|
||||
## 基于[wxml2canvas](https://github.com/wg-front/wxml2canvas)插件 |
||||
|
||||
### 插件引入 |
||||
|
||||
```json |
||||
{ |
||||
"customPoster": "/components/customPoster/index" |
||||
} |
||||
``` |
||||
|
||||
```wxml |
||||
<customPoster params="{{params}}"></customPoster> |
||||
``` |
||||
|
||||
### 参数示例 |
||||
|
||||
```js |
||||
const data = { |
||||
params: { |
||||
info: { id: 'circle-note_mp', title: '动态页', desc: '指定动态的页面，mp' }, |
||||
body: { |
||||
bgImg: |
||||
'https://picsissiok-10049618.cos.ap-shanghai.myqcloud.com/a74018e725861534f1644cff04780f4e_16273677601587.png', |
||||
width: '750', |
||||
height: '1254', |
||||
}, |
||||
elements: [ |
||||
{ |
||||
id: 'circle-name', |
||||
desc: '圈名称', |
||||
type: 1, |
||||
text: '治疗讨论', |
||||
font: '宋体', |
||||
'font-size': '42', |
||||
color: '#FFFFFF', |
||||
'single-line': true, |
||||
halign: 'center', |
||||
top: '106', |
||||
}, |
||||
{ |
||||
id: 'master-name', |
||||
desc: '专家名称', |
||||
type: 1, |
||||
text: '健康小贴士', |
||||
font: '宋体', |
||||
'font-size': '38', |
||||
color: '#FFFFFF', |
||||
'single-line': true, |
||||
halign: 'center', |
||||
top: '237', |
||||
}, |
||||
{ |
||||
id: 'master-avatar', |
||||
desc: '专家头像', |
||||
type: 0, |
||||
picType: 'avatar', |
||||
src: 'https://picsissiok-10049618.cos.ap-shanghai.myqcloud.com/ceb31ac6137e873225b8cc826389a267_16655329078962.jpg', |
||||
width: '120', |
||||
height: '120', |
||||
halign: 'center', |
||||
shape: 'circle', |
||||
top: '328', |
||||
}, |
||||
{ |
||||
id: 'note-content', |
||||
desc: '动态内容', |
||||
type: 1, |
||||
text: '11月5日上海组织进口博览会CIIE大会，邀请大家来我们的展馆现场交流。', |
||||
font: '宋体', |
||||
'font-size': '45', |
||||
color: '#18191A', |
||||
width: '630', |
||||
height: '348', |
||||
left: '60', |
||||
top: '495', |
||||
}, |
||||
{ |
||||
id: 'note-title', |
||||
desc: '长文标题', |
||||
type: 1, |
||||
text: '', |
||||
font: '宋体', |
||||
'font-size': '42', |
||||
color: '#18191A', |
||||
width: '659', |
||||
height: '116', |
||||
left: '46', |
||||
top: '495', |
||||
'font-weight': 'bold', |
||||
}, |
||||
{ |
||||
id: 'note-summary', |
||||
desc: '长文摘要 ', |
||||
type: 1, |
||||
text: '', |
||||
font: '宋体', |
||||
'font-size': '42', |
||||
color: '#18191A', |
||||
width: '672', |
||||
height: '232', |
||||
left: '39', |
||||
top: '646', |
||||
}, |
||||
{ |
||||
id: 'note-more', |
||||
desc: '还有', |
||||
type: 1, |
||||
text: '还有3条精彩附件>', |
||||
font: '宋体', |
||||
'font-size': '31', |
||||
color: '#666666', |
||||
'single-line': true, |
||||
width: '292', |
||||
height: '46', |
||||
left: '60', |
||||
top: '1024', |
||||
}, |
||||
{ |
||||
id: 'scanText', |
||||
desc: '扫描二维码查看详情', |
||||
type: 1, |
||||
text: '扫描二维码查看详情', |
||||
font: '宋体', |
||||
'font-size': '31', |
||||
color: '#666666', |
||||
'single-line': true, |
||||
width: '279', |
||||
height: '43', |
||||
left: '60', |
||||
top: '1087', |
||||
}, |
||||
{ |
||||
id: 'note-qrcode', |
||||
desc: '专家列表的二维码', |
||||
type: 0, |
||||
picType: 'qrcode', |
||||
src: 'https://family.devred.hbraas.com/proxy/mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHJ8TwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyUWhDdGhTWVNlTjMxMDAwMDAwN3gAAgSonPxjAwQAAAAA', |
||||
width: '130', |
||||
height: '130', |
||||
left: '554', |
||||
top: '1012', |
||||
}, |
||||
{ |
||||
id: 'brand', |
||||
desc: 'brand×华秉科技', |
||||
type: 1, |
||||
text: '做企业数字化转型的亲密伙伴×华秉科技', |
||||
font: '宋体', |
||||
'font-size': '24', |
||||
color: '#B2B3B4', |
||||
'single-line': true, |
||||
halign: 'center', |
||||
top: '1192', |
||||
}, |
||||
], |
||||
}, |
||||
} |
||||
``` |
||||
@ -0,0 +1,101 @@
@@ -0,0 +1,101 @@
|
||||
import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改，node_modules会被忽略
|
||||
|
||||
Component({ |
||||
properties: { |
||||
params: { |
||||
type: Object, |
||||
observer(newVal, _olVal) { |
||||
if (Object.keys(newVal).length > 0) { |
||||
this.paramsFormat(newVal); |
||||
this.setData({ |
||||
width: newVal.body.width, |
||||
height: newVal.body.height, |
||||
bgImg: newVal.body.bgImg, |
||||
elementsMp: newVal.elements, |
||||
}); |
||||
this.drawImage1(); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
data: { |
||||
imgUrl: "", |
||||
width: "", |
||||
height: "", |
||||
imgheight: "", |
||||
bgImg: "", |
||||
elementsMp: [], |
||||
}, |
||||
lifetimes: { |
||||
attached() {}, |
||||
}, |
||||
methods: { |
||||
paramsFormat(params) { |
||||
params.elements.forEach((item) => { |
||||
if (item.type === 0) { |
||||
// 图片居中
|
||||
if (item.halign === "center") { |
||||
item.left = (params.body.width - item.width) / 2; |
||||
} |
||||
} else { |
||||
item.text = item.text.replace(/[\r\n]/g, ""); |
||||
// 文字居中（使文字标签宽度等于画布宽度，文字加上居中的className）
|
||||
if (item.halign === "center") { |
||||
item.width = item.width || params.body.width; |
||||
item.left = (params.body.width - item.width) / 2; |
||||
} |
||||
if (item.halign === "right") { |
||||
item.width = params.body.width; |
||||
} |
||||
if (item.id === "shareText" && item.text.length > 30) { |
||||
item.text = item.text.slice(0, 30) + "..."; |
||||
} |
||||
if (item.id === "note-title" && item.text.length > 28) { |
||||
item.text = item.text.slice(0, 28) + "..."; |
||||
} |
||||
if (item.id === "note-content" && item.text.length > 90) { |
||||
item.text = item.text.slice(0, 90) + "..."; |
||||
} |
||||
let len = params.elements.some((x) => x.id === "note-title" && x.text.length); |
||||
if (len && item.id === "note-summary" && item.text.length > 62) { |
||||
item.text = item.text.slice(0, 62) + "..."; |
||||
} else if (item.id === "note-summary" && item.text.length > 76) { |
||||
item.text = item.text.slice(0, 76) + "..."; |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
drawImage1() { |
||||
let self = this; |
||||
this.drawImage1 = new Wxml2Canvas({ |
||||
obj: self, |
||||
width: this.data.width, // 宽， 以iphone6为基准，传具体数值，其它机型自动适配
|
||||
height: this.data.height, // 高
|
||||
element: "canvas1", |
||||
background: "transparent", |
||||
progress(percent) {}, |
||||
finish(url) { |
||||
self.setData({ |
||||
imgUrl: url, |
||||
}); |
||||
self.triggerEvent("finish", url); |
||||
}, |
||||
error(res) {}, |
||||
}); |
||||
|
||||
let data = { |
||||
list: [ |
||||
{ |
||||
type: "wxml", |
||||
class: "#canvas-bill-body-mp .draw_canvas", |
||||
limit: "#canvas-bill-body-mp", |
||||
x: 0, |
||||
y: 0, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
this.drawImage1.draw(data); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
{ |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
.canvas-box { |
||||
position: fixed; |
||||
left: 1000000rpx; |
||||
top: -1000000rpx; |
||||
} |
||||
.canvas-body { |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
background-color: #fff; |
||||
} |
||||
.draw_canvas { |
||||
position: absolute; |
||||
} |
||||
.canvas-bill { |
||||
position: fixed; |
||||
width: 750rpx; |
||||
left: 1000000rpx; |
||||
top: -1000000rpx; |
||||
visibility: hidden; |
||||
} |
||||
.lineOne { |
||||
// overflow: hidden; |
||||
// text-overflow: ellipsis; |
||||
// white-space: nowrap; |
||||
} |
||||
.textCenter { |
||||
text-align: center; |
||||
} |
||||
.textRight { |
||||
text-align: right; |
||||
} |
||||
.billImg-box { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 10; |
||||
width: 750rpx; |
||||
height: 100vh; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: rgba(0, 0, 0, 0.75); |
||||
} |
||||
.image-load-text { |
||||
width: 750rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
line-height: 50rpx; |
||||
margin-top: 20rpx; |
||||
font-size: 28rpx; |
||||
letter-spacing: 2rpx; |
||||
} |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
<view id="canvas-bill-body-mp" class="canvas-box" style="height: {{ height }}rpx; width: {{ width }}rpx;"> |
||||
<view |
||||
data-type="{{bgImg ? 'background-image' : 'text'}}" |
||||
style="height: {{ height }}rpx; width: {{ width }}rpx;background-image: url({{bgImg}})" |
||||
class="canvas-body draw_canvas" |
||||
> |
||||
<view wx:for="{{elementsMp}}" wx:key="index" wx:for-item="item"> |
||||
<image |
||||
class="draw_canvas" |
||||
data-type="{{item.shape === 'circle' ? 'radius-image' : 'image'}}" |
||||
data-url="{{item.src}}" |
||||
style="height: {{ item.height }}rpx; width: {{ item.width? item.width + 'rpx' : 'auto'}};left: {{item.left}}rpx;right: {{item.right}}rpx;top: {{item.top}}rpx;{{item.shape === 'circle'?'border-radius:50%;':''}}" |
||||
src="{{item.src}}" |
||||
wx:if="{{item.type === 0}}" |
||||
data-delay="{{item.delay}}" |
||||
></image> |
||||
<view |
||||
class="draw_canvas {{item['single-line'] ? 'lineOne' : ''}} {{item['halign'] === 'center' ? 'textCenter' : ''}} {{item['halign'] === 'right' ? 'textRight' : ''}}" |
||||
wx:if="{{item.type === 1}}" |
||||
data-background="{{item.bgcolor}}" |
||||
style="font-style: {{item['font-style']}};font-weight: {{item['font-weight']}};background-color: {{item.bgcolor}};color: {{item.color}};font-size: {{item['font-size']}}rpx;font-family: {{item.font}};height: {{ item.height }}rpx; width: {{ item.width? item.width + 'rpx' : 'auto'}};left: {{item.left}}rpx;right: {{item.right}}rpx;top: {{item.top}}rpx;line-height:{{item.lineHeight}}rpx;" |
||||
data-type="text" |
||||
data-text="{{item.text}}" |
||||
> |
||||
{{item.text}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<canvas |
||||
canvas-id="canvas1" |
||||
class="canvas-bill" |
||||
style="height: {{ height }}rpx; width: {{ width }}rpx;transform: scale({{scale}})" |
||||
></canvas> |
||||
|
||||
<!-- <image --> |
||||
<!-- wx:if="{{imgUrl}}" --> |
||||
<!-- src="{{imgUrl}}" --> |
||||
<!-- mode="aspectFit" --> |
||||
<!-- style="height: {{ height }}rpx; width: {{ width }}rpx;" --> |
||||
<!-- show-menu-by-longpress --> |
||||
<!-- ></image> --> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"navigationBarTitleText": "用药计算器", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,98 @@
@@ -0,0 +1,98 @@
|
||||
page { |
||||
background-color: rgba(246, 246, 246, 1); |
||||
} |
||||
.page-tip { |
||||
font-size: 28rpx; |
||||
color: rgba(255, 163, 112, 1); |
||||
padding: 18rpx; |
||||
text-align: center; |
||||
line-height: 44rpx; |
||||
background-color: rgba(255, 247, 232, 1); |
||||
} |
||||
|
||||
.page { |
||||
padding: 32rpx 40rpx 80rpx; |
||||
.banner { |
||||
background-color: rgba(28, 107, 255, 1); |
||||
border: 1px solid rgba(255, 255, 255, 1); |
||||
border-radius: 24rpx; |
||||
.b-header { |
||||
padding: 24rpx 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 36rpx; |
||||
.left { |
||||
flex-shrink: 0; |
||||
.name { |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
line-height: 44rpx; |
||||
} |
||||
.content { |
||||
margin-top: 8rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(255, 255, 255, 0.5); |
||||
} |
||||
} |
||||
.wrap { |
||||
flex: 1; |
||||
flex-shrink: 0; |
||||
padding: 20rpx 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
.input { |
||||
font-size: 32rpx; |
||||
color: rgba(1, 1, 5, 1); |
||||
} |
||||
.input-place { |
||||
color: rgba(207, 209, 213, 1); |
||||
} |
||||
.sub { |
||||
flex-shrink: 0; |
||||
font-size: 32rpx; |
||||
color: rgba(1, 1, 5, 1); |
||||
} |
||||
} |
||||
} |
||||
.b-body { |
||||
padding: 32rpx 0; |
||||
display: flex; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
.item { |
||||
flex: 1; |
||||
padding: 0 48rpx; |
||||
.name { |
||||
font-size: 32rpx; |
||||
color: rgba(161, 164, 172, 1); |
||||
} |
||||
.content { |
||||
margin-top: 16rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: baseline; |
||||
.value { |
||||
font-size: 44rpx; |
||||
color: rgba(1, 1, 5, 1); |
||||
font-weight: bold; |
||||
} |
||||
.sub { |
||||
font-size: 32rpx; |
||||
color: rgba(1, 1, 5, 1); |
||||
} |
||||
} |
||||
} |
||||
.line { |
||||
flex-shrink: 0; |
||||
border-right: 1px dashed rgba(247, 247, 250, 1); |
||||
} |
||||
} |
||||
} |
||||
.illustrate { |
||||
margin-top: 32rpx; |
||||
width: 670rpx; |
||||
height: 964rpx; |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
@@ -0,0 +1,27 @@
|
||||
const app = getApp<IAppOption>() |
||||
import { calc } from 'a-calc' |
||||
|
||||
Page({ |
||||
data: { |
||||
injectionWeight: '', |
||||
|
||||
injectionDrugs: '', |
||||
injectionNum: '', |
||||
}, |
||||
onLoad() { |
||||
app.waitLogin({ type: 2 }).then(() => {}) |
||||
}, |
||||
handleWeight(e) { |
||||
const value = e.detail.value |
||||
if (value) { |
||||
const injectionDrugs = calc(`${value} * 1.25 | =0 ~+`) |
||||
const injectionNum = calc(`${value} * 1.25 / 2 | =0 ~+`) |
||||
this.setData({ |
||||
injectionDrugs, |
||||
injectionNum, |
||||
}) |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,40 @@
@@ -0,0 +1,40 @@
|
||||
<view class="page-tip">此方案仅供参考，请以最新说明书计算方式为准</view> |
||||
<view class="page"> |
||||
<view class="banner"> |
||||
<view class="b-header"> |
||||
<view class="left"> |
||||
<view class="name">体重</view> |
||||
<view class="content">输入体重, 自动计算用药</view> |
||||
</view> |
||||
<view class="wrap"> |
||||
<input |
||||
type="digit" |
||||
class="input" |
||||
placeholder-class="input-place" |
||||
placeholder="请输入" |
||||
model:value="{{injectionWeight}}" |
||||
bindblur="handleWeight" |
||||
/> |
||||
<view class="sub">KG</view> |
||||
</view> |
||||
</view> |
||||
<view class="b-body"> |
||||
<view class="item"> |
||||
<view class="name">用药体积</view> |
||||
<view class="content"> |
||||
<view class="value">{{injectionDrugs||'--'}}</view> |
||||
<view class="sub">ml</view> |
||||
</view> |
||||
</view> |
||||
<view class="line"></view> |
||||
<view class="item"> |
||||
<view class="name">预计瓶数</view> |
||||
<view class="content"> |
||||
<view class="value">{{injectionNum||'--'}}</view> |
||||
<view class="sub">瓶数</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<image class="illustrate" src="/images/illustrate.png"></image> |
||||
</view> |
||||
@ -1,8 +1,23 @@
@@ -1,8 +1,23 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
handleCalculator() { |
||||
wx.navigateTo({ |
||||
url: '/doctor/pages/calculator/index', |
||||
}) |
||||
}, |
||||
handlePatientDetail() { |
||||
wx.navigateTo({ |
||||
url: '/doctor/pages/patientDetail/index', |
||||
}) |
||||
}, |
||||
handlePoster() { |
||||
wx.navigateTo({ |
||||
url: '/doctor/pages/poster/index', |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
|
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"navigationStyle": "custom", |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index", |
||||
"doctor-tab-bar": "/doctor/components/doctor-tab-bar/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,362 @@
@@ -0,0 +1,362 @@
|
||||
page { |
||||
background-color: rgba(246, 246, 246, 1); |
||||
} |
||||
.nav-title { |
||||
color: rgba(255, 255, 255, 1); |
||||
&.nav-title_dark { |
||||
color: #000; |
||||
} |
||||
} |
||||
|
||||
.page { |
||||
padding-bottom: 160rpx; |
||||
.header { |
||||
padding: 46rpx 0 0; |
||||
.user { |
||||
padding: 0 40rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 24rpx; |
||||
.avatar { |
||||
flex-shrink: 0; |
||||
width: 120rpx; |
||||
height: 120rpx; |
||||
border-radius: 50%; |
||||
border: 2px solid #fff; |
||||
} |
||||
.wrap { |
||||
flex: 1; |
||||
.w-header { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
.name { |
||||
font-size: 36rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
.age { |
||||
padding: 0 14rpx; |
||||
border-radius: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 6rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
line-height: 32rpx; |
||||
border: 1px solid #fff; |
||||
.icon { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
} |
||||
} |
||||
.site { |
||||
padding: 0 14rpx; |
||||
border-radius: 20rpx; |
||||
background-color: rgba(32, 196, 255, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 6rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
line-height: 32rpx; |
||||
.icon { |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
} |
||||
} |
||||
} |
||||
.w-footer { |
||||
margin-top: 22rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.content { |
||||
font-size: 28rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
.doc { |
||||
font-size: 28rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.body { |
||||
position: relative; |
||||
padding: 42rpx 40rpx 0; |
||||
.doctor { |
||||
padding: 32rpx; |
||||
border-radius: 32rpx; |
||||
background-color: #fff; |
||||
.d-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
font-weight: bold; |
||||
} |
||||
.message { |
||||
position: relative; |
||||
font-size: 28rpx; |
||||
color: rgba(0, 0, 0, 0.6); |
||||
.dot { |
||||
position: absolute; |
||||
right: -7rpx; |
||||
top: -7rpx; |
||||
width: 16rpx; |
||||
height: 16rpx; |
||||
border-radius: 50%; |
||||
background-color: rgba(232, 70, 60, 1); |
||||
} |
||||
} |
||||
} |
||||
.d-container { |
||||
margin-top: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 16rpx; |
||||
.avatar { |
||||
flex-shrink: 0; |
||||
width: calc(92rpx * 1.5); |
||||
display: flex; |
||||
.a-img { |
||||
flex-shrink: 0; |
||||
width: 92rpx; |
||||
height: 92rpx; |
||||
border-radius: 50%; |
||||
&:last-of-type { |
||||
transform: translateX(-50%); |
||||
} |
||||
} |
||||
} |
||||
.wrap { |
||||
flex: 1; |
||||
.name { |
||||
font-size: 32rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
font-weight: bold; |
||||
} |
||||
.content { |
||||
margin-top: 12rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(0, 0, 0, 0.3); |
||||
} |
||||
} |
||||
.btn { |
||||
flex-shrink: 0; |
||||
width: 162rpx; |
||||
height: 56rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
text-align: center; |
||||
line-height: 56rpx; |
||||
background: #1c6bff; |
||||
border-radius: 68rpx 68rpx 68rpx 68rpx; |
||||
} |
||||
} |
||||
} |
||||
.progress { |
||||
margin-top: 38rpx; |
||||
.p-header { |
||||
padding-bottom: 32rpx; |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
font-weight: bold; |
||||
} |
||||
.card { |
||||
display: flex; |
||||
gap: 24rpx; |
||||
.c-aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.line-top { |
||||
flex-shrink: 0; |
||||
height: 48rpx; |
||||
border-right: 1px dashed rgba(225, 225, 226, 1); |
||||
} |
||||
.num { |
||||
flex-shrink: 0; |
||||
width: 56rpx; |
||||
height: 56rpx; |
||||
border-radius: 50%; |
||||
font-size: 40rpx; |
||||
text-align: center; |
||||
line-height: 56rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background-color: rgba(225, 225, 226, 1); |
||||
} |
||||
.line-bottom { |
||||
flex: 1; |
||||
border-right: 1px dashed rgba(225, 225, 226, 1); |
||||
} |
||||
.hide { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.c-container { |
||||
padding-bottom: 24rpx; |
||||
flex: 1; |
||||
.module { |
||||
position: relative; |
||||
padding: 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 32rpx; |
||||
box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.05); |
||||
.m-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: rgba(171, 174, 180, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
.tag { |
||||
font-size: 28rpx; |
||||
color: rgba(171, 174, 180, 1); |
||||
line-height: 34rpx; |
||||
padding: 0 18rpx; |
||||
border-radius: 40rpx 40rpx 40rpx 40rpx; |
||||
border: 1rpx solid rgba(171, 174, 180, 0.52); |
||||
} |
||||
} |
||||
.date { |
||||
font-size: 28rpx; |
||||
color: rgba(171, 174, 180, 1); |
||||
} |
||||
} |
||||
.m-body { |
||||
margin-top: 16rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.status { |
||||
width: 154rpx; |
||||
height: 40rpx; |
||||
} |
||||
.detail { |
||||
font-size: 28rpx; |
||||
color: rgba(28, 107, 255, 1); |
||||
} |
||||
} |
||||
.btn { |
||||
position: absolute; |
||||
top: 48rpx; |
||||
right: 32rpx; |
||||
width: 162rpx; |
||||
height: 56rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: rgba(181, 184, 189, 0.6); |
||||
border-radius: 68rpx 68rpx 68rpx 68rpx; |
||||
border: 2rpx solid rgba(181, 184, 189, 0.6); |
||||
} |
||||
} |
||||
} |
||||
&.finish { |
||||
.c-aside { |
||||
.line-top { |
||||
border-color: rgba(28, 107, 255, 1); |
||||
} |
||||
.num { |
||||
background-color: rgba(14, 209, 167, 1); |
||||
} |
||||
.line-bottom { |
||||
border-color: rgba(28, 107, 255, 1); |
||||
} |
||||
} |
||||
.c-container { |
||||
.module { |
||||
.m-header { |
||||
.title { |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
} |
||||
.m-body { |
||||
.status { |
||||
color: rgba(14, 209, 167, 1); |
||||
.icon { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.detail { |
||||
color: rgba(28, 107, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&.current { |
||||
.c-aside { |
||||
.line-top { |
||||
border-color: rgba(28, 107, 255, 1); |
||||
} |
||||
.num { |
||||
background-color: rgba(28, 107, 255, 1); |
||||
} |
||||
} |
||||
.c-container { |
||||
.module { |
||||
.m-header { |
||||
.title { |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
} |
||||
.m-body { |
||||
.status { |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
.detail { |
||||
color: rgba(28, 107, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.kkd { |
||||
margin-top: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 22rpx; |
||||
.k-item { |
||||
padding: 28rpx 24rpx; |
||||
flex: 1; |
||||
background: linear-gradient(52deg, #ffffff 0%, #eff4ff 100%); |
||||
border-radius: 32rpx 32rpx 32rpx 32rpx; |
||||
border: 2rpx solid #ffffff; |
||||
display: flex; |
||||
align-items: center; |
||||
.icon { |
||||
width: 88rpx; |
||||
height: 88rpx; |
||||
} |
||||
.wrap { |
||||
padding-left: 14rpx; |
||||
.title { |
||||
font-size: 28rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
line-height: 44rpx; |
||||
} |
||||
.content { |
||||
font-size: 32rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
handleBack() { |
||||
wx.navigateBack() |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
@ -0,0 +1,164 @@
@@ -0,0 +1,164 @@
|
||||
<navbar fixed custom-style="background:{{background}}" back> |
||||
<van-icon |
||||
name="arrow-left" |
||||
slot="left" |
||||
size="18px" |
||||
color="{{background==='#ffffff' ? '#000' : '#fff'}}" |
||||
bind:tap="handleBack" |
||||
/> |
||||
<view class="nav-title {{background=='#ffffff' && 'nav-title_dark'}}" slot="title">患者详情</view> |
||||
</navbar> |
||||
<view |
||||
class="page" |
||||
style="padding-top:{{pageTop}}px;background:url('{{imageUrl}}bg22.png?t={{Timestamp}}') no-repeat top center/100% 600rpx" |
||||
> |
||||
<view class="header"> |
||||
<view class="user"> |
||||
<image |
||||
class="avatar" |
||||
src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567" |
||||
></image> |
||||
<view class="wrap"> |
||||
<view class="w-header"> |
||||
<view class="name">王青</view> |
||||
<view class="age"> |
||||
<image class="icon" src="{{imageUrl}}icon91.png?t={{Timestamp}}"></image> |
||||
32岁 |
||||
</view> |
||||
<view class="site"> |
||||
<image class="icon" src="{{imageUrl}}icon92.png?t={{Timestamp}}"></image> |
||||
北京 |
||||
</view> |
||||
</view> |
||||
<view class="w-footer"> |
||||
<view class="content">入组时间:2025年6月12日</view> |
||||
<view class="doc"> |
||||
查看档案 |
||||
<van-icon name="arrow" /> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="body"> |
||||
<view class="doctor"> |
||||
<view class="d-header"> |
||||
<view class="title">共同照护团队</view> |
||||
<view class="message"> |
||||
最新消息12条 |
||||
<view class="dot"></view> |
||||
</view> |
||||
</view> |
||||
<view class="d-container"> |
||||
<view class="avatar"> |
||||
<image |
||||
class="a-img" |
||||
src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567" |
||||
></image> |
||||
<image |
||||
class="a-img" |
||||
src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567" |
||||
></image> |
||||
</view> |
||||
<view class="wrap"> |
||||
<view class="name">刘湖飞</view> |
||||
<view class="content">天津血液科诊断中心</view> |
||||
</view> |
||||
<view class="btn">去看看></view> |
||||
</view> |
||||
</view> |
||||
<view class="progress"> |
||||
<view class="p-header">刘可的检查进展</view> |
||||
<view class="card finish"> |
||||
<view class="c-aside"> |
||||
<view class="line-top hide"></view> |
||||
<view class="num">1</view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="module"> |
||||
<view class="m-header"> |
||||
<view class="title">诊前筛查</view> |
||||
<view class="date">2024-08-24</view> |
||||
</view> |
||||
<view class="m-body"> |
||||
<image class="status" src="/images/icon102.png"></image> |
||||
<view class="detail">查看详情</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="card current"> |
||||
<view class="c-aside"> |
||||
<view class="line-top"></view> |
||||
<view class="num">2</view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="module"> |
||||
<view class="m-header"> |
||||
<view class="title">注射前准备</view> |
||||
</view> |
||||
<view class="m-body"> |
||||
<image class="status" src="/images/icon101.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-aside"> |
||||
<view class="line-top"></view> |
||||
<view class="num">3</view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="module"> |
||||
<view class="m-header"> |
||||
<view class="title"> |
||||
诊前筛查 |
||||
<view class="tag">还未确定注射日</view> |
||||
</view> |
||||
</view> |
||||
<view class="m-body"> |
||||
<image class="status" src="/images/icon103.png"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-aside"> |
||||
<view class="line-top"></view> |
||||
<view class="num">4</view> |
||||
<view class="line-bottom hide"></view> |
||||
</view> |
||||
<view class="c-container"> |
||||
<view class="module"> |
||||
<view class="m-header"> |
||||
<view class="title">诊前筛查</view> |
||||
</view> |
||||
<view class="m-body"> |
||||
<image class="status" src="/images/icon103.png"></image> |
||||
</view> |
||||
<view class="btn">待启动</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="kkd"> |
||||
<view class="k-item"> |
||||
<image class="icon" src="{{imageUrl}}icon73.png?t={{Timestamp}}"></image> |
||||
<view class="wrap"> |
||||
<view class="title">他的全部</view> |
||||
<view class="content">病历档案</view> |
||||
</view> |
||||
</view> |
||||
<view class="k-item"> |
||||
<image class="icon" src="{{imageUrl}}icon74.png?t={{Timestamp}}"></image> |
||||
<view class="wrap"> |
||||
<view class="title">查看他的</view> |
||||
<view class="content">健康变化</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"navigationBarTitleText": "海报", |
||||
"usingComponents": { |
||||
"customPoster": "/components/customPoster/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,29 @@
@@ -0,0 +1,29 @@
|
||||
page { |
||||
background-color: #c65174; |
||||
} |
||||
.page { |
||||
position: relative; |
||||
height: 1448rpx; |
||||
.poster { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.btn { |
||||
position: absolute; |
||||
bottom: 88rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
margin: 36rpx auto; |
||||
padding: 18rpx 44rpx; |
||||
font-size: 36rpx; |
||||
line-height: 48rpx; |
||||
font-weight: bold; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: rgba(255, 255, 255, 1); |
||||
border-radius: 64rpx 64rpx 64rpx 64rpx; |
||||
border: 1px solid rgba(255, 255, 255, 1); |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
@ -0,0 +1,114 @@
@@ -0,0 +1,114 @@
|
||||
const app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: { |
||||
doctor: {}, |
||||
hospital: {}, |
||||
qrCode: '', |
||||
|
||||
posterUrl: '', |
||||
params: {}, |
||||
}, |
||||
onLoad() { |
||||
const SystemInfo = app.globalSystemInfo |
||||
if (SystemInfo) { |
||||
const { bottom } = SystemInfo.capsulePosition |
||||
this.setData({ |
||||
bottom, |
||||
}) |
||||
} |
||||
app.waitLogin().then((_res) => { |
||||
wx.showLoading({ |
||||
title: '加载中', |
||||
}) |
||||
app.mpBehavior({ doctor: true, PageName: 'PG_DOCTORINVITEPATIENT' }) |
||||
this.getDetail() |
||||
}) |
||||
}, |
||||
getDetail() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=zd/doctor/account/info', |
||||
data: {}, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
doctor: res.doctor, |
||||
hospital: res.hospital, |
||||
}) |
||||
this.getPrepare(res.doctor.Id) |
||||
}) |
||||
}, |
||||
getPrepare(id) { |
||||
wx.ajax({ |
||||
method: 'POST', |
||||
url: '?r=poster/prepare', |
||||
data: { |
||||
posterId: 'doctor_mini', |
||||
doctorId: id, |
||||
}, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
params: res, |
||||
}) |
||||
}) |
||||
}, |
||||
getQrCode() { |
||||
this.setData({ |
||||
qrCode: `${app.globalData.url}?r=zd/doctor/account/mp-info&loginState=${app.globalData.loginState}`, |
||||
}) |
||||
}, |
||||
handleDownload() { |
||||
wx.showToast({ |
||||
title: '请长按海报图片进行保存', |
||||
icon: 'none', |
||||
}) |
||||
// wx.showLoading({
|
||||
// title: '加载中',
|
||||
// })
|
||||
// wx.downloadFile({
|
||||
// url: this.data.posterUrl,
|
||||
// success: (res) => {
|
||||
// if (res.statusCode === 200) {
|
||||
// wx.saveImageToPhotosAlbum({
|
||||
// filePath: res.tempFilePath,
|
||||
// success: () => {
|
||||
// wx.hideLoading()
|
||||
// wx.showToast({
|
||||
// title: '保存成功，请到相册中查看',
|
||||
// })
|
||||
// },
|
||||
// fail: () => {
|
||||
// wx.hideLoading()
|
||||
// wx.showToast({
|
||||
// icon: 'none',
|
||||
// title: '保存失败，请稍后重试',
|
||||
// })
|
||||
// },
|
||||
// })
|
||||
// } else {
|
||||
// wx.hideLoading()
|
||||
// wx.showToast({
|
||||
// icon: 'none',
|
||||
// title: '下载失败，请稍后重试',
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// fail: () => {
|
||||
// wx.hideLoading()
|
||||
// wx.showToast({
|
||||
// icon: 'none',
|
||||
// title: '下载失败，请稍后重试',
|
||||
// })
|
||||
// },
|
||||
// })
|
||||
}, |
||||
handlePosterFinish(e: any) { |
||||
this.setData({ |
||||
posterUrl: e.detail, |
||||
}) |
||||
wx.hideLoading() |
||||
}, |
||||
handleBack() { |
||||
wx.navigateBack() |
||||
}, |
||||
}) |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
<view class="page"> |
||||
<image class="poster" show-menu-by-longpress src="{{posterUrl}}"></image> |
||||
<view class="btn" bind:tap="handleDownload">长按图片保存</view> |
||||
</view> |
||||
|
||||
<customPoster params="{{params}}" bind:finish="handlePosterFinish"></customPoster> |
||||
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 497 KiB |
|
After Width: | Height: | Size: 753 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
Loading…
Reference in new issue