ynkszx-applet-study-player 1.0.0

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

@@ -0,0 +1,221 @@
+// plugin/components/jjb-auth/face/face-comp.js
+import { upload } from '../../../api/upload'
+import { checkLiving } from '../../../api/auth'
+import { oss } from '../../../utils/oss/index'
+
+const defaultD = {
+  loading: false,
+  error: {},
+  faceType: 0,
+  isFlag: 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 })
+        this.resetDraw()
+      }
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  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') }
+    ],
+    faceArr: [
+      '左右缓慢摇头',
+      '眨眨眼',
+      '上下缓慢点头',
+      '张张嘴',
+    ],
+    ...defaultD,
+  },
+
+  ready() {
+    console.log('LIVINGBODY=>', 'ready')
+    this.cameraCtx = wx.createCameraContext('jjb-camera', this)
+    this.onCanvas()
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onStart() {
+      this.resetDraw()
+      this.setData({ loading: true, faceType: Math.floor(Math.random() * 4) })
+      this.cameraCtx.startRecord({
+        success: () => this.onDraw(),
+        fail: () => {
+          this.setData({ isFlag: true, loading: false })
+          this.checkCamera()
+        },
+      })
+    },
+    onStop() {
+      this.cameraCtx.stopRecord({
+        success: ({ tempVideoPath }) => {
+          this.setData({ isFlag: false })
+          this.onUpload(tempVideoPath)
+        },
+        fail: () => {
+          this.setData({ isFlag: true, loading: false })
+          wx.showToast({
+            title: '录像失败，请点击按钮重新开始',
+            icon: 'none'
+          })
+        },
+      })
+    },
+    async onUpload(url) {
+      try {
+        const data = await upload(url)
+        this.onCheck(data)
+      } catch (e) {
+        this.resetDraw()
+        this.setData({ isFlag: true, loading: false })
+      }
+    },
+    async onCheck(videoUrl) {
+      const { validateId } = this.data
+      try {
+        const data = await checkLiving({ validateId, videoUrl })
+        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)
+    },
+    onCanvas() {
+      this.angel = 0;
+      wx.createSelectorQuery()
+      .in(this)
+      .select('#canvas')
+      .fields({
+        node: true,
+        size: true
+      })
+      .exec((res) => {
+        this.canvas = res[0].node;
+        this.ctx = this.canvas.getContext('2d');
+        const width = res[0].width;
+        const height = res[0].height;
+        const dpr = wx.getWindowInfo().pixelRatio;
+        this.canvas.width = width * dpr;
+        this.canvas.height = height * dpr;
+        this.ctx.scale(dpr, dpr);
+        this.xy = width / 2;
+        this.radius = this.xy - dpr;
+        this.resetDraw()
+      })
+    },
+    onDraw() {
+      const { ctx, requestId, canvas, angel, xy, radius } = this
+      if (angel >= 361) {
+        canvas.cancelAnimationFrame(requestId)
+        this.onStop()
+        return
+      }
+      ctx.strokeStyle = '#2563eb';
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.arc(xy, xy, radius, 0, (Math.PI / 180) * angel, false);
+      ctx.stroke(); 
+      this.angel = angel + 1.2;
+      this.requestId = canvas.requestAnimationFrame(this.onDraw.bind(this))
+    },
+    resetDraw() {
+      const { ctx, canvas, xy, radius } = this;
+      if (!ctx) return
+      this.angel = 0;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.strokeStyle = '#ccc';
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.arc(xy, xy, radius, 0, (Math.PI / 180) * 360, false);
+      ctx.stroke(); 
+    },
+    checkCamera() {
+      wx.getSetting({
+        success: (res) => {
+          if (!res.authSetting['scope.record']) {
+            this.setData(
+              { error: { type: 2, msg: '录音权限', scope: 'scope.record' } },
+              () => this.onError()
+            )
+          }
+        }
+      })
+    },
+    onError() {
+      const { error } = this.data
+      !error.type
+        ? this.setData(
+          { error: { type: 1, msg: '摄像头权限', scope: 'scope.camera' } },
+          () => this.onSetting()
+        )
+        : this.onSetting()
+    },
+    onSetting() {
+      const { error } = this.data
+      wx.showModal({
+        title: '温馨提示',
+        content: '您拒绝了' + error.msg,
+        showCancel: true,
+        confirmText: '去授权',
+        success: ({ confirm }) => {
+          if (confirm) {
+            wx.openSetting({
+              success: res => {
+                  if (res.authSetting[error.scope]) {
+                    this.setData({ error: {} })
+                  } else {
+                    this.onError()
+                  }
+              },
+              fail: err => {
+                  // 出错
+              }
+            })
+          }
+        }
+      })
+    }
+  }
+})

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

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

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

