ynkszx-applet-study-player 1.0.0

package/README.md

@@ -0,0 +1,275 @@
+# 微信小程序学时监管 SDK 说明文档
+
+## 描述
+
+`@cqsjjb/yn-applet-study-player`用于微信小程序点播课的实时学时监管
+
+## 使用场景
+
+1、课程视频学习时使用，集成了 Video 播放器、学时监管、随机验证等；
+2、只需引入组件，传入对应参数，即可开始学习，不需要再自己写视频学习逻辑。
+
+## 支持验证方式
+
+1、FACE 拍照人脸验证；
+2、LIVINGBODY 活体验证；
+3、SLIDER 滑块拖动验证；
+4、NUMBER 数字验证；
+5、IDCARD 学员身份证号后四位验证。
+
+## 使用教程
+
+### 微信小程序原生使用：
+
+1. 安装插件
+   ```bash
+   npm install @cqsjjb/yn-applet-study-player
+   ```
+2. 构建 npm
+   ```bash
+   在微信开发者工具中，选择“工具”->“构建npm”
+   ```
+3. 引入组件
+   在需要使用的页面的 json 文件中引入组件
+   ```json
+   {
+     "usingComponents": {
+       "jjb-player": "@cqsjjb/yn-applet-study-player/components/jjb-player/jjb-player"
+     }
+   }
+   ```
+4. 使用组件
+   在需要使用的页面的 wxml 文件中引入组件
+   ```xml
+   <jjb-player></jjb-player>
+   ```
+
+### 在 uni-app 中使用
+
+1. 安装插件
+   ```bash
+   npm install @cqsjjb/yn-applet-study-player
+   ```
+2. 构建脚本
+
+由于`uni-app`并不支持直接引入微信小程序原生组件，需要使用脚本把 npm 安装的包复制到特定目录。
+
+在项目根目录新建`scripts/pkg-copy.js`文件，内容如下：
+
+```js
+// scripts/pkg-copy.js
+// 本脚本用于将原生 npm 组件复制到 wxcomponents 文件夹
+const fs = require("fs-extra");
+const path = require("path");
+
+// 需要复制的包
+const pkgList = [
+  {
+    from: "@cqsjjb/yn-applet-study-player/src",
+    to: "yn-applet-study-player",
+  },
+];
+
+const npmPath = path.join(__dirname, "../node_modules");
+const distPath = path.join(__dirname, "../src/wxcomponents");
+
+function copyPkg(pkg) {
+  const from = `${npmPath}/${pkg.from}`;
+  const to = `${distPath}/${pkg.to}`;
+  fs.copySync(from, to);
+}
+
+// 复制所有包
+pkgList.forEach(copyPkg);
+```
+
+在`package.json`新增脚本：
+
+```json
+{
+  "scripts": {
+    "postinstall": "node scripts/pkg-copy"
+  }
+}
+```
+
+执行`npm install`会把包复制到`src/wxcomponents`目录下
+
+3. 引入组件
+   在配置微信小程序的 page 的 json 文件中引入组件（一般是在`pages.json`中）：
+   ```json
+   {
+     "path": "xxxxx",
+     "style": {
+       "usingComponents": {
+         "jjb-player": "/wxcomponents/yn-applet-study-player/components/jjb-player/jjb-player"
+       }
+     }
+   }
+   ```
+4. 使用组件
+   在需要使用的页面的 vue 文件中使用组件
+   ```xml
+   <jjb-player></jjb-player>
+   ```
+
+## 参数说明
+
+### baseUrl
+
+类型：`string`
+说明：自定义接口请求地址(末尾不带斜杠`/`)，例：`https://xxx.com`，末尾不能带`/`。请求地址须在微信小程序后台配置`Request白名单`、`Upload白名单`。
+
+### videoSty
+
+类型：`string`，选填
+说明：播放器样式，默认`width: 100%; height: 420rpx`
+
+### options
+
+类型：`object`，必填
+说明：学习所需参数，见下方
+
+### appId
+
+类型：`string`，必填
+说明：接口鉴权 appId，对接的时候会给。
+
+#### options 参数说明：
+
+| 字段          | 类型             | 描述                                  | 是否必传 |
+| ------------- | ---------------- | ------------------------------------- | -------- |
+| url           | String           | 视频地址，如`.mp4`、`.m3u8`           |          |
+| appKey        | String           | 学时监管的 appkey，授权使用，对接提供 | 是       |
+| courseCode    | String \| Number | 课程 id                               | 是       |
+| courseName    | String           | 课程名称                              | 是       |
+| duration      | Number           | 当前视频时长                          | 是       |
+| durationAll   | Number           | 该岗位的需修学时                      | 是       |
+| sectionCode   | String \| Number | 课程小节 id                           | 是       |
+| sectionName   | String           | 课程小节名称                          | 是       |
+| trainPostCode | String \| Number | 培训岗位 code                         | 是       |
+| trainPostName | String           | 培训岗位名称                          | 是       |
+| trainTypeEnum | String           | 培训类型（值只能是下面两个）          | 是       |
+|               | 'SEND_JXJY'      | 继续教育                              |          |
+|               | 'SEND_GQPX'      | 岗前培训                              |          |
+| idCard        | String           | 学员身份证                            | 是       |
+| studentName   | String           | 学员姓名                              | 是       |
+| studyId       | Number \| String | 学员 id                               | 是       |
+| poster        | String           | 视频封面                              | 否       |
+
+
+
+### 事件
+
+#### bind:error
+
+类型：`function`
+说明：视频播放 video 抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑
+
+#### bind:end
+
+类型：`function`
+说明：当前视频播放结束后触发
+
+## 使用说明
+
+请参照**使用教程**正确引入组件，以下仅为代码示例，根据实际场景传入正确的参数
+
+### 原生开发
+
+在js 中初始化插件，并处理好组件需要的参数
+
+```js
+Page({
+  data: {
+    baseUrl: 'xxxx',
+    appId: 'xxxx',
+    videoSty: "width: 100%; height: 420rpx", // video样式
+    options: {
+      appKey: "xxxxxxxxxxxxxxxxx", // APPKEY
+      courseCode: "xxxxxxx", // 课程CODE/课程版本id
+      courseName: "xxxxxxx", // 课程名称
+      duration: "1623", // 当前视频时长(秒)
+      durationAll: "27", // 总视频时长(小时)
+      sectionCode: "xxxxxxx", // 课程小节CODE
+      sectionName: "xxxxxxx", // 课程小节名称
+      trainPostCode: "xxxxxxx", // 培训岗位code
+      trainPostName: "xxxxxxx", // 培训岗位名称
+      idCard: "xxxxxxxxxxxxxxxxxx", // 身份证号码
+      studentName: "xxx", // 学员名称
+      trainTypeEnum: "SEND_GQPX", // 继续教育:SEND_JXJY，岗前培训：SEND_GQPX
+      studyId: "xxxxxxx", // 继续教育任务ID或岗前培训计划ID
+      url: "https://xxx.com/xxx/xxx.mp4",  // 视频地址
+      poster: "https://xx.com/xxx/xxx.png", // 视频封面
+    },
+  },
+  methods: {
+    /**
+     * @todo 播放出错处理
+     * @description 视频播放video抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑
+     */
+    onError() {},
+    /**
+     * @todo 视频播放结束
+     * @description 视频播放结束触发
+     */
+    onEnd() {},
+  },
+});
+```
+
+4、study.wxml 中使用 jjb-player（在 json 文件中定义的组件名称）组件，传入所需参数
+
+```wxml
+<jjb-player baseUrl="{{baseUrl}}" appId="{{appId}}" options="{{options}}" bind:error="onError" bind:end="onEnd"></jjb-player>
+```
+
+### UNIAPP 开发
+
+基本与原生一致
+
+3、在页面中使用 jjb-player（在 json 文件中定义的组件名称）组件，传入所需参数
+
+```vue
+<template>
+  <jjb-player
+    :baseUrl="baseUrl"
+    :appId="appId"
+    :options="options"
+    @error="onError"
+    @end="onEnd"
+  ></jjb-player>
+</template>
+<script setup>
+const baseUrl = "xxxxx";
+const appId = "xxxxx";
+const options = ref({
+  appKey: "xxxxxxxxxxxxxxxxx", // APPKEY
+      courseCode: "xxxxxxx", // 课程CODE/课程版本id
+      courseName: "xxxxxxx", // 课程名称
+      duration: "1623", // 当前视频时长(秒)
+      durationAll: "27", // 总视频时长(小时)
+      sectionCode: "xxxxxxx", // 课程小节CODE
+      sectionName: "xxxxxxx", // 课程小节名称
+      trainPostCode: "xxxxxxx", // 培训岗位code
+      trainPostName: "xxxxxxx", // 培训岗位名称
+      idCard: "xxxxxxxxxxxxxxxxxx", // 身份证号码
+      studentName: "xxx", // 学员名称
+      trainTypeEnum: "SEND_GQPX", // 继续教育:SEND_JXJY，岗前培训：SEND_GQPX
+      studyId: "xxxxxxx", // 继续教育任务ID或岗前培训计划ID
+      url: "https://xxx.com/xxx/xxx.mp4",  // 视频地址
+      poster: "https://xx.com/xxx/xxx.png", // 视频封面
+});
+
+/**
+ * @todo 播放出错处理
+ * @description 视频播放video抛错时会显示错误提示弹窗，点击重试触发该事件，此时可重新获取视频数据，或自定义业务逻辑
+ */
+const onError = () => {};
+/**
+ * @todo 视频播放结束
+ * @description 视频播放结束触发
+ */
+const onEnd = () => {};
+</script>
+```

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ynkszx-applet-study-player",
+  "version": "1.0.0",
+  "description": "学时监管小程序SDK",
+  "private": false,
+  "main": "src/components/jjb-player/jjb-player",
+  "miniprogram": "src",
+  "author": "",
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "node  ./scripts/build.js"
+  }
+}

