Skip to content

C
CFFP-HB
Commit 3da0eafc by kyle
Options

电子签名

parent e8f84d91
Showing with 423 additions and 42 deletions
components/eSignature/eSignature.vue 0 → 100644
<template>
<view class="signature-box">
<!-- 签名 -->
<view class="signature" v-show="showCanvas">
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
@touchend="touchend"></canvas>
<view class="footer">
<!-- <u-button @click="finish" type="primary" :plain="true" :ripple="true" ripple-bg-color="#909399">保存
</u-button> -->
<!-- <u-button @click="clear" type="warning" :plain="true" :ripple="true" ripple-bg-color="#909399">清除
</u-button> -->
<view class="imgBox">
<image src="../../static/clear.png" @click="clear" mode="widthFix"></image>
</view>
<!-- <u-button @click="close" type="error" :plain="true" :ripple="true" ripple-bg-color="#909399">关闭
</u-button> -->
</view>
</view>
<!-- 签完名后生成的图片 -->
<!-- <view v-show="SignatureImg" class="SignatureImg">
<image :src="SignatureImg" mode=""></image>
</view> -->
<!-- 清除签完名后生成的图片 -->
<!-- <u-button v-show="SignatureImg" @click="obliterate" type="error" :plain="true" :ripple="true"
ripple-bg-color="#909399" size="medium">清除签名</u-button> -->
</view>
</template>
<script>
import { pathToBase64 } from '@/util/jssdk_image_tools.js'
var x = 20;
var y = 20;
export default {
name:'eSignature',
data() {
return {
//绘图图像
ctx: '',
//路径点集合
points: [],
//签名图片
SignatureImg: '',
hasSign: false
};
},
props: ['showCanvas'],
methods: {
//清除签名的图片
obliterate() {
if (this.SignatureImg) {
this.SignatureImg = '';
}
this.close();
},
//关闭并清空画布
close() {
this.$emit('closeCanvas');
this.clear();
},
//创建并显示画布
createCanvas() {
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
this.ctx.setFillStyle('#000000')
this.ctx.fillStyle = '#000000'
//设置画笔样式
this.ctx.lineWidth = 4;
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
console.log(this.ctx)
},
//触摸开始，获取到起点
touchstart(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = {
X: startX,
Y: startY
};
this.points.push(startPoint);
//每次触摸开始，开启新的路径
this.ctx.beginPath();
},
//触摸移动，获取到路径点
touchmove(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
let movePoint = {
X: moveX,
Y: moveY
};
this.points.push(movePoint); //存点
let len = this.points.length;
if (len >= 2) {
this.draw(); //绘制路径
}
},
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
touchend() {
this.points = [];
},
//绘制笔迹
draw() {
let point1 = this.points[0];
let point2 = this.points[1];
this.points.shift();
this.ctx.moveTo(point1.X, point1.Y);
this.ctx.lineTo(point2.X, point2.Y);
this.ctx.stroke();
this.ctx.draw(true);
this.hasSign = true
},
//清空画布
clear() {
this.hasSign = false
let that = this;
uni.getSystemInfo({
success: function(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
}
});
},
//完成绘画并保存到本地
finish() {
if (!this.hasSign) {
uni.showToast({
title: '签名为空不能保存',
icon: 'none',
duration: 2000
})
return
}
let that = this;
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
if(!res || !res.tempFilePath) {
console.log('=====',res.tempFilePath);
that.SignatureImg = res.tempFilePath;
that.$emit('closeCanvas', that.SignatureImg);
that.close();
}else{
//用来解决安卓真机获取到的是canvas图片的临时路径，转成base64格式
pathToBase64(res.tempFilePath).then(re => {
console.log('base===============',re);
that.SignatureImg = re;
that.$emit('closeCanvas', that.SignatureImg);
that.close();
})
}
}
}
);
}
},
mounted() {
this.createCanvas();
}
};
</script>
<style lang="less" scoped>
.signature-box {
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
// height: calc(100vh-44rpx);
//签名模块
.signature {
// position: fixed;
// top: 10px;
// left: 2%;
// z-index: 999;
width: 96%;
//canvas
.mycanvas {
width: 100%;
// height: calc(100vh - 200upx);
height: calc(100vh - 400rpx);
background-color: #fff;
border-radius: 10px 10px 0 0;
}
//底部按钮
.footer {
// font-size: 14px;
// height: 150upx;
display: flex;
justify-content: space-around;
// align-items: center;
// background-color: #fff;
// border-radius: 0 0 10px 10px;
// border-top: 1px solid #a7a7a733;
}
}
//生成的图片
.SignatureImg {
image {
width: 750rpx;
height: 750rpx;
}
}
.imgBox{
width: 120rpx;
height: 120rpx;
}
}
</style>
main.js
import App from './App'; import App from './App';
import { VueSignaturePad } from "vue-signature-pad";
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue' import Vue from 'vue'
......
pages/announcement/announcement_detail.vue
...@@ -34,12 +34,8 @@ ...@@ -34,12 +34,8 @@
name:'announcement_detail', name:'announcement_detail',
components:{ components:{
}, },
<<<<<<< Updated upstream
onLoad(options){
this.id = options.id;
=======
onLoad(option){ onLoad(option){
>>>>>>> Stashed changes this.id = options.id;
this.getAnnouncementDetail(); this.getAnnouncementDetail();
}, },
methods:{ methods:{
......
pages/application-process/signature.vue
...@@ -7,40 +7,32 @@ ...@@ -7,40 +7,32 @@
<text class="page_mark">8/8</text> <text class="page_mark">8/8</text>
</view> </view>
<view class="signatureContent"> <view class="signatureContent">
<VueSignaturePad <e-signature :showCanvas="showCanvas" ref="signatureComponent"></e-signature>
id="signature"
width="100vw"
height="100vh"
ref="signaturePad"
:options="options"
/>
</view> </view>
<div class="signature_action"> <view class="fixed" url="bank-card" @click="save()">
<image src="../../static/clear.png" alt="清除"></image>
<image src="../../static/revoke.png" alt="上一步"></image>
</div>
<view class="fixed" url="bank-card">
保存并下一步 保存并下一步
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { VueSignaturePad } from "vue-signature-pad"; import eSignature from '@/components/eSignature/eSignature.vue';
export default { export default {
data() { data() {
return { return {
options: { //打开canvas绘制签名
penColor: "#c0f", showCanvas: true,
}, //是否展示操作菜单
completionSignPath: '' //签名
} }
}, },
components:{VueSignaturePad}, components:{eSignature},
onLoad() { onLoad() {
}, },
methods: { methods: {
save(){
this.$refs.signatureComponent.finish()
}
} }
} }
</script> </script>
...@@ -49,7 +41,7 @@ ...@@ -49,7 +41,7 @@
@import 'applyCommon.scss'; @import 'applyCommon.scss';
.signatureContent{ .signatureContent{
margin: 0 13px 20px 13px; margin: 0 13px 20px 13px;
background: #f8f8f8; height: 100%;
} }
.signature_action{ .signature_action{
display: flex; display: flex;
......
pages/courseDetail/courseDetail.vue
...@@ -44,14 +44,10 @@ ...@@ -44,14 +44,10 @@
</view> </view>
<!-- 相关课程列表 --> <!-- 相关课程列表 -->
<view class="relationCourseListsContent" v-show="tabType===2"> <view class="relationCourseListsContent" v-show="tabType===2">
<<<<<<< Updated upstream
<view class="totalCourseCount"> <view class="totalCourseCount">
<text v-if="requiredCount">{{requiredCount}}节必修</text> <text v-if="requiredCount">{{requiredCount}}节必修</text>
<text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text> <text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text>
</view> </view>
=======
<view class="totalCourseCount">{{requiredCount}}节必修 + {{nonRequiredCount}}节选修</view>
>>>>>>> Stashed changes
<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId"> <view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
<view class="courseInfoContent"> <view class="courseInfoContent">
<h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4> <h4>{{index + 1}}.{{item.fileTitle}}<text class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
...@@ -110,7 +106,6 @@ ...@@ -110,7 +106,6 @@
shareCode:'', shareCode:'',
shareReadId:'', shareReadId:'',
dataSource:'1', dataSource:'1',
<<<<<<< Updated upstream
requiredCount:0, requiredCount:0,
nonRequiredCount:0, nonRequiredCount:0,
videoPlaybackInfo:{}, videoPlaybackInfo:{},
...@@ -119,11 +114,9 @@ ...@@ -119,11 +114,9 @@
auditionTime:0, auditionTime:0,
viewTime:0, viewTime:0,
timer:null, timer:null,
loginType:'' loginType:'',
=======
nonRequiredCount:0, nonRequiredCount:0,
requiredCount:0 requiredCount:0
>>>>>>> Stashed changes
}; };
}, },
methods:{ methods:{
...@@ -206,12 +199,8 @@ ...@@ -206,12 +199,8 @@
console.log('相关课程详情',res); console.log('相关课程详情',res);
if(res['success']){ if(res['success']){
this.relatedCoursesLists = res['data']['data']['relatedCourseList']; this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
<<<<<<< Updated upstream
this.nonRequiredCount = res['data']['data']['nonRequiredCount']; this.nonRequiredCount = res['data']['data']['nonRequiredCount'];
this.requiredCount = res['data']['data']['requiredCount']; this.requiredCount = res['data']['data']['requiredCount'];
=======
console.log(this.relatedCoursesLists)
>>>>>>> Stashed changes
} }
}) })
}, },
......
pages/personalCenter/personalCenter.vue
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
{id:'03',categoryName:'人员管理', {id:'03',categoryName:'人员管理',
children:[ children:[
{title:'成交客户',icon:'dealCustomer',link:'',isOpen:true,isShow:false}, {title:'成交客户',icon:'dealCustomer',link:'',isOpen:true,isShow:false},
{title:'申请加盟',icon:'applyJoin',link:'',isOpen:true,isShow:true} {title:'申请加盟',icon:'applyJoin',link:'/pages/application-process/basic-info',isOpen:true,isShow:true}
], ],
}, },
{id:'04',categoryName:'团队管理', {id:'04',categoryName:'团队管理',
......
util/interceptor.ts
...@@ -9,9 +9,9 @@ export const interceptor = () => { ...@@ -9,9 +9,9 @@ export const interceptor = () => {
invoke(args) { invoke(args) {
// console.log('请求拦截器',args); // console.log('请求拦截器',args);
// 加载loading // 加载loading
// uni.showLoading({ uni.showLoading({
// title: '加载中...' title: '加载中...'
// }); });
// 当本地没有token，并且接口地址没在白名单内，需要重新获取token // 当本地没有token，并且接口地址没在白名单内，需要重新获取token
if (!uni.getStorageSync('uni-token') && !whiteApiList.includes(args.url)) { if (!uni.getStorageSync('uni-token') && !whiteApiList.includes(args.url)) {
......
util/jssdk_image_tools.js 0 → 100644
function getLocalFilePath(path) {
if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {
return path
}
if (path.indexOf('file://') === 0) {
return path
}
if (path.indexOf('/storage/emulated/0/') === 0) {
return path
}
if (path.indexOf('/') === 0) {
var localFilePath = plus.io.convertAbsoluteFileSystem(path)
if (localFilePath !== path) {
return localFilePath
} else {
path = path.substr(1)
}
}
return '_www/' + path
}
function dataUrlToBase64(str) {
var array = str.split(',')
return array[array.length - 1]
}
var index = 0
function getNewFileId() {
return Date.now() + String(index++)
}
function biggerThan(v1, v2) {
var v1Array = v1.split('.')
var v2Array = v2.split('.')
var update = false
for (var index = 0; index < v2Array.length; index++) {
var diff = v1Array[index] - v2Array[index]
if (diff !== 0) {
update = diff > 0
break
}
}
return update
}
export function pathToBase64(path) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
if (typeof FileReader === 'function') {
var xhr = new XMLHttpRequest()
xhr.open('GET', path, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
let fileReader = new FileReader()
fileReader.onload = function(e) {
resolve(e.target.result)
}
fileReader.onerror = reject
fileReader.readAsDataURL(this.response)
}
}
xhr.onerror = reject
xhr.send()
return
}
var canvas = document.createElement('canvas')
var c2x = canvas.getContext('2d')
var img = new Image
img.onload = function() {
canvas.width = img.width
canvas.height = img.height
c2x.drawImage(img, 0, 0)
resolve(canvas.toDataURL())
canvas.height = canvas.width = 0
}
img.onerror = reject
img.src = path
return
}
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(data) {
resolve(data.target.result)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
export function base64ToPath(base64) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
base64 = base64.split(',')
var type = base64[0].match(/:(.*?);/)[1]
var str = atob(base64[1])
var n = str.length
var array = new Uint8Array(n)
while (n--) {
array[n] = str.charCodeAt(n)
}
return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
}
var extName = base64.split(',')[0].match(/data\:\S+\/(\S+);/)
if (extName) {
extName = extName[1]
} else {
reject(new Error('base64 error'))
}
var fileName = getNewFileId() + '.' + extName
if (typeof plus === 'object') {
var basePath = '_doc'
var dirPath = 'uniapp_temp'
var filePath = basePath + '/' + dirPath + '/' + fileName
if (!biggerThan(plus.os.name === 'Android' ? '1.9.9.80627' : '1.9.9.80472', plus.runtime.innerVersion)) {
plus.io.resolveLocalFileSystemURL(basePath, function(entry) {
entry.getDirectory(dirPath, {
create: true,
exclusive: false,
}, function(entry) {
entry.getFile(fileName, {
create: true,
exclusive: false,
}, function(entry) {
entry.createWriter(function(writer) {
writer.onwrite = function() {
resolve(filePath)
}
writer.onerror = reject
writer.seek(0)
writer.writeAsBinary(dataUrlToBase64(base64))
}, reject)
}, reject)
}, reject)
}, reject)
return
}
var bitmap = new plus.nativeObj.Bitmap(fileName)
bitmap.loadBase64Data(base64, function() {
bitmap.save(filePath, {}, function() {
bitmap.clear()
resolve(filePath)
}, function(error) {
bitmap.clear()
reject(error)
})
}, function(error) {
bitmap.clear()
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
var filePath = wx.env.USER_DATA_PATH + '/' + fileName
wx.getFileSystemManager().writeFile({
filePath: filePath,
data: dataUrlToBase64(base64),
encoding: 'base64',
success: function() {
resolve(filePath)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment