feat:index页自定义导航条

‘chensiAb’

2025-03-04 e55aa7ece892cd6078a6229d2c5b6a2dd029be7b

 common/Tools.js

@@ -1,13 +1,14 @@
/**
 * Tools
 * Tools - 工具集
 * @author Tevin
 */

import moment from 'moment';
import Taro from '@tarojs/taro';

export class Tools {
moment.locale('zh-cn');

export class Tools {
    /**
     * 显示消息
     * @param msg
@@ -44,27 +45,13 @@
    }

    /**
     * 读取文件 base64
     * @param {File} file
     * @return {Promise<string>}
     */
    static getFileBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
            reader.readAsDataURL(file);
        });
    }

    /**
     * 生成 GUID
     * @return {string}
     */
    static createGUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            let r = Math.random() * 16 | 0,
                v = c === 'x' ? r : ((r & 0x3) | 0x8);
            let r = (Math.random() * 16) | 0,
                v = c === 'x' ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        });
    }
@@ -83,34 +70,6 @@
            result += template.charAt(Math.floor(Math.random() * count));
        }
        return result;
    }

    /**
     * 检查网络状态
     */
    static checkOnlineState(callback) {
        // 网页模式
        if (process.env.TARO_ENV === 'h5') {
            // 网络已开启
            if (navigator.onLine) {
                // 用图片资源测试网络状态
                const img = new Image();
                img.onload = () => {
                    img.onload = null;
                    callback && callback(true);
                };
                img.onerror = () => {
                    img.onerror = null;
                    callback && callback(false);
                };
                img.src = 'http://gz.zhiheiot.com/disp/download/buildArchive/online.png?t=' + Date.now();
            }
            // 网络未开启
            else {
                callback && callback(false);
            }
        }
        // 补充：小程序模式用 getNetworkType
    }

    /**
@@ -349,6 +308,26 @@
    }

    /**
     * 数组元素交换位置
     * @param {array} arr 数组
     * @param {number} fromIndex 要交换项目的位置
     * @param {number} toIndex 被交换项目的位置
     */
    static swapArray(arr, fromIndex, toIndex) {
        // 先在目标位置新增一个和当前元素一样的元素，再把当前元素删除掉
        arr.splice(toIndex, 0, arr[fromIndex]);
        // 如果拖动元素上移动，当前元素下标为 fromIndex+1
        if (fromIndex > toIndex) {
            arr.splice(fromIndex + 1, 1);
        }
        // 如果拖动元素下移，当前元素下标还是 fromIndex
        else {
            arr.splice(fromIndex, 1);
        }
        return arr;
    }

    /**
     * 使用 moment.js 格式化时间戳
     * @param {Number|String} timestamp
     * @param {String} [type='date']
@@ -364,9 +343,13 @@
            if (/^\d+$/.test(timestamp)) {
                // 8位视为无连接符日期
                if (timestamp.length === 8) {
                    const day = timestamp.substr(0, 4) + '-' +
                        timestamp.substr(4, 2) + '-' + timestamp.substr(6, 2);
                    timestamp = (new Date(timestamp)).getTime();
                    const day =
                        timestamp.substr(0, 4) +
                        '-' +
                        timestamp.substr(4, 2) +
                        '-' +
                        timestamp.substr(6, 2);
                    timestamp = new Date(timestamp).getTime();
                }
                // 超过8位，视为时间戳
                else if (timestamp.length > 8) {
@@ -376,21 +359,43 @@
            // 日期
            else {
                try {
                    timestamp = (new Date(timestamp)).getTime();
                } catch (e) {
                }
                    timestamp = new Date(timestamp).getTime();
                } catch (e) {}
            }
        }
        // 转为数值的无连接符日期
        // 数值转换：8位整型日期 转 时间戳
        if (timestamp < 9 * 10e6) {
            const timeStr = timestamp + '';
            const day = timeStr.substr(0, 4) + '-' +
                timeStr.substr(4, 2) + '-' + timeStr.substr(6, 2);
            timestamp = (new Date(day)).getTime();
            const dateStr =
                timeStr.slice(0, 4) + '-' + timeStr.slice(4, 6) + '-' + timeStr.slice(6);
            if (type === 'date') {
                return dateStr;
            }
            timestamp = new Date(dateStr).getTime();
        }
        // 按秒时间戳
        // 数值转换：时间戳 秒 转 毫秒
        else if (timestamp < 9 * 10e8) {
            timestamp *= 1000;
        }
        // 数值转换：14位整型日期 转 时间戳
        else if (/^2[012]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d/.test(timestamp + '')) {
            const timeStr = timestamp + '';
            const dateStr =
                timeStr.slice(0, 4) +
                '-' +
                timeStr.slice(4, 6) +
                '-' +
                timeStr.slice(6, 8) +
                ' ' +
                timeStr.slice(8, 10) +
                ':' +
                timeStr.slice(10, 12) +
                ':' +
                timeStr.slice(12, 14);
            if (type === 'dateTimeFull') {
                return dateStr;
            }
            timestamp = new Date(dateStr).getTime();
        }
        const curMoment = moment(timestamp);
        if (type === 'date') {
@@ -433,16 +438,88 @@
    /**
     * 数值转换为金钱格式
     * @param {Number|String} number
     * @param {String} [forRead=''] 便于阅读财务金额模式
     * @return {string}
     */
    static moneyFormat(number) {
    static moneyFormat(number, forRead = '') {
        if (!number && typeof number !== 'number' && typeof number !== 'string') {
            return '';
        }
        if (typeof number === 'string') {
            number = Number(number) || 0;
        }
        return number.toFixed(2);
        if (forRead === 'forRead') {
            return number.toLocaleString('zh-cn', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            });
        } else {
            return number.toFixed(2);
        }
    }

    /**
     * 数值转换为千分位格式
     * @param {Number|String} number - 传入的值
     * @param {String} decimalFormat - 处理小数的方式  - notRetain（不保留小数,有小数时也会去掉小数位），keepTwo（保留两位小数），keepThree（保留三位小数）
     * @return {string}
     */
    static thousandFormat(number, decimalFormat = 'keepTwo') {
        if (!number && typeof number !== 'number' && typeof number !== 'string') {
            return '';
        }
        // 原始数据
        let num = number.toString();
        // 需要进千分位的数,小数点前的数才需要进行千分位计算，即整数位
        let needThousand = '';
        // 小数位
        let decimals = '';
        // 没有小数位
        if (!(num.indexOf('.') > -1)) {
            needThousand = num.toString();
            if (decimalFormat === 'keepTwo') {
                decimals = '00';
            } else if (decimalFormat === 'keepThree') {
                decimals = '000';
            }
        }
        // 存在小数位时
        else if (num.indexOf('.') > -1) {
            needThousand = num.split('.')[0].toString();
            if (decimalFormat === 'keepTwo') {
                decimals = Number(num).toFixed(2).split('.')[1] || '';
            } else if (decimalFormat === 'keepThree') {
                decimals = Number(num).toFixed(3).split('.')[1] || '';
            }
        }
        // 计算整数位长度
        let len = needThousand.length;
        // 如果整数位小于3，直接返回
        if (len <= 3) {
            return decimals ? needThousand + '.' + decimals : needThousand;
        }
        // 整数位大于3
        else {
            // 小数位后的值
            let temp = '';
            // 对整数取余
            let remainder = len % 3;
            if (decimals) {
                temp = '.' + decimals;
            }
            if (remainder > 0) {
                // 不是3的整数倍
                return (
                    needThousand.slice(0, remainder) +
                    ',' +
                    needThousand.slice(remainder, len).match(/\d{3}/g)?.join(',') +
                    temp
                );
            } else {
                // 3的整数倍
                return needThousand.slice(0, len).match(/\d{3}/g)?.join(',') + temp;
            }
        }
    }

    /**
@@ -496,14 +573,13 @@
    /**
     * 求小数点后的数据长度
     * @param {Number|String} num
     * @private
     * @return {Number}
     */
    static getDecimalLength(num) {
        let t = 0;
        try {
            t = num.toString().split('.')[1].length;
        } catch (e) {
        }
        } catch (e) {}
        return t;
    }