package/src/api/auth.js

@@ -0,0 +1,102 @@
+const { http } = require("../utils/http/index");
+
+/**
+ * 获取数字验证码
+ * @param data
+ */
+const getCaptcha = (data) => {
+  return http.request({
+    url: "/sdk/handle/captcha",
+    method: "POST",
+    data,
+  });
+};
+
+/**
+ * 初始化验证
+ * @param data
+ */
+const handleInit = (data) => {
+  return http.request({
+    url: "/sdk/handle/init",
+    method: "POST",
+    data: { ...data, terminalCode: "MINI_APPS" },
+  });
+};
+/**
+ * 重新获取验证方式
+ * @param data
+ */
+const handleRefresh = (data) => {
+  return http.request({
+    url: "/sdk/handle/afresh",
+    method: "POST",
+    data,
+  });
+};
+/**
+ * 校验验证码
+ * @param data
+ * @param {number} data.validateId 验证ID
+ * @param {string} data.ruleValue 验证值，滑块传TRUE
+ * @param {string} data.countHours 当前进度
+ */
+const checkCaptcha = (data) => {
+  return http.request({
+    url: "/sdk/handle/check",
+    method: "POST",
+    data,
+  });
+};
+/**
+ * 小程序（人脸）验证
+ * @param {number} data.validateId 学习记录id，认证id
+ * @param {string} data.urls 人脸oss地址
+ * @returns data.verifySuccess 验证是否成功 0否1是
+ */
+const checkFace = (data) => {
+  return http.request(
+    {
+      url: "/sdk/handle/qr/check",
+      method: "POST",
+      header: {
+        "Group-App-Id": "THOS-MIN-8010315302225062013052",
+      },
+      data,
+    },
+    {
+      crypto: false,
+    }
+  );
+};
+
+/**
+ * 小程序（活体）验证
+ * @param {number} data.validateId 学习记录id，认证id
+ * @param {string} data.videoUrl oss地址
+ * @returns data.verifySuccess 验证是否成功 0否1是
+ */
+const checkLiving = (data) => {
+  return http.request(
+    {
+      url: "/sdk/handle/qr/living",
+      method: "POST",
+      data,
+      header: {
+        "Group-App-Id": "THOS-MIN-8010315302225062013052",
+      },
+    },
+    {
+      crypto: false,
+    }
+  );
+};
+
+module.exports = {
+  handleInit,
+  handleRefresh,
+  getCaptcha,
+  checkCaptcha,
+  checkFace,
+  checkLiving,
+};

