1 /**
  2  * 更换邮箱
  3  */
  4 define(["core", "component/process_components","component/verify_code"], function() {
  5 
  6     var _html_new_email_input = [
  7         '<div class="we_change_email_box">',
  8         '<p class="we_txt">您的账号当前绑定邮箱是：<a href="javascript:void(0);">$email$</a>，您可以：</p>',
  9         '<ul class="we_list" attr="auth_type_form">',
 10         '<li><input type="radio" name="auth_type" id="auth_by_phone" value="phone"><label for="auth_by_phone">通过已绑定手机更换</label></li>',
 11         '<li><input type="radio" name="auth_type" id="auth_by_email" value="email"><label for="auth_by_email">通过已绑定邮箱更换</label></li>',
 12         '</ul>',
 13         '</div>',
 14         '<p class="we_line"></p>',
 15         '<div class="we_cell_form_box" attr="new_email_form"></div>',
 16     ].join('');
 17 
 18     /**
 19      * API
 20      * @type {Object}
 21      */
 22     var api = {
 23 
 24         /**
 25          * 验证邮箱
 26          * @param  {[type]} email [description]
 27          * @return {[type]}
 28          */
 29         validEmail:function(email,success,error){
 30             var url = $we.conf.ENV.__API + "/ajaxSafe/validateNewEmail";
 31             $we.utils.request(url, {email:email}, function(data) {
 32                 success(data.data);
 33             }, function(data) {
 34                 error(data);
 35             }, "POST", true);
 36         }
 37     };
 38 
 39 
 40     /**
 41      * 输入新邮箱
 42      */
 43     $we.widget.reg("new_email_input", {
 44         interfaces:{
 45             /**
 46              * render函数，AAA的接口函数，对于业务流组件来说，它完全可以转变为一个内置函数，
 47              * 业务流组件在大多数情况下，不会调用interfaces
 48              */
 49             render:function ()
 50             {
 51                 var t=this;
 52                 this.append(this.el, _html_new_email_input, {
 53                     email:$we.process.getData('email')
 54                 });
 55                 var authPhone = $we.process.getData('phone'),
 56                     isPhonePassed = $we.process.getData('phone_passed');
 57                 if(!(authPhone && authPhone.length>0 && isPhonePassed)){
 58                     $(this.node['auth_type_form']).find('li:first').hide();
 59                     $('#auth_by_email').attr('checked',true);
 60                 }
 61                 this.form = $we.widget.add("Form", $(this.node['new_email_form']), {
 62                     form_elements:[
 63                         {
 64                             label:'新邮箱地址',
 65                             name:'new_email',
 66                             id:'new_email',
 67                             require:true,
 68                             expression:'email',
 69                             type:'autocomplete',
 70                             acConfig:{
 71                                 title:'请选择邮箱类型',
 72                                 ds:['@sina.com', '@163.com', '@qq.com', '@126.com', '@hotmail.com', '@gmail.com',
 73                                     '@sohu.com', '@yahoo.cn', '@yahoo.com'],
 74                                 search_parse:function (data)
 75                                 {
 76                                     var v = this.val();
 77                                     var i = v.indexOf('@');
 78                                     if (i >= 0) {
 79                                         var tail = v.substr(i);
 80                                         if (data.indexOf(tail) >= 0) {
 81                                             return v.substr(0, i) + data;
 82                                         }
 83                                         else {
 84                                             return null;
 85                                         }
 86                                     }
 87                                     else {
 88                                         return v + data;
 89                                     }
 90                                 }
 91                             },
 92                             success:"填写正确",
 93                             placeholder: "在这里输入邮箱"
 94                         }
 95                     ],
 96                     commit:function(){
 97                         t.notify('next');
 98                     }
 99                 });
100             },
101 
102             /**
103              * 错误显示
104              * @param content
105              */
106             showError:function (content)
107             {
108                 var errorTip = $(this.node['error_tip']);
109                 errorTip.html('<i class="we_icon_error"></i>' + content);
110                 errorTip.show();
111             },
112 
113             /**
114              * 清楚错误
115              */
116             cleanError:function ()
117             {
118                 var errorTip = $(this.node['error_tip']);
119                 errorTip.html('');
120                 errorTip.hide();
121             }
122         },
123         /**
124          * 初始化函数
125          * @param  {element} el    通过业务流组件传递过来的参数，该业务流组件的business节点
126          * @param  {object} params 初始化业务流组件时，每个组件传递的参数
127          */
128         init:function (el, params)
129         {
130             this.el = el;
131             this.params = params;
132         },
133         /**
134          * 每个组件，如果需要使用业务流的话，需要声明这个
135          */
136         process:{
137             /**
138              * 组件开始调用，业务流组件会调用这个接口来启用组件
139              */
140             start:function ()
141             {
142                 this.render();
143             },
144             /**
145              * 组件结束调用，当这个业务结束的时候，业务流组件会调用它
146              */
147             end:function ()
148             {
149                 $(this.el).empty();
150             },
151             /**
152              * 组件检测是否可以进行下一步
153              * 当组件需要进入下一步时，业务流组件将会调用这个接口，
154              * 这个接口需要通过 this.notify("goNext") 来通知业务流组件它检测通过，
155              * 否则业务流组件在这个地方会停滞下来 通过 this.notify("pause")来通知
156              */
157             checkSucc:function ()
158             {
159                 var t = this;
160                 if (this.form.valid()) {
161                     var authType = $("input[name='auth_type']:checked");
162                     if (authType.length == 1) {
163                         //$.cookie('we_chg_email',authType.val());
164                         var newEmail= this.form.getElement('new_email').val();
165                         api.validEmail(newEmail,function(){
166                             $we.process.setData('auth_type', authType.val());
167                             $we.process.setData('new_email',newEmail);
168                             t.notify("goNext",{auth_type:authType.val()});
169                         },function(data){
170                             $we.comp.alert(data.msg);
171                         });
172                     }
173                     else {
174                         $we.comp.alert('请选择认证方式');
175                     }
176                 }
177             }
178         },
179         events:{
180         }
181     });
182 
183     var _html_new_email_auth = '<div class="we_cell_form_box" attr="root"></div>';
184 
185     /**
186      * 验证新邮箱
187      */
188     $we.widget.reg("new_email_auth", {
189         interfaces:{
190             /**
191              * render函数，AAA的接口函数，对于业务流组件来说，它完全可以转变为一个内置函数，
192              * 业务流组件在大多数情况下，不会调用interfaces
193              */
194             render:function ()
195             {
196                 this.append(this.el, _html_new_email_auth);
197                 this.extend("comp.verify_code", [this.node.root, this.params]);
198                 this._super.render();
199             },
200 
201             /**
202              * 错误显示
203              * @param content
204              */
205             showError:function (content)
206             {
207                 var errorTip = $(this.node['error_tip']);
208                 errorTip.html('<i class="we_icon_error"></i>' + content);
209                 errorTip.show();
210             },
211 
212             /**
213              * 清楚错误
214              */
215             cleanError:function ()
216             {
217                 var errorTip = $(this.node['error_tip']);
218                 errorTip.html('');
219                 errorTip.hide();
220             }
221         },
222         /**
223          * 初始化函数
224          * @param  {element} el    通过业务流组件传递过来的参数，该业务流组件的business节点
225          * @param  {object} params 初始化业务流组件时，每个组件传递的参数
226          */
227         init:function (el, params)
228         {
229             params = params || {};
230             this.el = el;
231             this.params = params;
232 
233             this.params.label1 = '新邮箱';
234             this.params.label1_empty = '新邮箱';
235             this.params.label2 = '邮箱验证码';
236             this.params.label3 = '新邮箱验证码';
237 
238             //TODO
239             this.params.getCodeUrl = 'http://dev.we.sdoprofile.com/common/js/test/business/api.php';
240             // 需要验证的验证对象的名称（从process.data中可能设置该值）
241             this.params.verifyName = 'new_email';
242             // 验证成功后，将该名称储存到process.data中，默认该值与verifyName相同
243             this.params.saveVerifyName = 'email';
244             // 冷却时间
245             this.params.cooldown = 120;
246             // 冷却时间设置的cookie名称
247             this.params.cookieName = '_we_comp_vme';
248             // 验证对象的正则, function或者直接注明正则名称
249             this.params.verifyReg = 'email';
250             // 传递给后端接口时，验证对象的名称
251             this.params.transName = 'email';
252 
253             this.params.formBefore = [
254                 {
255                     label:'目前绑定邮箱',
256                     value:'<span class="we_yellow">' + $we.process.getData('email') + '</span>',
257                     name:'email',
258                     type:'content'
259                 }
260             ];
261             this.params.formAfter = [
262                 {
263                     label:'绑定箱验证码',
264                     name:'email_code',
265                     id:'email_code',
266                     require:true,
267                     type:'text'
268                 }
269             ];
270         },
271         /**
272          * 每个组件，如果需要使用业务流的话，需要声明这个
273          */
274         process:{
275             /**
276              * 组件开始调用，业务流组件会调用这个接口来启用组件
277              */
278             start:function ()
279             {
280                 this.render();
281             },
282             /**
283              * 组件结束调用，当这个业务结束的时候，业务流组件会调用它
284              */
285             end:function ()
286             {
287                 $(this.el).empty();
288             },
289             /**
290              * 组件检测是否可以进行下一步
291              * 当组件需要进入下一步时，业务流组件将会调用这个接口，
292              * 这个接口需要通过 this.notify("goNext") 来通知业务流组件它检测通过，
293              * 否则业务流组件在这个地方会停滞下来 通过 this.notify("pause")来通知
294              */
295             checkSucc:function ()
296             {
297                 if(this.form.valid()){
298                     this.notify("goNext");
299                 }
300             }
301         },
302         events:{
303         }
304     });
305 
306 });