请选择 进入手机版 | 继续访问电脑版

[discuz教程] 无需插件/给论坛添加打赏功能

发表于 2019-7-1 18:19:51 mobankoudai 用户等级--管理员

无需插件/给论坛添加打赏功能

无需插件/给论坛添加打赏功能


如图,在帖子内容下面有一个打赏按钮,点击后弹出扫码打赏功能

应用中心有很多这样的插件,但是都需要花钱哦,重点是我不喜欢使用插件,所以就手动添加了一个,同时吧教程分享出来。


操作步骤:


1.找到:template/default/forum/viewthread_node.htm


2.搜索:<tr><td class="plc plm">


在他下面加上如下代码保存即可



<!--{if !IS_ROBOT && $post['first'] && !$_G['forum_thread']['archiveid']}-->
<div id="p_btn" class="mtw mbm hm cl">
<style>                        
.bd-dialog {display: none;}
.box-size{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.bd-hide{display:none}
.bd-reward-stl{padding:10px 0;background:#f1f1f1;color:#666;text-align:center;font-family:"microsoft yahei"}
#bdRewardBtn{margin:0;padding:0;outline:0;border:0;border-radius:100%}
#bdRewardBtn span{display:inline-block;width:50px;height:50px;border-radius:100%;background:#FEC22C;color:#fff;font:400 25px/50px 'microsoft yahei';line-height:50px}
#bdRewardBtn:hover{cursor:pointer}
.bd-dialog{position:fixed;top:0;left:0;z-index:9999;width:100%;height:100%;border:1px solid #d9d9d9}
.bd-dialog .bd-close-dialog{position:absolute;top:15px;right:20px;padding:0;width:20px;height:20px;border:0;background:0 0;text-align:center;font:400 24px/24px Arial;font-weight:700;line-height:20px;opacity:.2;cursor:pointer;-webkit-appearance:none;filter:alpha(opacity=20)}
.bd-dialog .bd-close-dialog:hover{color:#000;text-decoration:none;opacity:.4;cursor:pointer;filter:alpha(opacity=40)}
.bd-dialog-bg{position:absolute;top:0;left:0;z-index:9999;width:100%;height:100%;background:#000;opacity:.3;filter:alpha(opacity=30)}
.bd-dialog-content{position:fixed;z-index:10000;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 20px;border-radius:6px;background-color:#FFF;-webkit-box-shadow:0 3px 7px rgba(0,0,0,.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,.3);box-shadow:0 3px 7px rgba(0,0,0,.3);color:#000;font-size:14px;font-family:'microsoft yahei'}
.bd-dialog-pc{top:50%;left:50%;margin:-190px 0 0 -195px;width:390px;height:380px}
.bd-dialog-wx{top:50%;margin-top:-145px;margin-left:5%;width:90%;height:290px}
.bd-dialog-content-pc-title{margin:25px 0;padding:0;height:20px;color:#555;text-align:left;font-weight:700;font-size:15px;line-height:20px}
.bd-dialog-content-wise-title{margin:14px 0;padding:0;height:22px;color:#000;font-size:17px;line-height:22px}
.bd-payment-way{text-align:left}
.bd-payment-way label{display:inline-block;margin:0 30px 0 0;padding:0;font-weight:400;font-size:14px;cursor:pointer}
.bd-payment-way input[type=radio]{margin:-2px 5px 0 0;vertical-align:middle}
.bd-payment-img{margin:15px 0;text-align:center}
p.bd-pay-info{margin:0 0 10px;font-size:15px}
.bd-pay-money{margin-top:10px;font-size:14px}
.bd-pay-money p{margin:0}
.bd-pay-money .bd-pay-money-sum{margin-bottom:4px}
.bd-payment-img img{margin:0 auto}
.bd-payment-img .qrcode-border{margin:0 auto}
.bd-payment-img .qrcode-tip{position:relative;margin:0 auto;margin-top:-12px;height:15px;background:#fff;font-weight:700;font-size:12px;line-height:15px}
#qrCode_0 .qrcode-tip{color:#e10602}
#qrCode_1 .qrcode-tip{color:#3caf36}
.wx_qrcode_container{text-align:center}
.wx_qrcode_container img{width:200px}
.wx_qrcode_container p{margin:0;padding:0;height:20px;font-size:14px;line-height:20px}
</style>
<div class="bd-reward-stl"><p class="bd-pay-info">扫码打赏,你说多少就多少</p><button id="bdRewardBtn"><span>赏</span></button></div>
<div class="bd-dialog" id="tr1" style="display: none;">
<div class="bd-dialog-bg">
</div>
<div class="bd-dialog-content bd-dialog-pc ">
<i class="bd-close-dialog">×</i>
<h2 class="bd-dialog-content-pc-title">打赏支付方式:</h2>
<div class="bd-payment-way">
<label for="bdBaifubao"><input type="radio" id="bdBaifubao" class="reward-radio" value="0" checked="checked" name="reward-way">支付宝</label><label for="wechat"><input type="radio" id="wechat" class="reward-radio" value="2" name="reward-way">微信支付</label>
</div>
<div class="bd-payment-img">
<div class="qrcode-img" id="qrCode_0" style="display: block;">
<div class="qrcode-border box-size" style="border-radius: 26.56px; width: 210px; height: 210px; padding: 16px; margin-top: 24.33px; border: 8px solid rgb(225, 6, 2);">
<img class="qrcode-img" src="http://www.mobankoudai.com/img/w2.jpg" style="width: 100%;">
</div>
<p class="qrcode-tip" style="width: 42.67px;">
打赏
</p>
</div>
<div class="qrcode-img" id="qrCode_1" style="display: none;">
<div class="qrcode-border box-size" style="border-radius: 26.56px; width: 210px; height: 210px; padding: 16px; margin-top: 24.33px; border: 8px solid rgb(60, 175, 54);">
<img class="qrcode-img" src="http://www.mobankoudai.com/img/w2.jpg" style="width: 100%;">
</div>
<p class="qrcode-tip" style="width: 42.67px;">
打赏
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function Show_Hidden(trid){
if(trid.style.display=="block"){
trid.style.display='none';
}else{
trid.style.display='block';
}
}
</script>
<script>
function changeTab(tabCon_num){
for(i=0;i<=1;i++) {
document.getElementById("qrCode_"+i).style.display="none";
}
document.getElementById("qrCode_"+tabCon_num).style.display="block";
}
</script>
</div>
<!--{/if}-->



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表
本站不提供充值,如需金币请分享资源赚,没有源码分享的多来论坛发发贴就可以升级用户组免金币了鸭!各别源码说明中写着要钱钱就别问为啥不能下了鸭~