generated from ccsens_fe/uni-vue3-template
15 changed files with 427 additions and 68 deletions
@ -0,0 +1,14 @@ |
|||
# TODOList |
|||
|
|||
1. 配置路径的使用 |
|||
2. 代理路径的加入, 在http 或 post方法封装的地方统一修改就行 |
|||
3. token过期重新请求的问题 |
|||
4. 节点列表 服务端数据不全 没写 |
|||
5. 详情直接显示对应的模块 url里填个type的参数 onLoad根据参数显示 |
|||
6. 辅助工具 与 签名的默认显示 |
|||
7. 签名的上传? 没有接口 |
|||
H5默认生成的是base64 |
|||
APP端生成的是文件路径 |
|||
建议根据条件 两种上传方式 |
|||
8. 详情表单里 如: 选了其他 需要填写的 建议将其他填写的内容独立为一个字段 前端好回显 |
|||
ra(mg) 那个也是一样的道理 |
|||
@ -0,0 +1,120 @@ |
|||
<template> |
|||
<view class="u-p-50"> |
|||
<uni-collapse> |
|||
<uni-collapse-item :border="false" :open="false" title="知情同意书存档"> |
|||
<view class="u-p-l-40">知情同意书内容</view> |
|||
</uni-collapse-item> |
|||
</uni-collapse> |
|||
|
|||
<canvas ref="canvasRef" style="width: 100%; height: 400px; background-color: #eee;" canvas-id="canvas" id="canvas" @touchstart="onStart" |
|||
@touchmove="onMove" @touchend="onEnd"></canvas> |
|||
|
|||
<view class="flex u-p-t-40"> |
|||
<u-button size="medium" class="bg-main" type="primary" shape="circle" @click="onReset">重写</u-button> |
|||
<u-button size="medium" class="bg-main" type="primary" shape="circle" @click="onSubmit">确认签名</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script > |
|||
import { createInjectionState } from '@vueuse/core' |
|||
|
|||
|
|||
let ctx |
|||
let startX = 0 |
|||
let startY = 0 |
|||
let drawing = false |
|||
let pathArr = [] |
|||
let canvasWidth, canvasHeight |
|||
|
|||
export default { |
|||
name: 'SignComp', |
|||
mounted() { |
|||
ctx = uni.createCanvasContext('canvas') |
|||
ctx.setStrokeStyle('#333') |
|||
ctx.setLineWidth(3) |
|||
const query = uni.createSelectorQuery().in(this); |
|||
query.select('#canvas').boundingClientRect(data => { |
|||
canvasWidth = data.width |
|||
canvasHeight = data.height |
|||
}).exec(); |
|||
}, |
|||
methods: { |
|||
onStart(event) { |
|||
drawing = true |
|||
startX = event.changedTouches[0].x |
|||
startY = event.changedTouches[0].y |
|||
|
|||
pathArr.push([]) |
|||
}, |
|||
|
|||
onMove(event) { |
|||
event.preventDefault() |
|||
if (!drawing) return |
|||
const { x, y } = event.changedTouches[0] |
|||
// console.log(x, y); |
|||
pathArr[pathArr.length - 1].push([x, y]) |
|||
this.drawLine() |
|||
ctx.stroke() |
|||
ctx.draw() |
|||
}, |
|||
|
|||
onEnd(event) { |
|||
drawing = false |
|||
}, |
|||
|
|||
drawLine() { |
|||
if (!pathArr.length) return |
|||
pathArr.forEach(path => { |
|||
// path 是一条连续的路径 |
|||
if (path.length > 0) { |
|||
path.forEach((point, index) => { |
|||
if (index === 0) { |
|||
ctx.moveTo(point[0], point[1]) |
|||
} else { |
|||
ctx.lineTo(point[0], point[1]) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
onReset() { |
|||
pathArr = [] |
|||
ctx.clearRect(0, 0, canvasWidth, canvasHeight) |
|||
ctx.draw() |
|||
}, |
|||
|
|||
onSubmit() { |
|||
uni.canvasToTempFilePath({ |
|||
x: 0, |
|||
y: 0, |
|||
width: canvasWidth, |
|||
height: canvasHeight, |
|||
canvasId: 'canvas', |
|||
success: res => { |
|||
// 在H5平台下，tempFilePath 为 base64 |
|||
// #ifdef APP-PLUS |
|||
// 按文件传 |
|||
this.uploadFile(res.tempFilePath) |
|||
// #endif |
|||
|
|||
// #ifdef H5 |
|||
// TODO: 按base64传 |
|||
this.uploadBase64(res.tempFilePath) |
|||
// #endif |
|||
|
|||
// 发送关闭的事件 |
|||
this.$emit('on-close') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
async uploadFile(filePath) { |
|||
console.log(filePath); |
|||
}, |
|||
|
|||
async uploadBase64(base64) { } |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<view class="tool-wrap"> |
|||
<video class="tool-video" src="" /> |
|||
|
|||
<view class="tool-footer"> |
|||
<view class="uni-font-16 font-bold u-m-b-16">百人中使用药物结果分布情况</view> |
|||
<view class="flex justify-between"> |
|||
<view v-for="(item, index) in list" :key="index" class="tool-footer-item"> |
|||
<image class="image-icon" :src="item.image" mode="scaleToFill" /> |
|||
<text>{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
const list = [ |
|||
{ image: '/static/images/car.png', text: '改善' }, |
|||
{ image: '/static/images/car.png', text: '正常或接近正常' }, |
|||
{ image: '/static/images/car.png', text: '严重残疾或死亡' }, |
|||
{ image: '/static/images/car.png', text: '无明显变化' }, |
|||
{ image: '/static/images/car.png', text: '脑出血后早期加重' }, |
|||
{ image: '/static/images/car.png', text: '加重' }, |
|||
] |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
.tool-wrap { |
|||
padding: 24px; |
|||
|
|||
.tool-video { |
|||
display: block; |
|||
width: 100%; |
|||
margin-bottom: 20px; |
|||
height: 400px; |
|||
} |
|||
|
|||
.tool-footer { |
|||
.tool-footer-item { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #666 |
|||
} |
|||
|
|||
.image-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<uni-card> |
|||
<template v-slot:title> |
|||
<view class="flex u-p-30 justify-between"> |
|||
<text class="flex-1 u-font-16 font-bold">溶栓记录</text> |
|||
<u-button size="mini" class="bg-main" type="primary" @click="onExport">导出</u-button> |
|||
</view> |
|||
</template> |
|||
<u-time-line> |
|||
<u-time-line-item node-top="4" v-for="(item, index) in data" :key="index"> |
|||
<template v-slot:node> |
|||
<uni-icons type="smallcircle" :color="computeColor(item.exceed)" size="16" /> |
|||
</template> |
|||
<template v-slot:content> |
|||
<view class="flex justify-between"> |
|||
<text class="font-xl font-bold">{{ item.name }}</text> |
|||
</view> |
|||
<view class="u-m-t-20">{{ item.text }}</view> |
|||
</template> |
|||
</u-time-line-item> |
|||
</u-time-line> |
|||
|
|||
</uni-card> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue'; |
|||
|
|||
interface IDataItem { |
|||
name: string; |
|||
time: string; |
|||
text: string; |
|||
exceed: number |
|||
} |
|||
|
|||
const firstAidId = ref('') |
|||
const data = ref<IDataItem[]>([]) |
|||
|
|||
// 导出 |
|||
async function onExport() { |
|||
try { |
|||
const res = await uni.$u.api.exportThrombolysisRecord(firstAidId.value) |
|||
if (!res) { |
|||
uni.$u.alertError('返回路径无效') |
|||
return |
|||
} |
|||
// #ifdef APP-PLUS |
|||
uni.downloadFile({ |
|||
url: res, |
|||
success(res) { |
|||
var filePath = res.tempFilePath; |
|||
uni.openDocument({ |
|||
filePath: filePath, |
|||
showMenu: true, |
|||
}); |
|||
} |
|||
}); |
|||
// #endif |
|||
// #ifdef H5 |
|||
location.href = res |
|||
// #endif |
|||
} catch (error) { |
|||
uni.$u.alertError(error) |
|||
} |
|||
} |
|||
|
|||
// 获取数据 |
|||
async function getData(id) { |
|||
try { |
|||
const res = await uni.$u.api.getThrombolysisRecord(id) |
|||
if (res?.recordList?.length > 0) { |
|||
data.value = res.recordList || [] |
|||
} else { |
|||
data.value = [] |
|||
} |
|||
console.log(res); |
|||
|
|||
} catch (error) { |
|||
data.value = [] |
|||
uni.$u.alertError(error) |
|||
} |
|||
} |
|||
|
|||
// 计算时间轴的颜色 |
|||
function computeColor(status: number) { |
|||
const config = { |
|||
0: '#00C767', // 正常 |
|||
1: '#FF4A44' // 超时 |
|||
} |
|||
return config[status] || '#888' |
|||
} |
|||
|
|||
onLoad((option) => { |
|||
if (!option?.firstAidId) { |
|||
uni.$u.alertError('url缺少急救id信息') |
|||
return |
|||
} |
|||
|
|||
firstAidId.value = option.firstAidId |
|||
getData(option.firstAidId) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
Loading…
Reference in new issue