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