ynkszx-applet-study-player 1.0.0

package/src/components/jjb-auth/face-comp/face-comp.js

@@ -0,0 +1,125 @@
+// plugin/components/jjb-auth/face/face-comp.js
+import { upload } from "../../../api/upload";
+import { checkFace } from "../../../api/auth";
+import { oss } from "../../../utils/oss/index";
+
+const defaultD = {
+  loading: false,
+  error: false,
+  status: 0,
+  result: {},
+};
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    seconds: {
+      type: Number,
+      value: null,
+      observer(value) {
+        const { status } = this.data;
+        if (value === 0 && status === 0) this.setData({ status: 2 });
+      },
+    },
+    validateId: {
+      type: String,
+      value: "",
+      observer() {
+        this.setData({ ...defaultD });
+      },
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    conf: [
+      { text: "验证中", color: "primary" },
+      { text: "验证成功", ico: oss("cg", "sdk/face"), color: "green" },
+      { text: "验证超时", ico: oss("cs", "sdk/face"), color: "orange" },
+      { text: "验证失败", ico: oss("cw", "sdk/face"), color: "red" },
+    ],
+    tips: [
+      { text: "光线充足", ico: oss("gxcz", "sdk/face") },
+      { text: "正对手机", ico: oss("zdsj", "sdk/face") },
+      { text: "脸无遮挡", ico: oss("lwzd", "sdk/face") },
+    ],
+    ...defaultD,
+  },
+
+  ready() {
+    this.ctx = wx.createCameraContext("jjb-camera", this);
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handlePhoto() {
+      this.setData({ loading: true });
+      this.ctx.takePhoto({
+        success: ({ tempImagePath }) => this.onUpload(tempImagePath),
+        fail: () => {
+          wx.showToast({ title: "拍照失败，请重试", icon: "none" });
+          this.setData({ loading: false });
+        },
+      });
+    },
+    async onUpload(url) {
+      try {
+        const data = await upload(url);
+        this.onCheck(data.url);
+      } catch (e) {
+        this.setData({ loading: false });
+      }
+    },
+    async onCheck(url) {
+      const { validateId } = this.data;
+      try {
+        const data = await checkFace({ validateId, urls: [url] });
+        const result = { verifySuccess: data.verifySuccess === 1 ? 1 : 0 };
+        this.setData({
+          status: data.verifySuccess === 1 ? 1 : 3,
+          result,
+        });
+        this.triggerEvent("check", result);
+      } catch (e) {
+        this.triggerEvent("check", { verifySuccess: 0 });
+        this.setData({ loading: false, status: 3 });
+      }
+    },
+    onRefresh() {
+      const { result } = this.data;
+      this.triggerEvent("refresh", result);
+    },
+    onError() {
+      this.setData({ error: 0 });
+      wx.showModal({
+        title: "温馨提示",
+        content: "您拒绝了摄像头权限",
+        showCancel: true,
+        confirmText: "去授权",
+        success: ({ confirm }) => {
+          if (confirm) {
+            wx.openSetting({
+              success: (res) => {
+                if (res.authSetting["scope.camera"]) {
+                  this.setData({ error: true }, () => {
+                    this.setData({ error: false });
+                  });
+                } else {
+                  this.onError();
+                }
+              },
+              fail: (err) => {
+                // 出错
+              },
+            });
+          }
+        },
+      });
+    },
+  },
+});

package/src/components/jjb-auth/face-comp/face-comp.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/components/jjb-auth/face-comp/face-comp.wxml

