LOL前端开发手册

# AMS

# 介绍

  1. 和 AMS 的各个流程一一对应
  2. 可以支持引入多个业务

# 使用

# 初始化

必须传入活动 ID ，其他参数按需传

const amsObj = new AMS(xxx);
// 如果不需要一进页面就发出一些 amsInit 请求，这里就填 false
const amsObj = new AMS(xxx, false);
const amsObj = new AMS(xxx, () => {
  // 在登录后，且AMS初始化完后会执行
  // 一般可以把页面初始化需要执行的 AMS 流程放在这里
  amsStatusInit();
});
// 可以引入多个不同/相同业务的AMS配置
const amsObj = new AMS(xxx, () => {
  amsStatusInit();
},'jk');
1
2
3
4
5
6
7
8
9
10
11
12
参数 类型 含义
activityId number 活动 id
init boolean 是否需要自动进行amsInit初始化，默认为true
cb function 初始化配置且完成登录后回调
bizID string lol/jk/lgamem/lole，不传默认是当前域名所属业务

# 必读

  1. 如果要访问amsCfg_xxx变量，执行一切 ams 相关操作，确保 AMS 配置初始化完成，操作写在回调函数中
  2. init为true时，白模版里面的amsInit会自动调用，会有副作用，eg：使用了绑定大区功能，页面在初始化未登录时会自动拉取登录态
  3. 调用什么类型的方法取决于当前你的流程所在的模块是什么类型，eg：自定义模块里面的查询也应该调用自定义函数doCustom而不是doQuery

AMS 的配置流程包括若干类型

  1. 自定义流程
  2. 抽奖流程
  3. 查询抽奖结果
  4. 绑定大区（查询大区绑定结果）
  5. 填写实物信息
  6. 轮播

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

# 自定义流程调用

【doCustom】

参数 类型 含义
flowId number 流程 id
sData Object 自定义参数
返回 类型 含义
调用结果 Promise 在 then 中执行已登录的回调，catch 中执行未登录回调
amsObj
  .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】

参数同上

amsObj
  .doLottery(8888)
  .then((data) => {
    // 抽奖成功的回调
    console.log(data);
  })
  .catch((e) => {
    console.log(e);
  });
1
2
3
4
5
6
7
8
9

# 查询抽奖结果

【doQuery】

参数同上

amsObj
  .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 中执行未登录回调
amsObj
  .doAreaBind('6666')
  .then((bindedInfo) => {
    console.log(bindedInfo);
  })
  .catch((e) => {
    console.log(e);
  });
1
2
3
4
5
6
7
8

# 大区绑定查询

【doAreaQuery】

同上

amsObj
  .doAreaQuery('6666')
  .then((bindedInfo) => {
    console.log(bindedInfo);
  })
  .catch((e) => {
    console.log(e);
  });
1
2
3
4
5
6
7
8

# 轮播

【doBroadCast】

参数 类型 含义
flowId number 流程 id
selfConfig object 配置参数

selfConfig 包含内容 | contentId | string | broadcastContent*${flowId} 容器 ID | | templateId | string | broadcastTemplate*${flowId} 模板 ID | | showLiNum | number | 轮播默认显示的条数，默认 6 条 | | scrollstep | number | 每次移动的像素 默认是 1 像素 | | scrollstoptime | number | 间断时间(毫秒)默认是 20 毫秒 | | isAutoRun | boolean | 默认是有轮播的，如果不想要轮播。返回轮播数据把 isAutoRun 设置成 false 既可|

返回 类型 含义
绑定结果 Promise 在 then 中执行已登录的回调，catch 中执行未登录回调
  1. 如果要使用 AMS 的轮播显示，页面中需要有如下 DOM 结构
<div id="broadcast_xxx"></div>
<ul id="broadcastContent_xxx"></ul>
<script type="text/html" id="broadcastTemplate_xxx">
  <!-- broadcastTemplate_xxx 的子节点必须是 li -->
  <li></li>
</script>
1
2
3
4
5
6
  1. 只获取轮播数据
