优化列表卡片组件显示与交互

Tevin

2023-04-03 f634a3265e87e61290a7d5b46e9532fb904e047f

 common/Tools.js

@@ -5,35 +5,41 @@

import moment from 'moment';
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';

export class Tools {

    /**
     * 显示消息
     * @param msg
     * @param [duration=2000]
     * @param [mask=false]
     */
    static toast(msg) {
    static toast(msg, duration = 2000, mask = false) {
        Taro.showToast({
            title: msg,
            icon: 'none',
            mask: true,
            duration: 2000,
            mask,
            duration,
        });
    }

    /**
     * 锁定页面
     * @param type - lock / unlock
     * URL参数解析
     * @param {String} name
     * @param {String} [search]
     * @return {String|Null}
     */
    static lockScreen(type) {
        if (typeof Tools.$lock) {
            Tools.$lock = $('#lock');
    static getUrlParam(name, search) {
        if (process.env.TARO_ENV === 'weapp') {
            return null;
        }
        if (type === 'lock') {
            Tools.$lock.show();
        } else if (type === 'unlock') {
            Tools.$lock.hide();
        search = search || window.location.search;
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        const r = search.substr(1).match(reg);
        if (r !== null) {
            return decodeURIComponent(r[2]);
        } else {
            return null;
        }
    }

@@ -61,6 +67,50 @@
                v = c === 'x' ? r : ((r & 0x3) | 0x8);
            return v.toString(16);
        });
    }

    /**
     * 获取随机字符串
     * @param {number} long
     * @return {string}
     */
    static getRandomString(long) {
        long = long || 32;
        const template = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        const count = template.length;
        let result = '';
        for (let i = 0; i < long; i++) {
            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
    }

    /**
@@ -118,12 +168,21 @@
    }

    /**
     * 判断是否为未定义
     * @param {*} data
     * @return {Boolean}
     */
    static isUndefined(data) {
        return Object.prototype.toString.call(data) === '[object Undefined]';
    }

    /**
     * 判断是否为 null
     * @param {*} data
     * @return {Boolean}
     */
    static isNull(data) {
        return data === null;
        return Object.prototype.toString.call(data) === '[object Null]';
    }

    /**
@@ -303,7 +362,16 @@
        if (Tools.isString(timestamp)) {
            // 全数值
            if (/^\d+$/.test(timestamp)) {
                timestamp = parseInt(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();
                }
                // 超过8位，视为时间戳
                else if (timestamp.length > 8) {
                    timestamp = parseInt(timestamp);
                }
            }
            // 日期
            else {
@@ -313,7 +381,15 @@
                }
            }
        }
        if (timestamp < 9 * 10e8) {
        // 转为数值的无连接符日期
        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();
        }
        // 按秒时间戳
        else if (timestamp < 9 * 10e8) {
            timestamp *= 1000;
        }
        const curMoment = moment(timestamp);
@@ -347,7 +423,7 @@
        if (minutes) {
            words = minutes + '分' + words;
        }
        const hours = duration.get('hours');
        const hours = parseInt(duration.as('hours'));
        if (hours) {
            words = hours + '小时' + words;
        }
@@ -360,16 +436,13 @@
     * @return {string}
     */
    static moneyFormat(number) {
        if (!number && typeof number !== 'number') {
        if (!number && typeof number !== 'number' && typeof number !== 'string') {
            return '';
        }
        if (typeof number === 'string') {
            number = Number(number) || 0;
        }
        const numFixed = number.toFixed(2);
        const integer = parseInt(numFixed);
        const decimal = numFixed.split('.')[1];
        return integer.toLocaleString() + '.' + decimal;
        return number.toFixed(2);
    }

    /**
@@ -443,5 +516,121 @@
        return /^1[3456789]\d{9}$/.test('' + phone);
    }

    /**
     * 转换周数到日期
     * @param year
     * @param week
     * @param weekDay 需要输出星期几对应的日期 (1~7)
     * @return {Date}
     */
    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');
    }

}
    /**
     * 显示调试面板（仅支持H5）
     * @param cssSelector
     * @param callback
     */
    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 simulateTouch = (dom, type) => {
            const button = dom;
            const touch = new Touch({
                identifier: Date.now(),
                target: button,
                clientX: 0,
                clientY: 0,
                screenX: 0,
                screenY: 0,
                pageY: 0,
                pageX: 0,
                radiusX: 2.5,
                radiusY: 2.5,
                rotationAngle: 10,
                force: 0.5,
            });
            const touchstart = new TouchEvent(type, {
                cancelable: true,
                bubbles: true,
                composed: true,
                touches: [touch],
                targetTouches: [touch],
                changedTouches: [touch],
            });
            button.dispatchEvent(touchstart);
        };
        const erudaTimer = setInterval(() => {
            if (window.eruda) {
                clearInterval(erudaTimer);
                setTimeout(() => {
                    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,
                    });
                    let button = null;
                    setTimeout(() => {
                        button = document.querySelector('.eruda-entry-btn');
                    }, 50);
                    setTimeout(() => {
                        simulateTouch(button, 'touchstart');
                    }, 60);
                    setTimeout(() => {
                        simulateTouch(button, 'touchend');
                    }, 350);
                    setTimeout(() => {
                        console.warn('=====【艾信App调试模式】=====');
                    }, 800);
                    setTimeout(() => {
                        console.warn('点击右下角悬浮工具箱图标可以折叠面板');
                    }, 900);
                    setTimeout(() => {
                        callback && callback();
                    }, 1000);
                }, 100);

            }
        }, 100);
    }

}

// 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,
        };
        const p2 = {
            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;
        console.info(Math.round(px) + 'px');
    };
}

global.Tools = Tools;