@haici/wepy-component-verification v1.0.0-beta.2

滑动验证组件

介绍

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

安装

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

页面事件

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

组件事件

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

事件参数

resourceProps

事件触发流程

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