SliderVerify.js 5.1 KB
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);
		},
	}
})