# 星图IDE

# 介绍

需要把星图IDE的流程类型配置成H5，并且在SDK前先引入星图的前端SDK
和 IDE 的各个模版一一对应

# 使用

# 初始化

必须传入活动 ID ，其他参数按需传，注意这个ID是这个从链接 https://comm.ams.game.qq.com/ideTpl/dist/index.html#/?action=xxxx,action后的参数作为活动ID

const { StarIDE } = LOL;
const ideObj = new StarIDE(xxx);
const ideObj = new StarIDE(xxx, () => {
  // 在登录后，且IDE初始化完后会执行
  // 一般可以把页面初始化需要执行的 IDE 流程放在这里
  ideStatusInit();
});

1
2
3
4
5
6
7

参数	类型	含义
activityId	number	活动 id
cb	function	初始化配置且完成登录后回调

# 必读

如果要访问flow_xxx变量，执行一切 ide 相关操作，确保 IDE 配置初始化完成，操作写在回调函数中
调用什么类型的方法取决于当前你的流程所在的模版是什么类型，星图的模版中我们目前支持了以下内容
flowID就是你的配置流程（接口）页面，每个流程上面的id

自定义流程
抽奖流程
查询抽奖结果
绑定大区（查询大区绑定结果）
填写实物信息

如有不能 cover 的流程，请联系 jolly 进行评估及自定义开发

# 自定义流程调用

【doCustom】

参数	类型	含义
flowId	number	流程 id
sData	Object	自定义参数

返回	类型	含义
调用结果	Promise	在 then 中执行已登录的回调，catch 中执行未登录回调

ideObj
  .doCustom(12344, {
    name: 'act123',
  })
  .then((data) => {
    console.log(data);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8
9
10

# 抽奖流程

【doLottery】

参数同上

ideObj
  .doLottery(8888)
  .then((data) => {
    // 抽奖成功的回调
    console.log(data);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8
9

# 查询抽奖结果

【doQuery】

参数同上

ideObj
  .doQuery(8888)
  .then((data) => {
    // 抽奖成功的回调
    console.log(data);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8
9

# 大区绑定

可以沿用Login模块的DOM，会自动进行替换

【doAreaBind】

参数	类型	含义
flowId	number	流程 id

返回	类型	含义
绑定结果	Promise	在 then 中执行已登录的回调，catch 中执行未登录回调

ideObj
  .doAreaBind('6666')
  .then((bindedInfo) => {
    console.log(bindedInfo);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8

# 大区绑定查询

【doAreaQuery】

同上

ideObj
  .doAreaQuery('6666')
  .then((bindedInfo) => {
    console.log(bindedInfo);
  })
  .catch((e) => {
    console.log(e);
  });

1
2
3
4
5
6
7
8

# 填写实物中奖信息

DOM结构按照星图的模版来，id都填进去
页面初始化的时候请求一下，只有提交数据会走回调

【doPersonInfo】

参数	类型	含义
flowId	number	流程 id
sData	object	自定义参数

sData 中 | iShowHistory | boolean | -1 表示不显示填写历史 0 表示显示填写历史 |

返回	类型	含义
绑定结果	Promise	在 then 中执行成功的回调，catch 中执行失败回调

      <ul class="pop-address" id="ide-personInfo">
         <li>
            <p>收货人</p>
            <div class="sel-con">
               <input id="ide-personName" type="text" placeholder="请输入收货人姓名" value="" />
            </div>
         </li>
         <li>
            <p>手机号码</p>
            <div class="sel-con">
               <input id="ide-personMobile" type="text" placeholder="请输入收货人电话" value="" />
            </div>
         </li>
         <li>
            <p>省份</p>
            <div class="" id='ide-provice-conatiner'>
               <div class="sel-con1">
                  <select name="" id="">
                     <option value="" disabled selected>省份</option>
                  </select>
               </div>
               <div class="sel-con1">
                  <select name="" id="">
                     <option value="" disabled selected>城市</option>
                  </select>
               </div>
               <div class="sel-con1">
                  <select name="" id="">
                     <option value="" disabled selected>区县</option>
                  </select>
               </div>
            </div>
         </li>
         <li>
            <p>详细地址</p>
            <div class="sel-con">
               <input type="text" placeholder="请输入详细门牌等信息" value="" id="ide-personAddress" />
            </div>
         </li>
         <a href="javascript:;" id="ide-submitPersonInfo" class="tj-btn sp"
            onclick="PTTSendClick('btn','tj-btn','确认提交');" title="确认提交">确认提交</a>
      </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

不需要再进行额外的提交事件处理

  ideObj
    .doPersonInfo(xxx, { iShowHistory: 0 })
    .then((res) => {
      if (res.iRet == 100001) {
        console.log('没有获得实物奖励');
      }
      if (res.iRet == 0) {
        console.log('提交成功')
      }
    })
    .catch((e) => {
      console.log(e);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13

# 特点

只需传入 AMS 的活动 ID，自动进行全局的流程配置，不需要再复制粘贴各个流程的全局配置了
在调用对应流程函数后，以标准的形式返回而后进行回调处理

# 更新日志

2020.10.15

更新 AMS 初始化函数
修复了 milo 的依赖问题
增加了绑定大区 DOM 自适应
增加了填写实物信息&轮播模块

← AMS LOLAPP →