@@ -0,0 +1,39 @@
+<!--plugin/components/jjb-auth/face/face-comp.wxml-->
+<scroll-view scroll-y style="height: 100vh">
+  <view class="jjb-face-page jjb-flex-col">
+    <view class="jjb-title jjb-text-size-2xl jjb-text-weight-b">拿起手机，拍照</view>
+    <view style="height: 888rpx">
+      <view class="jjb-camera-box jjb-flex-col">
+        <camera
+          wx:if="{{!error}}"
+          id="jjb-camera"
+          class="jjb-camera"
+          mode="normal"
+          device-position="front"
+          flash="auto"
+          resolution="medium"
+          binderror="onError"
+        />
+      </view>
+      <view class="jjb-text-{{conf[status].color}} jjb-text-size-2xl">
+        <image wx:if="{{conf[status].ico}}" src="{{conf[status].ico}}" style="width: 44rpx;height: 44rpx; margin-right: 16rpx" />
+        <view>{{conf[status].text}}</view>
+      </view>
+      <view wx:if="{{status === 0}}" class="jjb-tip jjb-text-size-m jjb-text-grey">
+        请在<text class="jjb-text-red">{{seconds}}</text>秒内完成验证，验证通过后可继续观看
+      </view>
+      <view wx:elif="{{status === 1}}" class="jjb-tip jjb-text-size-m jjb-text-grey">
+        马上关闭验证，开始学习
+      </view>
+      <button wx:if="{{error === 0}}" class="jjb-btn" bindtap="onError">获取摄像头权限</button>
+      <button wx:elif="{{status === 0}}" class="jjb-btn" disabled="{{loading}}" loading="{{loading}}" bindtap="handlePhoto">拍照</button>
+      <button wx:elif="{{status > 1}}" class="jjb-btn" bindtap="onRefresh">重新验证</button>
+    </view>
+    <view class="jjb-tips jjb-flex-center-between jjb-text-size-m jjb-text-grey">
+      <view wx:for="{{tips}}" wx:key="text">
+        <image src="{{item.ico}}" style="width: 52rpx;height: 52rpx" />
+        <view style="margin-top: 18rpx">{{ item.text }}</view>
+      </view>
+    </view>
+  </view>
+</scroll-view>

package/src/components/jjb-auth/face-comp/face-comp.wxss

@@ -0,0 +1,39 @@
+/* plugin/components/jjb-auth/face/face-comp.wxss */
+@import "../../../style/common.wxss";
+
+.jjb-face-page {
+  background-color: #fff;
+  width: 100vw;
+  min-height: 100vh;
+  text-align: center;
+  flex-direction: column;
+}
+
+.jjb-camera-box {
+  width: 428rpx;
+  height: 428rpx;
+  margin: 80rpx auto;
+  flex-direction: column;
+}
+
+.jjb-camera {
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 200rpx;
+}
+
+.jjb-tip {
+  margin-top: 24rpx;
+}
+
+.jjb-btn {
+  width: 590rpx;
+  margin-top: 80rpx;
+}
+
+.jjb-tips {
+  width: 506rpx;
+  padding-top: 84rpx;
+  margin: 28rpx auto 0px;
+  border-top: 1px solid #eee;
+}

package/src/components/jjb-auth/face-conf/face-conf.js

@@ -0,0 +1,36 @@
+// plugin/components/jjb-auth/msg-comp/msg-comp.js
+import { oss } from '../../../utils/oss/index'
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    studentName: {
+      type: String,
+      value: ''
+    },
+    ruleType: {
+      type: String,
+      value: ''
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    ico: {
+      face: oss('face', 'sdk/face'),
+      safe: oss('safe', 'sdk/face')
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onConfirm() {
+      this.triggerEvent('confirm')
+    }
+  }
+})

package/src/components/jjb-auth/face-conf/face-conf.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/src/components/jjb-auth/face-conf/face-conf.wxml

@@ -0,0 +1,17 @@
+<!--plugin/components/jjb-auth/code/code-comp.wxml-->
+<view class="jjb-modal">
+  <view class="jjb-modal-content">
+    <image class="jjb-ico" src="{{ico.safe}}" />
+    <view class="jjb-text-size-lg jjb-text-weight-b jjb-text-align-center">
+      人脸识别验证
+    </view>
+    <view class="jjb-text-align-center jjb-tip jjb-text-darken-2 jjb-text-size-n">
+      为保证是您本人进行课程学习，请按要求完成人脸识别验证
+    </view>
+    <image class="jjb-tip-img" src="{{ico.face}}" />
+    <button class="jjb-btn" bindtap="onConfirm">开始验证</button>
+    <view class="jjb-text-grey jjb-text-align-center jjb-text-size-m" style="padding: 40rpx 0px 0px">
+      请确保是<text class="jjb-text-primary">{{studentName}}</text>本人进行操作
+    </view>
+  </view>
+</view>

