代码暂存

project/mock/e-family/index.js

 export const homeInfo = {
     "code": null,
     "data": {
-        "result": true,
-        "type": "joyBean",
-        "awardName": "100欢趣豆"
+        "canUpdateNickName": false,
+        "figures": [
+            {
+                "figureId": "1"
+            },
+            {
+                "figureId": "2"
+            },
+            {
+                "figureId": "3"
+            }
+        ],
+        "newUser": true,
+        "userInfo": {
+            "figureId": "1",
+            "joyBeans": 10000,
+            "nickName": "霞霞"
+        }
     },
     "message": null,
     "success": true

project/src/api/apicfg.js

 const {projectId} = CFG;
 const apiCfg = {
-  getRule: `/projectx/${projectId}/projectRule.query`,
-  doJoin: {
-    uri: `join.do`,
-    method: "post"
-  },
-  homeInfo: `/projectx/${projectId}/e-family/index.do`,
+  ruledata: `/projectx/${projectId}/projectRule.query`,
+  homeinfo: `/projectx/${projectId}/e-family/index.do`,
   updateUinfo: `/projectx/${projectId}/e-family/update.do`,
   doshare: `/projectx/${projectId}/e-family/share.do`,
   signInfo:`/projectx/${projectId}/e-family/signInfo.do`,

project/src/components/select/select.jsx

 'use strict';
 
 import React, { Component } from 'react';
+import dataCenter, { getAPIdata, Store } from '../../dataCenter';
 import resList from '../../resconfig/resList'; //import API from '../../api';
 
 import './select.less';
@@ -108,6 +109,18 @@ class Select extends Component {
     
     return showidx;
   }
+  async selectRole(){
+    let planame = this.refs.planame.value;
+    console.log(planame);
+    if(planame.length<1){
+      return;
+    }
+    let updateuinfo = await getAPIdata(Store.updateUinfo);
+    if(updateuinfo&&updateuinfo.success){
+      this.props.onClose();
+      dataCenter.setData(Store.needguide,true);
+    }
+  }
   render() {
     const {nshowidx,changed,selected} = this.state;
     return (
@@ -161,6 +174,7 @@ class Select extends Component {
         className="select_btn "
         uuid="553dac18-d798-4eeb-a64e-dd850711d44e"
         src={this.state.resList['2f3d6f0d-0695-4acf-ae87-4e6743772531'].url}
+        onClick={this.selectRole.bind(this)}
       />}
         
         
@@ -179,7 +193,7 @@ class Select extends Component {
           src={this.state.resList['a4412ebd-65be-4908-8894-b0aea8cbd4cf'].url}
           onClick={this.changeShowRole.bind(this,"left")}
         />
-        <input className="planame" type="text" placeholder="请输入昵称（不超过六字）" />
+        <input className="planame" type="text" placeholder="请输入昵称（不超过六字）" ref="planame" />
       </div>
     );
   }

project/src/dataCenter.js

+import { GDispatcher } from 'spark-wrapper-fyge';
+import API from './api'
+export const Store = {
+    homeinfo:"homeinfo",
+    ruledata:"ruledata",
+    updateUinfo:"updateUinfo",
+    doshare:"doshare",
+    signInfo:"signInfo",
+    dosign:"dosign",
+
+
+    //新手引导
+    needguide:"needguide",
+}
+
+export async function getAPIdata(netname,reqdata=null){
+    let apidata;
+    try{
+        if(reqdata){
+            apidata = await API[netname](reqdata);
+        }else{
+            apidata = await API[netname]();
+        }
+    }catch(e){
+
+    }
+    return apidata;
+}
+export async function getHomeInfo(){
+    let homeinfo = await getAPIdata(Store.homeinfo);
+    
+    if(homeinfo&&homeinfo.success&&homeinfo.data){
+      dataCenter.setData(Store.homeinfo,homeinfo.data);
+    }
+}
+
+
 const Datas = new Map();
 
 const dataCenter = {
     setData: (key, value) => {
         Datas.set(key, value);
+        if(key==Store.homeinfo||key==Store.needguide){
+            GDispatcher.dispatchEvent(key)
+        }
     },
 
     getData: (key) => {

project/src/pages/loading/loading.jsx

@@ -8,6 +8,8 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
 import API from '../../api';
 import './loading.less';
 import { Aup } from '../../pop';
+import dataCenter, { getAPIdata, getHomeInfo, Store } from '../../dataCenter';
+import { homeInfo } from '../../../mock/e-family';
 
 class Loading extends Component {
   constructor(props) {
@@ -16,34 +18,84 @@ class Loading extends Component {
       resList: resList,
     };
   }
+  jianum = 90;
+  time1 = 1;
+  loadnum1 = 0;
+  loadnum2 = 0;
 
-  async componentDidMount() {
-    const homeInfo = await API.homeInfo();
-    Promise.all([this.getCountdown(), API.getRule()]).then(([, res]) => {
-      this.oncomplete(res);
-    });
-  }
+  nshowload = 0;
 
-  getCountdown() {
-    return new Promise((r) => {
-      const delta = 30; // const timer = new Timer(1 * 30, 1000 / 30);
-      // timer.on('timer', this.onupdate, this);
-      // timer.on('complete', r, this);
-      // timer.start();
+  //load有无完毕
+  close = false;
+  componentDidMount() {
+    this.time1 = setInterval(this.updateLoad.bind(this), 30);
 
-      r();
-    });
-  }
+    this.getHomeData();
+    this.getRule();
 
-  onupdate() {
-    console.log('update');
   }
+  async getHomeData(){
+    await getHomeInfo();
+    
+    this.addLoadPro("homeinfo");
+  }
+  async getRule(){
+    let ruledata = await getAPIdata(Store.ruledata);
+    if(ruledata&&ruledata.success&&ruledata.data){
+      dataCenter.setData(Store.ruledata,ruledata.data);
+    }
+    this.addLoadPro("ruledata");
+  }
+  needLoad = ["homeinfo","ruledata"];
+  needLoadnum = 2;
+  addLoadPro(type){
+    let idx = this.needLoad.indexOf(type);
+    if(idx!=-1){
+      this.needLoad.splice(idx,1);
+      this.loadnum2 += (100-this.jianum)/this.needLoadnum;
+    }
+  }
+  updateLoad() {
+    this.loadnum1 += 2;
+    if (this.loadnum1 > this.jianum) {
+      this.loadnum1 = this.jianum;
+    }
+    let tload = this.loadnum1 + this.loadnum2;
+    if (this.nshowload <= tload) {
+      this.nshowload += 2;
+    }
+    if (this.nshowload > 100) {
+      this.nshowload = 100;
+      clearInterval(this.time1);
+    }
+    this.changeLoadShow();
+  }
+  changeLoadShow() {
+    let ratio = document.body.clientWidth / 750;
+    let percent = this.nshowload / 100;
+    if (percent >= 1) {
+      percent = 1;
+      if (!this.close) {
+        this.close = true;
+        setTimeout(() => {
+          this.oncomplete();
+        }, 100);
+      }
+    }
+    let pro = (percent - 1) * 608 * ratio;
+    this.refs.loadbar.style.WebkitMaskPosition = pro + "px 0px";
+  }
+
+  oncomplete() {
+    this.props.navigateTo('mainpage');
+    let homeinfo = dataCenter.getData(Store.homeinfo);
+    if(homeinfo){
+      const {newUser} = homeinfo;
 
-  oncomplete(res) {
-    this.props.navigateTo('mainpage', {
-      info: res.data,
-    });
-    Aup.show('Select', {}, this);
+      if(newUser){
+        Aup.show('Select', {}, this);
+      }
+    }
   }
 
   render() {
@@ -63,6 +115,7 @@ class Loading extends Component {
           className="loading_progress "
           uuid="19f75998-1403-415a-a816-090af61cfc2e"
           src={this.state.resList['97cb2a19-7bb9-4b41-ad0d-2b0f757b97ad'].url}
+          ref="loadbar"
         />
         <img
           className="loading_icon "

project/src/pages/loading/loading.less

@@ -20,6 +20,10 @@
     left: 88px;
     top: 755px;
     position: absolute;
+    mask-image: url(https://yun.duiba.com.cn/spark/assets/be3668797d9e5bbce50bc3c2a905dbe7d65dc8f0.png);
+    mask-size: 557px 37px;
+    mask-repeat: no-repeat;
+    mask-position: -557px 0px;
   }
   .loading_icon {
     width: 101px;

project/src/pages/main3/main3.jsx

@@ -8,6 +8,8 @@ import './main3.less';
 import { CanvasWidget } from 'spark-utils';
 import { Guideact } from '@spark/guideact';
 import { widgetConfig } from './widgetConfig';
+import {GDispatcher} from "spark-wrapper-fyge"
+import dataCenter, { Store } from '../../dataCenter';
 let _widget;
 class Main3 extends Component {
   constructor(props) {
@@ -16,11 +18,13 @@ class Main3 extends Component {
       resList: resList,
       nickname: 'nickname',
       avatar: 1,
-      num: "1123"
+      num: "1123",
+      needguide:false
     };
   }
 
   componentDidMount() {
+    this.initEvent();
     if (this.props.data) {
       setTimeout(() => {
         // Aup.show('PopRule', {}, this)
@@ -29,6 +33,24 @@ class Main3 extends Component {
       }, 200);
     }
   }
+  initEvent(){
+    GDispatcher.addEventListener(Store.homeinfo,this.freshHomeInfo,this);
+    GDispatcher.addEventListener(Store.needguide,this.changeGuideShow,this);
+  }
+  removeEvent(){
+
+  }
+  //首页信息显示更新
+  freshHomeInfo(){
+    let homeinfo = dataCenter.getData(Store.homeinfo);
+  }
+  changeGuideShow(){
+    let needguide = dataCenter.getData(Store.needguide);
+    this.setState({
+      needguide:needguide
+    });
+  }
+
 
   onReady(widget) {
 		_widget = widget;
@@ -45,7 +67,7 @@ class Main3 extends Component {
   }
 
   render() {
-    const { avatar, nickname, num } = this.state;
+    const { avatar, nickname, num,needguide } = this.state;
     return (
       <div className="main3 " uuid="8754a9d1-7453-474b-b722-7cb71483ae85">
         <img
@@ -152,10 +174,11 @@ class Main3 extends Component {
           src={this.state.resList['56b64b91-4e9a-49bd-bfd0-20d10b6e6556'].url}
         />
 
-        <CanvasWidget className="canvas-widget" widgetFactory={Guideact} widgetConfig={widgetConfig}
+        {needguide?<CanvasWidget className="canvas-widget" widgetFactory={Guideact} widgetConfig={widgetConfig}
           onEvent={this.onEvent.bind(this)}
           onReady={this.onReady.bind(this)} onAssetsProcess={this.onAssetsProcess.bind(this)}
-          onAssetsComplete={this.onAssetsComplete.bind(this)} />
+          onAssetsComplete={this.onAssetsComplete.bind(this)} />:""}
+        
       </div>
     );
   }

project/src/pages/main3/main3.less

@@ -157,4 +157,10 @@
     position: absolute;
     display: none;
   }
+
+  .canvas-widget{
+    width: 750px;
+    height: 1624px;
+    position: absolute;
+  }
 }