html+vue.js自动计算用户佣金工具
- 这里是列表文本 标题 标题两级分销:普通花粉(75折,25%的佣金),白金花粉(7折,30%佣金)
- 这里是列表文本 两级代理:钻石花粉(65折,35%佣金),花花董事(55折,45%佣金)
- 极差佣金:上级的佣金=上级可得佣金减去下级已得佣金(其中6%的同级佣金并不计算)
- 比如,我是花花董事,我推荐了个99元的礼包,我拿45%,如果是我下级的普通花粉推荐出去的,那么我拿99*(45%-25%)
- （失效）参考博客:https://blog.ibiaoqin.cn/arc/2.html
- （失效）案例网址:https://blog.ibiaoqin.cn/fx/hfjs.html
- 使用视频:婲坊佣金计算工具使用教程
使用说明
- 所有代理分销拿极差的佣金,两级代理有同级佣金6
- 商品佣金需要配合婲坊商城进行使用,并且打乱了佣金比例
- 佣金比例参考下图,
<!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" style="margin-top:10px;">
<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" @input='gb()'>
</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:45},
{name:'钻石花粉',lbyj:35,ptyj:35},
{name:'白金花粉',lbyj:30,ptyj:25},
{name:'普通花粉',lbyj:25,ptyj:15},
{name:'普通会员',lbyj:0,ptyj:0},
],
xflb:[
{value:1,name:'A',yj:0},
{value:1,name:'B',yj:0},
{value:1,name:'C',yj:0},
{value:3,name:'D',yj:0},
]
}
},
methods: {
gb(){
this.jszyj();//计算总佣金
},
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){
if(value==4){
layer.msg('自己的身份不能是普通会员');
return;
}
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>
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
