分包医生
This commit is contained in:
@@ -0,0 +1,160 @@
|
||||
import { API } from '../../../../utils/network/api'
|
||||
import { FileUtil } from '../../../../utils/fileutil'
|
||||
const api = new API()
|
||||
const app = getApp()
|
||||
Page({
|
||||
data: {
|
||||
navbarData: {
|
||||
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
|
||||
title: '多点执业认证', //导航栏 中间的标题
|
||||
},
|
||||
height: app.globalData.height,
|
||||
ctx: null,
|
||||
canvas: null,
|
||||
txt_show: true,
|
||||
template:{
|
||||
width: '676rpx',
|
||||
height: '414rpx',
|
||||
views: [
|
||||
{}
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
onReady() {
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#sign_panels')
|
||||
.fields({ node: true, size: true })
|
||||
.exec((res) => {
|
||||
const canvas = res[0].node
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.lineWidth = 5;
|
||||
// const dpr = wx.getSystemInfoSync().pixelRatio
|
||||
|
||||
canvas.width = res[0].width
|
||||
canvas.height = res[0].height
|
||||
ctx.scale(1, 1)
|
||||
console.log(ctx);
|
||||
this.setData({
|
||||
ctx: ctx,
|
||||
canvas: canvas
|
||||
});
|
||||
|
||||
console.log("onReady onReady start")
|
||||
console.log(ctx)
|
||||
console.log(canvas)
|
||||
console.log("onReady onReady end")
|
||||
})
|
||||
},
|
||||
ontouchmove(e){
|
||||
console.log("ontouchmove ontouchmove ontouchmove");
|
||||
console.log(e);
|
||||
this.data.ctx.lineWidth = 5;
|
||||
this.data.ctx.lineCap="round";
|
||||
this.data.ctx.lineJoin ="round";
|
||||
this.data.ctx.lineTo(e.touches[0].x,e.touches[0].y);
|
||||
this.data.ctx.stroke();
|
||||
},
|
||||
ontouchstart(e){
|
||||
console.log("ontouchstart ontouchstart ontouchstart")
|
||||
this.setData({
|
||||
txt_show: false
|
||||
});
|
||||
console.log(this.data.ctx);
|
||||
this.data.ctx.beginPath();
|
||||
this.data.ctx.moveTo(e.touches[0].x,e.touches[0].y);
|
||||
},
|
||||
toClear() {
|
||||
this.setData({
|
||||
txt_show: true
|
||||
});
|
||||
this.data.ctx.clearRect(0,0,this.data.canvas.width,this.data.canvas.height)
|
||||
},
|
||||
rotate(){
|
||||
let ctx = this.data.ctx;
|
||||
ctx.rotate(90);
|
||||
},
|
||||
toSave(event) {
|
||||
let _this = this;
|
||||
let base64Img = _this.data.canvas.toDataURL();
|
||||
console.log("sign: ", base64Img);
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: "sign_panels",
|
||||
canvas: _this.data.canvas,
|
||||
x:0,
|
||||
y:0,
|
||||
success(res) {
|
||||
console.log(res.tempFilePath)
|
||||
let filePath = res.tempFilePath;
|
||||
console.log(_this.data.canvas)
|
||||
console.log(_this.data.canvas.width)
|
||||
console.log(_this.data.canvas.height)
|
||||
let cs = (_this.data.canvas.height - _this.data.canvas.width)/2;
|
||||
_this.setData({
|
||||
"template.width": _this.data.canvas.height+"rpx",
|
||||
"template.height": _this.data.canvas.width+"rpx",
|
||||
"template.views[0].css.width": _this.data.canvas.width+"rpx",
|
||||
"template.views[0].css.left": cs+"rpx",
|
||||
"template.views[0].css.top": "-"+cs+"rpx",
|
||||
"template.views[0].url": filePath,
|
||||
"template.views[0].type": "image",
|
||||
"template.views[0].css.rotate": "-90",
|
||||
})
|
||||
// _this.doUploadFile(event, 2, filePath);
|
||||
}
|
||||
})
|
||||
},
|
||||
onImgOK(e){
|
||||
console.log("onImgOK onImgOK onImgOK onImgOK");
|
||||
console.log(e.detail.path);
|
||||
let txt_show = this.data.txt_show;
|
||||
if(!txt_show){
|
||||
this.doUploadFile(e, 2, e.detail.path);
|
||||
}
|
||||
},
|
||||
doUploadFile(event, scene, filePath) {
|
||||
console.log("index douploadFIle: ", event);
|
||||
console.log("scene: ", scene);
|
||||
let _this = this;
|
||||
api.getOssSign({user_type:2,scene:scene}).then(response => {
|
||||
console.log(response);
|
||||
console.log("filePath: ", filePath);
|
||||
const filename = FileUtil.UUID()+".png";
|
||||
const host = response.data.host;
|
||||
const signature = response.data.signature;
|
||||
const ossAccessKeyId = response.data.accessid;
|
||||
const policy = response.data.policy;
|
||||
const key = response.data.dir+filename;
|
||||
wx.uploadFile({
|
||||
url: host, // 开发者服务器的URL。
|
||||
filePath: filePath,
|
||||
name: 'file', // 必须填file。
|
||||
formData: {
|
||||
key,
|
||||
policy,
|
||||
OSSAccessKeyId: ossAccessKeyId,
|
||||
signature,
|
||||
},
|
||||
success: (res) => {
|
||||
console.log("upload: ", res);
|
||||
if (res.statusCode === 204) {
|
||||
wx.showToast({title: '上传成功'})
|
||||
let url = host+"/"+key;
|
||||
console.log(url);
|
||||
wx.setStorageSync("sign_image", url);
|
||||
}
|
||||
wx.navigateBack()
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err);
|
||||
wx.showToast({
|
||||
title: '上传失败',
|
||||
icon: "error"
|
||||
})
|
||||
}
|
||||
});
|
||||
}).catch(errors => {
|
||||
console.error(errors);
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"te-nav-bar": "../../../../commpents/te_navbar/index",
|
||||
"van-button": "@vant/weapp/button/index",
|
||||
"painter":"../../../commpents/painter/painter"
|
||||
},
|
||||
"disableScroll": true
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<te-nav-bar navbar-data='{{navbarData}}' ></te-nav-bar>
|
||||
<view class="container" style="height: calc(100vh - 96rpx - {{height}}px);">
|
||||
<canvas disable-scroll bindtouchstart="ontouchstart" bindtouchmove="ontouchmove" type="2d" style="width: 100vw; height: calc(100vh - {{height*2 + 20}}px);" id="sign_panels">
|
||||
<view wx:if="{{txt_show}}" class="title">签名面板</view>
|
||||
</canvas>
|
||||
<view class="btn_group">
|
||||
<van-button bindtap="toClear" custom-style="height: 70rpx;border-radius: 10rpx;color:#000;width: 230rpx;">清空</van-button>
|
||||
<van-button bindtap="toSave" custom-style="height: 70rpx;border-radius: 10rpx;color:#fff;width: 230rpx;background: linear-gradient(315deg, #33BFB8 0%, #34BFB8 0%, #3CC7C0 100%);">确认</van-button>
|
||||
</view>
|
||||
</view>
|
||||
<painter palette="{{template}}" style="position: absolute;top: 999999999999999999999999999999999900px;left: 999999999999999999999999999999999px;" bind:imgOK="onImgOK" />
|
||||
@@ -0,0 +1,22 @@
|
||||
.container{
|
||||
height: 100vh;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
width: 160rpx;
|
||||
height: 50rpx;
|
||||
position:absolute;
|
||||
left: calc(50vw - 80rpx);
|
||||
top: calc(50vh - 160rpx);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.btn_group{
|
||||
transform: rotate(90deg);
|
||||
width: 500rpx;
|
||||
position: absolute;
|
||||
left: calc(-215rpx + 50rpx);/* 和按钮的高度有关 (width/2 - 按钮高度/2) */
|
||||
bottom: calc(215rpx + 100rpx);/* 和按钮的高度有关 (width/2 - 按钮高度/2) */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
Reference in New Issue
Block a user