利用MUI滑动进行利息计算（移动端APP显示）

Posted 2020-09-18 李大宝

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，其中滑动应用是比较常见的应用操作，本篇文章将讲述如何利用滑动改变对应值进行计算和本金利息的方法。

案例要求：还款日期分为固定分期和随借随还，借款额度为1000~30000元，其中借款金额1000~6000的时候，可以随借随还且借款期不能超过45天，固定还款期可分为3、6、9期，超过6000元的时候分期数为9、12、18、24个月完成还款，根据利率计算以上各种情况下的每一期的还款。

首先建立基本样式，如下图所示

其运行代码如下，css代码此处篇幅有限不再赘述。。。。。。在此过程中，要注意考虑清楚借款金额大于6000的情况。

<div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="top">
                    <div class="title">
                        良心高利贷(滑稽)
                    </div>
                    <div class="mui-text-center mui-h5" style="color: #fff;margin-top: 20px;">申请金额（元）</div>
                    <div class="mui-text-center mui-h1 money" id="block-range-val">¥1000</div>
                    <div style="height: 50px;margin-top: 50px;">
                        <div style="width:50%;border-right: 1px solid #ccc;float: left;">
                            <p id="txt_1" style="text-align: center;color: #fff;">日综合费率</p>
                            <div id="txt_2" class="mui-text-center mui-h4" style="margin-top: -5px;">¥100/¥1000/1天</div>
                        </div>
                        <div style="width:48%;float: left;">
                            <p id="txt_3" style="text-align: center;color: #fff;">最长借款时间</p>
                            <div id="txt_4" class="mui-text-center mui-h4" style="margin-top: -5px;">45天</div>
                        </div>
                    </div>
                </div>

                <div class="mui-input-row mui-input-range" style="padding: 10px 15px;">
                    <input type="range" id=\'block-range\' value="1000" min="1000" max="30000" step="100">
                </div>
                <div style="margin: 20px 10px;">
                    <p>借款期限</p>
                    <div id="btns_1">
                        <button id="btn_1" class="mui-btn mui-btn-primary type">随借随还</button>
                        <button id="btn_2" class="mui-btn mui-btn-primary mui-btn-grey type">3个月</button>
                        <button id="btn_3" class="mui-btn mui-btn-primary mui-btn-grey type">6个月</button>
                        <button id="btn_4" class="mui-btn mui-btn-primary mui-btn-grey type">9个月</button>

                    </div>
                    <div id="btns_2" style="display: none;">

                        <button id="btn_5" class="mui-btn mui-btn-primary mui-btn-grey type">9个月</button>
                        <button id="btn_6" class="mui-btn mui-btn-primary mui-btn-grey type">12个月</button>
                        <button id="btn_7" class="mui-btn mui-btn-primary mui-btn-grey type">18个月</button>
                        <button id="btn_8" class="mui-btn mui-btn-primary mui-btn-grey type">24个月</button>

                    </div>
                </div>
            </div>
        </div>

建立基本框架后，我们继续利用滑动手势和range实现其功能。在这一过程中，首先要实现各按键的功能，使其动起来

第一步，滑动按钮时，使借贷金额的值和对应分期下的还款金额发生改变，其运行代码如下

var rangeList = document.querySelectorAll(\'input[type="range"]\');
        var range = 1000;
        for (var i = 0, len = rangeList.length; i < len; i++) {
            rangeList[i].addEventListener(\'input\', function() {
                range = this.value;
                document.getElementById(this.id + \'-val\').innerhtml = \'¥\' + this.value;
                document.getElementById("txt_3").innerHTML = \'还款期数\';
                document.getElementById("txt_1").innerHTML = \'每月还款金额\';
                if (this.value > 6000) {
                    document.getElementById("btns_2").style.display = \'block\';
                    document.getElementById("btns_1").style.display = \'none\';
                    btn_disabled();
                    document.getElementById("btn_8").classList.remove(\'mui-btn-grey\');

                    document.getElementById("txt_2").innerHTML = \'¥\' + (range * 1.8196 / 24).toFixed(2);
                    document.getElementById("txt_4").innerHTML = \'24个月\';
                } else {
                    document.getElementById("btns_2").style.display = \'none\';
                    document.getElementById("btns_1").style.display = \'block\';
                    btn_disabled();
                    document.getElementById("btn_4").classList.remove(\'mui-btn-grey\');
                    document.getElementById("txt_2").innerHTML = \'¥\' + (range * 1.2382 / 24).toFixed(2);
                    document.getElementById("txt_4").innerHTML = \'24个月\';
                }

            });
        }

经测试，显示效果如下

 

接下来，实现其它分期按钮的功能，在这一过程中，需要解决不同分期下的利率换算等问题，其运行代码如下

mui(\'.mui-scroll-wrapper\').scroll({

        });

        function btn_disabled() {
            document.getElementById("btn_1").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_2").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_3").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_4").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_5").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_6").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_7").classList.add(\'mui-btn-grey\');
            document.getElementById("btn_8").classList.add(\'mui-btn-grey\');
        }
        document.getElementById("btn_1").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'日综合费率\';
            document.getElementById("txt_3").innerHTML = \'最长借款时间\';
            document.getElementById("txt_2").innerHTML = \'¥100/¥1000/1天\';
            document.getElementById("txt_4").innerHTML = \'45天\';

        });
        document.getElementById("btn_2").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 2 / 3).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'3个月\';
        });
        document.getElementById("btn_3").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 3 / 6).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'6个月\';
        });
        document.getElementById("btn_4").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 4 / 9).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'9个月\';
        });
        document.getElementById("btn_5").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 4 / 9).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'9个月\';
        });
        document.getElementById("btn_6").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 5 / 12).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'12个月\';
        });
        document.getElementById("btn_7").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 6 / 18).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'18个月\';
        });
        document.getElementById("btn_8").addEventListener(\'tap\', function() {
            btn_disabled();
            this.classList.remove(\'mui-btn-grey\');
            document.getElementById("txt_1").innerHTML = \'每月还款金额\';
            document.getElementById("txt_3").innerHTML = \'还款期数\';
            document.getElementById("txt_2").innerHTML = \'¥\' + (range * 7 / 24).toFixed(2);
            document.getElementById("txt_4").innerHTML = \'24个月\';
        });
        document.getElementById("apply").addEventListener(\'tap\', function() {
            if(!require_login){
                mui.openWindow({
                    id: \'business-list\',
                    url: \'business-list.html\',
                    show: {
                        aniShow: \'pop-in\',
                        duration: 300
                    },
                    waiting: {
                        autoShow: false
                    }
                });
                return;
            }
            

        })

其运行结果如下图

符合设计要求