联调接口

config/dev.env.js

@@ -1,5 +1,5 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"development"',
-  BASE_API: '"http://manage.ai160.com/"',
+  BASE_API: '"https://whiteboardtest.ai160.com/"',
 }

config/prod.env.js

@@ -1,5 +1,5 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://manage.ai160.com/"',
+  BASE_API: '"https://whiteboard.ai160.com/"',
 }

src/js/login.js

@@ -1,3 +1,106 @@
 import '../style/style';
 import '../style/login';
-console.log(2222)
+import $ from 'jquery';
+// 手机号正则
+const telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
+let code = '';
+let num = 10;
+let flag = true;
+$('.login').hide();
+$('#sendCode').click(function () {
+  const phoneNum = $('#phoneNum').val().replace(/\s/ig,'');
+  if(!phoneNum) {
+    alert('请输入手机号')
+  }else if (!(telStr.test(phoneNum))) {
+    alert('手机号码输入不规范');
+    return false;
+  }
+  if(flag) {
+    // 调用获取验证码接口
+    $.get(`${process.env.BASE_API}sharedWhiteBoard/wx/user/sendMag`, {
+      phoneNum
+    }, function (res) {
+      if(res.code == 200) {
+        code = res.data;
+        time();
+      }
+    });
+  }
+})
+$('#login').click(function () {
+  const mobile = $('#phoneNum').val().replace(/\s/ig,'');
+  const sign = $('#phoneCode').val().replace(/\s/ig,'');
+  // if(sign == code) {
+    $.ajax({
+      url:`${process.env.BASE_API}sharedWhiteBoard/wx/user/loginByPhone`, 
+      type: 'POST',
+      data: JSON.stringify({
+        mobile,
+        sign
+      }), 
+      contentType: "application/json",
+      dataType: "json",
+      success: function (res) {
+        console.log(res)
+        if(res.code == 200) {
+          console.log(res.data.id)
+          $('.login').hide();
+          $('.jurisdiction').show();
+        }else if (res.code == 600) {
+          console.log(res.message)
+        }
+      }
+    });
+  // }else {
+  //   alert('验证码错误')
+  // }
+})
+//创建远程观看
+$('#ok').click(function () {
+  const title = $('#title').val().replace(/\s/ig,'');
+  const code = $('.auth-code').val().replace(/\s/ig,'');
+  if(!title) {
+    alert('请输入分会场名称')
+    return;
+  }
+  if(!code) {
+    alert('请输入授权码')
+    return;
+  }
+  $.ajax({
+    url:`${process.env.BASE_API}sharedWhiteBoard/shareJoin`, 
+    type: 'POST',
+    data: JSON.stringify({
+      uid: 1557972582753973,
+      title,
+      code
+    }), 
+    contentType: "application/json",
+    dataType: "json",
+    success: function (res) {
+      if(res.code == 200) {
+        const  shareTask = JSON.stringify(res.data.shareTask);
+        window.sessionStorage.setItem('shareTask', shareTask);
+        window.location.href="/index.html"
+      }else if (res.code == 600) {
+        console.log(res.message)
+      }
+    }
+  });
+})
+
+// 倒计时
+const time = function () {
+  setTimeout(function () {
+    flag = false;
+    $('#sendCode').html(`${num}秒后重新发送`).addClass('color');
+    num--;
+    if(num > 0) {
+      time();
+    }else {
+      num = 10; 
+      flag = true;
+      $('#sendCode').html('发送验证码').removeClass('color')
+    }
+  },1000)
+}

src/js/main.js

@@ -1,33 +1,40 @@
 import '../style/style';
 import '../style/index';
 import $ from 'jquery';
-
-let bigVideo = new ChimeePlayer({
-  wrapper: '#bigVideo',  // video dom容器
-  src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
-  box: 'hls',
-  isLive: true,
-  autoplay: true,
-  muted: false
-});
-let smallVideo = new ChimeePlayer({
-  wrapper: '#smallVideo',  // video dom容器
-  src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
-  box: 'hls',
-  isLive: true,
-  autoplay: true,
-  muted: true
-});
-
-$('#smallVideo').click(function () {
-  $('#bigVideo').removeClass('big-video').addClass('small-video');
-  $('#smallVideo').removeClass('small-video').addClass('big-video');
-  smallVideo.muted = false;
-  bigVideo.muted = true;
+$(document).ready(function() {
+  const shareTask = window.sessionStorage.getItem('shareTask');
+  if(!shareTask) {
+    window.location.href="/login.html";
+    return false;
+  }
+  const boardUrl = JSON.parse(shareTask).boardUrl;
+  const desktopUrl = JSON.parse(shareTask).desktopUrl;
+  let bigVideo = new ChimeePlayer({
+    wrapper: '#bigVideo',  // video dom容器
+    src: 'http://aldirect.flv.huya.com/huyalive/94525224-2460686034-10568566041753944064-2789274542-10057-A-0-1.flv?wsSecret=4daf935463a189964d3282dc706e3feb&wsTime=5cde45f1',
+    box: 'flv',
+    isLive: true,
+    autoplay: true,
+    muted: false
+  });
+  let smallVideo = new ChimeePlayer({
+    wrapper: '#smallVideo',  // video dom容器
+    src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
+    box: 'hls',
+    isLive: true,
+    autoplay: true,
+    muted: true
+  });
+  $('#smallVideo').click(function () {
+    $('#bigVideo').removeClass('big-video').addClass('small-video');
+    $('#smallVideo').removeClass('small-video').addClass('big-video');
+    smallVideo.muted = false;
+    bigVideo.muted = true;
+  })
+  $('#bigVideo').click(function () {
+    $('#bigVideo').removeClass('small-video').addClass('big-video');
+    $('#smallVideo').removeClass('big-video').addClass('small-video');
+    smallVideo.muted = true;
+    bigVideo.muted = false;
+  })
 })
-$('#bigVideo').click(function () {
-  $('#bigVideo').removeClass('small-video').addClass('big-video');
-  $('#smallVideo').removeClass('big-video').addClass('small-video');
-  smallVideo.muted = true;
-  bigVideo.muted = false;
-})

src/js/request.js

@@ -0,0 +1 @@
+import $ from 'jquery';

src/login.html

@@ -13,13 +13,13 @@
       <h3>手机号码登录</h3>
       <p>手机号码登录，未注册将自动创建智能白板账号</p>
       <div class="phone">
-        <input type="text">
+        <input type="text" id="phoneNum">
       </div>
       <div class="code">
-        <input type="text">
-        <button>发送验证码</button>
+        <input type="text" id="phoneCode">
+        <button id="sendCode">发送验证码</button>
       </div>
-      <div class="ok">
+      <div class="ok" id="login">
         登录
       </div>
     </div>
@@ -27,13 +27,13 @@
       <h3>请输入会议授权码</h3>
       <p>授权码是由会议发起人发送给你的</p>
       <div class="phone">
-        <input type="text" placeholder="请输入分会场名称">
+        <input type="text" placeholder="请输入分会场名称" id="title">
       </div>
       <div class="code">
         <input type="text" class="auth-code">
-        <span>授权码不正确，请检查或者</span>
+        <span style="display: none">授权码不正确，请检查或者</span>
       </div>
-      <div class="ok">
+      <div class="ok" id="ok">
         确认
       </div>
     </div>

src/style/login.less

@@ -73,6 +73,10 @@
         float: right;
         outline: none;
       }
+      .color {
+        background: #ccc;
+        color: #000;
+      }
     }
     .ok {
       width: 100%;