amsObj
  .doBroadCast(flowId, { isAutoRun: false })
  .then((broadCastData) => {
    // 处理轮播数据
  })
  .catch((e) => {
    console.log(e);
  });
1
2
3
4
5
6
7
8

# 填写实物中奖信息

  1. 虽然功能差不多，但会有一些个性化要求，因此只提供基础的配置，回调就参考模版自己写吧
  2. 弹出层容器的 id，和提交表单的按钮 id，都按照默认白模版来
  3. 为了方便把白模版的代码贴在下面参考，不要照搬，按需修改

【doPersonInfo】

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

sData 中 | iShow | boolean | 1 表示拉上次填写的信息 0 表示要提交表单信息 |

返回 类型 含义
绑定结果 Promise 在 then 中执行成功的回调，catch 中执行失败回调
<a href="###" id="btn_personInfo_706028">填写个人信息</a>

<div id="personInfoContent_706028" class="defaultContent" style="display:none;">
  <form id="form_personInfo_706028" name="form_personInfo_706028">
    <header>
      <a href="###" id="colseLayer_706028" style="float: right;">关闭</a>
    </header>
    <section style="clear: both;">
      <table class="lz_act_pop_table">
        <tbody>
          <tr style="display:none;" id="tr_package_name_706028">
            <td><span class="star">*</span> 所获实物：</td>
          </tr>
          <tr style="display:none;" id="tr_package_value_706028">
            <td>
              <select name="sPackageInfo" id="package_706028"></select>
            </td>
          </tr>
          <tr>
            <td><span class="star">* </span>姓名：</td>
          </tr>
          <tr>
            <td>
              <input name="sName" type="text" />
            </td>
          </tr>

          <tr>
            <td><span class="star"> </span>性别：</td>
          </tr>
          <tr>
            <td>
              <label for="sMale"
                ><input
                  type="radio"
                  checked="checked"
                  style="width: 14px;"
                  value="male"
                  id="sMale"
                  name="sGender"
                />男</label
              >
              <label for="sFemale"
                ><input
                  type="radio"
                  value="female"
                  style="width: 14px;"
                  id="sFemale"
                  name="sGender"
                />女</label
              >
            </td>
          </tr>

          <tr>
            <td><span class="star">* </span>身份证号码：</td>
          </tr>
          <tr>
            <td><input name="sIdentity" type="text" /></td>
          </tr>

          <tr>
            <td><span class="star">* </span>手机号码：</td>
          </tr>
          <tr>
            <td><input name="sMobile" type="text" /></td>
          </tr>

          <tr>
            <td><span class="star">* </span>所在城市：</td>
          </tr>
          <tr>
            <td>
              <select
                name="sProvince"
                id="province_706028"
                style="width:100px;"
              ></select>
              <select
                name="sCity"
                id="city_706028"
                style="width:100px;"
              ></select>
              <select
                name="sExtend2"
                id="county_706028"
                style="width:100px;"
              ></select>
            </td>
          </tr>

          <tr>
            <td><span> </span>邮政编码：</td>
          </tr>
          <tr>
            <td><input name="sPostCode" type="text" /></td>
          </tr>

          <tr>
            <td><span class="star">* </span>详细地址：</td>
          </tr>
          <tr>
            <td><input name="sAddress" type="text" /></td>
          </tr>
          <tr>
            <td>发货订单：<span id="sExtend1_706028">暂无</span></td>
          </tr>
        </tbody>
      </table>
    </section>
    <footer>
      <a href="###" id="personInfoContentBtn_706028" class="submitBtn"></a>
    </footer>
  </form>
</div>
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

代码仅供参考，按需修改！！！