package/src/api/player.js

@@ -0,0 +1,27 @@
+const { http } = require('../utils/http/index')
+
+
+/**
+ * 播放视频
+ * @param data
+ * @param {0 | 1 | 2 | 3} type 0: 开始 1: 暂停 2: 结束 3: 保存实时进度 
+ */
+const handlePlayer = (data, type) => {
+  const url = [
+    '/sdk/handle/start',
+    '/sdk/handle/suspend',
+    '/sdk/handle/end',
+    '/sdk/handle/studyCourse',
+  ]
+  return http.request({
+    url: url[type],
+    method: 'POST',
+    data,
+  }, {
+    loading: type !== 3
+  })
+}
+
+module.exports = {
+  handlePlayer,
+}

package/src/api/upload.js

@@ -0,0 +1,28 @@
+const { http } = require("../utils/http/index");
+
+/**
+ * 轮询查询人脸或者活体是否验证成功
+ * @param {string} filePath
+ * @returns
+ */
+export const upload = (filePath) => {
+  return http.upload(
+    {
+      url: "/union/file/pubUpload",
+      method: "POST",
+      name: "file",
+      filePath,
+      header: {
+        "App-Id": "19000002",
+        "Group-App-Id": "THOS-MIN-8010315302225062013052",
+      },
+    },
+    {
+      crypto: false,
+    }
+  );
+};
+
+module.exports = {
+  upload,
+};

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

