增加扫码定位功能

src/res/tpl/GeoCheckScene.tpl

@@ -0,0 +1,14 @@
+<div id="GeoCheckScene" fe-role="Switch">
+  <div class="qr-alert">
+    <div class="qr-invalid" style="display: none">
+      <div class="invalid-desc">二维码已失效</div>
+      <div id="refresh-btn" class="refresh" fe-role="Widget">刷新</div>
+    </div>
+    <div class="qr-wrapper"></div>
+    <div class="qr-desc">
+      <div class="first-line"></div>
+      <div class="second-line">扫描二维码进行教研授权</div>
+    </div>
+  </div>
+  <div class="click-alert" style="display: none">按遥控器 "确认" 刷新二维码</div>
+</div>

src/res/values/api.json

@@ -1,5 +1,4 @@
 {
-    "api_url": "https://talenkid.lingjiao.cn",
-    "api_url_test": "http://tt-web.api.ai160.com"
+    "api_url_": "https://talenkid.lingjiao.cn",
+    "api_url": "http://tt-web.api.ai160.com"
 }
-

src/stage/index/index.less

@@ -32,3 +32,4 @@ body {
 @import './style/GlobalGoodDetail.less';
 @import './style/ImageWareFullScreen.less';
 @import './style/VideoWareFullScreen.less';
+@import './style/GeoCheckScene.less';

src/stage/index/scene/GeoCheckScene.js

@@ -0,0 +1,130 @@
+import APIClient from '../../../util/API/APIClient';
+import Consts from '../../../util/Consts';
+
+class GeoCheckScene extends scene {
+  constructor(scope) {
+    super(scope);
+    this.timer = null;
+  }
+
+  /*
+   * 轮询二维码状态 - 失效、验证失败、验证成功、等待验证
+   */
+  queryQRCodeState() {
+    APIClient.getGeoQRState((isTrue, res) => {
+      if (!isTrue || !res.success) {
+        console.log('轮询过程中失败一次如何处置?');
+        return;
+      }
+      const { status } = res.data || {};
+      switch(status) {
+        case Consts.GEO_QR_WAITING:
+          break;
+        case Consts.GEO_QR_FAILED:
+          document.querySelector('.qr-invalid').style.display = "block";
+          document.querySelector('.click-alert').style.display = "block";
+          if (this.timer) {
+            window.clearInterval(this.timer);
+          }
+          break;
+        case Consts.GEO_QR_SUCCEED:
+          if (this.timer) {
+            window.clearInterval(this.timer);
+          }
+          if (this.moye.focusList.indexOf('WaterfallIndexScene') !== -1) {
+            this.hideScene({success: true}, 'WaterfallIndexScene');
+          }
+          else {
+            this.showScene(require('./WaterfallIndexScene.js'), {});
+          }
+          break;
+        default:
+          break;
+      }
+    });
+  }
+
+  /*
+   * 渲染一张新二维码
+   */
+  renderGeoQRImage() {
+    APIClient.getGeoQRImage((isTrue, res) => {
+      //二维码请求失败提醒
+      if (!isTrue || !res.success) {
+        TVUtil.Toast.show('二维码加载失败，请重新打开应用!', 5000);
+        return;
+      };
+      const { qrcode, simple } = res.data || {};
+      //二维码图片展现
+      const qrDom = document.querySelector('.qr-wrapper');
+      if (qrDom) {
+        const imgHTML = `<img src="${qrcode}" />`;
+        qrDom.innerHTML = imgHTML;
+      }
+      //扫码平台描述文字
+      let pltDesc = simple === '365tggj' ? '365托管管家' : '贝尔安亲家校平台';
+      const descDom = document.querySelector('.first-line');
+      if (descDom) {
+        const descHTML = `请使用<span>${pltDesc}</span>`;
+        descDom.innerHTML = descHTML;
+      }
+      //隐藏失效提示蒙层
+      document.querySelector('.qr-invalid').style.display = "none";
+      document.querySelector('.click-alert').style.display = "none";
+      //定时轮询扫码结果
+      this.timer = window.setInterval(this.queryQRCodeState.bind(this), 1500);
+    });
+  }
+
+  onCreate() {
+    this.setContentView(
+      require('../../../res/tpl/GeoCheckScene.tpl'), {}, 'GeoCheckScene', {'isParentShow': true}, () => {
+        this.renderGeoQRImage();
+      }
+    );
+  }
+
+  onPause() {
+
+  }
+
+  onDestroy() {
+
+  }
+
+  onDestroy() {
+
+  }
+
+  onActive() {
+
+  }
+
+  onInactive() {
+
+  }
+
+  onResume() {
+
+  }
+
+  onBack() {
+    return true;
+  }
+
+  onOK(e) {
+    if (e.target.id === 'refresh-btn') {
+      this.renderGeoQRImage();
+    }
+  }
+
+  oKeydown() {
+
+  }
+
+  onKeyup() {
+
+  }
+}
+
+module.exports = GeoCheckScene;

src/stage/index/scene/WaterFallIndexScene.js

@@ -291,12 +291,14 @@ class WaterfallIndexScene extends scene {
                             "uid": userDataStorage.getData().uid.toString(),
                         },
                     });
