微信小程序實現滑動驗證拼圖

<button bindtap="visidlisd">滑動驗證</button>
<!-- 滑動驗證彈窗 -->
<view class="slide_model" wx:if="{{slidebel}}">
  <view>
      <view class="canvas_img">
            <canvas wx:if="{{!canfile_image}}" style="width: 300px; height: 104px;" canvas-id="firstCanvas"></canvas>
            <image wx:if="{{canfile_image}}" class="canvas_srinl" src="/images/slideimage_{{canfile_index}}.jpg"></image>
            <view class="canvas_view" style="left:{{canfile_x}}px;top:{{canfile_y}}px;"></view>
            <image class="canfile_image" style="top:{{canfile_y}}px;left:{{slide_clientX > 250 ? 250 : slide_clientX}}px;" src="{{canfile_image}}"></image>
        </view>
        <view class="canvas_slide">
            <view class="canvas_width" style="width:{{slide_clientX > 260?260:slide_clientX}}px;{{slide_status == 2?'background:#52CCBA;':''}}{{slide_status == 3?'background:#F57A7A;':''}}"></view>
            <view class="canvas_kus" bindtouchstart="slide_start" bindtouchmove="slide_hmove" bindtouchend="slide_chend"
      style="left:{{slide_clientX > 260?260:slide_clientX}}px;{{slide_status == 0?'color: #333;':''}}{{slide_status == 1?'background:#1991FA;':''}}{{slide_status == 2?'background:#52CCBA;':''}}{{slide_status == 3?'background:#F57A7A;':''}}">
            <view wx:if="{{slide_status < 2}}" class="cuIcon-back_android"></view>
            <view wx:if="{{slide_status == 2}}" class="cuIcon-check"></view>
            <view wx:if="{{slide_status == 3}}" class="cuIcon-close"></view>
          </view>
          <view wx:if="{{slide_status == 0}}">拖動左邊滑塊完成上方拼圖</view>
        </view>
        <view class="canvas_guil">
            <view bindtap="visidlisd" class="cuIcon-roundclose"></view>
            <view bindtap="slide_tap" class="cuIcon-refresh"></view>
        </view>
    </view>
</view>

/* 滑動驗證 */
.slide_model{width: 100%;height: 100vh;z-index: 10;position: fixed;left: 0;top: 0;background:rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;}
.slide_model>view{float: left;z-index: 1;position: relative;width: calc(300px + 60rpx);background-color: #fff;}
.canvas_img{width: 300px;height: 104px;position: relative;float: left;margin: 30rpx 30rpx 0;}
.canvas_view{width: 50px;height: 50px;position: absolute;background:#fff;z-index: 2;}
.canfile_image{width: 50px;height: 50px;position: absolute;left: 0;z-index: 3;box-shadow: 0px 1px 27px rgba(0, 0, 0, 0.2);}
.canvas_kus{width: 40px;height: 40px;background-color: #fff;font-size: 36rpx;font-weight: 700;position: absolute;left: 0;top: 0;border: 1px solid #ddd;color: #fff;}
.canvas_srinl{width: 300px;height: 104px;}
.canvas_width{position: absolute;left: 0;top: 0;height:40px;background-color: #1991FA;width: 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.cuIcon-back_android{transform:rotate(180deg);}
.canvas_slide{width: 300px;height: 40px;background:#eee;text-align: center;padding-left: 50rpx;line-height: 80rpx;float: left;margin: 30rpx;position: relative;font-size: 26rpx;}
.canvas_guil{width: 100%;border-top: 1px solid #f4f4f4;height: 100rpx;display: flex;align-items: center;float: left;font-size: 46rpx;color: #666;}
.canvas_guil>view{margin-left: 30rpx;}

Page({
  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 錯誤
  },
  // 彈窗
  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() * 2 + 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')
      context.width = 300
      context.height = 104
      context.drawImage('/images/slideimage_'+that.data.canfile_index+'.jpg',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) {
            that.setData({
              canfile_image:res.tempFilePath
            })
          }
        });
      }))
    },300)
  },
  // 滑動開始
  slide_start(e){
    this.setData({
      slide_status:1
    })
  },
  // 滑動中
  slide_hmove(e){
    this.setData({
      slide_clientX:(e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)
    })
  },
  //滑動結束
  slide_chend(e){
    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,
      })
      setTimeout(function () {
        that.setData({
          slidebel:false,
        })
      },1500)
    }else{
      that.setData({
        slide_status:3,
      })
    }
    setTimeout(function () {
      that.setData({
        slide_status:0,
        slide_clientX:0,
      })
    },1500)
  },
})