package/src/components/jjb-auth/face-conf/face-conf.wxss

@@ -0,0 +1,26 @@
+/* plugin/components/jjb-auth/code/code-comp.wxss */
+@import "../../../style/common.wxss";
+
+.jjb-tip {
+  margin: 28rpx 0px 48rpx;
+  line-height: 44rpx;
+}
+
+.jjb-ico {
+  width: 80rpx;
+  height: 80rpx;
+  position: absolute;
+  right: 12rpx;
+  top: 12rpx;
+}
+
+.jjb-tip-img {
+  width: 420rpx;
+  height: 420rpx;
+  margin: 40rpx auto 60rpx;
+  display: block;
+}
+
+.jjb-modal-content {
+  background-image: linear-gradient(to bottom, #E6EEFF, #FFFFFF);
+}

package/src/components/jjb-auth/jjb-auth.js

@@ -0,0 +1,200 @@
+// plugin/components/jjb-auth/jjb-auth.js
+import { handleInit, handleRefresh } from "../../api/auth";
+import { storage } from "../../utils/storage";
+/**
+ * 验证
+ * @param {object} auth
+ * @param {string} auth.ruleType 验证规则类型 ("FACE", "人脸"),("LIVINGBODY", "活体"),("SLIDER", "滑块"),("IDCARD", "身份证"),("NUMBER", "数字")
+ * @param {number} auth.initVerify 是否需要首验证 0否1是
+ * @param {number} auth.effectiveTm 验证有效时间(秒)
+ * @param {0 | 1} auth.initVerifySuccess 首验证是否成功 0否1是
+ * @param {string} auth.validateId 验证id
+ */
+
+Component({
+  behaviors: ["wx://component-export"],
+  export() {
+    return {
+      auth: this.setAuth.bind(this),
+    };
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    options: {
+      type: Object,
+      value: {},
+    },
+    err: {
+      type: Object,
+      value: {},
+      observer(error) {
+        error.msg && this.setData({ show: true, error });
+      },
+    },
+  },
+  observers: {
+    options: function (value) {
+      if (!value || !Object.keys(value).length) return;
+      this.initAuth();
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    show: !storage.get(0),
+    isAuthTip: storage.get(0),
+    seconds: 60,
+    faceConfirm: false,
+    auth: {},
+    error: {
+      msg: "",
+      tag: null, // 视频播放出错为1
+    },
+  },
+
+  ready() {
+    this.setData({
+      show: !storage.get(0),
+      isAuthTip: storage.get(0),
+    });
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 初始化验证
+     * @returns
+     */
+    async initAuth() {
+      this.clearTimer();
+      const { options, isAuthTip } = this.data;
+      if (!isAuthTip) return;
+      if (!options) {
+        wx.showToast({
+          title: "option数据配置错误",
+          icon: "none",
+        });
+      }
+      try {
+        const auth = await handleInit(options);
+        this.setData(
+          {
+            show: auth.initVerify === 1 && auth.initVerifySuccess !== 1,
+            auth,
+            faceConfirm: false,
+            seconds: auth.effectiveTm,
+            error: {},
+          },
+          () => {
+            // 人脸/活体点击开始验证才倒计时
+            this.data.show
+              ? !["FACE", "LIVINGBODY"].includes(auth.ruleType) &&
+                this.countdown()
+              : this.onComplete();
+          }
+        );
+      } catch (msg) {
+        this.setData({ error: { msg } });
+      }
+    },
+    /**
+     * 重置验证数据
+     */
+    async refreshAuth(e) {
+      this.clearTimer();
+      const { validateId } = (e && e.detail) || {};
+      validateId ? this.setAuth(e.detail) : this.getNAuth();
+    },
+    /**
+     * 重新获取验证方式
+     */
+    async getNAuth() {
+      const { validateId } = this.data.auth;
+      if (!validateId) return;
+      try {
+        const data = await handleRefresh({ validateId });
+        this.setAuth(data);
+      } catch (error) {}
+    },
+    setAuth(data) {
+      const { auth } = this.data;
+      this.setData(
+        {
+          show: true,
+          auth: { ...auth, ...data },
+          seconds: data.effectiveTm,
+        },
+        () => {
+          this.countdown();
+        }
+      );
+    },
+    /**
+     * 倒计时
+     */
+    countdown() {
+      this.clearTimer();
+      this.timer = setTimeout(() => {
+        const { seconds } = this.data;
+        if (seconds > 0) {
+          this.setData(
+            {
+              seconds: seconds - 1,
+            },
+            () => {
+              this.countdown();
+            }
+          );
+        } else {
+          this.clearTimer();
+        }
+      }, 1e3);
+    },
+    /**
+     * 清除倒计时定时器
+     */
+    clearTimer() {
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = null;
+    },
+    /**
+     * 本次验证结束
+     */
+    onCheck({ detail }) {
+      this.clearTimer();
+      detail.verifySuccess === 1 && this.onComplete();
+    },
+    /**
+     * 完成本次验证
+     */
+    onComplete() {
+      const { auth } = this.data;
+      this.setData({ show: false });
+      this.triggerEvent("complete", auth);
+    },
+    onBack() {
+      const { show } = this.data;
+      show && wx.navigateBack();
+    },
+    onFaceTip() {
+      this.countdown();
+      this.setData({ faceConfirm: true });
+    },
+    onTips({ detail }) {
+      this.setData({ isAuthTip: true }, () => this.initAuth());
+      detail && storage.set(0, true);
+    },
+    onError() {
+      const { tag } = this.data.error;
+      if (tag === 1) {
+        this.triggerEvent("error");
+        this.setData({ error: {}, show: false });
+      } else this.initAuth();
+    },
+  },
+});

package/src/components/jjb-auth/jjb-auth.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "code-comp": "./code-comp/code-comp",
+    "face-comp": "./face-comp/face-comp",
+    "living-comp": "./living-comp/living-comp",
+    "face-conf": "./face-conf/face-conf",
+    "msg-comp": "./msg-comp/msg-comp",
+    "tip-comp": "./tip-comp/tip-comp"
+  }
+}