@@ -0,0 +1,44 @@
+<!--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-text-weight-b jjb-text-size-2xl">
+      拿起手机，{{faceArr[faceType]}}
+    </view>
+    <view style="height: 800rpx">
+      <view class="jjb-camera-box jjb-flex-col">
+        <camera
+          wx:if="{{error.type !== 1}}"
+          id="jjb-camera"
+          class="jjb-camera"
+          mode="normal"
+          device-position="front"
+          flash="auto"
+          resolution="medium"
+          binderror="onError"
+        />
+        <canvas type="2d" class="canvas" id="canvas"></canvas>
+      </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.type}}" class="jjb-btn" bindtap="onError">
+        获取{{error.msg}}
+      </button>
+      <button wx:elif="{{status === 0}}" class="jjb-btn" loading="{{loading}}" bindtap="onStart">开始验证</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/living-comp/living-comp.wxss

@@ -0,0 +1,48 @@
+/* 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: 60rpx auto 40rpx;
+  flex-direction: column;
+  position: relative;
+}
+
+.canvas {
+  width: 428rpx;
+  height: 428rpx;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.jjb-camera {
+  width: 400rpx;
+  height: 400rpx;
+  border-radius: 200rpx;
+}
+
+.jjb-tip {
+  margin-top: 24rpx;
+}
+
+.jjb-btn {
+  width: 590rpx;
+  margin-top: 50rpx;
+}
+
+.jjb-tips {
+  width: 506rpx;
+  padding-top: 84rpx;
+  margin: 28rpx auto 0px;
+  border-top: 1px solid #eee;
+}

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

@@ -0,0 +1,27 @@
+// plugin/components/jjb-auth/msg-comp/msg-comp.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    msg: {
+      type: String,
+      value: ''
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onConfirm() {
+      this.triggerEvent('confirm')
+    }
+  }
+})

package/src/components/jjb-auth/msg-comp/msg-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/msg-comp/msg-comp.wxml

@@ -0,0 +1,16 @@
+<!--plugin/components/jjb-auth/code/code-comp.wxml-->
+<view class="jjb-modal">
+  <view class="jjb-modal-content">
+    <view class="jjb-text-size-lg jjb-text-weight-b jjb-text-align-center">
+      温馨提示
+    </view>
+    <scroll-view
+      scroll-y
+      class="jjb-tip jjb-text-darken-2 jjb-text-size-n {{msg.length < 17 ? 'jjb-text-align-center' : ''}}"
+      style="max-height: 58vh"
+    >
+      <view class="jjb-box"><rich-text nodes="{{msg}}"></rich-text></view>
+    </scroll-view>
+    <view class="jjb-box" style="margin-top: 12rpx"><button class="jjb-btn" bindtap="onConfirm">重试</button></view>
+  </view>
+</view>

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

@@ -0,0 +1,17 @@
+/* plugin/components/jjb-auth/code/code-comp.wxss */
+@import "../../../style/common.wxss";
+
+.jjb-modal-content {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.jjb-box {
+  padding-left: 28rpx;
+  padding-right: 28rpx;
+}
+
+.jjb-tip {
+  margin: 28rpx 0px 48rpx;
+  line-height: 48rpx;
+}

package/src/components/jjb-auth/qa-auth.wxss

@@ -0,0 +1,9 @@
+/* plugin/components/jjb-auth/jjb-auth.wxss */
+@import "../../style/common.wxss";
+
+#auth {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 999;
+}

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

@@ -0,0 +1,38 @@
+// plugin/components/jjb-auth/msg-comp/msg-comp.js
+import { oss } from '../../../utils/oss/index'
+
+Component({
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    ico: {
+      safe: oss('safe', 'sdk/face')
+    },
+    hide: true,
+    content: `
+      点播课程学习开通了学时监管，为了保证你的学时有效，请注意：<br/>
+      1. 如在电脑进行学习，推荐使用谷歌浏览器、Edge浏览器；<br/>
+      2. 视频播放过程中会出现随机验证，请务必按要求完成验证；<br/>
+      3. 学习过程中禁止使用小窗模式、快进、倍速等插件播放视频；<br/>
+      4. 请勿同时在多设备、多窗口观看学习视频；<br/>
+      5. 请勿采用非法手段刷视频，一经发现，将清空学时并拉入黑名单；<br/>
+      6.进入黑名单人员处理规则如下：本人携带身份证原件及复印件、解除黑名单情况说明、学员证书复印件等证明材料至滇池路1177号一楼政务服务大厅窗口(以上材料需本人带到现场，原则上不接收委托)，由建设注册考试中心接件并审核材料，审核通过后完成学时清零处理并解除黑名单；<br/>
+      由以上原因造成的学时无效，无法正常获取证书的，自行承担相关责任，如有疑问请联系客服。
+    `
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onConfirm() {
+      const { hide } = this.data
+      this.triggerEvent('confirm', hide)
+    },
+    toggleHide() {
+      const { hide } = this.data
+      this.setData({ hide: !hide })
+    }
+  }
+})

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

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

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