+                    // 扫二维码位置定位
+                    this.showScene(require('./GeoCheckScene.js'), {});
                 // 未正确获取到token,跳转到登录界面
                 } else {
                     if ( -1 != this.moye.focusList.indexOf('LoginScene')) {
-                    this.hideScene({}, 'LoginScene');
+                      this.hideScene({}, 'LoginScene');
                     } else {
-                    this.showScene(require('./LoginScene.js'), {});
+                      this.showScene(require('./LoginScene.js'), {});
                     }
                 }
             }

src/stage/index/scene/WaterfallIndexScene.js

@@ -291,12 +291,14 @@ class WaterfallIndexScene extends scene {
                             "uid": userDataStorage.getData().uid.toString(),
                         },
                     });
+                    // 扫二维码位置定位
+                    this.showScene(require('./GeoCheckScene.js'), {});
                 // 未正确获取到token,跳转到登录界面
                 } else {
                     if ( -1 != this.moye.focusList.indexOf('LoginScene')) {
-                    this.hideScene({}, 'LoginScene');
+                      this.hideScene({}, 'LoginScene');
                     } else {
-                    this.showScene(require('./LoginScene.js'), {});
+                      this.showScene(require('./LoginScene.js'), {});
                     }
                 }
             }

src/stage/index/style/GeoCheckScene.less

@@ -0,0 +1,74 @@
+#GeoCheckScene {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, .8);
+	z-index: 2;
+
+  .qr-alert {
+    position: relative;
+    top: 2.4rem;
+    left: 7rem;
+    height: 6rem;
+    width: 5.2rem;
+    padding: .4rem .4rem 0 .4rem;
+    border-radius: .24rem;
+    background-color: #fff;
+
+    .qr-invalid {
+      position: absolute;
+      width: 4.4rem;
+      height: 4.5rem;
+      text-align: center;
+      font-size: .32rem;
+      font-weight: lighter;
+      color: #fff;
+      padding-top: 1.5rem;
+	    background-color: rgba(0, 0, 0, .8);
+      .refresh {
+        width: 1.7rem;
+        height: .6rem;
+        line-height: .52rem;
+        margin: .15rem auto 0 auto;
+        border-radius: .2rem;
+        border: solid .04rem transparent;
+        background: #1f89fe;
+        &.fe-focus {
+          border: solid .04rem #ffe100;
+        }
+      }
+    }
+
+    .qr-wrapper {
+      width: 100%;
+      height: 4.5rem;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .qr-desc {
+      margin-top: .1rem;
+      text-align: center;
+      font-size: .3rem;
+      .first-line {
+        span {
+          color: #1874fd;
+        }
+      }
+    }
+  }
+
+  .click-alert {
+    position: absolute;
+    bottom: .8rem;
+    width: 100%;
+    text-align: center;
+    font-size: .26rem;
+    font-weight: 300;
+    color: #fff;
+  }
+}

src/util/API/APIClient.js

@@ -192,6 +192,16 @@ class APIClient {
 		AJAXHelper.delete(`/user/collection/${pid}`, null, callback);
 	}
 
+	// 定位功能二维码
+	static getGeoQRImage(callback) {
+		AJAXHelper.get('/qrcode', {}, callback);
+	}
+
+	// 查询二维码状态
+	static getGeoQRState(callback) {
+		AJAXHelper.get('/qrcode/last', {}, callback);
+	}
+
 	// 发送用户行为数据
 	static putUserAction(eventType, tarName, tarId, value, callback) {
 	  let params = { eventType, tarName, tarId, value };

src/util/Consts.js

@@ -21,6 +21,11 @@ Consts.DATA_BUILDING = 'http://ljimgs.ai160.com/2b/app_resource/data_building.jp
 Consts.TYPE_VIDEO = 0;
 Consts.TYPE_IMAGE = 3;
 
+//定位信息二维码扫码状态
+Consts.GEO_QR_WAITING = 0; //待验证
+Consts.GEO_QR_FAILED = 1;  //验证失败
+Consts.GEO_QR_SUCCEED = 2; //验证成功
+
 //产品类型
 Consts.TYPE_COURSE = 'COURSE';
 Consts.TYPE_SUPPORT = 'SUPPORT';