https://huuuuuuo.github.io/js/reward.js

1function ZanShang(){
2  this.popbg = $('.zs-modal-bg');
3  this.popcon = $('.zs-modal-box');
4  this.closeBtn = $('.zs-modal-box .close');
5  this.zsbtn = $('.zs-modal-btns .btn');
6  this.zsPay = $('.zs-modal-pay');
7  this.zsBtns = $('.zs-modal-btns');
8  this.zsFooter = $('.zs-modal-footer');
9  var that = this;
10  $('.show-zs').on('click',function(){
11    //点击赞赏按钮出现弹窗
12    that._show();
13    that._init();
14  })
15}
16ZanShang.prototype._hide = function(){
17  this.popbg.hide();
18  this.popcon.hide();
19}
20ZanShang.prototype._show = function(){
21  this.popbg.show();
22  this.popcon.show();
23  this.zsBtns.show();
24  this.zsFooter.show();
25  this.zsPay.hide();
26}
27ZanShang.prototype._init = function(){
28  var that = this;
29  this.closeBtn.on('click',function(){
30    that._hide();
31  })
32  this.popbg.on('click',function(){
33    that._hide();
34  })
35  this.zsbtn.each(function(el){
36    $(this).on('click',function(){
37      var num = $(this).attr('data-num'); //按钮的对应的数字
38      var type = $('.zs-type:radio:checked').val();//付款方式
39      //根据不同付款方式和选择对应的按钮的数字来生成对应的二维码图片，你可以自定义这个图片的路径，默认放在/img/reward目录中
40      //假如你需要加一个远程路径，比如我的就是
41      //http://zhaohuabing.com/img/reward/'+type+'-'+num+'.png';
42      var src = '/img/reward/'+type+'-'+num+'.png';
43      var text = $(this).html();
44      var payType=$('#pay-type'), payImage = $('#pay-image'),payText = $('#pay-text');
45      if(type=='alipay'){
46        payType.html('支付宝');
47      }else{
48        payType.html('微信');
49      }
50      payImage.attr('src',src);
51      payText.html(text);
52      that.zsPay.show();
53      that.zsBtns.hide();
54      that.zsFooter.hide();
55
56    })
57  })
58}
59var zs = new ZanShang();