@@ -0,0 +1,20 @@
+<!--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>
+    <scroll-view
+      scroll-y
+      class="jjb-tip jjb-text-darken-2 jjb-text-size-m"
+      style="max-height: 58vh"
+    >
+      <view style="padding: 0px 28rpx 20rpx"><rich-text nodes="{{content}}"></rich-text></view>
+    </scroll-view>
+    <button class="jjb-btn" bindtap="onConfirm">我已知晓</button>
+    <label class="jjb-text-size-m jjb-flex" bindtap="toggleHide" style="margin-top: 24rpx">
+      <radio value="r1" color="#2563EB" checked="{{hide}}"/> 不再提示
+    </label>
+  </view>
+</view>

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

@@ -0,0 +1,25 @@
+/* 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 {
+  width: 90vw;
+  padding: 28rpx 0px;
+  background-image: linear-gradient(to bottom, #E6EEFF, #FFFFFF);
+}
+
+.jjb-btn {
+  margin: 0px 28rpx;
+}

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

@@ -0,0 +1,73 @@
+// plugin/components/jjb-player/jjb-player.js
+const { storage } = require("../../utils/storage");
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    baseUrl: {
+      type: String,
+      value: "",
+    },
+    appId: {
+      type: String,
+      value: "",
+    },
+    videoSty: {
+      // 播放相关
+      type: String,
+      value: "width: 100%; height: 420rpx", // video样式,
+    },
+    options: {
+      type: Object,
+      value: {},
+    },
+  },
+  observers: {
+    baseUrl: function (value) {
+      this.onInit(value, 2);
+    },
+    appId: function (value) {
+      this.onInit(value, 3);
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    video: {},
+    error: {
+      msg: "",
+      tag: null, // 1为视频播放错误
+    }, // 视频播放错误信息
+  },
+  ready() {
+    this.video = this.selectComponent("#jjb-video");
+    this.auth = this.selectComponent("#jjb-auth");
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onInit(value, type) {
+      storage.set(type, value);
+    },
+    onPlay({ detail }) {
+      this.video?.start(detail);
+    },
+    onAuth({ detail }) {
+      this.auth?.auth(detail);
+    },
+    onError({ detail }) {
+      this.setData({ error: detail });
+    },
+    // 视频播放出错，点击确定通知客户端刷新视频地址
+    onVideoErr() {
+      this.triggerEvent("error");
+    },
+    onEnd() {
+      this.triggerEvent("end");
+    },
+  },
+});

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

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "jjb-auth": "../jjb-auth/jjb-auth",
+    "jjb-video": "./video-comp/video-comp"
+  }
+}

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

@@ -0,0 +1,19 @@
+<!--plugin/components/jjb-player/jjb-player.wxml-->
+<jjb-video
+  id="jjb-video"
+  code="{{options.sectionCode + ''}}"
+  title="{{options.sectionName}}"
+  duration="{{options.duration}}"
+  poster="{{options.poster}}"
+  url="{{options.url}}"
+  bind:auth="onAuth"
+  bind:error="onError"
+  bind:end="onEnd"
+/>
+<jjb-auth
+  id="jjb-auth"
+  err="{{error}}"
+  options="{{options}}"
+  bind:complete="onPlay"
+  bind:error="onVideoErr"
+></jjb-auth>

package/src/components/jjb-player/jjb-player.wxss

@@ -0,0 +1 @@
+/* plugin/components/jjb-player/jjb-player.wxss */

package/src/components/jjb-player/video-comp/time.wxs

@@ -0,0 +1,11 @@
+var formatN = function (num) {
+  num = Math.floor(num)
+  return num < 10 ? '0' + num : num
+}
+var format = function (time) {
+  var m = formatN(time / 60)
+  var s = formatN(time % 60)
+  return m + ':' + s
+}
+
+module.exports.format = format