滑动验证组件

介绍

用于简单验证用户为智能生命体。

安装

yarn add @haici/wepy-component-verification

代码演示

wxml code

<view class="p-verification-demo">
  <verification />
  <view class="action">
    <view class="button" bindtap="openVerification">打开验证组件</view>
  </view>
</view>

wpy code

import Verification from "@haici/wepy-component-verification";
import * as Api from "./api";

export default class PageWidget extends wepy.page {
  components = {
    verification: Verification,
  };
  methods = {
    // 页面中打开滑块组件
    openVerification() {
      this.$broadcast("verification-show", {});
    },
  };
  events = {
    // 验证事件
    "verification-validator": async function (validatorData) {
      // 调用后台验证接口
      const { data } = await Api.getVerificationResult(validatorData);
      if (data.data.result) {
        // 验证成功 通知滑动组件
        this.$broadcast("verification-validator-success", { isValid: true });
      } else {
        // 验证失败 通知滑动组件
        this.$broadcast("verification-validator-failure", { isValid: false });
      }
    },
    // 验证成功后的回调事件
    "verification-validator-success-callback": async function () {
      this.$broadcast("verification-close", {});
      // 执行后续正常逻辑
      // ...
    },
    // 刷新事件
    "verification-refresh": async function () {
      const { data } = await Api.getVerificationResource();
      const { background, slider, id } = data.data;
      this.$broadcast("verification-resource-fetcher", {
        backgroundSrc: `http://xxx${background}.png`,
        sliderSrc: `http://xxx${slider}.png`,
        id,
      });
    },
  };
}

API

页面事件

定义在页面里，由组件被动触发，以下事件必须定义，否则功能无法使用。

| 参数 | 说明 | 类型 | 参数 | | --------------------------------------- | ------------ | ------- | ------------- | | verification-refresh | 资源获取事件 | event | | | verification-validator | 验证事件 | event | validatorData | | verification-validator-success-callback | 验证成功回调 | event | |

组件事件

以下事件内置组件中，无需用户手动定义，由页面主动触发

| 参数 | 说明 | 类型 | 参数 | | ------------------------------ | ---------------- | ------- | ------------- | | verification-show | 打开滑动验证组件 | event | | | verification-close | 关闭滑动验证组件 | event | | | verification-resource-fetcher | 资源同步事件 | event | resourceProps | | verification-validator-success | 验证成功 | event | | | verification-validator-failure | 验证失败 | event | |

事件参数

resourceProps

| 参数 | 说明 | 类型 | 参数 | | ------------- | ------------ | -------- | ------------- | | id | id | string | | | backgroundSrc | 背景图片地址 | string | | | sliderSrc | 滑块图片地址 | string | resourceProps |

事件触发流程

verification-show(打开滑动组件) =>
verification-refresh(获取资源) =>
verification-resource-fetcher(同步资源) =>
verification-validator(验证) =>
verification-validator-success | verification-validator-failure(通知验证结果) =>
verification-validator-success-callback(验证成功回调)