package/src/components/jjb-auth/jjb-auth.wxml

@@ -0,0 +1,44 @@
+<!--plugin/components/jjb-auth/jjb-auth.wxml-->
+<page-container
+  show="{{show}}"
+  z-index="{{9999}}"
+  bind:afterleave="onBack"
+>
+  <tip-comp wx:if="{{!isAuthTip}}" bind:confirm="onTips" />
+  <msg-comp wx:elif="{{error.msg}}" msg="{{error.msg}}" bind:confirm="onError" />
+  <block wx:elif="{{auth.ruleType}}">
+    <face-conf
+      wx:if="{{(auth.ruleType === 'FACE' || auth.ruleType === 'LIVINGBODY') && !faceConfirm}}"
+      studentName="{{options.studentName}}"
+      ruleType="{{auth.ruleType}}"
+      bind:confirm="onFaceTip"
+    />
+    <face-comp
+      wx:elif="{{auth.ruleType === 'FACE'}}"
+      ruleType="{{auth.ruleType}}"
+      validateId="{{auth.validateId}}"
+      countHours="{{auth.progress}}"
+      seconds="{{seconds}}"
+      bind:check="onCheck"
+      bind:refresh="refreshAuth"
+    />
+    <living-comp
+      wx:elif="{{auth.ruleType === 'LIVINGBODY'}}"
+      ruleType="{{auth.ruleType}}"
+      validateId="{{auth.validateId}}"
+      countHours="{{auth.progress}}"
+      seconds="{{seconds}}"
+      bind:check="onCheck"
+      bind:refresh="refreshAuth"
+    />
+    <code-comp
+      wx:else
+      ruleType="{{auth.ruleType}}"
+      validateId="{{auth.validateId}}"
+      countHours="{{auth.progress}}"
+      seconds="{{seconds}}"
+      bind:check="onCheck"
+      bind:refresh="refreshAuth"
+    />
+  </block>
+</page-container>