let flowId = '123456';
const PersonInfoCb = function (res) {
  //提交成功的回调
  if (typeof res.jData == 'object') {
    //返回已经提交的数据，填充页面
    need(['biz.provincecityselector2', 'util.form'], function (
      pcs,
      FormManager
    ) {
      //显示弹出框
      g(`personInfoContent_${flowId}`).style.display = 'block';

      //关闭弹出框
      g(`colseLayer_${flowId}`).onclick = function () {
        g(`personInfoContent_${flowId}`).style.display = 'none';
      };

      //提交按钮事件
      g(`personInfoContentBtn_${flowId}`).onclick = function () {
        var fillData = FormManager.getAllInputValue(
          `form_personInfo_${flowId}`
        );
        for (var i in fillData) {
          var _val = fillData[i];
          switch (i) {
            case 'sName': {
              if (!_val) {
                alert('姓名不能为空');
                return false;
              }
              if (milo.getByteLength(_val) > 30) {
                alert('姓名长度不能超过30个字节。');
                return false;
              }
              break;
            }
            case 'sIdentity': {
              if (!_val) {
                alert('身份证号码不能为空');
                return false;
              }
              if (!milo.isIDCard(_val)) {
                alert('身份证号码有误。');
                return false;
              }
              break;
            }
            case 'sMobile': {
              if (!_val) {
                alert('手机号码不能为空');
                return false;
              }
              if (isNaN(_val) || _val.indexOf('.') >= 0) {
                alert('手机号码必须为数字。');
                return false;
              }
              if (_val.length > 11) {
                alert('手机号码不得超过11位。');
                return false;
              }
              break;
            }
            case 'sAddress': {
              if (!_val) {
                alert('详细地址不能为空');
                return false;
              }
              if (milo.getByteLength(_val) > 100) {
                alert('详细地址不能超过100个字节。');
                return false;
              }
              break;
            }
            default: {
            }
          }
        }

        window[`amsCfg_${flowId}`] = Object.assign(
          {},
          window[`amsCfg_${flowId}`].sData,
          fillData,
          { iShow: '0' }
        );
        amsObj
          .doPersonInfo(flowId)
          .then((submitRes) => {
            // 提交信息后的处理
            console.log(submitRes);
          })
          .catch((e) => {
            console.log(e);
          });
      };
      var pcsConfig = {
        provinceId: 'province_' + flowId,
        cityId: 'city_' + flowId,
        areaId: 'county_' + flowId,
      };
      if (res.jData.sProvince && res.jData.sCity && res.jData.sExtend2) {
        pcsConfig.initVal = [
          res.jData.sProvince,
          res.jData.sCity,
          res.jData.sExtend2,
        ];
      }
      pcs.show(pcsConfig);

      //发货订单:
      if (res.jData.sExtend1) {
        g(`sExtend1_${flowId}`).innerHTML = res.jData.sExtend1;
      }
      delete res.jData.sProvince;
      delete res.jData.sCity;
      FormManager.setAllInputValue(res.jData, `form_personInfo_${flowId}`);

      if (
        typeof res.jData.arrPackageInfo != 'undefined' &&
        res.jData.arrPackageInfo.length > 0
      ) {
        //如果存在实物信息，则显示
        g(`tr_package_name_${flowId}`).style.display = '';
        g(`tr_package_value_${flowId}`).style.display = '';
        for (var i = 0; i < res.jData.arrPackageInfo.length; ++i) {
          var iPackageId = res.jData.arrPackageInfo[i].iPackageId;
          var sPackageName = res.jData.arrPackageInfo[i].sPackageName;
          g(`package_${flowId}`).options[i] = new Option(
            sPackageName,
            iPackageId + '|' + sPackageName
          );
        }
      }
    });
  } else {
    // 处理返回信息
  }
};

milo.addEvent(g(`btn_personInfo_${flowId}`), 'click', function () {
  amsObj
    .doPersonInfo(flowId, { iShow: 1 })
    .then((res) => {
      // 处理上次提交的数据
      PersonInfoCb(res);
    })
    .catch((e) => {
      console.log(e);
    });
});
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

# 特点

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

# 更新日志

2020.10.15

  1. 更新 AMS 初始化函数
  2. 修复了 milo 的依赖问题
  3. 增加了绑定大区 DOM 自适应
  4. 增加了填写实物信息&轮播模块
Last Updated: 12/14/2021, 5:05:41 PM

← 星图IDE →