From 5a887c8deab92cdaa3f0617f05a04d126fb194b6 Mon Sep 17 00:00:00 2001
From: zoujiandong <10130823232@qq.com>
Date: Thu, 19 Jun 2025 19:06:50 +0800
Subject: [PATCH] 6.19
---
app.json | 4 +-
case/pages/createCase/createCase.js | 75 +++++---
case/pages/createCase/createCase.json | 1 +
case/pages/createCase/createCase.wxml | 99 ++++------
case/pages/createCase/createCase.wxss | 27 ++-
case/pages/paintCanvas/paintCanvas.js | 1 +
case/pages/paintCanvas/paintCanvas.wxml | 2 +-
case/pages/paintCanvas/paintCanvas.wxss | 1 +
case/pages/paintDraw/paintDraw.wxss | 1 +
case/utils/data.js | 168 +++++++++++++++++
components/navBar/navBar.js | 2 +-
components/navBar/navBar.wxml | 8 +-
components/navBar/navBar.wxss | 2 +-
components/paintCanvas/paintCanvas.js | 225 +++++++++++++++++++++++
components/paintCanvas/paintCanvas.json | 7 +
components/paintCanvas/paintCanvas.wxml | 73 ++++++++
components/paintCanvas/paintCanvas.wxss | 150 ++++++++++++++++
utils/utils.js | 230 ++++++++++++++++++++++++
18 files changed, 985 insertions(+), 91 deletions(-)
create mode 100644 case/utils/data.js
create mode 100644 components/paintCanvas/paintCanvas.js
create mode 100644 components/paintCanvas/paintCanvas.json
create mode 100644 components/paintCanvas/paintCanvas.wxml
create mode 100644 components/paintCanvas/paintCanvas.wxss
create mode 100644 utils/utils.js
diff --git a/app.json b/app.json
index 3e5a23d..2f2f51c 100644
--- a/app.json
+++ b/app.json
@@ -16,8 +16,8 @@
"pages/pwdLogin/pwdLogin",
"pages/privacy/privacy",
"pages/bankCard/bankCard",
- "pages/paintCanvas/paintCanvas",
- "pages/paintDraw/paintDraw"
+ "pages/paintDraw/paintDraw",
+ "pages/paintCanvas/paintCanvas"
]
}
],
diff --git a/case/pages/createCase/createCase.js b/case/pages/createCase/createCase.js
index 08cd2c9..c79a3e9 100644
--- a/case/pages/createCase/createCase.js
+++ b/case/pages/createCase/createCase.js
@@ -3,12 +3,21 @@ import {addCase,caseDetail,editCase,getOssSign} from "../../../api/api"
const dayjs = require("../../../utils/dayjs");
import {throttle} from "../../../utils/util"
import { FileUtil } from '../../../utils/fileutil'
+import {diagnoseOption,patientSickOption,ganneiOption,ganwaiOption,moshiOption,hospitalOption,kangningOption} from "../../utils/data"
const app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
+ value:[],
+ kangningOption:kangningOption,
+ diagnoseOption:diagnoseOption,
+ patientSickOption:patientSickOption,
+ ganneiOption:ganneiOption,
+ ganwaiOption:ganwaiOption,
+ moshiOption:moshiOption,
+ hospitalOption:hospitalOption,
active:0,
wordLength:0,
showSaveBtn:true,
@@ -101,6 +110,40 @@ Page({
}
return value;
},
+
+ },
+ onChangeCheck(event){
+ console.log(event);
+ let arr=event.detail;
+ this.setData({
+ value:arr
+ })
+ if(arr[arr.length-1]=="-1"){
+ this.setData({
+ value:["-1"]
+ })
+ }else{
+ let index=arr.indexOf("-1");
+ if(index>-1){
+ arr.splice(index, 1);
+ this.setData({
+ value:arr
+ })
+ }
+ }
+ console.log(this.data.value)
+ },
+ onChangeOther(event){
+ let {detail,currentTarget}=event;
+ this.setData({
+ [currentTarget.dataset.type]:detail.value
+ })
+ },
+ toggleCheck(event){
+ console.log(event);
+ },
+ dealImg(e){
+ console.log(e);
},
save:throttle(function(){
this.data.medicalRecordId?this.handleEditCase():this.handleAddCase();
@@ -209,7 +252,6 @@ Page({
headTime:dayjs(headTime).format('YYYY-MM-DD HH:mm:ss'),
afterTime:dayjs(afterTime).format('YYYY-MM-DD HH:mm:ss')
})
-
addCase({...caseObj}).then(res=>{
wx.showToast({
title: '病例创建成功',
@@ -300,26 +342,19 @@ Page({
['case.'+key]:res[key]?dayjs(res[key]).format('YYYY-MM-DD'):''
})
}else if(key=='caseType'){
- let {columns}=this.data;
- for (let i = 0; i < columns.length; i++) {
- if(columns[i].value==res[key]){
- this.setData({
- ['case.'+key]:res[key],
- 'typeName': columns[i].text
- })
- break;
- }
-
- }
- }else if(key=='baseImg'){
- if(res[key]){
- let imgList=res[key].split(',');
+
+ }else if(key=='main_diagnose'){
+ this.setData({
+ 'case.main_diagnose.select':res[key].select,
+ 'case.main_diagnose.otherValue':res[key].otherValue
+ })
+ if(res[key].main_diagnose_img.length>0){
+ let arr=res[key].main_diagnose_img.map(item=>{
+ url:item
+ })
this.setData({
- ['case.'+key]:res[key],
- fileList_basic:imgList.map(item=>{
- return {url:item}
- })
- })
+ 'case.main_diagnose.main_diagnose_img':arr
+ })
}
}else if(key=='abstractImg'){
diff --git a/case/pages/createCase/createCase.json b/case/pages/createCase/createCase.json
index 976ece3..93b4c3f 100644
--- a/case/pages/createCase/createCase.json
+++ b/case/pages/createCase/createCase.json
@@ -13,6 +13,7 @@
"van-datetime-picker": "@vant/weapp/datetime-picker/index",
"van-radio": "@vant/weapp/radio/index",
"van-field": "@vant/weapp/field/index",
+ "paintCanvas":"../../../components/paintCanvas/paintCanvas",
"van-radio-group": "@vant/weapp/radio-group/index"
},
"navigationStyle":"custom"
diff --git a/case/pages/createCase/createCase.wxml b/case/pages/createCase/createCase.wxml
index 0da4005..ccefd24 100644
--- a/case/pages/createCase/createCase.wxml
+++ b/case/pages/createCase/createCase.wxml
@@ -59,7 +59,7 @@
治疗类型(多选）*
-
+
DPMAS及联合模式
CA280及联合模式
@@ -72,16 +72,16 @@
主要诊断(多选）*
-
- 肝衰竭
- 肿瘤
- 胆汁淤积性肝病
- 移植围手术期支持治疗
- 伴黄疸的MODS或脓毒症、重症中毒等
- 其他
+
+ {{item.name}}
-
+
@@ -90,27 +90,20 @@
患者病因(多选）*
-
- 乙肝
- 丙肝
- 酒精性肝病
- 酒精性肝硬化
- 自身免疫性肝炎（AIH）
- 原发性胆汁性肝硬化（PBC）
- 原发性硬化性胆管炎（PSC）
- 非酒精性脂肪肝
- 药物性肝损伤
- 肝豆状核变性
- 甲肝
- 戊肝
- 其他
+
+ {{item.name}}
+
-
+
+ 患者出院诊断照片(可上传1-6张)
+
@@ -119,39 +112,30 @@
肝内：
- 乙肝再激活
- 大量饮酒
- 药物毒物
- 戊型肝炎感染
- 甲型肝炎感染
- 丙肝再激活
- 其他
+ {{item.name}}
+
-
+
肝外：
- 消化道出血
- 感染
- 手术
- 劳累
- 其他
+ {{item.name}}
-
+
-
+
注意：“病案首页”需包含患者住院号或姓名
@@ -170,7 +154,7 @@
主诉：
-
+
@@ -183,7 +167,7 @@
现病史：
-
+
@@ -197,7 +181,7 @@
既往史：
-
+
@@ -253,14 +237,11 @@
- DPMAS
- DPMAS+PE
- DPMAS+其他
- CA280吸附
- DPCAS
+ {{item.name}}
+
-
+
@@ -284,15 +265,15 @@
- 抗凝剂量
+ 抗凝剂量(多选）
- 肝素
- 低分子肝素
+ {{item.name}}
+
@@ -738,7 +719,7 @@
出院情况*
-
+
@@ -752,15 +733,12 @@
- 出院状态*
+ 出院状态(单选）*
- 好转
- 痊愈
- 恶化
- 死亡
- 移植
+ {{item.name}}
+
@@ -783,6 +761,7 @@
+
diff --git a/case/pages/createCase/createCase.wxss b/case/pages/createCase/createCase.wxss
index 1505155..9de568e 100644
--- a/case/pages/createCase/createCase.wxss
+++ b/case/pages/createCase/createCase.wxss
@@ -54,6 +54,7 @@ page{
}
.unit .con{
display: flex;
+ padding: 5rpx 0;
align-items: center;
}
.van-checkbox-group--horizontal{
@@ -366,9 +367,10 @@ color: #3881F7;
.textArea{
margin-top: 20rpx;
width:100%;
- max-height: 500rpx!important;
+ max-height: 600rpx!important;
+ min-height: 200rpx!important;
font-size: 15px;
- min-height:50rpx!important;
+ box-sizing: border-box;
padding-bottom: 30px;
display: block!important;
}
@@ -377,7 +379,8 @@ color: #3881F7;
position: absolute;
- bottom:10rpx;
+ bottom:32rpx;
+
color: rgba(0,0,0,0.25);
right:10rpx;
}
@@ -404,3 +407,21 @@ color: #3881F7;
.van-radio__label--disabled{
color:#000!important;
}
+ .basic .textArea{
+ border-radius:10px;
+ padding:10px;
+ box-sizing: border-box;
+ border: 1rpx solid rgba(0,0,0,0.1);
+ }
+ .basic .desctitle{
+ margin-top: 15rpx;
+ }
+ .ziliao .textArea,.back .textArea{
+ padding-bottom: 30px;
+ margin-bottom: 20rpx;
+ }
+
+ .record .textArea{
+ padding:10px;
+ }
+
diff --git a/case/pages/paintCanvas/paintCanvas.js b/case/pages/paintCanvas/paintCanvas.js
index ae49bf0..f1e3a67 100644
--- a/case/pages/paintCanvas/paintCanvas.js
+++ b/case/pages/paintCanvas/paintCanvas.js
@@ -6,6 +6,7 @@ Page({
* 页面的初始数据
*/
data: {
+ showPaint:false,
hasChoosedImg: false,
canvasWidth: 0,
showBars: false,
diff --git a/case/pages/paintCanvas/paintCanvas.wxml b/case/pages/paintCanvas/paintCanvas.wxml
index 3f702b3..3866f4a 100644
--- a/case/pages/paintCanvas/paintCanvas.wxml
+++ b/case/pages/paintCanvas/paintCanvas.wxml
@@ -1,6 +1,6 @@
-
diff --git a/case/pages/paintCanvas/paintCanvas.wxss b/case/pages/paintCanvas/paintCanvas.wxss
index 1731499..adc54f3 100644
--- a/case/pages/paintCanvas/paintCanvas.wxss
+++ b/case/pages/paintCanvas/paintCanvas.wxss
@@ -55,6 +55,7 @@ page {
.space {
display: flex;
justify-content: space-between;
+ text-shadow: 2px 2px 1px #000000;
}
.bottom {
width: 750rpx;
diff --git a/case/pages/paintDraw/paintDraw.wxss b/case/pages/paintDraw/paintDraw.wxss
index 41f3aac..f580c87 100644
--- a/case/pages/paintDraw/paintDraw.wxss
+++ b/case/pages/paintDraw/paintDraw.wxss
@@ -50,4 +50,5 @@ page {
.space {
display: flex;
justify-content: space-between;
+
}
\ No newline at end of file
diff --git a/case/utils/data.js b/case/utils/data.js
new file mode 100644
index 0000000..aa8ed23
--- /dev/null
+++ b/case/utils/data.js
@@ -0,0 +1,168 @@
+const diagnoseOption=[
+ {
+ name:'肝衰竭',
+ value:0,
+ },{
+ name:'肿瘤',
+ value:1
+},{
+ name:'胆汁淤积性肝病',
+ value:2
+},
+{
+ name:'移植围手术期支持治疗',
+ value:3
+},
+{
+ name:'伴黄疸的MODS或脓毒症、重症中毒等',
+ value:4
+},
+{
+ name:'其他',
+ value:-1
+}]
+const patientSickOption=[{
+ name:'乙肝',
+ value:0
+},{
+ name:'丙肝',
+ value:1
+},{
+ name:'酒精性肝病',
+ value:2
+},{
+ name:'酒精性肝硬化',
+ value:3
+},{
+ name:'自身免疫性肝炎（AIH）',
+ value:4
+},{
+ name:'原发性胆汁性肝硬化（PBC）',
+ value:5
+},{
+ name:'原发性硬化性胆管炎（PSC）',
+ value:6
+},{
+ name:'非酒精性脂肪肝',
+ value:7
+},{
+ name:'药物性肝损伤',
+ value:8
+},{
+ name:'肝豆状核变性',
+ value:9
+},{
+ name:'甲肝',
+ value:10
+},{
+ name:'肝戊肝衰竭',
+ value:11
+},{
+ name:'其他',
+ value:-1
+}]
+const ganneiOption=[
+ {
+ name:'乙肝再激活',
+ value:0
+ },{
+ name:'大量饮酒',
+ value:1
+},{
+ name:'药物毒物',
+ value:2
+},
+{
+ name:'戊型肝炎感染',
+ value:3
+},
+{
+ name:'甲型肝炎感染',
+ value:4
+},
+{
+ name:'丙肝再激活',
+ value:5
+},
+{
+ name:'其他',
+ value:-1
+}]
+const ganwaiOption=[
+ {
+ name:'消化道出血',
+ value:0
+ },{
+ name:'感染',
+ value:1
+},{
+ name:'手术',
+ value:2
+},
+{
+ name:'劳累',
+ value:3
+},
+{
+ name:'其他',
+ value:-1
+}]
+const moshiOption=[{
+ name:'DPMAS',
+ value:0
+},{
+ name:'DPMAS+PE',
+ value:1
+},{
+ name:'DPMAS+其他',
+ value:2
+},{
+ name:'CA280吸附',
+ value:3
+},{
+ name:'DPCAS',
+ value:4
+}]
+const kangningOption=[{
+ name:'肝素',
+ value:0
+},{
+ name:'DPMAS+低分子肝素',
+ value:1
+},{
+ name:'枸橼酸',
+ value:2
+},{
+ name:'甲磺酸萘莫司他',
+ value:3
+},{
+ name:'其他',
+ value:-1
+}]
+const hospitalOption=[{
+ name:'好转',
+ value:0
+},{
+ name:'痊愈',
+ value:1
+},{
+ name:'恶化',
+ value:2
+},{
+ name:'死亡',
+ value:3
+},{
+ name:'移植',
+ value:4
+}]
+module.exports = {
+ diagnoseOption: diagnoseOption,
+ patientSickOption: patientSickOption,
+ ganneiOption: ganneiOption,
+ ganwaiOption: ganwaiOption,
+ moshiOption:moshiOption,
+ kangningOption:kangningOption,
+ hospitalOption:hospitalOption
+ }
+
+
diff --git a/components/navBar/navBar.js b/components/navBar/navBar.js
index 5937544..fd4435a 100644
--- a/components/navBar/navBar.js
+++ b/components/navBar/navBar.js
@@ -4,7 +4,7 @@ Component({
/**
* 组件的属性列表
*/
- externalClasses:['myclass'],
+ externalClasses:['myclass','colorCalss'],
properties: {
navName: {
type: String,
diff --git a/components/navBar/navBar.wxml b/components/navBar/navBar.wxml
index 6fb711e..1103d36 100644
--- a/components/navBar/navBar.wxml
+++ b/components/navBar/navBar.wxml
@@ -1,5 +1,7 @@
-
-
- {{name}}
+
+
+ {{name}}
diff --git a/components/navBar/navBar.wxss b/components/navBar/navBar.wxss
index 162b2dc..5147ab0 100644
--- a/components/navBar/navBar.wxss
+++ b/components/navBar/navBar.wxss
@@ -1,7 +1,7 @@
/* components/navBar.wxss */
.ui-navigatorbar {
position: fixed;
- z-index:99;
+
top: 0;
width: 750rpx;
height: 172rpx;
diff --git a/components/paintCanvas/paintCanvas.js b/components/paintCanvas/paintCanvas.js
new file mode 100644
index 0000000..00da777
--- /dev/null
+++ b/components/paintCanvas/paintCanvas.js
@@ -0,0 +1,225 @@
+import utils from "../../utils/utils";
+// painting-2.js
+Component({
+ properties: {
+ showPaint:{
+ type: Boolean,
+ value:false,
+ observer(newval) {
+ this.setData({
+ showPaint: newval
+ });
+ },
+ },
+ },
+
+ ready(){
+ let that = this;
+ // 获取设备信息，canvas高度用
+ wx.getSystemInfo({
+ success: function(res) {
+ console.log(res);
+ that.setData({
+ canvasWidth: res.windowWidth,
+ canvasHeight: res.windowHeight-50,
+ windowHeight: res.windowHeight
+ })
+ },
+ })
+ // 选照片
+ //this.chooseImg();
+ },
+ /**
+ * 页面的初始数据
+ */
+ data: {
+ showPaint:false,
+ hasChoosedImg: false,
+ canvasWidth: 0,
+ showBars: false,
+ canvasHeight: 0, // canvas的完整高度
+ canvasHeightLen: 0, // canvas的临时高度（用在操作栏影响画布高度时）
+ windowHeight: 0, // 屏幕高度
+ prevPosition: [0, 0], // 手指触摸的所在位置
+ background: '', // 背景图片，即导入的图片
+ colors: ["#FFFFFF", "#000000", "#ff0000", "#ffff00", "#00CC00", "#99CCFF", "#0000ff", "#ff00ff"],
+ selectColor:"#99CCFF",
+ btnInfo: [
+ {
+ type: 'width',
+ background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-1.png"); background-size: 30px 30px;'
+ },
+ {
+ type: 'color',
+ background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-2.png") white no-repeat; background-size: 24px 24px;background-position: 3px 3px;'
+ },
+ {
+ type: 'clear',
+ background: 'url("http://img0.imgtn.bdimg.com/it/u=1358545290,3102156418&fm=26&gp=0.jpg") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
+ },
+ {
+ type: 'save',
+ background: 'url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-6.png") white no-repeat; background-size: 20px 20px;background-position: 5px 5px;'
+ }
+ ],
+ width: false, // 是否开启宽度调整栏
+ color: false, // 是否开启颜色调整栏
+ r: 33,
+ g: 33,
+ b: 33,
+ selectSize:5,
+ clear: false, // 是否开启清空栏
+ eraser: false, // 是否开启橡皮擦
+ saving: false, // 是否在保存状态
+ scope: false, // 是否有保存图片的权限
+ },
+ methods:{
+ hideTuya(){
+ this.setData({
+ showPaint:false,
+ })
+ },
+ chooseBi(){
+ this.setData({
+ width: false, // 是否开启宽度调整栏
+ color: false,
+ clear: false, // 是否开启清空栏
+ eraser: false, // 是否开启橡皮擦
+ saving: false,
+ })
+ },
+ // save(e){
+ // saveImg(this, 2);
+ // this.triggerEvent('confirmUpload')
+ // },
+ tapBtn: function (e) {
+ utils.tapBtn(e, this, 2);
+ },
+ showBarsHandler(e) {
+ //this.tapBtn(e)
+ this.setData({
+ showBars: !this.data.showBars,
+ clear:false,
+ eraser:false
+
+ })
+ },
+
+ sizeHandler(e) {
+ const size = e.detail.value;
+ this.setData({
+ selectSize: size
+ })
+ },
+ hideBarsHandler() {
+ this.setData({
+ showBars: false
+ })
+ },
+ colorChange(e) {
+ this.tapBtn(e);
+ const color = e.currentTarget.dataset.color;
+ this.setData({
+ selectColor: color
+ })
+ },
+ addImg: function (e) {
+ this.chooseImg();
+ },
+
+ chooseImg() {
+ let that = this;
+ wx.chooseImage({
+ count:1,
+ success: function (res) {
+ that.setData({
+ hasChoosedImg: true,
+ })
+ wx.getImageInfo({
+ src: res.tempFilePaths[0],
+ success: function (res) {
+ // 获取图片信息，主要为宽高，选择合适的自适应方式（将最大边完整显示）
+ let [height, width] = [that.data.canvasWidth / res.width * res.height, that.data.canvasWidth];
+ if (height > that.data.windowHeight - 50) {
+ height = that.data.windowHeight - 50;
+ width = height / res.height * res.width;
+ }
+ that.setData({
+ canvasHeight: height,
+ canvasWidth: width,
+ background: res.path
+ });
+ }
+ })
+ },
+ fail: function (res) {
+ console.log(res);
+ }
+ })
+ },
+
+ touchStart: function (e) {
+ // 开始画图，隐藏所有的操作栏
+ this.setData({
+ prevPosition: [e.touches[0].x, e.touches[0].y],
+ width: false,
+ color: false,
+ canvasHeightLen: 0
+ })
+ },
+
+ touchMove: function (e) {
+ // 触摸移动，绘制中。。。
+ let ctx = wx.createCanvasContext('myCanvas',this);
+
+ if (this.data.eraser) {
+ ctx.clearRect(e.touches[0].x, e.touches[0].y, this.data.selectSize,this.data.selectSize);
+ ctx.draw(true);
+ } else {
+ ctx.setStrokeStyle(this.data.selectColor);
+ ctx.setLineWidth(this.data.selectSize);
+ ctx.setLineCap('round');
+ ctx.setLineJoin('round');
+ ctx.moveTo(this.data.prevPosition[0], this.data.prevPosition[1]);
+ ctx.lineTo(e.touches[0].x, e.touches[0].y);
+ ctx.stroke();
+ ctx.draw(true);
+ }
+
+ this.setData({
+ prevPosition: [e.touches[0].x, e.touches[0].y]
+ })
+ console.log(11111)
+ },
+
+ clearCanvas: function (e) {
+ this.tapBtn(e)
+ let ctx = wx.createCanvasContext('myCanvas',this);
+ ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
+ ctx.draw();
+ this.setData({
+ clear: false,
+ canvasHeightLen: 0
+ });
+ this.chooseBi();
+ },
+
+ chooseEraser: function () {
+ this.setData({
+ eraser: true,
+ clear: false,
+ canvasHeightLen: 0
+ })
+ },
+
+ changeColor: function (e) {
+ utils.changeColor(e, this);
+ },
+
+ changeWidth: function (e) {
+ utils.changeWidth(e, this, (this.data.canvasHeightLen + this.data.w - e.detail.value), 2);
+ },
+
+ },
+
+})
\ No newline at end of file
diff --git a/components/paintCanvas/paintCanvas.json b/components/paintCanvas/paintCanvas.json
new file mode 100644
index 0000000..20aef05
--- /dev/null
+++ b/components/paintCanvas/paintCanvas.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-icon": "@vant/weapp/icon/index",
+ "van-overlay": "@vant/weapp/overlay/index"
+ }
+}
\ No newline at end of file
diff --git a/components/paintCanvas/paintCanvas.wxml b/components/paintCanvas/paintCanvas.wxml
new file mode 100644
index 0000000..347aabc
--- /dev/null
+++ b/components/paintCanvas/paintCanvas.wxml
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+没有选择照片，点击重新选择
+
+
+
+
+
+
+ 返回
+
+ 确定
+
+
+ 铅笔
+
+ 笔触
+
+ 橡皮擦
+
+ 清除
+
+
+
+
+
+
+
+
+
+
+
+ 字号：
+
+ {{selectSize}}
+
+
+
+
+
\ No newline at end of file
diff --git a/components/paintCanvas/paintCanvas.wxss b/components/paintCanvas/paintCanvas.wxss
new file mode 100644
index 0000000..4fbf120
--- /dev/null
+++ b/components/paintCanvas/paintCanvas.wxss
@@ -0,0 +1,150 @@
+/* case/pages/paintCanvas/paintCanvas.wxss *//* painting-2.wxss */
+page {
+ background: rgba(153, 204, 255, 0.1);
+ }
+ .myclass{
+ background-color: #000!important;
+}
+.colorCalss{
+ color:#fff!important;
+}
+.ui-navigatorbar {
+ position: fixed;
+ top:0;
+ z-index:99999;
+ width: 750rpx;
+ height: 172rpx;
+ background: #FFFFFF;
+ backdrop-filter: blur(20px);
+ border-bottom: none;
+ }
+
+ .ui-navigatorbar-back {
+ position: absolute;
+ padding-left:40rpx;
+ padding-right:40rpx;
+
+ left: 0rpx;
+ font-size: 40rpx;
+ bottom: 20rpx;
+ }
+
+ .ui-title {
+ position: absolute;
+ width: 350rpx;
+ height: 88rpx;
+ line-height: 56rpx;
+ font-size: 36rpx;
+ white-space: nowrap;
+ color: #000000;
+ bottom: 0;
+ left: 200rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .upage {
+ position: relative;
+ z-index:999;
+ display: flex;
+ flex-direction: column;
+ }
+ .failText {
+ margin-top: 200rpx;
+ text-align: center;
+ color: #888;
+ }
+ .colorBtn {
+ width: 50rpx;
+ height: 50rpx;
+ border-radius: 50%;
+ margin-right: 20rpx;
+ display: inline-block;
+ border: 6rpx solid #242424;
+ }
+
+ .colorBtn.select {
+ border: 6rpx solid #FFF;
+ }
+
+ .bars {
+ right: 1rem;
+ width: 400rpx;
+ padding: 20rpx;
+ bottom: 7.5rem;
+ color: #a88cf8;
+ font-size: 32rpx;
+ font-weight: bold;
+ position: absolute;
+ border-radius: 8rpx;
+ background-color: #242424;
+ box-shadow: 0 0 1.5rem 0 #FFFFFF20;
+ }
+
+ slider {
+ margin: 20rpx 20rpx 20rpx 0 !important;
+ }
+
+ .flex_column {
+ display: flex;
+ flex-direction: column !important;
+ }
+
+ .vertical_center {
+ display: flex;
+ align-items: center;
+ }
+
+ .space {
+ display: flex;
+ justify-content: space-between;
+ text-shadow: 2px 2px 1px #000000;
+ }
+ .bottom {
+ width: 750rpx;
+ height: 100rpx;
+ position: absolute;
+ bottom: 0;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .list-item {
+ width: 60rpx;
+ height: 60rpx;
+ margin: 20rpx 0;
+ border-radius: 50%;
+ }
+
+ .choose-box {
+ width: 750rpx;
+ position: absolute;
+ bottom: 100rpx;
+ }
+
+ .color-box {
+ width: 375rpx;
+ margin: 40rpx auto;
+ }
+
+ slider {
+ margin: 40rpx 60rpx;
+ }
+
+ .choose-box-flex {
+ display: flex;
+ justify-content: space-around;
+ width: 750rpx;
+ position: absolute;
+ bottom: 100rpx;
+ font-size: 32rpx;
+ color: #666;
+ text-align: center;
+ }
+ .choose-img {
+ width: 60rpx;
+ height: 60rpx;
+ margin: 20rpx;
+ border-radius: 50%;
+ background: white;
+ }
\ No newline at end of file
diff --git a/utils/utils.js b/utils/utils.js
new file mode 100644
index 0000000..e14f506
--- /dev/null
+++ b/utils/utils.js
@@ -0,0 +1,230 @@
+function formatTime(date) {
+ var year = date.getFullYear()
+ var month = date.getMonth() + 1
+ var day = date.getDate()
+
+ var hour = date.getHours()
+ var minute = date.getMinutes()
+ var second = date.getSeconds()
+
+
+ return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+ }
+
+ function formatNumber(n) {
+ n = n.toString()
+ return n[1] ? n : '0' + n
+ }
+
+ // 公用的修改颜色
+ function changeColor(e, _this) {
+ let tempData = {};
+ tempData[e.target.dataset.color] = e.detail.value;
+ _this.setData({
+ ...tempData,
+ eraser: false,
+ });
+ }
+
+ // 公用的修改画笔宽度
+ function changeWidth(e, _this, canvasHeight, pageType) {
+ let c = {};
+ if (pageType === 1) {
+ c.canvasHeight = canvasHeight;
+ } else {
+ c.canvasHeightLen = canvasHeight;
+ }
+ _this.setData({
+ w: e.detail.value,
+ eraser: false,
+ ...c,
+ })
+ }
+
+ // 点击按钮触发的事件
+ function tapBtn(e, _this, pageType) {
+ let btnType = e.target.dataset.type;
+
+ let c = {};
+
+ switch (btnType) {
+ // 画笔宽度
+ case 'width':
+ if (pageType === 1) {
+ c.canvasHeight = (!_this.data.width) ? 130 + _this.data.w : 50
+ } else if (pageType === 2) {
+ c.canvasHeightLen = (!_this.data.width) ? Math.min(_this.data.canvasHeight, _this.data.windowHeight - _this.data.w - 130) : 0;
+ } else if (pageType === 3) {
+ c.canvasHeight = 130;
+ }
+ _this.setData({
+ width: !_this.data.width,
+ color: false,
+ clear: false,
+ ...c,
+ });
+ return;
+ // 画笔颜色
+ case 'color':
+ if (pageType === 1) {
+ c.canvasHeight = (!_this.data.color) ? 205 + _this.data.w : 50;
+ } else if (pageType === 2) {
+ c.canvasHeightLen = (!_this.data.color) ? Math.min(_this.data.canvasHeight, _this.data.windowHeight - _this.data.w - 205) : 0;
+ }
+ _this.setData({
+ width: false,
+ color: !_this.data.color,
+ clear: false,
+ ...c,
+ });
+ return;
+ // 清空按钮
+ case 'clear':
+ if (pageType === 1) {
+ c.canvasHeight = (!_this.data.clear) ? 120 + _this.data.w : 50;
+ } else if (pageType === 2) {
+ c.canvasHeightLen = (!_this.data.clear) ? Math.min(_this.data.canvasHeight, _this.data.windowHeight - _this.data.w - 120) : 0;
+ }
+ _this.setData({
+ width: false,
+ color: false,
+ clear: !_this.data.clear,
+ ...c,
+ })
+ return;
+ // 保存
+ case 'save':
+ saveImg(_this, pageType);
+ return;
+ default:
+ return;
+ }
+ }
+
+ function saveImg(_this, pageType) {
+ let c = {};
+ if (pageType === 1) {
+ c.canvasHeight = 50;
+ } else if (pageType === 2) {
+ c.canvasHeightLen = 0;
+ }
+ console.log(_this)
+ // 查看授权
+ // if (!_this.data.scope) {
+ // wx.showModal({
+ // title: '需要授权',
+ // content: '保存图片需要获取您的授权',
+ // success: (res) => {
+ // if (res.confirm) {
+ // wx.openSetting({
+ // success: (res) => {
+ // if (res.authSetting['scope.writePhotosAlbum']) {
+ // _this.setData({
+ // scope: true,
+ // })
+ // }
+ // }
+ // });
+ // }
+ // }
+ // })
+ // }
+ // 已经获得授权且不在保存中
+ //if (_this.data.scope && !_this.data.saving) {
+ // wx.showLoading({
+ // title: '保存中',
+ // mask: true,
+ // })
+ // 关闭所有的操作栏
+ _this.setData({
+ width: false,
+ color: false,
+ clear: false,
+ saving: true,
+ ...c,
+ })
+
+ if (pageType === 2) {
+ /*
+ * 对于涂鸦照片，一共分为四步：
+ * 1、将画的内容先保存出来
+ * 2、然后再将照片先画在canvas上
+ * 3、将画的内容覆盖的画在canvas上
+ * 4、最终保存
+ */
+ wx.canvasToTempFilePath({
+ canvasId: 'myCanvas',
+ success: function (res) {
+ // 把单纯用户画的内容存好了
+ let src = res.tempFilePath;
+ let ctx = wx.createCanvasContext('myCanvas',_this);
+ // 照片
+ ctx.drawImage(_this.data.background, 0, 0, _this.data.canvasWidth, _this.data.canvasHeight);
+ // 覆盖上画的内容
+ ctx.drawImage(src, 0, 0, _this.data.canvasWidth, _this.data.canvasHeight);
+ ctx.draw();
+
+ _canvaseSaveToImg(_this);
+ }
+ },_this);
+ } else {
+ _canvaseSaveToImg(_this);
+ }
+ // }
+ }
+
+ function _canvaseSaveToImg(_this) {
+ // 调用微信canvas存为图片
+ wx.canvasToTempFilePath({
+ canvasId: 'myCanvas',
+ success: function (res) {
+ // _this.triggerEvent('dealImg',{
+ // img: res.tempFilePath,
+ // type:'upload'
+ // })
+ // 转图片成功，继续调用存储相册接口
+ wx.saveImageToPhotosAlbum({
+ filePath: res.tempFilePath,
+ // 存储成功
+ success: function (r) {
+ wx.hideLoading();
+ wx.showToast({
+ title: '保存成功',
+ })
+ _this.setData({
+ saving: false,
+ showPaint:false
+ })
+ },
+ // 失败弹窗
+ fail: function (res) {
+ wx.hideLoading();
+ wx.showToast({
+ title: '保存失败',
+ icon: 'loading',
+ })
+ _this.setData({
+ saving: false,
+ showPaint:false
+ })
+ }
+ })
+ },
+ fail: function (res) {
+ // canvas转图片失败
+ wx.hideLoading();
+ wx.showToast({
+ icon: 'loading',
+ title: '失败',
+ })
+ }
+ },_this)
+ }
+
+ module.exports = {
+ formatTime: formatTime,
+ changeColor: changeColor,
+ changeWidth: changeWidth,
+ tapBtn: tapBtn,
+ }
+
\ No newline at end of file