pref: 增加首页计数器

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/_layout.html

@@ -166,6 +166,33 @@
         </ul>
     </div>
     <!--sidebar begin-->
+
+    <!--statistic begin-->
+    <div id="statistic">
+        <div class="count-list">
+            <div class="items">
+                <p class="title">企业用户</p>
+                <span class="count-item">800000.00人</span>
+            </div>
+            <div class="items">
+                <p class="title">个人用户</p>
+                <span class="count-item">800000.00人</span>
+            </div>
+            <div class="items">
+                <p class="title two_item">交易金额</p>
+                <span class="count-item">本年800000.00亿</span><br/>
+                <span class="count-item">上年8000亿</span>
+            </div>
+            <div class="items">
+                <p class="title two_item">研发需求</p>
+                <span class="count-item">本年800000.00亿</span><br/>
+                <span class="count-item">上年8000亿</span>
+            </div>
+        </div>
+        <div class="count-close">×</div>
+    </div>
+    <!--statistic begin-->
+
     <div style="display: none;">
     ${OPTION('jpblog_statistical_code')!}
     </div>

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -2406,6 +2406,57 @@ a.x_gray_text.x_more{
 #sidebar .sidebar-content li.go-top span {
     padding-bottom: 18px;
 }
+
+/* statistic 统计计数器 */
+#statistic {
+    position: fixed;
+    z-index: 200;
+    right: 0;
+    top: 20%;
+}
+#statistic .count-list{
+    width: 187px;
+    height: 390px;
+    margin-left:-270px;
+    background: url(../images/statistic.png) no-repeat center center;
+    padding: 25px 45px 0;
+}
+
+#statistic .count-list .items{
+    color:#fff;
+    font-size: 18px;
+    font-weight:bold;
+    text-align: center;
+    margin-bottom:10px;
+}
+#statistic .count-list .items .title{
+    line-height: 30px;
+    margin:0;
+    font-weight:bold;
+}
+
+#statistic .count-list .items .two_item{
+    line-height: 50px;
+}
+
+#statistic .count-close{
+    position: absolute;
+    top: -15px;
+    right: 80px;
+    z-index:300;
+    cursor:pointer;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    background: red;
+    color:#fff;
+    text-align: center;
+    line-height: 20px;
+    font-size: 20px;
+}
+
+/* statistic 统计计数器  end*/
+
 .ellipsis {
     overflow: hidden;
     max-height: 50px;/***** 设置几行出现省略点 ... 根据line-height *****/

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/js/index.js

@@ -145,6 +145,7 @@ $(function () {
     //         speed:30 //数值越大 速度越慢
     //     });
     // })
+
     // 返回页面顶部
     $(window).on('scroll',function(){
         var $goTop=$('.go-top');
@@ -164,6 +165,101 @@ $(function () {
         $('body').animate({ scrollTop: 0 }, 1000);
         return false;
     })
+
+    // 首页计数器使用
+    $('#statistic .count-close').click(function () {
+        $(this).parent().hide()
+    })
+
+    function strNumSize(tempNum) {
+        var stringNum = tempNum.toString();
+        var index = stringNum.indexOf(".");
+        var newNum = stringNum;
+        if(index != -1) {
+            newNum = stringNum.substring(0, index)
+        }
+        return newNum.length;
+    }
+    function unitConvert(num) {
+        var moneyUnits = ["", "万", "亿", "万亿"];
+        var dividend = 10000;
+        var curentNum = num;
+        //转换数字
+        var curentUnit = moneyUnits[0];
+        //转换单位
+        for(var i = 0; i < 4; i++) {
+            curentUnit = moneyUnits[i];
+            if(strNumSize(curentNum) < 5) {
+                break;
+            };
+            curentNum = curentNum / dividend;
+        }
+        return curentNum.toFixed(2) + curentUnit;
+    }
+
+    function toFinxedNum (num, flag) {
+        var type = Number(num);
+        var countd = 0;
+        var unit = '';
+        if(flag == 1) {
+            unit = '家'
+        } else if(flag == 2) {
+            unit = '人'
+        } else if(flag == 3) {
+            unit = '元'
+        } else {
+            unit = '个'
+        }
+        count = type > 100000 ? unitConvert(type) : type;
+        return (count + unit)
+    }
+
+    var countHtml = ''
+    $.ajax({
+        type: "GET",
+        url: "https://mall.usoftchina.com/api/product/commoncount?usedFor=usoftchina_home_counter&_status=actived",
+        dataType: "json",
+        success: function(data) {
+            if(data) {
+                for(var m = 0; m < data.length; m++) {
+                    if(data[m].detno == 1) {
+                        countHtml += '<div class="items"><p class="title">企业用户</p><span class="count-item">' + toFinxedNum(data[m].count, 1) + '</span></div>';
+                    } else if(data[m].detno == 2) {
+                        countHtml += '<div class="items"><p class="title">个人用户</p><span class="count-item">' + toFinxedNum(data[m].count, 2) + '</span></div>';
+                    } else if(data[m].detno == 3) {
+                        countHtml += '<div class="items"><p class="title two_item">交易金额</p><span class="count-item">本年' + toFinxedNum(data[m].count, 3) + '</span><br/>';
+                    } else if(data[m].detno == 4) {
+                        countHtml += '<span class="count-item">上年' + toFinxedNum(data[m].count, 3) + '</span></div>';
+                    } else if(data[m].detno == 5) {
+                        countHtml += '<div class="items"><p class="title two_item">研发需求</p><span class="count-item">本年' + toFinxedNum(data[m].count, 4) + '</span><br/>';
+                    } else if(data[m].detno == 6) {
+                        countHtml += '<span class="count-item">上年' + toFinxedNum(data[m].count, 4) + '</span></div>';
+                    }
+                }
+            } else {
+                countHtml += '<div class="items"><p class="title">企业用户</p><span class="count-item">' + toFinxedNum(10428, 1) + '</span></div>';
+                countHtml += '<div class="items"><p class="title">个人用户</p><span class="count-item">' + toFinxedNum(41282, 2) + '</span></div>';
+                countHtml += '<div class="items"><p class="title two_item">交易金额</p><span class="count-item">本年' + toFinxedNum(15283268864.27, 3) + '</span><br/>';
+                countHtml += '<span class="count-item">上年' + toFinxedNum(11728286832.86, 3) + '</span></div>';
+                countHtml += '<div class="items"><p class="title two_item">研发需求</p><span class="count-item">本年' + toFinxedNum(383, 4) + '</span><br/>';
+                countHtml += '<span class="count-item">上年' + toFinxedNum(1, 4) + '</span></div>';
+            }
+            $('#statistic .count-list').html(countHtml)
+        },
+        error: function() {
+            countHtml += '<div class="items"><p class="title">企业用户</p><span class="count-item">' + toFinxedNum(10428, 1) + '</span></div>';
+            countHtml += '<div class="items"><p class="title">个人用户</p><span class="count-item">' + toFinxedNum(41282, 2) + '</span></div>';
+            countHtml += '<div class="items"><p class="title two_item">交易金额</p><span class="count-item">本年' + toFinxedNum(15283268864.27, 3) + '</span><br/>';
+            countHtml += '<span class="count-item">上年' + toFinxedNum(11728286832.86, 3) + '</span></div>';
+            countHtml += '<div class="items"><p class="title two_item">研发需求</p><span class="count-item">本年' + toFinxedNum(383, 4) + '</span><br/>';
+            countHtml += '<span class="count-item">上年' + toFinxedNum(1, 4) + '</span></div>';
+            $('#statistic .count-list').html(countHtml)
+        }
+    })
+
+    // 首页计数器END
+
+
     $.ajax({
         type: "GET",
         url: "sso/loginInfo",