SliderVerify.js
5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
Component({
/**
* 组件的属性列表
*/
properties: {
sildeBlockCont: { //接受父组件值
type: String
},
isVisibile:{ //控制组件
type:Boolean
}
},
/**
* 组件的初始数据
*/
data: {
slidebel:false,//滑动弹窗
canfile_image:'',//裁剪图片
canfile_index:'',//图片返回 1 至 3 之间的数
canfile_x:'',//x返回 60 至 240 之间的数
canfile_y:'',//y返回 0 至 50 之间的数
slide_clientX:0,//移动位置
slide_status:0,//0 停止操作 1 触发长按 2 正确 3 错误
originY:0, //y数据
trail:[], //数组
},
/**
* 组件的方法列表
*/
methods: {
// 弹窗
visidlisd(e){
this.setData({
slidebel:!this.data.slidebel
})
if(this.data.slidebel){
this.slide_tap()
}
},
// 画布
slide_tap(e){
var that = this
that.setData({
canfile_index:Math.round(Math.random() * 8 + 1),
canfile_x:Math.round(Math.random() * 180 + 60),
canfile_y:Math.round(Math.random() * 54),
canfile_image:''
})
clearTimeout(that.data.timeoutID)
that.data.timeoutID = setTimeout(function () {
var context = wx.createCanvasContext('firstCanvas',that)
context.width = 300
context.height = 150
wx.downloadFile({
url: 'https://hbrand.oss-cn-hangzhou.aliyuncs.com/BUSINESS/SCAN/bpp/sliderVerify/'+that.data.canfile_index+'.jpg',
success:function(res){
var imgUrl= res.tempFilePath;
context.drawImage(imgUrl,0,0,context.width,context.height)
context.draw(true,(()=>{
wx.canvasToTempFilePath({
x: that.data.canfile_x,
y: that.data.canfile_y,
width:50,
height:50,
canvasId: 'firstCanvas',
success: function (res) {
// console.log(res);
that.setData({
canfile_image:res.tempFilePath
})
}
},that);
}))
}
})
},300)
},
// 滑动开始
slide_start(e){
this.setData({
slide_status:1,
originY: e.clientY || e.touches[0].clientY
})
},
// 滑动中
slide_hmove(e){
var eventY = e.clientY || e.touches[0].clientY;
var moveY = eventY - this.data.originY;
var arr=[]
arr.push(Math.round(moveY))
this.setData({
slide_clientX:(e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60),
})
this.data.trail.push(Math.round(moveY))
},
//滑动结束
slide_chend(e){
// console.log(JSON.stringify(this.data.trail));
// 滑动结束验证
this.triggerEvent("verify",JSON.stringify(this.data.trail))
var that = this
var cliextX;
if(that.data.slide_clientX < 1){
that.data.slide_status = 0
return false
}
if(that.data.slide_clientX > 240){
cliextX = 240
}else{
cliextX = that.data.slide_clientX
}
if(((that.data.canfile_x + 5) > cliextX) && ((that.data.canfile_x - 5) < cliextX)){
that.setData({
slide_status:2,
slide_clientX:that.data.canfile_x,
})
// 验证成功触发父组件函数
this.triggerEvent("success")
that.setData({
slidebel:false,
})
}else{
that.setData({
slide_status:3,
})
// 验证失败出发父组件函数
this.triggerEvent("fail")
}
setTimeout(function () {
that.setData({
slide_status:0,
slide_clientX:0,
})
},1500)
},
},
lifetimes: {
created() {
// 在组件实例刚刚被创建时执行
},
attached: function() {
// 在组件实例进入页面节点树时执行
},
ready() {
// 在组件在视图层布局完成后执行
// console.log(this.properties.sildeBlockCont);
},
}
})