@@ -518,82 +594,105 @@

    /**
     * 转换周数到日期
     * @param year
     * @param week
     * @param weekDay 需要输出星期几对应的日期 (1~7)
     * @return {Date}
     * @param {Number} year
     * @param {Number} week
     * @param {Number} weekDay 需要输出星期几对应的日期 (1~7)
     * @return {String}
     */
    static transWeekIndexToDate(year, week, weekDay) {
        const yearStart = moment([year, 0, 1]);
        const dayLong = 24 * 60 * 60 * 1000;
        const firstWeekLong = (7 - yearStart.day()) * dayLong;
        const weeksLong = (week - 1) * 7 * dayLong;
        const weekDayLong = weekDay * dayLong;
        const dayTimestamp = yearStart.valueOf() + firstWeekLong + weeksLong + weekDayLong;
        return moment(dayTimestamp).format('YYYY-MM-DD');
        if (weekDay < 1 && weekDay > 7) {
            return '';
        }
        const weekDate = moment(year + '-' + week, 'YYYY-WW');
        const firstDay = weekDate.startOf('week');
        return firstDay.add(weekDay - 1, 'day').format('YYYY-MM-DD');
    }

    /**
     * 显示调试面板（仅支持H5）
     * @param cssSelector
     * @param callback
     * 防抖函数（一段时间周期内，仅执行最后一次回调）
     *  当持续触发事件时，只在事件最后一次触发后的一段时间内执行回调函数
     *  如果在这个时间内再次触发事件，就重新计算时间
     * @param {Function} fnc
     * @param {Number} wait
     * @returns {Function}
     * @tutorial Tools.debounce(<fnc>, <wait>)(<DebounceKey>)
     */
    static $_showDevConsole(cssSelector, callback) {
        // 只支持 h5 编译
        if (process.env.TARO_ENV !== 'h5') {
            return;
        }
        const fileref = document.createElement('script');
        fileref.setAttribute('type', 'text/javascript');
        if (window.location.protocol === 'https:') {
            fileref.setAttribute('src', 'https://cdn.jsdelivr.net/npm/eruda');
        } else {
            fileref.setAttribute('src', 'http://cdn.jsdelivr.net/npm/eruda');
        }
        document.getElementsByTagName('head')[0].appendChild(fileref);
        const erudaTimer = setInterval(() => {
            if (window.eruda) {
                clearInterval(erudaTimer);
                const container = document.createElement('div');
                if (cssSelector) {
                    document.querySelector(cssSelector).appendChild(container);
                } else {
                    document.getElementsByTagName('body')[0].appendChild(container);
                }
                window.eruda.init({
                    container: container,
                    useShadowDom: false,
                });
                setTimeout(() => {
                    const devTool = document.querySelector('.eruda-dev-tools');
                    devTool.style.display = 'block';
                    devTool.style.opacity = '1';
                    devTool.style.height = '70%';
                    console.warn('=====【艾信App调试特别模式】=====');
                    console.warn('点击右下角悬浮工具箱图标可以折叠面板');
                }, 50);
                setTimeout(() => {
                    callback();
                }, 100);
    static debounce(fnc, wait = 200) {
        return key => {
            if (!key || !Tools.isString(key)) {
                throw 'Debounce function need a key!';
            }
        }, 100);
            const timer = Tools.debounce['dKey-' + key];
            if (timer) {
                clearTimeout(timer);
            }
            Tools.debounce['dKey-' + key] = setTimeout(fnc, wait);
        };
    }

    /**
     * 节流函数（本段时间内，仅执行第一次回调）
     *  在一定时间内只能触发一次函数执行
     *  如果这个时间内再次触发，则忽略，直到下一个时间段再次触发
     * @param {Function} fnc
     * @param {Number} wait
     * @returns {function(key):void}
     * @tutorial Tools.throttle(<fnc>, <wait>)(<ThrottleKey>)
     */
    static throttle(fnc, wait = 200) {
        return key => {
            if (!key || !Tools.isString(key)) {
                throw 'Throttle function need a key!';
            }
            const previous = Tools.throttle['tKey-' + key] || 0;
            const now = Date.now();
            if (now - previous > wait) {
                Tools.throttle['tKey-' + key] = now;
                fnc();
            }
        };
    }
    /**
     * 精确保留小数点几位数, 自动补零, 四舍五入
     *  修复 toFixed 四舍六入五讨论的问题
     * @param {Number|String} num 数值
     * @param {Number} [digit=0] 小数点后位数
     * @returns {String|NaN}
     */
    static accFixed(num, digit = 0) {
        const number = parseFloat(num);
        if (isNaN(number)) {
            return NaN;
        }
        if (number >= 0) {
            return (
                Math.round((number + Number.EPSILON) * Math.pow(10, digit)) / Math.pow(10, digit)
            ).toFixed(digit);
        } else {
            return (
                '-' +
                (
                    Math.round((Math.abs(number) + Number.EPSILON) * Math.pow(10, digit)) /
                    Math.pow(10, digit)
                ).toFixed(digit)
            );
        }
    }
}

// h5 中，实现 rem 转换 px
if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV === 'h5') {
    window.rem = val => {
        const p1 = {
            x: parseFloat(Taro.pxTransform(10, 750)), y: 10,
            x: parseFloat(Taro.pxTransform(10, 750)),
            y: 10,
        };
        const p2 = {
            x: parseFloat(Taro.pxTransform(1000, 750)), y: 1000,
            x: parseFloat(Taro.pxTransform(1000, 750)),
            y: 1000,
        };
        const value = typeof val === 'number' ? val : parseFloat(val);
        const px = (value - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
        const px = ((value - p1.x) * (p2.y - p1.y)) / (p2.x - p1.x) + p1.y;
        console.info(Math.round(px) + 'px');
    };
}

global.Tools = Tools;