kola-web
1 month ago
796 changed files with 36834 additions and 2 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,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,240 @@
@@ -0,0 +1,240 @@
|
||||
const app = getApp(); |
||||
import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改，node_modules会被忽略
|
||||
|
||||
Component({ |
||||
properties: { |
||||
params: { |
||||
type: Object, |
||||
observer(newVal, _olVal) { |
||||
if (Object.keys(newVal).length > 0) { |
||||
this.drawImage1(); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
data: { |
||||
imageUrl: app.globalData.imageUrl, |
||||
imgUrl: "", |
||||
width: "626", |
||||
height: "980", |
||||
imgheight: "", |
||||
bgImg: "", |
||||
elementsMp: [], |
||||
tableData: [ |
||||
{ |
||||
title: "说话", |
||||
key: "TalkingScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "间或有点含糊或有鼻音", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "经常含糊不清或者有鼻音，但是别人还能听懂", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "别人听不太懂", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "咀嚼", |
||||
key: "ChewScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "咀嚼固体食物会感到疲劳", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "咀嚼松软食物会感到疲劳", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "使用喂食管进食，如鼻胃管胃肠管等", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "吞咽", |
||||
key: "SwallowScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "偶尔会噎到", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "经常会噎到，因而需要改变饮食习惯", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "使用喂食管进食，如鼻胃管胃肠管等", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "呼吸", |
||||
key: "BreathScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "劳累后感到气促或呼吸不畅", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "静止时感到气促或呼吸不畅", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "依赖呼吸机", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "刷牙梳头能力受损", |
||||
key: "BrushTeethAndCombHairScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "需要多费些力气但是不需要停下来", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "需要停下来休息才能完成", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "无法自己完成", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "从椅子上起身能力受损", |
||||
key: "GetUpFromChairScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "轻度受损，有时需要用手帮忙", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "中度受损，总是需要用手帮忙", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "严重受损，需要他人帮助", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "复视/重影", |
||||
key: "DoubleVisionScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "有，但不是每天", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "每天，但不是持续一整天", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "持续有", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
title: "眼睑下垂", |
||||
key: "DroopyEyelidsScore", |
||||
list: [ |
||||
{ |
||||
id: "1", |
||||
title: "正常", |
||||
}, |
||||
{ |
||||
id: "2", |
||||
title: "有，但不是每天", |
||||
}, |
||||
{ |
||||
id: "3", |
||||
title: "每天，但不是持续一整天", |
||||
}, |
||||
{ |
||||
id: "4", |
||||
title: "持续有", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
lifetimes: { |
||||
attached() {}, |
||||
}, |
||||
methods: { |
||||
drawImage1() { |
||||
let self = this; |
||||
// destZoom: 10,
|
||||
this.drawImage1 = new Wxml2Canvas({ |
||||
obj: self, |
||||
width: this.data.width, // 宽， 以iphone6为基准，传具体数值，其它机型自动适配
|
||||
height: this.data.height, // 高
|
||||
element: "canvas1", |
||||
background: "#ffffff", |
||||
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,141 @@
@@ -0,0 +1,141 @@
|
||||
.canvas-box { |
||||
position: fixed; |
||||
left: 1000000rpx; |
||||
top: -1000000rpx; |
||||
} |
||||
.canvas-body { |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
background-color: #fff; |
||||
.detail { |
||||
width: 622rpx; |
||||
border: 1rpx solid rgba(0, 0, 0, 0.1); |
||||
background-color: rgba(0, 0, 0, 0.08); |
||||
.d-header { |
||||
display: flex; |
||||
height: 40rpx; |
||||
.none { |
||||
flex-shrink: 0; |
||||
width: 150rpx; |
||||
background-color: rgba(228, 228, 228, 1); |
||||
} |
||||
.bar { |
||||
flex: 1; |
||||
display: flex; |
||||
.num-normal { |
||||
width: 64rpx; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
color: #fff; |
||||
line-height: 40rpx; |
||||
} |
||||
.num { |
||||
flex: 1; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
color: #fff; |
||||
line-height: 40rpx; |
||||
} |
||||
} |
||||
} |
||||
.d-body { |
||||
display: flex; |
||||
.d-aside { |
||||
width: 28rpx; |
||||
flex-shrink: 0; |
||||
.da-item { |
||||
text-align: center; |
||||
font-size: 18rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
line-height: 1; |
||||
background-color: #e5e5e5; |
||||
} |
||||
.da-item1 { |
||||
padding-top: 150rpx; |
||||
display: flex; |
||||
height: 200rpx; |
||||
margin-bottom: 1px; |
||||
} |
||||
.da-item2 { |
||||
padding-top: 43rpx; |
||||
height: 75rpx; |
||||
margin-bottom: 1px; |
||||
} |
||||
.da-item3 { |
||||
padding-top: 100rpx; |
||||
height: 135rpx; |
||||
margin-bottom: 1px; |
||||
} |
||||
.da-item4 { |
||||
padding-top: 100rpx; |
||||
height: 135rpx; |
||||
} |
||||
} |
||||
.d-container { |
||||
flex: 1; |
||||
.dc-row { |
||||
display: flex; |
||||
height: 117rpx; |
||||
line-height: 24rpx; |
||||
margin-bottom: 1px; |
||||
.dc-title { |
||||
padding: 12rpx 12rpx 0; |
||||
width: 100rpx; |
||||
font-size: 18rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
} |
||||
.dc-sub-title { |
||||
width: 64rpx; |
||||
text-align: center; |
||||
font-size: 18rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
padding: 12rpx 0; |
||||
margin-left: 1px; |
||||
} |
||||
.dc-col { |
||||
margin-left: 1px; |
||||
padding: 12rpx; |
||||
flex: 1; |
||||
font-size: 18rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
} |
||||
.active { |
||||
color: #fff !important; |
||||
background-color: rgba(207, 83, 117, 1) !important; |
||||
} |
||||
} |
||||
.dc-row:nth-of-type(2n-1) { |
||||
.dc-title { |
||||
background-color: #f6f6f6; |
||||
} |
||||
.dc-sub-title { |
||||
background-color: #f6f6f6; |
||||
} |
||||
.dc-col { |
||||
background-color: #f6f6f6; |
||||
} |
||||
} |
||||
.dc-row:nth-of-type(2n-2) { |
||||
.dc-title { |
||||
background-color: #fff; |
||||
} |
||||
.dc-sub-title { |
||||
background-color: #fff; |
||||
} |
||||
.dc-col { |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.canvas-bill { |
||||
position: fixed; |
||||
width: 750rpx; |
||||
left: 1000000rpx; |
||||
top: -1000000rpx; |
||||
visibility: hidden; |
||||
} |
||||
@ -0,0 +1,55 @@
@@ -0,0 +1,55 @@
|
||||
<view id="canvas-bill-body-mp" class="canvas-box" style="width: 750rpx"> |
||||
<view class="canvas-body"> |
||||
<view class="detail draw_canvas" data-type="text"> |
||||
<view class="d-header draw_canvas" data-type="text"> |
||||
<view class="none draw_canvas" data-type="text"></view> |
||||
<view |
||||
class="bar draw_canvas" |
||||
style="background: url({{imageUrl}}/1/adl-scurt.png?t={{Timestamp}}) no-repeat center / 100% 100% ;" |
||||
data-type="background-image" |
||||
> |
||||
<view class="num-normal draw_canvas" data-type="text" data-text="0分">0分</view> |
||||
<view class="num draw_canvas" data-type="text" data-text="1分">1分</view> |
||||
<view class="num draw_canvas" data-type="text" data-text="2分">2分</view> |
||||
<view class="num draw_canvas" data-type="text" data-text="3分">3分</view> |
||||
</view> |
||||
</view> |
||||
<view class="d-body draw_canvas" data-type="text"> |
||||
<view class="d-aside draw_canvas" data-type="text"> |
||||
<view class="da-item da-item1 draw_canvas" data-type="text" data-text="延髓">延髓</view> |
||||
<view class="da-item da-item2 draw_canvas" data-type="text" data-text="呼吸">呼吸</view> |
||||
<view class="da-item da-item3 draw_canvas" data-type="text" data-text="四肢">四肢</view> |
||||
<view class="da-item da-item4 draw_canvas" data-type="text" data-text="眼肌">眼肌</view> |
||||
</view> |
||||
<view class="d-container draw_canvas" data-type="text"> |
||||
<view class="dc-row draw_canvas" wx:for="{{tableData}}" wx:key="index" data-type="text"> |
||||
<view class="dc-title draw_canvas" data-type="text" data-text="{{item.title}}">{{item.title}}</view> |
||||
<block wx:for="{{item.list}}" wx:for-item="lItem" wx:for-index="lIndex" wx:key="lIndex"> |
||||
<view |
||||
class="{{lIndex==0 ? 'dc-sub-title' :'dc-col'}} {{params[item.key] == lIndex && 'active'}} draw_canvas" |
||||
data-type="text" |
||||
data-text="{{lItem.title}}" |
||||
> |
||||
{{lItem.title}} |
||||
</view> |
||||
</block> |
||||
</view> |
||||
</view> |
||||
</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 && false}}" |
||||
src="{{imgUrl}}" |
||||
mode="aspectFit" |
||||
style="height: {{ height }}rpx; width: {{ width }}rpx;" |
||||
></image> |
||||
<!-- show-menu-by-longpress --> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,158 @@
@@ -0,0 +1,158 @@
|
||||
<template> |
||||
<!-- 音频播放器组件 --> |
||||
<view v-if="url" class="flex justify-between align-center audio"> |
||||
<view class="mr-3" @click="start(audioId)"> |
||||
<image :src="startPic" class="icon" v-show="!status"></image> |
||||
<image :src="endPic" class="icon" v-show="status"></image> |
||||
</view> |
||||
<view class="flex-1"> |
||||
<slider |
||||
@change="changeAudio" |
||||
:activeColor="activeColor" |
||||
:min="0" |
||||
:max="duration.toFixed(0)" |
||||
:value="currentTime.toFixed(0)" |
||||
:step="0.1" |
||||
></slider> |
||||
</view> |
||||
<view class="ml-3">{{ getTime(Math.round(currentTime)) }}</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
context: null, |
||||
currentTime: 0, |
||||
duration: 100, |
||||
status: false, |
||||
}; |
||||
}, |
||||
props: { |
||||
url: String, |
||||
activeColor: { |
||||
type: String, |
||||
default: "#0E7EFC", |
||||
}, |
||||
startPic: String, |
||||
endPic: String, |
||||
audioId: [String, Number], |
||||
}, |
||||
created() { |
||||
this.context = uni.createInnerAudioContext(); |
||||
this.context.src = this.url; |
||||
this.onTimeUpdate(); |
||||
this.onCanplay(); |
||||
this.onEnded(); |
||||
uni.$on("stop", (id) => { |
||||
if (id && id != this.audioId) { |
||||
this.context.stop(); |
||||
this.status = false; |
||||
} else if (!id) { |
||||
this.context.stop(); |
||||
this.status = false; |
||||
} |
||||
}); |
||||
}, |
||||
methods: { |
||||
start(id) { |
||||
//点击播放 |
||||
let audioId = id; |
||||
if (this.status) { |
||||
this.context.pause(); |
||||
this.status = !this.status; |
||||
} else { |
||||
uni.$emit("stop", id); |
||||
this.context.play(); |
||||
this.status = !this.status; |
||||
} |
||||
}, |
||||
onCanplay() { |
||||
//进入可播放状态 |
||||
this.context.onCanplay(() => { |
||||
this.context.duration; |
||||
setTimeout(() => { |
||||
this.duration = this.context.duration; |
||||
}, 1000); |
||||
}); |
||||
}, |
||||
onTimeUpdate() { |
||||
//音频播放进度 |
||||
this.context.onTimeUpdate(() => { |
||||
if (!Number.isFinite(this.context.duration)) { |
||||
this.duration = this.context.currentTime + 10; |
||||
this.currentTime = this.context.currentTime; |
||||
} else { |
||||
this.duration = this.context.duration; |
||||
this.currentTime = this.context.currentTime; |
||||
} |
||||
}); |
||||
}, |
||||
onEnded() { |
||||
//播放结束 |
||||
this.context.onEnded(() => { |
||||
this.status = false; |
||||
this.currentTime = 0; |
||||
}); |
||||
}, |
||||
changeAudio(e) { |
||||
let paused = this.context.paused; |
||||
this.context.pause(); |
||||
this.context.seek(e.detail.value); |
||||
if (!paused) { |
||||
this.context.play(); |
||||
} |
||||
}, |
||||
getTime(time) { |
||||
let m = parseInt(time / 60); |
||||
let s = time % 60; |
||||
return this.towNum(m) + ":" + this.towNum(s); |
||||
}, |
||||
towNum(num) { |
||||
if (num >= 10) { |
||||
return num; |
||||
} else { |
||||
return "0" + num; |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.audio { |
||||
background: #f4f4f4; |
||||
padding: 20rpx; |
||||
} |
||||
|
||||
.icon { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
} |
||||
|
||||
.flex { |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.justify-between { |
||||
justify-content: between; |
||||
} |
||||
|
||||
.align-center { |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex-1 { |
||||
flex: 1; |
||||
} |
||||
|
||||
.ml-3 { |
||||
margin-left: 30rpx; |
||||
} |
||||
|
||||
.mr-3 { |
||||
margin-right: 30rpx; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,176 @@
@@ -0,0 +1,176 @@
|
||||
const app = getApp(); |
||||
import dayjs from "dayjs"; |
||||
Component({ |
||||
behaviors: [], |
||||
properties: { |
||||
audio: { |
||||
type: Object, |
||||
observer(val) { |
||||
if (this.audioContext) { |
||||
const { play } = this.data; |
||||
if (play) { |
||||
this.audioContext.pause(); |
||||
this.setData({ |
||||
play: false, |
||||
progress: 0, |
||||
time: "00", |
||||
}); |
||||
} |
||||
this.audioContext.destroy(); |
||||
} |
||||
if (val) { |
||||
this.audioAddEventListener(val); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
data: { |
||||
Timestamp: app.globalData.Timestamp, |
||||
progress: 0, |
||||
time: "00", |
||||
duration: "00", |
||||
play: false, |
||||
loading: true, |
||||
|
||||
imageUrl: app.globalData.imageUrl, |
||||
progressimg: true, |
||||
}, |
||||
lifetimes: { |
||||
created() {}, |
||||
async attached() {}, |
||||
moved() {}, |
||||
detached() { |
||||
if (this.audioContext) { |
||||
const { play } = this.data; |
||||
if (play) { |
||||
this.audioContext.pause(); |
||||
} |
||||
this.audioContext.destroy(); |
||||
} |
||||
this.audioAddEventListener = null; |
||||
this.setData({ |
||||
play: false, |
||||
progress: 0, |
||||
time: "00", |
||||
}); |
||||
}, |
||||
}, |
||||
pageLifetimes: { |
||||
// 组件所在页面的生命周期函数
|
||||
show: function () {}, |
||||
hide: function () { |
||||
const { play } = this.data; |
||||
if (play) { |
||||
this.audioContext.pause(); |
||||
} |
||||
}, |
||||
resize: function () {}, |
||||
}, |
||||
methods: { |
||||
togglePlay() { |
||||
const { play, loading } = this.data; |
||||
if (loading) { |
||||
wx.showToast({ |
||||
title: "音频加载中", |
||||
icon: "none", |
||||
}); |
||||
return; |
||||
} |
||||
if (play) { |
||||
this.audioContext.pause(); |
||||
} else { |
||||
this.audioContext.play(); |
||||
} |
||||
}, |
||||
formatTime(time) { |
||||
let m = parseInt(time / 60); |
||||
let s = parseInt(time % 60); |
||||
return this.towNum(m) + ":" + this.towNum(s); |
||||
}, |
||||
towNum(num) { |
||||
if (num >= 10) { |
||||
return num; |
||||
} else { |
||||
return "0" + num; |
||||
} |
||||
}, |
||||
audioAddEventListener(val) { |
||||
const that = this; |
||||
this.setData({ |
||||
duration: this.formatTime(val.size), |
||||
}); |
||||
that.audioContext = wx.createInnerAudioContext(); |
||||
that.audioContext.src = val.url; |
||||
that.setData({ |
||||
loading: false, |
||||
}); |
||||
that.audioContext.onError(({ errCode, ...reset }) => { |
||||
console.log("reset: ", reset); |
||||
console.log("errCode: ", errCode); |
||||
if (errCode === 10004 || errCode == 10001 || errCode == -1) { |
||||
that.audioContext.destroy(); |
||||
that.setData({ |
||||
loading: true, |
||||
}); |
||||
setTimeout(() => { |
||||
that.audioAddEventListener(val); |
||||
}, 300); |
||||
} |
||||
}); |
||||
that.audioContext.onPlay(() => { |
||||
that.setData({ |
||||
play: true, |
||||
}); |
||||
}); |
||||
that.audioContext.onPause(() => { |
||||
console.log(1111111); |
||||
that.setData({ |
||||
play: false, |
||||
}); |
||||
}); |
||||
that.audioContext.onEnded(() => { |
||||
that.audioContext.seek(0); |
||||
that.setData({ |
||||
play: false, |
||||
progress: 0, |
||||
time: "00", |
||||
}); |
||||
}); |
||||
that.audioContext.onTimeUpdate(() => { |
||||
const duration = that.audioContext.duration || 0; |
||||
const currentTime = that.audioContext.currentTime || 0; |
||||
const progress = (currentTime / duration) * 100; |
||||
if (duration == Infinity) { |
||||
return; |
||||
} |
||||
that.setData({ |
||||
play: true, |
||||
duration: that.formatTime(duration), |
||||
time: that.formatTime(currentTime), |
||||
}); |
||||
if (that.data.progressimg) { |
||||
this.setData({ |
||||
progress: progress, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
handleAuthChangeimg() { |
||||
console.log(11111); |
||||
this.setData({ |
||||
progressimg: false, |
||||
}); |
||||
}, |
||||
handleAuthChange(e) { |
||||
console.log(22222222222); |
||||
let { duration } = this.data; |
||||
const secods = this.audioContext.duration || duration.split(":")[0] * 60 + duration.split(":")[1] * 1; |
||||
const progress = e.detail.value; |
||||
let seek = ((secods / 100) * progress).toFixed(3) * 1; |
||||
this.audioContext.seek(seek); |
||||
this.setData({ |
||||
progressimg: true, |
||||
}); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"navigationBarTitleText": "", |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,54 @@
@@ -0,0 +1,54 @@
|
||||
.audio { |
||||
width: 100%; |
||||
height: 86rpx; |
||||
position: relative; |
||||
.audio-bg { |
||||
margin: 0 120rpx 0 80rpx; |
||||
height: 100%; |
||||
width: calc(100% - 200rpx); |
||||
} |
||||
.card-auth { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
padding: 14rpx 26rpx 12rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
background: rgba(174, 182, 205, 0.1); |
||||
border-radius: 50rpx 50rpx 50rpx 50rpx; |
||||
border: 1rpx solid rgba(181, 205, 255, 0.1); |
||||
.icon { |
||||
width: 60rpx; |
||||
height: 60rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
.center { |
||||
position: relative; |
||||
width: 100%; |
||||
margin: 0 30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
.progress-bg { |
||||
width: 100%; |
||||
height: 60rpx; |
||||
} |
||||
|
||||
.progress { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
width: 100%; |
||||
margin: 0; |
||||
} |
||||
} |
||||
.time { |
||||
flex-shrink: 0; |
||||
font-size: 24rpx; |
||||
color: #e04775; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
<view class="audio"> |
||||
<view class="card-auth"> |
||||
<image |
||||
class="icon extend-via-pseudo-elem" |
||||
src="{{imageUrl}}1/audio-{{play?'pause':'play'}}.png?t={{Timestamp}}" |
||||
catchtap="togglePlay" |
||||
></image> |
||||
<view |
||||
class="center" |
||||
> |
||||
<image class="progress-bg" mode="aspectFill" src="https://m.zd.hbraas.com/zd/1/firee-audio-bg.png?t=1689998782161"></image> |
||||
<slider |
||||
active |
||||
activeColor="#E04775" |
||||
backgroundColor="#E04775" |
||||
bind:changing="handleAuthChangeimg" |
||||
bindchange="handleAuthChange" |
||||
block-color="#E04775" |
||||
block-size="12" |
||||
class="progress" |
||||
value="{{progress}}" |
||||
/> |
||||
</view> |
||||
<text class="time" wx:if="{{duration}}">{{duration}}</text> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-nav-bar": "@vant/weapp/nav-bar/index", |
||||
"van-icon": "@vant/weapp/icon/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,24 @@
@@ -0,0 +1,24 @@
|
||||
.navbar { |
||||
padding: 0 20rpx 0 0; |
||||
display: flex; |
||||
align-items: center; |
||||
.back-icon { |
||||
margin-right: 40rpx; |
||||
} |
||||
.num { |
||||
width: 64rpx; |
||||
height: 64rpx; |
||||
border-radius: 50%; |
||||
border: 3rpx solid #e04876; |
||||
text-align: center; |
||||
line-height: 64rpx; |
||||
margin-right: 24rpx; |
||||
font-size: 40rpx; |
||||
color: #e04876; |
||||
font-weight: bold; |
||||
&.active { |
||||
background-color: #e04876; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
const app = getApp<IAppOption>(); |
||||
|
||||
Component({ |
||||
properties: { |
||||
num: { |
||||
type: Number, |
||||
value: 0, |
||||
}, |
||||
back: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
}, |
||||
data: { |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
}, |
||||
methods: { |
||||
handleBack() { |
||||
this.triggerEvent("back"); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
<van-nav-bar title="" custom-style="background:transparent;"> |
||||
<view class="navbar" slot="left"> |
||||
<van-icon wx:if="{{back}}" class="back-icon" name="arrow-left" color="#333333" size="22" bind:tap="handleBack" /> |
||||
<view class="num {{num>=1 && 'active'}}">1</view> |
||||
<view class="num {{num>=2 && 'active'}}">2</view> |
||||
</view> |
||||
</van-nav-bar> |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-nav-bar": "@vant/weapp/nav-bar/index", |
||||
"van-icon": "@vant/weapp/icon/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
.navbar { |
||||
padding: 0 20rpx 0 0; |
||||
display: flex; |
||||
align-items: center; |
||||
.back-icon { |
||||
margin-right: 40rpx; |
||||
} |
||||
.nav-img { |
||||
width: 356rpx; |
||||
height: 46rpx; |
||||
} |
||||
.drug-nav-img { |
||||
width: 199rpx; |
||||
height: 36rpx; |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
const app = getApp<IAppOption>(); |
||||
|
||||
Component({ |
||||
properties: { |
||||
back: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
drug: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
}, |
||||
data: { |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
}, |
||||
methods: { |
||||
handleBack() { |
||||
wx.navigateBack(); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
<van-nav-bar title="" custom-style="background:transparent;"> |
||||
<view class="navbar" slot="left"> |
||||
<van-icon wx:if="{{back}}" class="back-icon" name="arrow-left" color="#333333" size="22" bind:tap="handleBack" /> |
||||
<image wx:if="{{drug}}" class="drug-nav-img" src="{{imageUrl}}1.5/page-title.png?t={{Timestamp}}"></image> |
||||
<image wx:else class="nav-img" src="{{imageUrl}}1/page-title.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</van-nav-bar> |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-popup": "@vant/weapp/popup/index", |
||||
"van-icon": "@vant/weapp/icon/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,128 @@
@@ -0,0 +1,128 @@
|
||||
.aside-share { |
||||
position: fixed; |
||||
right: 22rpx; |
||||
bottom: 120rpx; |
||||
width: 136rpx; |
||||
height: 136rpx; |
||||
} |
||||
|
||||
.popup { |
||||
position: relative; |
||||
background-color: #fff; |
||||
.close { |
||||
position: absolute; |
||||
top: 52rpx; |
||||
right: 32rpx; |
||||
color: rgba(72, 72, 72, 1); |
||||
font-size: 34rpx; |
||||
} |
||||
.p-header { |
||||
padding: 46rpx 30rpx 0; |
||||
.title { |
||||
text-align: center; |
||||
font-size: 36rpx; |
||||
color: rgba(72, 72, 72, 1); |
||||
font-weight: bold; |
||||
} |
||||
.tip { |
||||
text-align: center; |
||||
margin-top: 16rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(72, 72, 72, 1); |
||||
} |
||||
.area { |
||||
margin-top: 48rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 14rpx; |
||||
.item { |
||||
flex: 1; |
||||
padding: 18rpx 30rpx; |
||||
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.11); |
||||
border-radius: 12rpx 12rpx 12rpx 12rpx; |
||||
border: 2rpx solid #e04775; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.content { |
||||
font-size: 32rpx; |
||||
color: rgba(72, 72, 72, 1); |
||||
max-width: 5em; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.icon { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
} |
||||
.picker { |
||||
flex: 1; |
||||
} |
||||
.btn { |
||||
width: 126rpx; |
||||
height: 76rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: #e04775; |
||||
border-radius: 12rpx 12rpx 12rpx 12rpx; |
||||
} |
||||
} |
||||
} |
||||
.select { |
||||
margin-top: 44rpx; |
||||
padding: 0 30rpx 0; |
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fit, 68rpx); |
||||
gap: 26rpx 20rpx; |
||||
.s-item { |
||||
width: 68rpx; |
||||
height: 68rpx; |
||||
text-align: center; |
||||
line-height: 68rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(158, 158, 158, 1); |
||||
border-radius: 50%; |
||||
background: #f7f8f9; |
||||
&.active { |
||||
color: #fff; |
||||
background-color: rgba(224, 71, 117, 1); |
||||
} |
||||
} |
||||
} |
||||
.scroll { |
||||
padding: 0 30rpx; |
||||
height: 45vh; |
||||
box-sizing: border-box; |
||||
.item { |
||||
padding: 32rpx 0; |
||||
font-size: 28rpx; |
||||
color: rgba(72, 72, 72, 1); |
||||
border-bottom: 2px solid #fbfbfb; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.word { |
||||
margin-right: 24rpx; |
||||
display: inline-block; |
||||
width: 1em; |
||||
color: rgba(158, 158, 158, 1); |
||||
} |
||||
.icon { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
} |
||||
&.active { |
||||
color: rgba(224, 71, 117, 1); |
||||
.word { |
||||
color: rgba(224, 71, 117, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,312 @@
@@ -0,0 +1,312 @@
|
||||
const app = getApp<IAppOption>() |
||||
|
||||
Component({ |
||||
properties: { |
||||
// 省份名称
|
||||
pname: { |
||||
type: String, |
||||
value: '', |
||||
}, |
||||
// 省份ID
|
||||
pid: { |
||||
type: String, |
||||
value: '', |
||||
}, |
||||
// 城市名称
|
||||
cname: { |
||||
type: String, |
||||
value: '', |
||||
}, |
||||
// 城市ID
|
||||
cid: { |
||||
type: String, |
||||
value: '', |
||||
}, |
||||
}, |
||||
observers: { |
||||
show(newVal: boolean) { |
||||
this.triggerEvent('show', newVal) |
||||
}, |
||||
}, |
||||
data: { |
||||
show: false, |
||||
word: '', |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
|
||||
active: 0, |
||||
ProvinceName: '', |
||||
ProvinceId: '', |
||||
CityName: '', |
||||
CityId: '', |
||||
proList: { |
||||
A: [ |
||||
{ |
||||
name: '安徽省', |
||||
code: '340000', |
||||
}, |
||||
{ |
||||
name: '澳门特别行政区', |
||||
code: '820000', |
||||
}, |
||||
], |
||||
B: [ |
||||
{ |
||||
name: '北京市', |
||||
code: '110000', |
||||
}, |
||||
], |
||||
C: [ |
||||
{ |
||||
name: '重庆市', |
||||
code: '500000', |
||||
}, |
||||
], |
||||
F: [ |
||||
{ |
||||
name: '福建省', |
||||
code: '350000', |
||||
}, |
||||
], |
||||
G: [ |
||||
{ |
||||
name: '甘肃省', |
||||
code: '620000', |
||||
}, |
||||
{ |
||||
name: '广东省', |
||||
code: '440000', |
||||
}, |
||||
{ |
||||
name: '广西壮族自治区', |
||||
code: '450000', |
||||
}, |
||||
{ |
||||
name: '贵州省', |
||||
code: '520000', |
||||
}, |
||||
], |
||||
H: [ |
||||
{ |
||||
name: '海南省', |
||||
code: '460000', |
||||
}, |
||||
{ |
||||
name: '河北省', |
||||
code: '130000', |
||||
}, |
||||
{ |
||||
name: '河南省', |
||||
code: '410000', |
||||
}, |
||||
{ |
||||
name: '黑龙江省', |
||||
code: '230000', |
||||
}, |
||||
{ |
||||
name: '湖北省', |
||||
code: '420000', |
||||
}, |
||||
{ |
||||
name: '湖南省', |
||||
code: '430000', |
||||
}, |
||||
], |
||||
J: [ |
||||
{ |
||||
name: '吉林省', |
||||
code: '220000', |
||||
}, |
||||
{ |
||||
name: '江苏省', |
||||
code: '320000', |
||||
}, |
||||
{ |
||||
name: '江西省', |
||||
code: '360000', |
||||
}, |
||||
], |
||||
L: [ |
||||
{ |
||||
name: '辽宁省', |
||||
code: '210000', |
||||
}, |
||||
], |
||||
N: [ |
||||
{ |
||||
name: '宁夏回族自治区', |
||||
code: '640000', |
||||
}, |
||||
{ |
||||
name: '内蒙古自治区', |
||||
code: '150000', |
||||
}, |
||||
], |
||||
Q: [ |
||||
{ |
||||
name: '青海省', |
||||
code: '630000', |
||||
}, |
||||
], |
||||
S: [ |
||||
{ |
||||
name: '山东省', |
||||
code: '370000', |
||||
}, |
||||
{ |
||||
name: '山西省', |
||||
code: '140000', |
||||
}, |
||||
{ |
||||
name: '陕西省', |
||||
code: '610000', |
||||
}, |
||||
{ |
||||
name: '上海市', |
||||
code: '310000', |
||||
}, |
||||
{ |
||||
name: '四川省', |
||||
code: '510000', |
||||
}, |
||||
], |
||||
T: [ |
||||
{ |
||||
name: '天津市', |
||||
code: '120000', |
||||
}, |
||||
{ |
||||
name: '台湾省', |
||||
code: '710000', |
||||
}, |
||||
], |
||||
X: [ |
||||
{ |
||||
name: '西藏自治区', |
||||
code: '540000', |
||||
}, |
||||
{ |
||||
name: '新疆维吾尔自治区', |
||||
code: '650000', |
||||
}, |
||||
{ |
||||
name: '香港特别行政区', |
||||
code: '810000', |
||||
}, |
||||
], |
||||
Y: [ |
||||
{ |
||||
name: '云南省', |
||||
code: '530000', |
||||
}, |
||||
], |
||||
Z: [ |
||||
{ |
||||
name: '浙江省', |
||||
code: '330000', |
||||
}, |
||||
], |
||||
}, |
||||
area: [] as any, |
||||
range: [], |
||||
|
||||
scrollIntoView0: '', |
||||
scrollIntoView1: '', |
||||
}, |
||||
methods: { |
||||
handleShow() { |
||||
this.setData({ |
||||
show: true, |
||||
ProvinceName: this.data.pname || '', |
||||
ProvinceId: this.data.pid || '', |
||||
CityName: this.data.cname || '', |
||||
CityId: this.data.cid || '', |
||||
|
||||
scrollIntoView0: this.data.pid || '', |
||||
scrollIntoView1: this.data.cid || '', |
||||
}) |
||||
this.getArea() |
||||
}, |
||||
getArea() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '/js/area.json', |
||||
isJSON: true, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
area: res, |
||||
}) |
||||
this.getRangeList() |
||||
}) |
||||
}, |
||||
handleItem(e: any) { |
||||
const { code, name } = e.currentTarget.dataset |
||||
this.setData({ |
||||
ProvinceId: code, |
||||
ProvinceName: name, |
||||
CityId: '', |
||||
CityName: '', |
||||
}) |
||||
this.getRangeList() |
||||
}, |
||||
handleChangeCity(e: any) { |
||||
const { code, name } = e.currentTarget.dataset |
||||
this.setData({ |
||||
CityId: code, |
||||
CityName: name, |
||||
}) |
||||
}, |
||||
handleShare() { |
||||
this.setData({ |
||||
show: false, |
||||
}) |
||||
this.triggerEvent('ok', { |
||||
ProvinceName: this.data.ProvinceName, |
||||
ProvinceId: this.data.ProvinceId, |
||||
CityName: this.data.CityName, |
||||
CityId: this.data.CityId, |
||||
}) |
||||
}, |
||||
handleSelect(e) { |
||||
const { id } = e.currentTarget.dataset |
||||
this.setData({ |
||||
word: id, |
||||
scrollIntoView0: id, |
||||
}) |
||||
}, |
||||
getRangeList() { |
||||
const { area, ProvinceId } = this.data |
||||
if (!ProvinceId) return |
||||
const range = area.filter((item: any) => item.value == ProvinceId)[0].children |
||||
this.setData({ |
||||
range, |
||||
active: 1, |
||||
scrollIntoView0: '', |
||||
scrollIntoView1: `id${this.data.CityId}`, |
||||
}) |
||||
}, |
||||
handleProvince() { |
||||
this.setData({ |
||||
active: 0, |
||||
scrollIntoView0: this.data.word || `id${this.data.ProvinceId}`, |
||||
scrollIntoView1: '', |
||||
}) |
||||
}, |
||||
handleCity() { |
||||
const { ProvinceId } = this.data |
||||
if (!ProvinceId) { |
||||
wx.showToast({ |
||||
title: '请先选择省份', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
this.getRangeList() |
||||
}, |
||||
handleClose() { |
||||
this.setData({ |
||||
show: false, |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
<slot bind:tap="handleShow"></slot> |
||||
|
||||
<van-popup show="{{ show }}" position="bottom" round close-on-click-overlay bind:click-overlay="handleClose"> |
||||
<view class="popup"> |
||||
<van-icon catch:tap="handleClose" class="close" name="cross" /> |
||||
<view class="p-header"> |
||||
<view class="title">选择省份和地区</view> |
||||
<!-- <view class="tip">对方打开后自动定位此地区</view> --> |
||||
<view class="area"> |
||||
<view class="item" bind:tap="handleProvince"> |
||||
<view class="content">{{ProvinceName || '请选择省份'}}</view> |
||||
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
<view class="item" bind:tap="handleCity"> |
||||
<view class="content">{{CityName || '请选择城市'}}</view> |
||||
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
<view class="btn" bind:tap="handleShare">确定</view> |
||||
</view> |
||||
</view> |
||||
<block wx:if="{{active===1}}"> |
||||
<scroll-view |
||||
class="scroll" |
||||
scroll-y |
||||
scroll-with-animation |
||||
scroll-into-view="{{scrollIntoView1}}" |
||||
show-scrollbar="{{false}}" |
||||
> |
||||
<view |
||||
class="item {{item.value === CityId && 'active'}}" |
||||
id="{{'id'+item.value}}" |
||||
wx:for="{{range}}" |
||||
wx:key="index" |
||||
bind:tap="handleChangeCity" |
||||
data-code="{{item.value}}" |
||||
data-name="{{item.label}}" |
||||
> |
||||
<view class="left">{{item.label}}</view> |
||||
<image wx:if="{{item.value === CityId}}" class="icon" src="{{imageUrl}}icon7.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</scroll-view> |
||||
</block> |
||||
<block wx:else> |
||||
<view class="select"> |
||||
<view |
||||
class="s-item {{word===index && 'active'}}" |
||||
wx:for="{{proList}}" |
||||
wx:key="index" |
||||
bind:tap="handleSelect" |
||||
data-id="{{index}}" |
||||
> |
||||
{{index}} |
||||
</view> |
||||
</view> |
||||
<scroll-view |
||||
class="scroll" |
||||
scroll-y |
||||
scroll-into-view="{{scrollIntoView0}}" |
||||
scroll-with-animation |
||||
show-scrollbar="{{false}}" |
||||
> |
||||
<block wx:for="{{proList}}" wx:for-item="list" wx:for-index="key" wx:key="key"> |
||||
<block wx:for="{{list}}" wx:key="index"> |
||||
<view wx:if="{{index==0}}" id="{{key}}"></view> |
||||
<view |
||||
class="item {{item.code=== ProvinceId && 'active'}}" |
||||
id="{{'id'+item.code}}" |
||||
bind:tap="handleItem" |
||||
data-code="{{item.code}}" |
||||
data-name="{{item.name}}" |
||||
> |
||||
<view class="left"> |
||||
<text class="word">{{index===0 ? key : ''}}</text> |
||||
{{item.name}} |
||||
</view> |
||||
<image |
||||
wx:if="{{item.code=== ProvinceId}}" |
||||
class="icon" |
||||
src="{{imageUrl}}icon7.png?t={{Timestamp}}" |
||||
></image> |
||||
</view> |
||||
</block> |
||||
</block> |
||||
</scroll-view> |
||||
</block> |
||||
</view> |
||||
</van-popup> |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-popup": "@vant/weapp/popup/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,95 @@
@@ -0,0 +1,95 @@
|
||||
.from { |
||||
padding: 48rpx 40rpx; |
||||
width: 650rpx; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(349deg, #ffffff 0%, #e2f1f4 100%); |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
border: 2rpx solid #ffffff; |
||||
.title { |
||||
font-size: 32rpx; |
||||
color: #283031; |
||||
font-weight: bold; |
||||
} |
||||
.date { |
||||
margin-top: 24rpx; |
||||
padding: 14rpx 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-color: #f2f4f5; |
||||
border-radius: 16rpx; |
||||
|
||||
.conetent { |
||||
font-size: 32rpx; |
||||
color: #283031; |
||||
} |
||||
.tril { |
||||
width: 0; |
||||
height: 0; |
||||
border-style: solid; |
||||
border-width: 10rpx 10rpx 0 10rpx; |
||||
border-color: #aeb3b4 transparent transparent transparent; |
||||
} |
||||
} |
||||
.select-title { |
||||
margin-top: 48rpx; |
||||
font-size: 32rpx; |
||||
color: #283031; |
||||
font-weight: bold; |
||||
.sub { |
||||
font-weight: normal; |
||||
} |
||||
} |
||||
.list { |
||||
margin-top: 26rpx; |
||||
max-height: 55vh; |
||||
overflow-y: auto; |
||||
&::-webkit-scrollbar{ |
||||
display: none; |
||||
} |
||||
.item { |
||||
margin-bottom: 16rpx; |
||||
padding: 14rpx 32rpx; |
||||
font-size: 32rpx; |
||||
color: #283031; |
||||
line-height: 48rpx; |
||||
background-color: #f2f4f5; |
||||
border: 1px solid #f2f4f5; |
||||
border-radius: 16rpx; |
||||
&.active { |
||||
border-color: #67baca; |
||||
background-color: #e7f5f8; |
||||
color: #67baca; |
||||
} |
||||
} |
||||
} |
||||
.footer { |
||||
margin-top: 32rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
gap: 26rpx; |
||||
text-align: center; |
||||
.cancel { |
||||
flex: 1; |
||||
height: 80rpx; |
||||
font-size: 36rpx; |
||||
color: #67BACA; |
||||
line-height: 80rpx; |
||||
background: #ffffff; |
||||
border-radius: 98rpx 98rpx 98rpx 98rpx; |
||||
border: 2rpx solid #67baca; |
||||
} |
||||
|
||||
.submit { |
||||
flex: 1; |
||||
height: 80rpx; |
||||
font-size: 36rpx; |
||||
color: #FFFFFF; |
||||
line-height: 80rpx; |
||||
background: #67baca; |
||||
border-radius: 98rpx 98rpx 98rpx 98rpx; |
||||
border: 2rpx solid #67baca; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,139 @@
@@ -0,0 +1,139 @@
|
||||
import dayjs from 'dayjs' |
||||
|
||||
const _app = getApp<IAppOption>() |
||||
|
||||
// pages/story/a.ts
|
||||
Component({ |
||||
/** |
||||
* 组件的属性列表 |
||||
*/ |
||||
properties: { |
||||
show: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
params: { |
||||
type: Object, |
||||
value: undefined, |
||||
}, |
||||
}, |
||||
|
||||
observers: { |
||||
show() { |
||||
if (this.data.params) { |
||||
this.setData({ |
||||
...this.data.params, |
||||
}) |
||||
this.handleDateChange() |
||||
} else { |
||||
this.setData({ |
||||
visitDateName: '', |
||||
visitDate: '', |
||||
hormone: 2, |
||||
traditionalInhibitor: 2, |
||||
gammaGlobulin: 2, |
||||
plasmaExchange: 2, |
||||
bCellInhibitor: 2, |
||||
fcRnAntagonists: 2, |
||||
c5ComplementInhibitor: 2, |
||||
chineseMedicine: 2, |
||||
other: 2, |
||||
recordId: '', |
||||
}) |
||||
} |
||||
}, |
||||
}, |
||||
data: { |
||||
currentDate: dayjs().format('YYYY-MM-DD'), |
||||
|
||||
visitDateName: '', |
||||
visitDate: '', |
||||
hormone: 2, |
||||
traditionalInhibitor: 2, |
||||
gammaGlobulin: 2, |
||||
plasmaExchange: 2, |
||||
bCellInhibitor: 2, |
||||
fcRnAntagonists: 2, |
||||
c5ComplementInhibitor: 2, |
||||
chineseMedicine: 2, |
||||
other: 2, |
||||
recordId: '', |
||||
}, |
||||
|
||||
methods: { |
||||
handleDateChange() { |
||||
this.setData({ |
||||
visitDateName: dayjs(this.data.visitDate).format('YYYY年MM月DD日'), |
||||
}) |
||||
}, |
||||
handleSelect(e) { |
||||
const { name } = e.currentTarget.dataset |
||||
const value = this.data[name] |
||||
this.setData({ |
||||
[name]: value === 2 ? 1 : 2, |
||||
}) |
||||
}, |
||||
submit() { |
||||
const { visitDate, recordId } = this.data |
||||
const params = { |
||||
visitDate, |
||||
recordId, |
||||
} |
||||
if(!visitDate){ |
||||
wx.showToast({ |
||||
title: '请选择复诊日期', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
const selectKeys = [ |
||||
'hormone', |
||||
'traditionalInhibitor', |
||||
'gammaGlobulin', |
||||
'plasmaExchange', |
||||
'bCellInhibitor', |
||||
'fcRnAntagonists', |
||||
'c5ComplementInhibitor', |
||||
'chineseMedicine', |
||||
'other', |
||||
] |
||||
selectKeys.forEach((item) => { |
||||
params[item] = this.data[item] |
||||
}) |
||||
const onlySelect = selectKeys.some((item) => { |
||||
return this.data[item] === 1 |
||||
}) |
||||
if (!onlySelect) { |
||||
wx.showToast({ |
||||
title: '请至少选择一种复诊后的方案', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
wx.ajax({ |
||||
method: 'POST', |
||||
url: '?r=xd/re-visit/save-record', |
||||
data: params, |
||||
}).then(() => { |
||||
if (recordId) { |
||||
wx.showToast({ |
||||
icon: 'none', |
||||
title: '编辑成功', |
||||
}) |
||||
} else { |
||||
wx.showToast({ |
||||
icon: 'none', |
||||
title: '添加成功', |
||||
}) |
||||
} |
||||
this.handleCancel() |
||||
this.triggerEvent('refresh', params) |
||||
}) |
||||
}, |
||||
handleCancel() { |
||||
this.setData({ |
||||
show: false, |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,52 @@
@@ -0,0 +1,52 @@
|
||||
<van-popup custom-style="background: transparent;" round z-index="{{100000}}" show="{{ show }}"> |
||||
<view class="from"> |
||||
<view class="title">您上一次复诊时间？</view> |
||||
<picker mode="date" model:value="{{visitDate}}" end="{{currentDate}}" bind:change="handleDateChange"> |
||||
<view class="date"> |
||||
<view class="content">{{visitDateName||'请选择'}}</view> |
||||
<view class="tril"></view> |
||||
</view> |
||||
</picker> |
||||
<view class="select-title"> |
||||
您复诊后的方案是？ |
||||
<text class="sub">（多选）</text> |
||||
</view> |
||||
<view class="list"> |
||||
<view bind:tap="handleSelect" data-name="hormone" class="item {{hormone===1 && 'active'}}">1.激素</view> |
||||
<view |
||||
bind:tap="handleSelect" |
||||
data-name="traditionalInhibitor" |
||||
class="item {{traditionalInhibitor===1 && 'active'}}" |
||||
> |
||||
2.传统免疫抑制剂(如他克莫司、吗 替麦考酚酯等） |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="gammaGlobulin" class="item {{gammaGlobulin===1 && 'active'}}"> |
||||
3.静脉输注丙种球蛋白 |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="plasmaExchange" class="item {{plasmaExchange===1 && 'active'}}"> |
||||
4.血浆置换 |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="bCellInhibitor" class="item {{bCellInhibitor===1 && 'active'}}"> |
||||
5.B细胞抑制剂(如:利妥昔单抗、泰 它西普、伊奈利珠单抗) |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="fcRnAntagonists" class="item {{fcRnAntagonists===1 && 'active'}}"> |
||||
6.FcRn拮抗剂(如:艾加莫德) |
||||
</view> |
||||
<view |
||||
bind:tap="handleSelect" |
||||
data-name="c5ComplementInhibitor" |
||||
class="item {{c5ComplementInhibitor===1 && 'active'}}" |
||||
> |
||||
7.C5补体抑制剂(如:依库珠单抗) |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="chineseMedicine" class="item {{chineseMedicine===1 && 'active'}}"> |
||||
8.中药或中成药 |
||||
</view> |
||||
<view bind:tap="handleSelect" data-name="other" class="item {{other===1 && 'active'}}">9.其他</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="cancel" bind:tap="handleCancel">取消</view> |
||||
<view class="submit" bind:tap="submit">确定</view> |
||||
</view> |
||||
</view> |
||||
</van-popup> |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,204 @@
@@ -0,0 +1,204 @@
|
||||
const app = getApp(); |
||||
/** |
||||
* >=min && <=max |
||||
* @param min |
||||
* @param max |
||||
*/ |
||||
function getRandom(min, max) { |
||||
return min + Math.floor(Math.random() * (max - min + 1)); |
||||
} |
||||
Component({ |
||||
options: {}, |
||||
lifetimes: { |
||||
attached() { |
||||
const query = wx.createSelectorQuery().in(this); |
||||
query |
||||
.select("#thumsCanvas") |
||||
.fields({ node: true, size: true }) |
||||
.exec((res) => { |
||||
const canvas = res[0].node; |
||||
const context = canvas.getContext("2d"); |
||||
this.setData({ |
||||
context: context, |
||||
}); |
||||
|
||||
const dpr = wx.getSystemInfoSync().pixelRatio; |
||||
canvas.width = res[0].width * dpr; |
||||
canvas.height = res[0].height * dpr; |
||||
this.data.width = res[0].width * dpr; |
||||
this.data.height = res[0].height * dpr; |
||||
// context.fillStyle = "rgba(255, 255, 255, 0)";
|
||||
const images = [ |
||||
"star/icon1.png", |
||||
"star/icon2.png", |
||||
"star/icon3.png", |
||||
"star/icon4.png", |
||||
"star/icon5.png", |
||||
"star/icon6.png", |
||||
"star/icon7.png", |
||||
"star/icon8.png", |
||||
]; |
||||
const promiseAll = [] as Array<Promise<any>>; |
||||
images.forEach((src) => { |
||||
const p = new Promise(function (resolve) { |
||||
const img = canvas.createImage(); |
||||
img.onerror = img.onload = resolve.bind(null, img); |
||||
img.src = app.globalData.imageUrl + src; |
||||
}); |
||||
promiseAll.push(p); |
||||
}); |
||||
Promise.all(promiseAll).then((imgsList) => { |
||||
const imgsLists = imgsList.filter((d) => { |
||||
if (d && d.width > 0) return true; |
||||
return false; |
||||
}); |
||||
this.setData({ |
||||
imgsList: imgsLists, |
||||
}); |
||||
if (this.data.imgsList.length == 0) { |
||||
// logger.error("imgsList load all error");
|
||||
wx.showToast({ |
||||
icon: "none", |
||||
title: "imgsList load all error", |
||||
}); |
||||
return; |
||||
} |
||||
}); |
||||
}); |
||||
}, |
||||
}, |
||||
properties: {}, |
||||
data: { |
||||
imgsList: [] as WechatMiniprogram.ImageData[], |
||||
width: 0, |
||||
height: 0, |
||||
context: null as any, |
||||
scanning: false, |
||||
renderList: [], |
||||
scaleTime: 0.1, // 百分比
|
||||
}, |
||||
methods: { |
||||
handleTap() { |
||||
this.start(); |
||||
}, |
||||
createRender() { |
||||
if (this.data.imgsList.length == 0) return null; |
||||
const basicScale = [0.6, 0.9, 1.2][getRandom(0, 2)]; |
||||
|
||||
const getScale = (diffTime) => { |
||||
if (diffTime < this.data.scaleTime) { |
||||
return +(diffTime / this.data.scaleTime).toFixed(2) * basicScale; |
||||
} else { |
||||
return basicScale; |
||||
} |
||||
}; |
||||
const context = this.data.context; |
||||
// 随机读取一个图片来渲染
|
||||
const image: any = this.data.imgsList[getRandom(0, this.data.imgsList.length - 1)]; |
||||
const offset = 20; |
||||
const basicX = this.data.width / 2 + getRandom(-offset, offset); |
||||
const angle = getRandom(2, 10); |
||||
let ratio = getRandom(10, 30) * (getRandom(0, 1) ? 1 : -1); |
||||
const getTranslateX = (diffTime) => { |
||||
if (diffTime < this.data.scaleTime) { |
||||
// 放大期间，不进行摇摆位移
|
||||
return basicX; |
||||
} else { |
||||
return basicX + ratio * Math.sin(angle * (diffTime - this.data.scaleTime)); |
||||
} |
||||
}; |
||||
|
||||
const getTranslateY = (diffTime) => { |
||||
return image.height / 2 + (this.data.height - image.height / 2) * (1 - diffTime); |
||||
}; |
||||
|
||||
const fadeOutStage = getRandom(14, 18) / 100; |
||||
const getAlpha = (diffTime) => { |
||||
let left = 1 - +diffTime; |
||||
if (left > fadeOutStage) { |
||||
return 1; |
||||
} else { |
||||
return 1 - +((fadeOutStage - left) / fadeOutStage).toFixed(2); |
||||
} |
||||
}; |
||||
|
||||
return (diffTime) => { |
||||
// 差值满了，即结束了 0 ---》 1
|
||||
if (diffTime >= 1) return true; |
||||
context.save(); |
||||
const scale = getScale(diffTime); |
||||
// const rotate = getRotate();
|
||||
const translateX = getTranslateX(diffTime); |
||||
const translateY = getTranslateY(diffTime); |
||||
context.translate(translateX, translateY); |
||||
context.scale(scale, scale); |
||||
// context.rotate(rotate * Math.PI / 180);
|
||||
context.globalAlpha = getAlpha(diffTime); |
||||
context.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height); |
||||
context.restore(); |
||||
}; |
||||
}, |
||||
scan() { |
||||
this.data.context.clearRect(0, 0, this.data.width, this.data.height); |
||||
this.data.context.fillStyle = "rgba(255, 255, 255, 0)"; |
||||
this.data.context.fillRect(0, 0, 200, 400); |
||||
let index = 0; |
||||
let length = this.data.renderList.length; |
||||
if (length > 0) { |
||||
this.requestFrame(this.scan.bind(this)); |
||||
this.setData({ |
||||
scanning: true, |
||||
}); |
||||
} else { |
||||
this.setData({ |
||||
scanning: false, |
||||
}); |
||||
} |
||||
while (index < length) { |
||||
const child = this.data.renderList[index]; |
||||
if (!child || !child.render || child.render.call(null, (Date.now() - child.timestamp) / child.duration)) { |
||||
// 结束了，删除该动画
|
||||
this.setData({ |
||||
renderList: [...this.data.renderList].filter((_item, fIndex) => fIndex != index), |
||||
}); |
||||
length--; |
||||
} else { |
||||
// continue
|
||||
index++; |
||||
} |
||||
} |
||||
}, |
||||
start() { |
||||
const render = this.createRender(); |
||||
const duration = getRandom(1500, 3000); |
||||
this.setData({ |
||||
renderList: [ |
||||
...this.data.renderList, |
||||
{ |
||||
render, |
||||
duration, |
||||
timestamp: Date.now(), |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
if (!this.data.scanning) { |
||||
this.setData({ |
||||
scanning: true, |
||||
}); |
||||
|
||||
this.requestFrame(this.scan.bind(this)); |
||||
// this.scan.bind(this)();
|
||||
} |
||||
return this; |
||||
}, |
||||
requestFrame(cb) { |
||||
return ( |
||||
this.data.context.requestAnimationFrame || |
||||
(function (callback) { |
||||
setTimeout(callback, 1000 / 60); |
||||
})(cb) |
||||
); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
<canvas id="thumsCanvas" type="2d" width="200" height="400" style="width: 100px; height: 200px"></canvas> |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,62 @@
@@ -0,0 +1,62 @@
|
||||
.text-expansion { |
||||
display: flex; |
||||
&__text { |
||||
position: relative; |
||||
width: 100%; |
||||
font-size: 28rpx; |
||||
color: var(--color); |
||||
overflow: hidden; |
||||
line-height: 1.5; |
||||
max-height: 9em; |
||||
text-align: justify; |
||||
&::before { |
||||
content: ""; |
||||
float: right; |
||||
height: 100%; |
||||
margin-bottom: -40rpx; |
||||
} |
||||
&::after { |
||||
content: ""; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
position: absolute; |
||||
box-shadow: inset calc(120rpx - 100vw) calc(1.45em - 100vh) 0 0 #fff; |
||||
margin-left: -120rpx; |
||||
} |
||||
} |
||||
&__button { |
||||
position: relative; |
||||
font-size: 24rpx; |
||||
font-weight: bold; |
||||
float: right; |
||||
clear: both; |
||||
line-height: 42rpx; |
||||
&::before { |
||||
content: "..."; |
||||
margin-right: 8rpx; |
||||
} |
||||
&::after { |
||||
content: ""; |
||||
display: inline-block; |
||||
margin-bottom: 2rpx; |
||||
margin-left: 4rpx; |
||||
transition: transform 0.3s; |
||||
border-top: 10rpx solid var(--color); |
||||
border-left: 8rpx solid transparent; |
||||
border-right: 8rpx solid transparent; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.text-expansion__text--expand { |
||||
max-height: none; |
||||
&::after { |
||||
visibility: hidden; |
||||
} |
||||
.text-expansion__button::before { |
||||
visibility: hidden; |
||||
} |
||||
.text-expansion__button::after { |
||||
transform: rotate(180deg); |
||||
} |
||||
} |
||||
@ -0,0 +1,34 @@
@@ -0,0 +1,34 @@
|
||||
Component({ |
||||
properties: { |
||||
text: { |
||||
type: String, |
||||
value: '', |
||||
}, |
||||
expandText: { |
||||
type: String, |
||||
value: '展开', |
||||
}, |
||||
collapseText: { |
||||
type: String, |
||||
value: '收起', |
||||
}, |
||||
color: { |
||||
type: String, |
||||
value: '#000', |
||||
}, |
||||
expendColor: { |
||||
type: String, |
||||
value: '#e04775', |
||||
}, |
||||
}, |
||||
data: { |
||||
isExpand: false, |
||||
}, |
||||
methods: { |
||||
onClick() { |
||||
this.setData({ |
||||
isExpand: !this.data.isExpand, |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
<view class="text-expansion" wx:if="{{text.length}}"> |
||||
<view class="text-expansion__text {{ isExpand ? 'text-expansion__text--expand' : '' }}" style="--color:{{expendColor}}"> |
||||
<text bindtap="onClick" class="text-expansion__button">{{ isExpand ? collapseText : expandText }}</text> |
||||
<text style="color:{{color}}">{{ text }}</text> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,154 @@
@@ -0,0 +1,154 @@
|
||||
.movearea { |
||||
position: fixed; |
||||
right: 0; |
||||
top: 100rpx; |
||||
height: calc(100vh - 200rpx); |
||||
width: 0; |
||||
.moveview { |
||||
position: relative; |
||||
width: 0; |
||||
height: 0; |
||||
.move-container { |
||||
perspective: 1000px; |
||||
position: absolute; |
||||
left: -20rpx; |
||||
top: 50%; |
||||
width: 112rpx; |
||||
height: 112rpx; |
||||
transform: translate(-100%, -50%); |
||||
.aside-out { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
transition: 1.5s; |
||||
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); |
||||
transform-style: preserve-3d; |
||||
transform-origin: center; |
||||
.front { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
.progress { |
||||
width: inherit; |
||||
height: inherit; |
||||
background: conic-gradient(#e04775 var(--progress), #fff 0%); |
||||
border-radius: 50%; |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
box-shadow: |
||||
0rpx 8rpx 18rpx 0rpx rgba(0, 0, 0, 0.12), |
||||
-6rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.09); |
||||
.progress-wrpa { |
||||
position: absolute; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 92rpx; |
||||
height: 92rpx; |
||||
background-color: #fff; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.icon { |
||||
width: 56rpx; |
||||
height: 56rpx; |
||||
} |
||||
.content { |
||||
margin-top: -12rpx; |
||||
width: 68rpx; |
||||
height: 26rpx; |
||||
text-align: center; |
||||
line-height: 26rpx; |
||||
font-size: 20rpx; |
||||
color: #eaeded; |
||||
background: linear-gradient(180deg, #fddd39 0%, #f5ad1d 100%); |
||||
border-radius: 16rpx; |
||||
text-shadow: 0px 0px 6px #ba7000; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.back { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: darkseagreen; |
||||
transform: rotateY(180deg); |
||||
backface-visibility: hidden; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #fff; |
||||
border-radius: 50%; |
||||
// border: 7rpx solid #e04775; |
||||
.icon { |
||||
width: 56rpx; |
||||
height: 56rpx; |
||||
} |
||||
.sub-icon { |
||||
position: absolute; |
||||
top: 40rpx; |
||||
right: 16rpx; |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
} |
||||
.content { |
||||
margin-top: -12rpx; |
||||
width: 80rpx; |
||||
height: 26rpx; |
||||
text-align: center; |
||||
line-height: 26rpx; |
||||
font-size: 16rpx; |
||||
color: #eaeded; |
||||
background: linear-gradient(180deg, #fddd39 0%, #f5ad1d 100%); |
||||
border-radius: 16rpx; |
||||
text-shadow: 0px 0px 6px #ba7000; |
||||
} |
||||
} |
||||
&.perspective { |
||||
transform: rotateY(180deg); |
||||
.front { |
||||
.progress { |
||||
background: conic-gradient(#fff var(--progress), #fff 0%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.toast { |
||||
padding: 50rpx; |
||||
position: fixed; |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
background-color: rgba(0, 0, 0, 0.74); |
||||
border-radius: 32rpx; |
||||
max-width: 80vw; |
||||
.icon { |
||||
display: block; |
||||
margin: 0 auto; |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
} |
||||
.content { |
||||
margin-top: 24rpx; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
color: #ffffff; |
||||
.p { |
||||
white-space: nowrap; |
||||
} |
||||
.num { |
||||
color: #f5ad1d; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,101 @@
@@ -0,0 +1,101 @@
|
||||
const app = getApp<IAppOption>(); |
||||
|
||||
// pages/story/a.ts
|
||||
Component({ |
||||
/** |
||||
* 组件的属性列表 |
||||
*/ |
||||
properties: { |
||||
detailId: { |
||||
type: String, |
||||
value: "0", |
||||
}, |
||||
asideOut: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
asideType: { |
||||
type: String, |
||||
value: "", |
||||
}, |
||||
timeToast: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
timeToastType: { |
||||
type: String, |
||||
value: "", |
||||
}, |
||||
timeToastParams: { |
||||
type: Object, |
||||
value() { |
||||
return {}; |
||||
}, |
||||
}, |
||||
}, |
||||
observers: { |
||||
asideOut: function (asideOut) { |
||||
if (asideOut) { |
||||
setTimeout(() => { |
||||
this.countDown(); |
||||
}, 1000); |
||||
} |
||||
}, |
||||
}, |
||||
lifetimes: { |
||||
attached() { |
||||
let systemInfo = wx.getSystemInfoSync(); |
||||
this.setData({ |
||||
sliderTop: systemInfo.screenHeight - 250, |
||||
}); |
||||
}, |
||||
detached() { |
||||
if (this.timer) clearInterval(this.timer); |
||||
}, |
||||
}, |
||||
data: { |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
|
||||
rewardScore: 0, |
||||
|
||||
circleVal: 100, |
||||
centerVal: 9, |
||||
sliderTop: 450, |
||||
}, |
||||
methods: { |
||||
timer: null as any, |
||||
countDown() { |
||||
const that = this; |
||||
if (that.timer) return; |
||||
let circle = 100; |
||||
that.timer = setInterval(() => { |
||||
circle--; |
||||
that.setData({ |
||||
circleVal: circle, |
||||
centerVal: Math.floor(circle / 10), |
||||
}); |
||||
if (circle <= 0) { |
||||
clearInterval(that.timer); |
||||
this.handleAsideOut(); |
||||
} |
||||
}, 100); |
||||
}, |
||||
handleAsideOut() { |
||||
wx.ajax({ |
||||
method: "POST", |
||||
url: "?r=xd/score/send-score", |
||||
data: { |
||||
Type: this.data.asideType, |
||||
Id: this.data.detailId, |
||||
}, |
||||
}).then((res) => { |
||||
if (!Array.isArray(res)) { |
||||
this.setData({ |
||||
rewardScore: res.rewardScore, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,117 @@
@@ -0,0 +1,117 @@
|
||||
<movable-area class="movearea" wx:if="{{asideOut}}"> |
||||
<movable-view class="moveview" direction="vertical" x="{{-800}}" y="{{sliderTop}}" bind:tap="handleSlider"> |
||||
<view class="move-container"> |
||||
<view class="aside-out {{rewardScore && 'perspective'}}" direction="horizontal" wx:if="{{asideOut}}"> |
||||
<view class="front"> |
||||
<view class="progress" style="--progress: {{100 - circleVal}}%;" data-progress="{{centerVal}}"> |
||||
<view class="progress-wrpa"> |
||||
<image class="icon" src="{{imageUrl}}2/money.png?t={{Timestamp}}"></image> |
||||
<view class="content">{{centerVal}}秒</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="back"> |
||||
<image class="icon" src="{{imageUrl}}2/money.png?t={{Timestamp}}"></image> |
||||
<image class="sub-icon" src="{{imageUrl}}nrdl/true.png?t={{Timestamp}}"></image> |
||||
<view class="content">+{{rewardScore}}能量</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</movable-view> |
||||
</movable-area> |
||||
|
||||
<view class="toast" wx:if="{{timeToast}}"> |
||||
<image class="icon" src="{{imageUrl}}2/money.png?t={{Timestamp}}"></image> |
||||
<view class="content" wx:if="{{timeToastType==2}}"> |
||||
<view class="p">与病友同行</view> |
||||
<view class="p">治病路上你不再孤独</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==3}}"> |
||||
<view class="p">点赞，也是一种力量！</view> |
||||
<view class="p">愿你的每一天都充满阳光</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==4}}"> |
||||
<view class="p">感谢您的分享</view> |
||||
<view class="p">让我们一起传递爱与温暖</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==7}}"> |
||||
<view class="p">今天又学到一个健康知识啦</view> |
||||
<view class="p">掌握健康，从学习知识开始获得</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==8}}"> |
||||
<view class="p">点赞，也是一种力量！</view> |
||||
<view class="p">愿你的每一天都充满阳光</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==9}}"> |
||||
<view class="p">感谢您的分享</view> |
||||
<view class="p">让我们一起传递知识与智慧</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==10}}"> |
||||
<view class="p">收藏知识，构建属于你的知识库</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==11}}"> |
||||
<view class="p">了解医保知识 享受健康保障</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==12 || timeToastType==13 || timeToastType==14 || timeToastType==15}}"> |
||||
<view class="p">今天又学到一个医保知识啦~</view> |
||||
<view class="p">学习医保知识，为您的治疗减负</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==17}}"> |
||||
<view class="p">使用就诊地图</view> |
||||
<view class="p">为您的健康保驾护航</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==18}}"> |
||||
<view class="p">今天又认识一个医院啦~</view> |
||||
<view class="p">了解更多医院，让您的治疗更方便</view> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="content" wx:if="{{timeToastType==19}}"> |
||||
<view class="p"> |
||||
<text class="num">+{{timeToastParams.rewardScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-popup": "@vant/weapp/popup/index", |
||||
"mp-html": "mp-html", |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"van-checkbox": "@vant/weapp/checkbox/index" |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,139 @@
@@ -0,0 +1,139 @@
|
||||
const app = getApp() |
||||
Component({ |
||||
properties: { |
||||
show: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
type: String, |
||||
params: { |
||||
type: Object, |
||||
value() { |
||||
return {} |
||||
}, |
||||
}, |
||||
}, |
||||
observers: { |
||||
show(val) { |
||||
if (val) { |
||||
app.getTheme().then((res) => { |
||||
this.setData({ |
||||
theme: res, |
||||
}) |
||||
}) |
||||
if (this.data.params.timeOut) { |
||||
let time = this.data.params.timeOut |
||||
const timerFunc = () => { |
||||
if (time <= 0) { |
||||
this.setData({ |
||||
timeOut: '', |
||||
}) |
||||
clearInterval(this.timer) |
||||
return |
||||
} |
||||
this.setData({ |
||||
timeOut: `${time}s`, |
||||
}) |
||||
--time |
||||
} |
||||
timerFunc() |
||||
this.timer = setInterval(timerFunc, 1000) |
||||
} |
||||
if (['storyLead', 'storyStar', 'storyShare'].includes(this.data.type)) { |
||||
this.getSettingInfo() |
||||
} |
||||
} |
||||
this.setData({ |
||||
userInfo: app.globalData.userInfo, |
||||
}) |
||||
}, |
||||
type(val) { |
||||
if (val === 'healthCare') { |
||||
this.getOpenPatientList() |
||||
} |
||||
}, |
||||
}, |
||||
data: { |
||||
imageUrl: '', |
||||
protocol: true, |
||||
timeOut: '', |
||||
settingsInfo: {}, |
||||
userInfo: {}, |
||||
openPatientList: {}, |
||||
}, |
||||
lifetimes: { |
||||
attached() { |
||||
this.setData({ |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
}) |
||||
}, |
||||
}, |
||||
methods: { |
||||
timer: null as any, |
||||
handleOk() { |
||||
if (this.data.timeOut) { |
||||
return |
||||
} |
||||
this.triggerEvent('ok', { protocol: this.data.protocol }) |
||||
}, |
||||
handleCancel(e = { currentTarget: { dataset: { key: '' } } }) { |
||||
const { key } = e.currentTarget.dataset |
||||
if (this.timer) { |
||||
clearInterval(this.timer) |
||||
this.setData({ |
||||
timeOut: '', |
||||
}) |
||||
} |
||||
this.triggerEvent('cancel', { key }) |
||||
}, |
||||
handleTaskCancel() { |
||||
this.triggerEvent('taskCancel') |
||||
}, |
||||
handleJump() { |
||||
this.triggerEvent('jump') |
||||
}, |
||||
handleDel() { |
||||
this.triggerEvent('del') |
||||
}, |
||||
routerTo(e) { |
||||
const { path } = e.currentTarget.dataset |
||||
wx.navigateTo({ |
||||
url: path, |
||||
}) |
||||
this.handleCancel() |
||||
}, |
||||
getSettingInfo() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/drugs/setting-info', |
||||
data: {}, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
settingsInfo: res, |
||||
}) |
||||
}) |
||||
}, |
||||
getOpenPatientList() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=xd/nrdl/open-patient-list', |
||||
data: {}, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
openPatientList: res, |
||||
}) |
||||
}) |
||||
}, |
||||
handleProtocolChange() { |
||||
this.setData({ |
||||
protocol: !this.data.protocol, |
||||
}) |
||||
}, |
||||
handleAdlQuestion() { |
||||
wx.navigateTo({ |
||||
url: '/pages/repositoryDetail/index?id=9', |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,756 @@
@@ -0,0 +1,756 @@
|
||||
<van-popup |
||||
bind:click-overlay="handleCancel" |
||||
custom-style="background: transparent;" |
||||
round |
||||
z-index="{{100000}}" |
||||
show="{{ show }}" |
||||
> |
||||
<view class="popup-class" wx:if="{{type=='videoComplate'}}"> |
||||
<image class="bg" src="{{imageUrl}}/popup-class-bg.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<image class="badge" src="{{imageUrl}}2/class.gif"></image> |
||||
<view class="op" wx:if="{{params.MemberDayScore}}"> |
||||
<view class="op-tip">训练完成</view> |
||||
<view class="title"> |
||||
完成会员日活动,已获取 |
||||
<text class="num">{{params.MemberDayRehabilitationScore}}</text> |
||||
倍能量 |
||||
</view> |
||||
<view class="price"> |
||||
已获取 |
||||
<text class="p-num">{{params.MemberDayScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<block wx:else> |
||||
<view class="tip">您已完成第{{params.CompleteTimes + 1}}次训练！</view> |
||||
<view class="ml" wx:if="{{params.SendScore}}"> |
||||
获取 |
||||
<text class="num">{{params.SendScore}}</text> |
||||
能量能量 |
||||
</view> |
||||
</block> |
||||
<view bind:tap="handleOk" class="done">完成</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-unbind" wx:elif="{{type=='familyUnbind'}}"> |
||||
<image class="badge" src="{{imageUrl}}/1/f-warn.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="content"> |
||||
该亲友号解绑后 |
||||
<view></view> |
||||
将无法查看ID:{{params.PatientId}}的 |
||||
<view></view> |
||||
所有健康数据，是否继续解绑？ |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleCancel" class="cancel">取消</view> |
||||
<view bind:tap="handleOk" class="submit">确认</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-withdraw" wx:elif="{{type=='withdraw'}}"> |
||||
<image class="badge" src="{{imageUrl}}1/del-story.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="content"> |
||||
<view>删除代表您将放弃发布此条内容</view> |
||||
<view>删除后无法恢复且不可见</view> |
||||
<view>确认删除？</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">确认撤回</view> |
||||
<view bind:tap="handleCancel" class="cancel">取消</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-withdraw" wx:elif="{{type=='rewithdraw'}}"> |
||||
<image class="badge" src="{{imageUrl}}/rewithdraw.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="content">您是希望继续投稿吗？</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">提交</view> |
||||
<view bind:tap="handleCancel" class="cancel">取消</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-withdraw" wx:elif="{{type=='delwithdraw'}}"> |
||||
<image class="badge" src="{{imageUrl}}1/del-story.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="content" wx:if="{{params.Status != 5}}"> |
||||
删除代表您将放弃发布此条内容 |
||||
<view></view> |
||||
删除后无法恢复且不可见 |
||||
<view></view> |
||||
确认删除？ |
||||
</view> |
||||
<view class="content" wx:else> |
||||
删除后将从平台同步撤下 |
||||
<view></view> |
||||
您将无法查看和管理 |
||||
<view></view> |
||||
确认删除？ |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleDel" class="submit">删除</view> |
||||
<view bind:tap="handleCancel" class="cancel">取消</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-home-inhibitor" wx:elif="{{type=='homeInhibitor'}}"> |
||||
<image class="badge" src="{{imageUrl}}/toast-home.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="container"> |
||||
<view class="title">抑制物检测提醒</view> |
||||
<view class="day"> |
||||
{{params.PatientName}}已经有 |
||||
<text class="num">{{params.ExposureDays}}个</text> |
||||
暴露日 |
||||
</view> |
||||
<view class="content"> |
||||
<view class="c-title">建议做抑制物检测</view> |
||||
{{params.Content}} |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleCancel" class="submit">我知道了</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-my-health-record" wx:if="{{type == 'myHealthRecord'}}"> |
||||
<image class="badge" src="{{imageUrl}}/records.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="title">{{params.date}}</view> |
||||
<view class="week">{{params.week}}</view> |
||||
<view class="content">请选择您的要添加的记录</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">录入出血</view> |
||||
<view bind:tap="handleJump" class="submit">录入治疗</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-doc" wx:if="{{type == 'doc'}}"> |
||||
<view class="popup-container"> |
||||
<view class="title">用户须知</view> |
||||
<view class="content"> |
||||
<mp-html class="mp-html" container-style="overflow: visible" content="{{params.doc}}"></mp-html> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">{{timeOut || '同意'}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-class-detail-once" wx:if="{{type == 'classDetailOnce'}}"> |
||||
<view class="popup-container"> |
||||
<view class="container"> |
||||
<view class="title">康复训练提示</view> |
||||
<view class="content"> |
||||
（1）因个人体质、病情等不同，本康复训练视频仅供参考； |
||||
<view></view> |
||||
（2）不满14岁儿童请或行动不便者，请在监护人、监护人委托的照管人或其它照管人的照看下进行适量训练； |
||||
<view></view> |
||||
（3）建议在专业医护人员的指导下进行适量训练并由专业医生评估康复训练前的预防治疗剂量； |
||||
<view></view> |
||||
（4）建议遵循说明书指引进行适量训练； |
||||
<view></view> |
||||
（5）训练时请按确保您的训练环境安全； |
||||
<view></view> |
||||
（6）若训练过程中有任何不适，请立即停止并立刻向医疗卫生专业人士咨询和就诊。 |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">我已知晓</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-soory-enter" wx:if="{{type == 'storyEnter'}}"> |
||||
<view class="popup-container"> |
||||
<view class="container" style="background-image: url({{imageUrl}}1/popup-soory-enter-bg.png?t={{Timestamp}})"> |
||||
<image class="badge" src="{{imageUrl}}1/toast-story-badge.png?t={{Timestamp}}"></image> |
||||
<view class="content"> |
||||
（1）您的故事中可能会涉及您、您的孩子或其它人的个人信息甚至敏感个人信息，如个人影像、个人健康信息及生活经历。建议您不要在故事中提及真实身份信息。请您谨慎考虑是否在此公开发布您的故事。您确认并承诺您已经向有关个人进行充分的告知并征得同意。如果有关个人未满14周岁，您确认并承诺您为该儿童的监护人并且同意公开发表该儿童的个人信息。 |
||||
<view></view> |
||||
（2）若您上传图片，请您确保享有版权或已经获得第三方的合法授权有权使用，且不侵犯任何其它第三人的合法权益（包括但不限于肖像权、隐私权等）。 |
||||
<view></view> |
||||
（3）您故事提交后，由运营人员进行审核、校正和编辑后，才会被发布；您的故事内容将长期发布在“我的故事”版块内。您可以随时从“我的-我的故事”撤回为仅本人查看的非公开模式。 |
||||
</view> |
||||
<view class="protocol"> |
||||
<view class="p-header"> |
||||
<van-checkbox |
||||
class="checkbox" |
||||
value="{{protocol}}" |
||||
shape="square" |
||||
checked-color="#DC3E6A" |
||||
bind:tap="handleProtocolChange" |
||||
icon-size="16" |
||||
></van-checkbox> |
||||
同意审核和编辑后公开发布 |
||||
</view> |
||||
<view class="tip">您可以随时从“我的-我的故事”撤回为仅本人查看的非公开模式。</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">提交我的故事</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-story-lead" wx:if="{{type == 'storyLead'}}"> |
||||
<view class="popup-header"> |
||||
<view class="content"> |
||||
<view>邀请您分享本人故事</view> |
||||
发布后获取 |
||||
<text class="num">{{settingsInfo.PublishStoryScore}}</text> |
||||
能量激励 |
||||
</view> |
||||
<image class="bg" src="{{imageUrl}}3/story-lead1.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
<view class="popup-container"> |
||||
<image class="bg" src="{{imageUrl}}3/story-lead2.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view>你知道吗？</view> |
||||
<view>你的经历</view> |
||||
<view>可以帮助更多人</view> |
||||
</view> |
||||
<view class="sub-content"> |
||||
<view>您是否有不一样的故事？</view> |
||||
<view>您的经历或许能给他人带来希望和能量！</view> |
||||
<view>诺和关怀邀请您分享自己的故事。</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="submit" bind:tap="routerTo" data-path="/pages/storyGuide/index?storyleadin=1&originsource=2"> |
||||
去看看 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-story-star" wx:if="{{type == 'storyStar'}}"> |
||||
<image class="badge" src="{{imageUrl}}3/story-star.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<image class="bg" src="{{imageUrl}}3/story-lead2.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content">感谢加油!</view> |
||||
<view class="sub-content"> |
||||
<view>您的故事或许也能为他人带来能量</view> |
||||
<view>期待您的故事</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="submit" bind:tap="routerTo" data-path="/pages/storyGuide/index?storyleadin=1&originsource=3"> |
||||
看看我能做些什么 |
||||
</view> |
||||
</view> |
||||
<view class="tip">审核发布后获取{{settingsInfo.PublishStoryScore}}能量</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-story-share" wx:if="{{type == 'storyShare'}}"> |
||||
<!-- <image class="badge" src="{{imageUrl}}3/story-share.png?t={{Timestamp}}"></image> --> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}3/story-share.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<image class="bg" src="{{imageUrl}}3/story-share-bg.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<image class="satellite1" src="{{imageUrl}}3/satellite.png?t={{Timestamp}}"></image> |
||||
<image class="satellite2" src="{{imageUrl}}3/satellite.png?t={{Timestamp}}"></image> |
||||
<view class="sub-content"> |
||||
<view>分享您的经验或故事</view> |
||||
<view>审核发布后</view> |
||||
<view> |
||||
获取 |
||||
<text class="num">{{settingsInfo.PublishStoryScore}}</text> |
||||
能量 |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view class="submit" bind:tap="routerTo" data-path="/pages/storyGuide/index?storyleadin=1&originsource=1"> |
||||
看看我能做些什么 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-beginner-guide" wx:if="{{type == 'beginnerGuide'}}"> |
||||
<view class="popup-container"> |
||||
<view class="container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}3/beginner-guide-badge.png?t={{Timestamp}}"></image> |
||||
<view class="content"> |
||||
<view> |
||||
<text class="name" wx:if="{{params.relationType==1}}">Hi，{{params.patientName}}</text> |
||||
<text class="name" wx:elif="{{params.relationType==2}}">Hi，{{params.patientName}}妈妈</text> |
||||
<text class="name" wx:elif="{{params.relationType==3}}">Hi，{{params.patientName}}爸爸</text> |
||||
<text class="name" wx:elif="{{params.relationType==4}}">Hi，{{params.patientName}}亲友</text> |
||||
</view> |
||||
<view>一分钟探索诺和服务</view> |
||||
</view> |
||||
<view class="tip"> |
||||
领取 |
||||
<text class="num">{{params.countIntegralNum}}能量</text> |
||||
免费兑换礼品 |
||||
</view> |
||||
<view class="submit" bind:tap="routerTo" data-path="/pages/tfb/index">去领取</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-adl-alert {{theme === 'DRUG' && 'popup-adl-alert-drug'}}" wx:if="{{type == 'aldAlert'}}"> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/adl-alert.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view>自在生活“双达标”测评提醒</view> |
||||
</view> |
||||
<view class="tip">建议您每次用药7天后做1次“双达标”测评，更好了解身体变化</view> |
||||
<!-- <view class="warn" bind:tap="handleAdlQuestion" data-url="/pages/repositoryDetail/index?id={{params.id}}"> --> |
||||
<!-- <image class="icon" mode="aspectFill" src="{{imageUrl}}1.5/warn.png?t={{Timestamp}}"></image> --> |
||||
<!-- 什么是双达标? --> |
||||
<!-- </view> --> |
||||
<view class="c-footer"> |
||||
<view class="cancel" bind:tap="handleCancel">取消</view> |
||||
<view class="submit" bind:tap="handleOk">立即去做</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-adl-alert-test {{theme === 'DRUG' && 'popup-adl-alert-test-drug'}}" |
||||
wx:if="{{type == 'aldAlertTest'}}" |
||||
> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/adl-alert-test.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view> |
||||
完成您的MG-ADL评测 |
||||
<view>即可申请项目</view> |
||||
</view> |
||||
</view> |
||||
<view class="tip"> |
||||
每周1次MG-ADL记录 |
||||
<view>身体变化有序记录</view> |
||||
</view> |
||||
<view class="c-footer"> |
||||
<view class="submit" bind:tap="handleOk">1分钟完成MG-ADL</view> |
||||
<view class="cancel" bind:tap="handleCancel">取消</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-vip" wx:if="{{type == 'vipScan'}}"> |
||||
<view class="popup-container"> |
||||
<view class="container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/vip-toast.png?t={{Timestamp}}"></image> |
||||
<view class="content"> |
||||
<view> |
||||
一步认证成为 |
||||
<view>艾加莫德用药患友</view> |
||||
</view> |
||||
</view> |
||||
<view class="tip"> |
||||
专属服务用户登记 |
||||
<image class="icon" mode="aspectFill" src="{{imageUrl}}1.5/arrow-right.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
<view class="c-footer"> |
||||
<view class="submit" bind:tap="handleOk">立即认证</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-task-model {{theme === 'DRUG' && 'popup-task-model-drug'}}" wx:if="{{type == 'taskModel'}}"> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/adl-alert.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view>给力加油站电话随访服务启动</view> |
||||
</view> |
||||
<view class="tip"> |
||||
随访专员定期和您电话沟通 |
||||
<view>提醒您健康管理</view> |
||||
</view> |
||||
<view class="warn" bind:tap="routerTo" data-path="/pages/taskAgreement/index?page=/pages/index/index"> |
||||
<image class="icon" mode="aspectFill" src="{{imageUrl}}1.5/warn.png?t={{Timestamp}}"></image> |
||||
<text class="link">《电话随访知情同意书》</text> |
||||
</view> |
||||
<view class="c-footer"> |
||||
<view class="cancel" bind:tap="handleTaskCancel">不接受随访</view> |
||||
<view class="submit" bind:tap="handleOk">接受随访</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-health-care {{theme === 'DRUG' && 'popup-health-care-drug'}}" wx:if="{{type == 'healthCare'}}"> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/adl-alert.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view>艾加莫德进入医保</view> |
||||
<view>如何报销立即查看</view> |
||||
</view> |
||||
<view class="c-footer"> |
||||
<!-- <view class="cancel" bind:tap="handleCancel">取消</view> --> |
||||
<view class="submit" bind:tap="handleOk">立即查看</view> |
||||
</view> |
||||
<view class="tip">{{openPatientList.PatientNum}}位用户正在关注</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-ndrl-adl-alert {{theme === 'DRUG' && 'popup-ndrl-adl-alert-drug'}}" |
||||
wx:if="{{type == 'ndrlAldAlert'}}" |
||||
> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}1.5/adl-alert.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view> |
||||
完成ADL评分 |
||||
<view>查阅您的专属医保报销解读</view> |
||||
</view> |
||||
</view> |
||||
<view class="warn" bind:tap="handleAdlQuestion" data-url="/pages/repositoryDetail/index?id={{params.id}}"> |
||||
<image class="icon" mode="aspectFill" src="{{imageUrl}}1.5/warn.png?t={{Timestamp}}"></image> |
||||
什么是MG-ADL? |
||||
</view> |
||||
<view class="c-footer"> |
||||
<view class="submit" bind:tap="handleOk">立即去做</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-ndrl-follow" wx:if="{{type == 'popupNdrlFollow'}}"> |
||||
<view class="popup-container"> |
||||
<image class="badge" mode="aspectFill" src="{{imageUrl}}nrdl/nrdl-follow-badge.png?t={{Timestamp}}"></image> |
||||
<view class="container"> |
||||
<view class="title">提交成功</view> |
||||
<view class="price" wx:if="{{params.rewardScore}}"> |
||||
+{{params.rewardScore}} |
||||
<view class="sub">能量</view> |
||||
</view> |
||||
<view class="content"> |
||||
<view>您关注的城市医保信息</view> |
||||
<view>将第一时间通知您</view> |
||||
</view> |
||||
<image wx:if="{{!params.follow}}" class="code" show-menu-by-longpress src="{{params.code}}"></image> |
||||
<view wx:if="{{!params.follow}}" class="tip">扫码关注公众号</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-soory-enter" wx:if="{{type == 'giftEnter'}}"> |
||||
<view class="popup-container"> |
||||
<view class="container" style="background-image: url({{imageUrl}}1/popup-soory-enter-bg.png?t={{Timestamp}})"> |
||||
<image class="badge" src="{{imageUrl}}1/toast-story-badge.png?t={{Timestamp}}"></image> |
||||
<view class="content"> |
||||
<mp-html class="mp-html" container-style="overflow: visible" content="{{params.doc}}"></mp-html> |
||||
</view> |
||||
<view class="protocol"> |
||||
<view class="p-header"> |
||||
<van-checkbox |
||||
class="checkbox" |
||||
value="{{protocol}}" |
||||
shape="square" |
||||
checked-color="#DC3E6A" |
||||
bind:tap="handleProtocolChange" |
||||
icon-size="16" |
||||
></van-checkbox> |
||||
同意《用户须知》 |
||||
</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">确定</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-adl-progress {{theme === 'DRUG' && 'popup-adl-progress-drug'}}" wx:if="{{type == 'adlProgresss'}}"> |
||||
<view |
||||
class="popup-container" |
||||
style="background-image: url({{imageUrl}}2/progress-bg{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}})" |
||||
> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/adl-close{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="container"> |
||||
<view class="title"> |
||||
<view>恭喜您完成本周测评,坚持每周评估</view> |
||||
<view>赚取能量积分拥抱有力人生</view> |
||||
</view> |
||||
<view class="content"> |
||||
<view class="price">+{{params.RewardScore}}</view> |
||||
<view class="sub">能量</view> |
||||
</view> |
||||
<view class="progress"> |
||||
<progress |
||||
class="progress-bar" |
||||
background-color="#EAEAEA" |
||||
activeColor=" {{theme === 'DRUG'?'#24D8C8':'#E04775'}}" |
||||
percent="{{25*(params.ContinuousTimes-1)}}" |
||||
border-radius="{{10}}" |
||||
stroke-width="{{8}}" |
||||
active |
||||
></progress> |
||||
<view class="wrap"> |
||||
<view class="item {{params.ContinuousTimes >= index +1 && 'active'}}" wx:for="{{5}}" wx:key="{{index}}"> |
||||
<view class="name">第{{index+1}}周</view> |
||||
<view class="el"> |
||||
<image class="icon" src="{{imageUrl}}2/adl-money.png?t={{Timestamp}}"></image> |
||||
<view class="status"> |
||||
<image class="mini" src="{{imageUrl}}2/true.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</view> |
||||
<view class="num" wx:if="{{params.Records[index]}}">{{params.Records[index].RewardScore}}</view> |
||||
<view class="num more" wx:elif="{{index == 2}}"> |
||||
{{params.PatientScore}}+{{params.PatientScoreExtra}} |
||||
</view> |
||||
<!-- <view class="num more" wx:elif="{{index == 4}}"> --> |
||||
<!-- {{params.PatientScore}}+{{params.PatientScoreExtra2}} --> |
||||
<!-- </view> --> |
||||
<view class="num" wx:else>{{params.PatientScore}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- <view class="tip" wx:if="{{params.ContinuousTimes < 3}}">连续3周完成评测还可获得额外奖励</view> --> |
||||
<!-- <view class="tip" wx:elif="{{params.ContinuousTimes < 5}}">连续5周完成评测还可获得额外奖励</view> --> |
||||
<!-- <view class="tip" wx:else></view> --> |
||||
<view class="tip">可用能量积分兑换礼品</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">我知道了</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-adl-progress-end {{theme === 'DRUG' && 'popup-adl-progress-end-drug'}}" |
||||
wx:if="{{type == 'adlProgresssEnd'}}" |
||||
> |
||||
<view |
||||
class="popup-container" |
||||
style="background-image: url({{imageUrl}}2/progress-end-bg{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}})" |
||||
> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/adl-close{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="container"> |
||||
<view class="title"> |
||||
<view>您已完成本周测评</view> |
||||
<view>坚持每周评估，敏锐识别症状变化</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">我知道了</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-adl-progress {{theme === 'DRUG' && 'popup-adl-progress-drug'}}" |
||||
wx:if="{{type == 'drugProgresss'}}" |
||||
> |
||||
<view |
||||
class="popup-container" |
||||
style="background-image: url({{imageUrl}}2/progress-bg{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}})" |
||||
> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/adl-close{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="container"> |
||||
<view class="title"> |
||||
<view>恭喜您完成本周用药记录</view> |
||||
<view>记录后可生成您的专属健康报告</view> |
||||
</view> |
||||
<view class="content"> |
||||
<view class="price">+{{params.RewardScore}}</view> |
||||
<view class="sub">能量</view> |
||||
</view> |
||||
<view class="progress"> |
||||
<progress |
||||
class="progress-bar" |
||||
background-color="#EAEAEA" |
||||
activeColor=" {{theme === 'DRUG'?'#24D8C8':'#E04775'}}" |
||||
percent="{{25*(params.ContinuousTimes-1)}}" |
||||
border-radius="{{10}}" |
||||
stroke-width="{{8}}" |
||||
active |
||||
></progress> |
||||
<view class="wrap"> |
||||
<view class="item {{params.ContinuousTimes >= index +1 && 'active'}}" wx:for="{{5}}" wx:key="{{index}}"> |
||||
<view class="name">第{{index+1}}周</view> |
||||
<view class="el"> |
||||
<image class="icon" src="{{imageUrl}}2/adl-money.png?t={{Timestamp}}"></image> |
||||
<view class="status"> |
||||
<image class="mini" src="{{imageUrl}}2/true.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</view> |
||||
<view class="num" wx:if="{{params.Records[index]}}">{{params.Records[index].RewardScore}}</view> |
||||
<view class="num more" wx:elif="{{index == 1}}"> |
||||
{{params.PatientScore}}+{{params.PatientScoreExtra}} |
||||
</view> |
||||
<view class="num more" wx:elif="{{index == 3}}"> |
||||
{{params.PatientScore}}+{{params.PatientScoreExtra2}} |
||||
</view> |
||||
<view class="num" wx:else>{{params.PatientScore}}</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="tip" wx:if="{{params.ContinuousTimes < 2}}">连续2周完成用药还可获得额外奖励</view> |
||||
<view class="tip" wx:elif="{{params.ContinuousTimes < 4}}">连续4周完成用药还可获得额外奖励</view> |
||||
<view class="tip" wx:else></view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">我知道了</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-adl-progress-end {{theme === 'DRUG' && 'popup-adl-progress-end-drug'}}" |
||||
wx:if="{{type == 'drugProgresssEnd'}}" |
||||
> |
||||
<view |
||||
class="popup-container" |
||||
style="background-image: url({{imageUrl}}2/progress-end-bg{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}})" |
||||
> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/adl-close{{theme === 'DRUG'?'2':'1'}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="container"> |
||||
<view class="title"> |
||||
<view>恭喜您完成本周用药记录</view> |
||||
<view>记录后可生成您的专属健康报告</view> |
||||
</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">我知道了</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-dtp-drup" wx:if="{{type == 'dtpDrug'}}"> |
||||
<view class="popup-container" style="background-image: url({{imageUrl}}nrdl/popup-dtp-bg.png?t={{Timestamp}})"> |
||||
<view class="container"> |
||||
<image class="title" mode="widthFix" src="{{imageUrl}}nrdl/popup-dtp-title.png?t={{Timestamp}}"></image> |
||||
<view class="content">双通道药店是指可购买医保药品并支持医保支付（报销）的药店</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleOk" class="submit">已了解</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-double-standards {{theme === 'DRUG' && 'popup-double-standards-drug'}}" |
||||
wx:if="{{type == 'doubleStandards'}}" |
||||
> |
||||
<view class="popup-container"> |
||||
<image |
||||
class="badge" |
||||
mode="aspectFill" |
||||
src="{{imageUrl}}double-standard/double-standards-badge{{theme === 'DRUG' ? '-drug' :''}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="container"> |
||||
<view class="content"> |
||||
<view>点击开始ADL评分</view> |
||||
<view>识别症状波动</view> |
||||
</view> |
||||
<view class="tip">已有{{params.adlUserNum}}人体验</view> |
||||
<view class="c-footer"> |
||||
<view class="submit" bind:tap="handleOk">立即体验</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view |
||||
class="popup-dedicated-doctor {{theme === 'DRUG' && 'popup-dedicated-doctor-drug'}}" |
||||
wx:if="{{type == 'dedicatedDoctor'}}" |
||||
> |
||||
<view |
||||
class="popup-container" |
||||
style="background: url({{imageUrl}}2/popup-dedicated-doctor{{theme === 'DRUG'?'-drug':''}}-bg.png?t={{Timestamp}}) no-repeat top center/100%" |
||||
> |
||||
<image |
||||
class="content" |
||||
src="{{imageUrl}}2/popup-dedicated-doctor-content{{theme === 'DRUG'?'-drug':''}}.png?t={{Timestamp}}" |
||||
></image> |
||||
<view class="btn" bind:tap="handleOk">立即体验</view> |
||||
</view> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/close.png?t={{Timestamp}}" |
||||
bind:tap="handleCancel" |
||||
></image> |
||||
</view> |
||||
<view class="popup-export-loading-doctor" wx:if="{{type == 'exportLoadingDoctor'}}"> |
||||
<image class="badge" src="{{imageUrl}}doctor/export.gif?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="title">正在生成您的ADL报告</view> |
||||
<view class="content">导出可能需要一些时间，请您耐心等待</view> |
||||
<view class="btn" bind:tap="handleCancel">取消</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-referral-toast" wx:if="{{type == 'referral-toast'}}"> |
||||
<view |
||||
class="popup-container" |
||||
style="background: url({{imageUrl}}5/referral-toast-bg.png?t={{Timestamp}}) no-repeat top center/100%" |
||||
> |
||||
<view class="btn" bind:tap="handleOk">确定</view> |
||||
</view> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/close.png?t={{Timestamp}}" |
||||
bind:tap="handleCancel" |
||||
></image> |
||||
</view> |
||||
<view class="popup-patient-detail-safe-doctor" wx:if="{{type == 'patientDetailSafeDoctor'}}"> |
||||
<view |
||||
class="popup-container" |
||||
style="background: url({{imageUrl}}5/safe-bg.png?t={{Timestamp}}) no-repeat top center/100%" |
||||
> |
||||
<view class="content"> |
||||
以下内容涉及患者个人信息，仅用于{{params.HospitalName}}{{params.Name}}医生进行患者随访管理，请在安全环境下查看，不截图，不转发 |
||||
</view> |
||||
<view class="btn" bind:tap="handleOk">确定</view> |
||||
</view> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/close.png?t={{Timestamp}}" |
||||
bind:tap="handleCancel" |
||||
></image> |
||||
</view> |
||||
<view class="popup-public-toast" wx:if="{{type == 'public-toast'}}"> |
||||
<view |
||||
class="popup-container" |
||||
style="background: url({{imageUrl}}/5/public-bg1.png?t={{Timestamp}}) no-repeat top center/100%" |
||||
> |
||||
<image class="code" src="{{imageUrl}}5/code.png?t={{Timestamp}}" show-menu-by-longpress></image> |
||||
</view> |
||||
<image |
||||
class="close" |
||||
bind:tap="handleCancel" |
||||
src="{{imageUrl}}2/close.png?t={{Timestamp}}" |
||||
bind:tap="handleCancel" |
||||
></image> |
||||
</view> |
||||
<view class="popup-site-conform" wx:if="{{type == 'siteConform'}}"> |
||||
<image class="badge" src="{{imageUrl}}icon4.png?t={{Timestamp}}"></image> |
||||
<view class="popup-container"> |
||||
<view class="title">您已选择</view> |
||||
<view class="content">{{params.ProvinceName}}{{params.CityName ? '—' + params.CityName : ''}}</view> |
||||
<view class="footer"> |
||||
<view bind:tap="handleCancel" class="cancel">取消</view> |
||||
<button bind:tap="handleOk" open-type="share" class="submit">分享</button> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="popup-level-up" wx:if="{{type == 'adlLevelUp'}}"> |
||||
<view |
||||
class="popup-container" |
||||
style="background: url({{imageUrl}}bg5.png?t={{Timestamp}}) no-repeat top center/100%" |
||||
> |
||||
<image class="close" bind:tap="handleCancel" src="{{imageUrl}}icon15.png?t={{Timestamp}}"></image> |
||||
<image class="btn" bind:tap="handleOk" src="{{imageUrl}}icon16.png?t={{Timestamp}}"></image> |
||||
</view> |
||||
</view> |
||||
</van-popup> |
||||
@ -0,0 +1,250 @@
@@ -0,0 +1,250 @@
|
||||
const app = getApp(); |
||||
Component({ |
||||
options: { |
||||
multipleSlots: true, |
||||
addGlobalClass: true, |
||||
}, |
||||
properties: { |
||||
slotLeft:{ |
||||
type:Boolean, |
||||
value:false, |
||||
}, |
||||
extClass: { |
||||
type: String, |
||||
value: "", |
||||
}, |
||||
background: { |
||||
type: String, |
||||
value: "transparent", |
||||
observer: "_showChange", |
||||
}, |
||||
backgroundColorTop: { |
||||
type: String, |
||||
value: "transparent", |
||||
observer: "_showChangeBackgroundColorTop", |
||||
}, |
||||
color: { |
||||
type: String, |
||||
value: "#000000", |
||||
}, |
||||
title: { |
||||
type: String, |
||||
value: "", |
||||
}, |
||||
back: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
home: { |
||||
type: Boolean, |
||||
value: true, |
||||
}, |
||||
iconTheme: { |
||||
type: String, |
||||
value: "nuohe", |
||||
}, |
||||
/* animated: { |
||||
type: Boolean, |
||||
value: true |
||||
}, |
||||
show: { |
||||
type: Boolean, |
||||
value: true, |
||||
observer: '_showChange' |
||||
}, */ |
||||
delta: { |
||||
type: Number, |
||||
value: 1, |
||||
}, |
||||
fixed: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
}, |
||||
created: function () { |
||||
this.getSystemInfo(); |
||||
}, |
||||
attached: function () { |
||||
this.setStyle(); //设置样式
|
||||
}, |
||||
data: { |
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
isHome: false, |
||||
}, |
||||
pageLifetimes: { |
||||
show: function () { |
||||
if (getApp().globalSystemInfo.ios) { |
||||
this.getSystemInfo(); |
||||
this.setStyle(); //设置样式1
|
||||
} |
||||
let pages = getCurrentPages(); |
||||
this.setData({ |
||||
isHome: !pages[pages.length - 2], |
||||
}); |
||||
}, |
||||
hide: function () {}, |
||||
}, |
||||
methods: { |
||||
setStyle: function (life) { |
||||
const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth } = |
||||
getApp().globalSystemInfo; |
||||
const { back, home, title } = this.data; |
||||
let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
|
||||
let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距
|
||||
this.setData({ |
||||
leftWidth: leftWidth, |
||||
}); |
||||
|
||||
let navigationbarinnerStyle = [ |
||||
`color: ${this.data.color}`, |
||||
`background: ${this.data.background}`, |
||||
`height:${navBarHeight + navBarExtendHeight}px`, |
||||
`padding-top:${statusBarHeight}px`, |
||||
`padding-right:${leftWidth}px`, |
||||
`padding-bottom:${navBarExtendHeight}px`, |
||||
].join(";"); |
||||
let navBarLeft = []; |
||||
if ((back && !home) || (!back && home)) { |
||||
navBarLeft = [`width:${capsulePosition.width}px`, `height:${capsulePosition.height}px`].join(";"); |
||||
} else if ((back && home) || title) { |
||||
navBarLeft = [ |
||||
`width:${capsulePosition.width}px`, |
||||
`height:${capsulePosition.height}px`, |
||||
`margin-left:${rightDistance}px`, |
||||
].join(";"); |
||||
} else { |
||||
navBarLeft = [`width:auto`, `margin-left:0px`].join(";"); |
||||
} |
||||
if (life === "created") { |
||||
this.data = { |
||||
navigationbarinnerStyle, |
||||
navBarLeft, |
||||
navBarHeight, |
||||
capsulePosition, |
||||
navBarExtendHeight, |
||||
ios, |
||||
}; |
||||
} else { |
||||
this.setData({ |
||||
navigationbarinnerStyle, |
||||
navBarLeft, |
||||
navBarHeight, |
||||
capsulePosition, |
||||
navBarExtendHeight, |
||||
ios, |
||||
}); |
||||
} |
||||
}, |
||||
_showChange: function (value) { |
||||
this.setStyle(); |
||||
}, |
||||
// 返回事件
|
||||
back: function () { |
||||
let pages = getCurrentPages(); |
||||
if (app.globalData.backPage) { |
||||
wx.reLaunch({ |
||||
url: app.globalData.backPage, |
||||
}); |
||||
app.globalData.backPage = null; |
||||
return; |
||||
} |
||||
if (!pages[pages.length - 2] && !app.globalData.anyWhere) { |
||||
wx.reLaunch({ |
||||
url: "/pages/index/index", |
||||
}); |
||||
return; |
||||
} |
||||
this.triggerEvent("back", { delta: this.data.delta }); |
||||
}, |
||||
home: function () { |
||||
wx.reLaunch({ |
||||
url: "/pages/start/index", |
||||
}); |
||||
}, |
||||
search: function () { |
||||
this.triggerEvent("search", {}); |
||||
}, |
||||
getSystemInfo() { |
||||
var app = getApp(); |
||||
if (app.globalSystemInfo && !app.globalSystemInfo.ios) { |
||||
return app.globalSystemInfo; |
||||
} else { |
||||
let systemInfo = wx.getSystemInfoSync(); |
||||
let ios = !!(systemInfo.system.toLowerCase().search("ios") + 1); |
||||
let rect; |
||||
try { |
||||
rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; |
||||
if (rect === null) { |
||||
throw "getMenuButtonBoundingClientRect error"; |
||||
} |
||||
//取值为0的情况 有可能width不为0 top为0的情况
|
||||
if (!rect.width || !rect.top || !rect.left || !rect.height) { |
||||
throw "getMenuButtonBoundingClientRect error"; |
||||
} |
||||
} catch (error) { |
||||
let gap = ""; //胶囊按钮上下间距 使导航内容居中
|
||||
let width = 96; //胶囊的宽度
|
||||
if (systemInfo.platform === "android") { |
||||
gap = 8; |
||||
width = 96; |
||||
} else if (systemInfo.platform === "devtools") { |
||||
if (ios) { |
||||
gap = 5.5; //开发工具中ios手机
|
||||
} else { |
||||
gap = 7.5; //开发工具中android和其它手机
|
||||
} |
||||
} else { |
||||
gap = 4; |
||||
width = 88; |
||||
} |
||||
if (!systemInfo.statusBarHeight) { |
||||
//开启wifi的情况下修复statusBarHeight值获取不到
|
||||
systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; |
||||
} |
||||
rect = { |
||||
//获取不到胶囊信息就自定义重置一个
|
||||
bottom: systemInfo.statusBarHeight + gap + 32, |
||||
height: 32, |
||||
left: systemInfo.windowWidth - width - 10, |
||||
right: systemInfo.windowWidth - 10, |
||||
top: systemInfo.statusBarHeight + gap, |
||||
width: width, |
||||
}; |
||||
console.log("error", error); |
||||
console.log("rect", rect); |
||||
} |
||||
|
||||
let navBarHeight = ""; |
||||
if (!systemInfo.statusBarHeight) { |
||||
systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; |
||||
navBarHeight = (function () { |
||||
let gap = rect.top - systemInfo.statusBarHeight; |
||||
return 2 * gap + rect.height; |
||||
})(); |
||||
|
||||
systemInfo.statusBarHeight = 0; |
||||
systemInfo.navBarExtendHeight = 0; //下方扩展4像素高度 防止下方边距太小
|
||||
} else { |
||||
navBarHeight = (function () { |
||||
let gap = rect.top - systemInfo.statusBarHeight; |
||||
return systemInfo.statusBarHeight + 2 * gap + rect.height; |
||||
})(); |
||||
if (ios) { |
||||
systemInfo.navBarExtendHeight = 4; //下方扩展4像素高度 防止下方边距太小
|
||||
} else { |
||||
systemInfo.navBarExtendHeight = 0; |
||||
} |
||||
} |
||||
systemInfo.navBarHeight = navBarHeight; //导航栏高度不包括statusBarHeight
|
||||
systemInfo.capsulePosition = rect; //右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
|
||||
systemInfo.ios = ios; //是否ios
|
||||
|
||||
app.globalSystemInfo = systemInfo; //将信息保存到全局变量中,后边再用就不用重新异步获取了
|
||||
|
||||
//console.log('systemInfo', systemInfo);
|
||||
return systemInfo; |
||||
} |
||||
}, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,185 @@
@@ -0,0 +1,185 @@
|
||||
page { |
||||
--height: 44px; /* 4*2+32 */ |
||||
--right: 40px; /* 10+87 */ |
||||
--navBarExtendHeight: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.lxy-nav-bar { |
||||
view, |
||||
text, |
||||
scroll-view, |
||||
input, |
||||
button, |
||||
image, |
||||
cover-view { |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
|
||||
.lxy-nav-bar_fixed { |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 1000; |
||||
} |
||||
|
||||
.lxy-nav-bar .ios { |
||||
--height: 44px; /* 4*2+32 */ |
||||
--right: 40px; /* 10+87 */ |
||||
--navBarExtendHeight: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.lxy-nav-bar .android { |
||||
--height: 48px; /* 8*2+32 */ |
||||
--right: 40px; /* 10+87 */ |
||||
--navBarExtendHeight: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.lxy-nav-bar .devtools { |
||||
--height: 42px; /* 5*2+32 */ |
||||
--right: 40px; /* 10+87 */ |
||||
--navBarExtendHeight: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
.lxy-nav-bar__inner { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 5001; |
||||
height: var(--height); |
||||
display: flex; |
||||
align-items: center; |
||||
padding-right: var(--right); |
||||
width: 100%; |
||||
padding-bottom: var(--navBarExtendHeight); |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left { |
||||
position: relative; |
||||
width: var(--right); |
||||
height: 32px; |
||||
/* padding-left: 10px; */ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.lxy-nav-bar__buttons { |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
border-radius: 16px; |
||||
border: 1rpx solid rgba(204, 204, 204, 0.6); |
||||
position: relative; |
||||
} |
||||
.lxy-nav-bar__buttons.android { |
||||
border: 1rpx solid rgba(234, 234, 234, 0.6); |
||||
} |
||||
.lxy-nav-bar__buttons::after { |
||||
position: absolute; |
||||
content: ""; |
||||
width: 1rpx; |
||||
height: 18.4px; |
||||
background: rgba(204, 204, 204, 0.6); |
||||
left: 50%; |
||||
top: 50%; |
||||
transform: translate(-50%, -50%); |
||||
} |
||||
.lxy-nav-bar__buttons.android::after { |
||||
background: rgba(234, 234, 234, 0.6); |
||||
} |
||||
.lxy-nav-bar__button { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
font-size: 12px; |
||||
background-repeat: no-repeat; |
||||
background-position: center center; |
||||
background-size: 1em 2em; |
||||
} |
||||
|
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active, |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active { |
||||
opacity: 0.5; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__center { |
||||
font-size: 17px; |
||||
line-height: 17px; |
||||
text-align: center; |
||||
position: relative; |
||||
flex: 1; |
||||
display: -webkit-box; |
||||
display: -webkit-flex; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding-left: 10px; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__center .lxy-nav-bar__center-title { |
||||
margin-top: -2px; |
||||
font-weight: bold; |
||||
white-space: nowrap; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__loading { |
||||
font-size: 0; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading { |
||||
margin-left: 0; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__right { |
||||
margin-right: 10px; |
||||
} |
||||
.lxy-nav-bar__placeholder { |
||||
height: var(--height); |
||||
background: #f8f8f8; |
||||
position: relative; |
||||
z-index: 50; |
||||
} |
||||
|
||||
.lxy-nav-bar-search { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 32px; |
||||
border-radius: 16px; |
||||
position: relative; |
||||
background: #f6f6f6; |
||||
} |
||||
|
||||
.lxy-nav-bar-search__input { |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
color: #999; |
||||
font-size: 15px; |
||||
line-height: 15px; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback { |
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E"); |
||||
background-position: 30rpx center; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.nuohe { |
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E"); |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.white { |
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E"); |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome { |
||||
background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E"); |
||||
background-size: 22px 22px; |
||||
} |
||||
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome.white { |
||||
background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E"); |
||||
background-size: 22px 22px; |
||||
} |
||||
.lxy-nav-bar-search__icon { |
||||
width: 22px; |
||||
height: 22px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E"); |
||||
background-repeat: no-repeat; |
||||
background-size: cover; |
||||
} |
||||
@ -0,0 +1,33 @@
@@ -0,0 +1,33 @@
|
||||
<view |
||||
class="lxy-nav-bar {{extClass}} {{fixed && 'lxy-nav-bar_fixed'}}" |
||||
style="background: {{background}};height: {{navBarHeight+ navBarExtendHeight}}px;" |
||||
> |
||||
<view |
||||
class="lxy-nav-bar__placeholder {{ios ? 'ios' : 'android'}}" |
||||
style="padding-top: {{navBarHeight+ navBarExtendHeight}}px;visibility: hidden;" |
||||
></view> |
||||
<view class="lxy-nav-bar__inner {{ios ? 'ios' : 'android'}}" style="{{navigationbarinnerStyle}}{{displayStyle}}"> |
||||
<view class="lxy-nav-bar__left" style="width: {{leftWidth}}px"> |
||||
<block wx:if="{{slotLeft}}"> |
||||
<slot name="left"></slot> |
||||
</block> |
||||
<block wx:elif="{{(back && !isHome)&&(!home||!isHome)}}"> |
||||
<view bindtap="back" class="lxy-nav-bar__button lxy-nav-bar__btn_goback {{iconTheme}}"></view> |
||||
</block> |
||||
<block wx:elif="{{(!back||isHome)&&home}}"> |
||||
<view bindtap="home" class="lxy-nav-bar__button lxy-nav-bar__btn_gohome {{iconTheme}}"></view> |
||||
</block> |
||||
</view> |
||||
<view class="lxy-nav-bar__center"> |
||||
<block wx:if="{{title}}"> |
||||
<text class="lxy-nav-bar__center-title">{{title}}</text> |
||||
</block> |
||||
<block wx:else> |
||||
<slot name="center"></slot> |
||||
</block> |
||||
</view> |
||||
<view class="lxy-nav-bar__right"> |
||||
<slot name="right"></slot> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 463 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 286 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 356 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 299 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 775 B |
|
After Width: | Height: | Size: 1005 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 16 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue