1. 首页
  2. 主页 > 前端 >

两级分销加两级代理佣金计算工具--花坊分销商城



功能:方便商城用户计算自己邀请下级,下级购买,每一级可获取的佣金比例,此处的佣金比例数据仅作参考 
      可灵活添加下级,上级计算佣金
佣金计算方式:极差模式(比如代理拿45%的佣金,如果没有下级,那么拿全部,如果下级有拿掉一部分,都从45%里面的扣,同级奖励不算在内)
佣金比例:两级代理可获取所有下级代理,并且有同级销售奖,普通分销商城无同级销售奖,花花董事,钻石花粉为代理可获取同级奖励
案例网址:https://blog.ibiaoqin.cn/fx/hfjs.html
使用视频:https://mp.weixin.qq.com/s/PHCMgp-AFGXWB88YZetNTQ
使用到的语言:layui+vue.js 完全前端的工具
主要逻辑:把所有的用户列在一个数组里面,倒序循环获取当前用户的佣金比例,如果同级的话,那么判断是不是代理有同级代理奖励,否则进入下一次循环,如果不是同级,并且等级是上升了,那么计算自己可得佣金比例,并减去下级已经拿到过的佣金,如果用户的上级等级比用户的低,那么直接跳过循环,进入下一个用户的循环
可拓展的地方:可修改后接入自己的分销商城,让用户可以直接导入自己的等级,添加自己的下级佣金,导入指定商品,从而让用户自己了解自己邀请的人购买了指定商品自己能拿到佣金,中间的其它代理分销商能拿到多少佣金,促进用户粘性
案例代码:
 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <title>佣金计算</title>
</head>
<body>
<div class="page-container" id="app">
    
 <form action="#" enctype="multipart/form-data" method="post"  class="layui-form" >
 
<div class="layui-form-item">
    <label class="layui-form-label">设置商品类型:</label>
                <div class="check-box">
                     <button type="button" :class="ms==2?'layui-btn layui-btn-primary':'layui-btn'" @click='mss(1)'>普通商品</button>
   <button type="button" :class="ms==1?'layui-btn layui-btn-primary':'layui-btn'" @click='mss(2)'>积分礼包</button>
 
                 </div>
        </div>
 
 
 
  <div class="layui-form-item"  v-show="ms == 1" >
    <label class="layui-form-label">自己可得佣金</label>
    <div class="layui-input-inline">
      <input type="text" name="tg"  placeholder="输入自己可得佣金" autocomplete="off" class="layui-input" v-model="zjyj">
    </div>
  </div>
  
    <div class="layui-form-item"  v-show="ms == 2">
    <label class="layui-form-label">选择礼包</label>
    <div class="layui-input-inline">
      <select name="interest" lay-filter="aihao">
        <option value="1" selected="">99元礼包</option>
      </select>
    </div>
   
  </div>
 
 
 
    <div class="layui-form-item">
    <label class="layui-form-label">自己的身份: </label>
 
    <div class="layui-input-inline">
<button type="button"  :class="zjsf == index ?'layui-btn layui-btn-normal':'layui-btn layui-btn-primary'" @click='zjsf1(index)'
v-for="(item,index) in sflb"  :key="index" 
>
{{item}}
</button>
</div>
  </div>
 
 
 
 
<div class="layui-form-item">
    <label class="layui-form-label">自己身份:</label>
<div class="layui-input-inline">
 
        我自己({{ sflb[zjsf] }})
        佣金<span style='color:#F00'> {{ zjyj1>0?zjyj1:0 }} </span> 元 </div>
               <div class="layui-input-inline">
 
<button type="button" class="layui-btn layui-btn-primary" @click='add(0)'>添加下级</button>
 
<button type="button" class="layui-btn layui-btn-danger" @click='delall()'>清除</button>
                 </div>
        </div>
  
  
  <div class="layui-form-item" v-for="(item,index) in xflb" >
    <label class="layui-form-label">{{index==0?'我的':''}}下级:</label>
<div class="layui-input-inline">
        {{ item.name }}({{ sflb[item.value] }} )
        佣金<span style='color:#F00'> {{ item.yj>0?item.yj:0 }}  </span> 元 </div>
                <div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-danger" @click='del(index)'>删除</button>
<button type="button" class="layui-btn layui-btn-primary" @click='add(index+1)'>添加下级</button>
                 </div>
        </div>
 
 
<div v-show='show'>
  <div class="layui-form-item">
    <label class="layui-form-label">添加下级:</label>
<div class="layui-input-inline">
        <input type="tel" name="phone"  autocomplete="off" class="layui-input" placeholder="输入下级的名字" v-model="xjname"> </div>
                
        </div>
    <div class="layui-form-item">
    <label class="layui-form-label">下级身份: </label>
 
    <div class="layui-form-mid layui-word-aux">
<button type="button"  :class="xjsf == index ?'layui-btn layui-btn-xs layui-btn-normal':'layui-btn layui-btn-xs'" @click='xjsf1(index)'
v-for="(item,index) in sflb"  :key="index" 
>
{{item}}
</button>
</div>
  </div>
  
  
      <label class="layui-form-label">:</label>
<div class="layui-input-inline">
       
   <button type="button" class="layui-btn layui-btn-normal" @click='addxj()'>确认添加</button>
   </div>
                
        </div>
   
  
  </div>
  
  
    <div class="layui-form-item">
    <div class="layui-input-block">
<!-- <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" @click='tj'>
<i class="layui-icon layui-icon-release"></i>清空下级
</button> -->
    </div>
  </div>
</form>
 
 
 
</div>
 
 
 
<!--_footer 作为公共模版分离出去-->
<script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
<script>
 new Vue({
        el: "#app",
        data() {
            return {
show:false,
xjid:0,
                tga:'',
dls:[],//代理用户
ms:2,//这里是佣金模式
je:99,//金额
zjsf:0,//自己身份
zjyj:75,//自己可得佣金
zjyj1:0,//分佣后自己可得
zjbl:0,//自己的比例
xjsf:1,//下级身份
tjbl:0,//同级的佣金比例
xjname:'',//下级名称
sflb:[//身份列表
'花花董事',
'钻石花粉',
'白金花粉',
'普通花粉',
'普通会员',
],
sfyj:[//身份与佣金比,lbyj礼包佣金,ptyj普通佣金
{name:'花花董事',lbyj:45,ptyj:75},
{name:'钻石花粉',lbyj:35,ptyj:65},
{name:'白金花粉',lbyj:30,ptyj:55},
{name:'普通花粉',lbyj:25,ptyj:45},
{name:'普通会员',lbyj:0,ptyj:0},
],
xflb:[
{value:1,name:'小霞',yj:0},
{value:1,name:'DS',yj:0},
{value:1,name:'小d二',yj:0},
{value:3,name:'左一',yj:0},
{value:4,name:'小周',yj:0},
]
            }
        }, 
        methods: {
delall(){
this.xflb=[]
this.jszyj();//计算总佣金
},
del(wz){
console.log(wz)
this.xflb.splice(wz, 1);
this.jszyj();//计算总佣金
},
add(wz){
//console.log(wz)
this.xjid=wz;
this.show=true;
},
mss(id){
console.log(id);
this.ms=id;
this.jszyj();
},
jszyj(){
//计算总佣金,判断一下
if(this.ms==2){
//默认是99元的礼包,je直接等于99
this.je=99;
this.zjyj1=this.je*this.sfyj[this.zjsf].lbyj
this.tjbl=6;//同级比例
}else{
//自己可得佣金,除以自己的佣金比例,即为总佣金
//获取自己的身份,
let bl=this.sfyj[this.zjsf].ptyj;
this.je=this.zjyj/bl*100
this.zjyj1=this.je*this.sfyj[this.zjsf].ptyj
this.tjbl=5;//同级比例
}
console.log('金额是'+this.je);
this.jsyj();//计算佣金
},
zjsf1(value){
 
this.zjsf=value;//自己身份
this.jszyj();//计算总佣金
console.log('自己身份是'+this.zjsf)
},
xjsf1(value){
this.xjsf=value;//下级身份
//this.jszyj();//计算总佣金
console.log(this.xjsf)
},
addxj(){
let a =
{value:this.xjsf,name:this.xjname,yj:0};
 
this.xflb.splice(this.xjid, 0, a);
console.log(a);
console.log(this.xjname);
this.jszyj();//计算总佣金
this.show=false;
this.xjname=''
},
tj(){
console.log(this.ms)
},
jsyj(){
//把自己添加到最前面。
//获取人物关系,for循环获取最底级的佣金
let o=0;//基础佣金为零
let b=0;//自己可得佣金
let c=4;//用户等级
let ty=0;//判断是否有同级佣金
let tongji=false;
for(var i=this.xflb.length-1;i>=0;i--){
this.xflb[i].yj=0
//console.log(this.xflb[i].value)
//c=this.xflb[i].value;
if(c==this.xflb[i].value){
console.log(c)
console.log(this.xflb[i].value)
console.log(this.xflb[i].name)
 
//判断是否为同级,
if(tongji==true){//如果已经获取过一次同级,那么直接跳转到下一次
continue;
}else{
tongji=true;
if(this.xflb[i].value==0||this.xflb[i].value==1){
 
console.log('进入同级')
//如果同级,并且等级是0或者1,那么获取同级佣金,否则跳到下次循环。
ty=1;
//console.log(this.xflb[i].name)
//同级佣金只获取一次,直到分配的等级提升了
this.xflb[i].yj=(this.tjbl/100*this.je).toFixed(2);
}else{
continue;
}
}
}else{
 
if(c>this.xflb[i].value){
//如果值变小了,那么同级变更
tongji=false;
c=this.xflb[i].value
//如果不是同级,并且等级变小了,那么开始计算佣金
if(this.ms==2){
this.xflb[i].yj=(this.sfyj[this.xflb[i].value].lbyj/100*this.je-o).toFixed(2);
}else{
this.xflb[i].yj=(this.sfyj[this.xflb[i].value].ptyj/100*this.je-o).toFixed(2);
}
o+=Number(this.xflb[i].yj);
}
if(this.xflb[i].value>c){
//如果当前用户的等级大于上级等级,直接跳出到下次循环
continue;
}
}
//获取用户可得佣金,自己可得佣金减去下级拿去的佣金
//判断佣金模式,如果是0,那么获取
 
console.log(this.xflb[i].name+'可得佣金'+this.xflb[i].yj)
//循环结束后,同级佣金回复为0
ty=0
}
//计算自己可得,先判断一下是否为同级。
console.log(c)
console.log(this.zjsf)
 
if(c==this.zjsf){
console.log(tongji)
if(tongji){
this.zjyj1=0
}else{
this.zjyj1=(this.tjbl/100*this.je).toFixed(2);
}
 
}else{
console.log(tongji)
this.zjyj1=(this.zjyj1/100-o).toFixed(2);
}
 
},
        }
        ,
        created() {
               //这里是加载前的函数
   this.jszyj();
   //this.jsyj();
        }
        
 })
 
    layui.use(['form','upload','layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
         var form = layui.form;
           //监听提交
  form.on('submit(demo1)', function(data){
//console.log(data.field)
    return false;
  });
    });
    </script>
</body>
</html>

本文来自投稿,不代表本人立场,如若转载,请注明出处;如有问题您可以发邮件到:[email protected]/p>