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直接等于99this.je=99;this.zjyj1=this.je*this.sfyj[this.zjsf].lbyjthis.tjbl=6;//同级比例}else{//自己可得佣金,除以自己的佣金比例,即为总佣金//获取自己的身份,let bl=this.sfyj[this.zjsf].ptyj;this.je=this.zjyj/bl*100this.zjyj1=this.je*this.sfyj[this.zjsf].ptyjthis.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)//循环结束后,同级佣金回复为0ty=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>

两级分销加两级代理佣金计算工具相关推荐

  1. 7年赚出两个阿里加两个腾讯,他是地表最强打工人!

    来源:华商韬略 ID:hstl8888 作者:南来 微软市值重回全球第一:卧薪二十年,王者归来. 当地时间10月29日,微软股价再次迎来连续大涨,市值逼近2.5万亿美元,一举超越苹果,重新登顶全球市值 ...

  2. 数学的基本运算可分为三个等级。第一级为加、减运算,“连加”或“连减”时发明了第二级运算——乘法和除法,“连乘”和“连除”,即“乘方”。乘方有两种逆运算分别是“开方”和“对数”。这是第三级运算特殊之处

    作者:李狗嗨 链接:https://www.zhihu.com/question/26097157/answer/265975884 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  3. 《预训练周刊》第34期:使用图像级监督检测两万个类别、BigScience寻求建立强大的开放语言模型...

    No.34 智源社区 预训练组 预 训 练 研究 观点 资源 活动 关于周刊 本期周刊,我们选择了11篇预训练相关的论文,涉及图像处理.图像理解.语言模型调优.常识问答.大模型隐私泄漏.文本分类.多模 ...

  4. mybatis 级联查询兑现_MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)...

    A:首先先看下一个简单的面试题 斐波那契数列 计算数组{1,1,2,3,5,8.......} 第30位值 规律:1 1 从第三项开始,每一项都是前两项之和 有两种实现方式 第一种方式: public ...

  5. oracle 触发器管理(以及行级触发器中有两个伪变量 :new 与 :old 的使用方法)(三个谓词inserting、deleting、updating的使用方法)

    oracle触发器管理: 1.概念 2.建立一个简单的触发器: 3.触发器的作用 4.触发条件 a.触发事件 b.触发时间 c.触发级别 d.触发限制 e.触发对象 5.创建及使用触发器 6.触发器分 ...

  6. 教你辨别Access用户级安全的两个密码

    为什么80%的码农都做不了架构师?>>> 一般用户可能对于Word.PowerPoint和Excel的加密功能非常熟悉.所有的这些程序都让文件所有者能够通过使用简单密码快速轻松的对文 ...

  7. 基于MATLAB/Simulink软件的单相光伏并网逆变器仿真,仿真中使用两级电路,前级BOOST升压后级光伏逆变并网

    基于MATLAB/Simulink软件的单相光伏并网逆变器仿真,仿真中使用两级电路,前级BOOST升压后级光伏逆变并网,建立了光伏电池(PV)模型,同时搭建了两种最大功率点跟踪算法(MPPT),扰动观 ...

  8. c语言 linux系统 delay,Linux下实现秒级定时任务的两种方案

    Linux下实现秒级定时任务的两种方案(Crontab 每秒运行): 第一种方案,当然是写一个后台运行的脚本一直循环,然后每次循环sleep一段时间. while true ;do command s ...

  9. java一次能迈一级或两级台阶_有个人想上一个n级的台阶,每次只能迈1级或者迈2级台阶,问:这个人有多少种方法可以把台阶走完?...

    有个人想上一个n级的台阶,每次只能迈1级或者迈2级台阶,问:这个人有多少种方法可以把台阶走完? 相关问题: (1)有个人想上一个n级的台阶,每次只能迈1级或者迈2级台阶,问:这个人有多少种方法可以把台 ...

最新文章

  1. 范围解析操作符 (::)
  2. 【C++】 64_C++中的异常处理 (上)
  3. (五)OpenStack---M版---双节点搭建---Nova安装和配置
  4. 区块链去中心化的生命之源:“DPOS(委托权益证明)共识机制”
  5. Spring的事务传播性
  6. Android 核心已经从 Linux kernel 代码库中删除
  7. windows 建立wifi热点
  8. unsigned int mysql_mysql 中int类型字段unsigned和signed的探索
  9. 蓝桥练习 之 单词个数统计
  10. Withdrawal symptoms
  11. 联想计算机不能使用ghost,联想电脑不能GHOST的解决方法
  12. 高校科研项目管理系统
  13. php ip地址管理系统,phpIPAM – 免费开源的IP地址管理工具,重量级
  14. TPLink路由器登陆密码怎么破解
  15. LFLT1000 流量计密封性自动化测试系统
  16. linux下使用libxml2库,解析xml文件
  17. android像素密度转厘米,Android 屏幕适配-像素密度适配
  18. 2018千元内的UGP VR一体机开箱评测:ugp vr一体机怎么样真的好吗?
  19. Android 关于Android权重的真正理解
  20. ReadFile WriteFile DO_DIRECT_IO 中的IRP操作

热门文章

  1. DICOM图像像素值(灰度值)转换为CT值
  2. 《互联网信贷风险与大数据》读书笔记(一)
  3. React-Native学习
  4. 游戏编程之四 diectxdarw基础篇
  5. 完美立方数生理周期假币问题熄灯问题阶乘汉诺塔N皇后问题
  6. 【狂神说】CSS学习笔记
  7. 电脑中存储的文件怎么打印出来?
  8. python基础(一)字符串变形
  9. 网络编程-基于MFC的仿QQ聊天室-2020
  10. 电阻、电容贴片封装的定义