Supports wechat pay and alipay

Enable wechat pay and alipay by setting "zanshang = true" in
the config.toml. Reader can pay you by wechat or alipay  if they
think your articles are helpful. Remember overriding the QR codes
with your own.

Signed-off-by: Huabing Zhao <zhaohuabing@gmail.com>

16 files changed, 251 insertions, 0 deletions

diff --git a/static/css/zanshang.css b/static/css/zanshang.css
new file mode 100644
index 0000000..e54d8fe
--- /dev/null
+++ b/static/css/zanshang.css
@@ -0,0 +1,192 @@
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    line-height: 1.42857143;
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    vertical-align: middle;
+}
+img{vertical-align: middle;}
+.close {
+    float: right;
+    font-size: 21px;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .2
+}
+
+button.close {
+    -webkit-appearance: none;
+    padding: 0;
+    cursor: pointer;
+    background: 0 0;
+    border: 0
+}
+.entry-shang {
+    padding: 30px 0 20px;
+    text-align: center;
+}
+
+.entry-shang p {
+    font-size: 12px;
+}
+
+.btn-bred {
+    min-width: 80px;
+    border-color: #e26d6d;
+    background: #e26d6d;
+    color: #fff;
+}
+
+.zs-modal-bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    display: none;
+    z-index: 100;
+}
+
+.zs-modal-box {
+    width: 340px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin: -195px 0 0 -171px;
+    border: 1px solid #eee;
+    background: #fff;
+    border-radius: 6px;
+    z-index: 100;
+    display: none;
+}
+
+.zs-modal-head {
+    padding: 0 16px;
+    position: relative;
+}
+
+.zs-modal-head img {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+}
+
+.zs-modal-head .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 56px;
+    height: 56px;
+    text-align: center;
+}
+
+.zs-modal-head .author {
+    padding-top: 15px;
+    display: block;
+}
+.zs-modal-head .author a{
+    color: #333;
+    text-decoration: none;
+}
+
+.zs-modal-head .author img {
+    margin-right: 5px;
+}
+
+.zs-modal-head .tip {
+    background: #f6f6f6;
+    padding: 0 10px;
+    font-size: 12px;
+    color: gray;
+    border-radius: 3px;
+    margin-top: 10px;
+    position: relative;
+    line-height: 28px;
+    margin-bottom: 10px;
+}
+
+.zs-modal-head .tip i {
+    display: block;
+    border-width: 0 7px 7px 7px;
+    border-color: transparent  transparent #f6f6f6 transparent;
+    border-style: dashed dashed solid dashed;
+    content: "";
+    position: absolute;
+    left: 8px;
+    top: -7px;
+}
+
+.zs-modal-body {
+    padding: 0 15px;
+}
+
+.zs-modal-btns {
+    font-size: 0;
+}
+
+.zs-modal-btns .btn:nth-child(3n-2) {
+    margin-left: 0;
+}
+
+.zs-modal-btns .btn {
+    width: 28%;
+    margin-left: 8%;
+    margin-bottom: 24px;
+    display: inline-block;
+    font-size: 12px;
+}
+
+.zs-modal-btns .btn-blink {
+    background: #fff;
+    border-color: #e26d6d;
+    color: #e26d6d;
+    font-weight: bold;
+}
+
+.zs-modal-btns .btn-blink:hover, .zs-btns .btn-blink:active {
+    background: rgba(226,109,109,.06);
+    box-shadow: none;
+}
+
+.zs-modal-btns .btn-blink:focus {
+    background: #e26d6d;
+    border-color: #e26d6d;
+    color: #fff;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .zs-modal-body ul {
+        letter-spacing: -5px;
+    }
+}
+
+.zs-modal-footer {
+    padding: 0 15px 15px;
+}
+
+.zs-modal-footer label {
+    margin: 0 10px;
+}
+
+.zs-modal-footer img {
+    height: 30px;
+    min-width: 85px;
+}
+
+.zs-modal-pay {
+    text-align: center;
+    padding: 15px 0;
+    display: none;
+}
diff --git a/static/img/zanshang/alipay-1.png b/static/img/zanshang/alipay-1.png
new file mode 100644
index 0000000..eccfa0d
--- /dev/null
+++ b/static/img/zanshang/alipay-1.png
diff --git a/static/img/zanshang/alipay-10.png b/static/img/zanshang/alipay-10.png
new file mode 100644
index 0000000..767ce01
--- /dev/null
+++ b/static/img/zanshang/alipay-10.png
diff --git a/static/img/zanshang/alipay-100.png b/static/img/zanshang/alipay-100.png
new file mode 100644
index 0000000..4c24c98
--- /dev/null
+++ b/static/img/zanshang/alipay-100.png
diff --git a/static/img/zanshang/alipay-2.png b/static/img/zanshang/alipay-2.png
new file mode 100644
index 0000000..b24c753
--- /dev/null
+++ b/static/img/zanshang/alipay-2.png
diff --git a/static/img/zanshang/alipay-5.png b/static/img/zanshang/alipay-5.png
new file mode 100644
index 0000000..89b8131
--- /dev/null
+++ b/static/img/zanshang/alipay-5.png
diff --git a/static/img/zanshang/alipay-50.png b/static/img/zanshang/alipay-50.png
new file mode 100644
index 0000000..471c764
--- /dev/null
+++ b/static/img/zanshang/alipay-50.png
diff --git a/static/img/zanshang/alipay-btn.png b/static/img/zanshang/alipay-btn.png
new file mode 100644
index 0000000..35874cd
--- /dev/null
+++ b/static/img/zanshang/alipay-btn.png
diff --git a/static/img/zanshang/wechat-1.png b/static/img/zanshang/wechat-1.png
new file mode 100644
index 0000000..d16ffb7
--- /dev/null
+++ b/static/img/zanshang/wechat-1.png
diff --git a/static/img/zanshang/wechat-10.png b/static/img/zanshang/wechat-10.png
new file mode 100644
index 0000000..f6dba8f
--- /dev/null
+++ b/static/img/zanshang/wechat-10.png
diff --git a/static/img/zanshang/wechat-100.png b/static/img/zanshang/wechat-100.png
new file mode 100644
index 0000000..3ab7909
--- /dev/null
+++ b/static/img/zanshang/wechat-100.png
diff --git a/static/img/zanshang/wechat-2.png b/static/img/zanshang/wechat-2.png
new file mode 100644
index 0000000..b838fc7
--- /dev/null
+++ b/static/img/zanshang/wechat-2.png
diff --git a/static/img/zanshang/wechat-5.png b/static/img/zanshang/wechat-5.png
new file mode 100644
index 0000000..007bf01
--- /dev/null
+++ b/static/img/zanshang/wechat-5.png
diff --git a/static/img/zanshang/wechat-50.png b/static/img/zanshang/wechat-50.png
new file mode 100644
index 0000000..5fd6684
--- /dev/null
+++ b/static/img/zanshang/wechat-50.png
diff --git a/static/img/zanshang/wechat-btn.png b/static/img/zanshang/wechat-btn.png
new file mode 100644
index 0000000..cf01514
--- /dev/null
+++ b/static/img/zanshang/wechat-btn.png
diff --git a/static/js/zanshang.js b/static/js/zanshang.js
new file mode 100644
index 0000000..268dc49
--- /dev/null
+++ b/static/js/zanshang.js
@@ -0,0 +1,59 @@
+function ZanShang(){
+  this.popbg = $('.zs-modal-bg');
+  this.popcon = $('.zs-modal-box');
+  this.closeBtn = $('.zs-modal-box .close');
+  this.zsbtn = $('.zs-modal-btns .btn');
+  this.zsPay = $('.zs-modal-pay');
+  this.zsBtns = $('.zs-modal-btns');
+  this.zsFooter = $('.zs-modal-footer');
+  var that = this;
+  $('.show-zs').on('click',function(){
+    //点击赞赏按钮出现弹窗
+    that._show();
+    that._init();
+  })
+}
+ZanShang.prototype._hide = function(){
+  this.popbg.hide();
+  this.popcon.hide();
+}
+ZanShang.prototype._show = function(){
+  this.popbg.show();
+  this.popcon.show();
+  this.zsBtns.show();
+  this.zsFooter.show();
+  this.zsPay.hide();
+}
+ZanShang.prototype._init = function(){
+  var that = this;
+  this.closeBtn.on('click',function(){
+    that._hide();
+  })
+  this.popbg.on('click',function(){
+    that._hide();
+  })
+  this.zsbtn.each(function(el){
+    $(this).on('click',function(){
+      var num = $(this).attr('data-num'); //按钮的对应的数字
+      var type = $('.zs-type:radio:checked').val();//付款方式
+      //根据不同付款方式和选择对应的按钮的数字来生成对应的二维码图片，你可以自定义这个图片的路径，默认放在/img/zanshang目录中
+      //假如你需要加一个远程路径，比如我的就是
+      //http://zhaohuabing.com/img/zanshang/'+type+'-'+num+'.png';
+      var src = '/img/zanshang/'+type+'-'+num+'.png';
+      var text = $(this).html();
+      var payType=$('#pay-type'), payImage = $('#pay-image'),payText = $('#pay-text');
+      if(type=='alipay'){
+        payType.html('支付宝');
+      }else{
+        payType.html('微信');
+      }
+      payImage.attr('src',src);
+      payText.html(text);
+      that.zsPay.show();
+      that.zsBtns.hide();
+      that.zsFooter.hide();
+
+    })
+  })
+}
+var zs = new ZanShang();