封装方法——加密手机号和固话 & 加密身份证号

封装方法——加密手机号和固话 & 加密身份证号

列表加密手机号-效果

1、封装的方法

src/utils/encrypte.ts

// /*加密手机号*/
// /*加密固话*/
export default {
    encryptPhone: (param) => {
        if (!param) return '';
        let str = '' + param;
        if (str.length < 3) return str;
        if (str.length === 11) {
            return str.substr(0, 3) + '****' + str.substr(-4);
        } else {
            return str.substr(0, 6) + '***' + str.substr(-2);
        }

    },
// /*加密身份证号*/
    encryptIdCard: (param) => {
        let str = '' + param;
        if (!str || str === 'null') return '';
        if (str.length < 6) return str;
        return str.substr(0, 6) + '********' + str.substr(-4);
    }
};

2、页面中使用

index.vue

<template>
<span><i class="iconfont iconshenfenzheng"></i>
    {{Encrypte.encryptIdCard(ruleForm.idCardNo)}}
</span>
</template>


<script>
import Encrypte from '@/utils/encrypte';
 
       //手机号部分
       {
            prop: 'phone',
            label: '手机号',
            'min-width': 100,
            sort: false,
            'show-overflow-tooltip': false,
            formatter: phone => {
                return Encrypte.encryptPhone(phone);
            },
        },
            
        //身份证号
        {
            prop: 'idCardNo',
            label: '身份证号',
            'min-width': 170,
            sort: false,
            formatter: idCard => {
                return Encrypte.encryptIdCard(idCard);
            },
        },
            
            
       //方法应用
        queryPageData() {
            const params = methods.buildRequestParams();
            state.tableData = [];
            income_post_list(params).then(res => {
                let { items, pageParam } = res.data || {};
                let result = (items || []).map(item => {
                    //身份证号赋值-调用封装方法
                    item['idCardNoStr'] = Encrypte.encryptIdCard(
                        item.idCardNo
                    );
                    item['auditStatusStr'] =
                        checkOptionsMap[item.auditStatus]?.label;
                    item['grantStatus'] =
                        item['grantStatus'] == null
                            ? 1
                            : item['grantStatus'];
                    return item;
                });
                const { totalCount = 0 } = pageParam || {};
                listStepUpdate(state.tableData, result);
            });
        },            
</script>

附

//薪资-元
{
    prop: 'wageSalary',
    label: '薪资',
    'min-width': 100,
    sort: false,
    formatter: function (item) {
        if (!item) {
            return '-';
        } else {
            return item / 100;
        }
    },
},
    
//账号状态
{
    prop: 'accountStatus',
    label: '账号状态',
    'min-width': 80,
    sort: false,
    //返回数字-显示文字
    formatter: function (item) {
        let text = '';
        if (item === 1) {
            text = '停用';
        } else {
            text = '正常';
        }
        return text;
    },
},   
    
//时间
{
    prop: 'abnorTime',
    label: '异动时间',
    'min-width': 100,
    sort: false,
    formatter: function (item) {
        if (!item) {
            return '-';
        } else {
            //显示时间格式为  2021/11/03
            return new Date(item).toLocaleDateString();
        }
    },
},

new Date().toLocaleDateString() 今天本地时间字符串格式，如"2021/11/03"