@@ -0,0 +1,83 @@
+// plugin/components/jjb-auth/code/code-comp.js
+import { checkCaptcha } from '../../../api/auth'
+import { oss } from '../../../utils/oss/index'
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    seconds: {
+      type: Number,
+      value: 0
+    },
+    validateId: {
+      type: String,
+      value: '',
+      observer() {
+        this.setData({ isFlag: false, result: {} })
+      }
+    },
+    countHours: {
+      type: Number,
+      value: '',
+    },
+    ruleType: {
+      type: String,
+      value: ''
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    ico: {
+      error: oss('cw', 'sdk/face'),
+      warn: oss('cs', 'sdk/face'),
+      safe: oss('safe', 'sdk/face'),
+    },
+    isFlag: false,
+    result: {},
+    conf: {
+      NUMBER: {
+        title: '请输入数字验证码',
+        msg: '数字验证'
+      },
+      COMPUTE: {
+        title: '请输入计算结果',
+        msg: '计算，并将正确的计算结果填入空格内'
+      },
+      SLIDER: {
+        title: '请拖动滑块',
+        msg: '滑动验证'
+      },
+      IDCARD: {
+        title: '请输入身份证号码',
+        msg: '身份证验证'
+      },
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    async onCheck({ detail }) {
+      try {
+        const { validateId, countHours } = this.data
+        const result = await checkCaptcha({ ruleValue: detail, validateId, countHours })
+        result.verifySuccess = result.verifySuccess === 1 ? 1 : 0
+        this.triggerEvent('check', result)
+        this.setData({ isFlag: false, result })
+      } catch (e) {
+        this.triggerEvent('check', { verifySuccess: 0 })
+        this.setData({ isFlag: true })
+      }
+    },
+    onRefresh() {
+      const { result } = this.data
+      this.triggerEvent('refresh', result)
+    }
+  }
+})

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

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "verify-move": "../../jjb-verify/verify-move/verify-move",
+    "verify-number": "../../jjb-verify/verify-number/verify-number",
+    "verify-idcard": "../../jjb-verify/verify-idcard/verify-idcard"
+  }
+}

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

@@ -0,0 +1,33 @@
+<!--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 wx:if="{{result.verifySuccess === 0 || isFlag}}">
+      <view class="jjb-flex jjb-text-red jjb-text-size-lg jjb-text-weight-b" style="margin: 20rpx 0px 60rpx">
+        <image src="{{ico.error}}" style="width: 36rpx; height: 36rpx;margin-right: 20rpx" />
+        <view>验证失败</view>
+      </view>
+      <button class="jjb-btn" bindtap="onRefresh">重新验证</button>
+    </view>
+    <view wx:elif="{{seconds <= 0}}">
+      <view class="jjb-flex jjb-text-orange jjb-text-size-lg jjb-text-weight-b" style="margin: 20rpx 0px 60rpx">
+        <image src="{{ico.warn}}" style="width: 36rpx; height: 36rpx;margin-right: 20rpx" />
+        <view>验证超时</view>
+      </view>
+      <button class="jjb-btn" bindtap="onRefresh">重新验证</button>
+    </view>
+    <!-- 验证 -->
+    <block wx:else>
+      <view class="jjb-text-size-lg jjb-text-weight-b jjb-text-align-center">
+        {{conf[ruleType].title}}
+      </view>
+      <view class="jjb-text-align-center jjb-tip jjb-text-darken-2 jjb-text-size-n">
+        请在<text class="jjb-text-red">{{seconds || '0'}}</text>秒内完成{{conf[ruleType].msg}}，验证通过后可继续观看
+      </view>
+      <verify-number wx:if="{{ruleType === 'NUMBER'}}" validateId="{{validateId}}" bind:confirm="onCheck" />
+      <verify-move wx:elif="{{ruleType === 'SLIDER'}}" validateId="{{validateId}}" bind:confirm="onCheck" />
+      <verify-idcard wx:elif="{{ruleType === 'IDCARD'}}" validateId="{{validateId}}" bind:confirm="onCheck" />
+    </block>
+  </view>
+</view>

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

@@ -0,0 +1,19 @@
+/* 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-modal-content {
+  background-image: linear-gradient(to bottom, #E6EEFF, #FFFFFF);
+}