dq_webcode/src/components/page/Workbench.vue

<template>
    <div class="bgw">
        <router-view></router-view>
        <div class="container_bg" :class="url?'dn':''">
            <div class="flex-center pdt40 border-b pdb30" >
                <img src="../../assets/img/Basics-icon.png" alt class="mgr10 icon-size" />
                <p class="fz-16">基础应用</p>

            </div>
            <!-- <br/>
            10.22的输出
            <el-input v-model="test"></el-input>
            <br/>
            {{fMoney4(test/10000)}}
            {{ChinaCost(test)}} -->
            <div class="flex-center">
                <!-- v-if="$router.currentRoute.meta.btn.includes('人力资源管理系统')" -->
                <div  class="card mgr40 manpower" @click="goto('workbench-manpower')">
                </div>
                <div v-if="$router.currentRoute.meta.btn.includes('客户资源管理系统')" class="card client" @click="goto('workbench-client')">
                </div>
            </div>
            <div v-if="$router.currentRoute.meta.btn.includes('担保业务管理系统') || $router.currentRoute.meta.btn.includes('保后业务管理系统')">
                <div class="flex-center pdt40 border-b pdb30">
                    <img src="../../assets/img/Business-icon.png" alt class="mgr10 icon-size" />
                    <p class="fz-16">业务应用</p>
                </div>
                <div class="flex-center">
                    <div v-if="$router.currentRoute.meta.btn.includes('担保业务管理系统')" class="card mgr40 guarantee mrb30" @click="goto('workbench-guarantee')"></div>
                    <div v-if="$router.currentRoute.meta.btn.includes('保后业务管理系统')" class="card after-guarantee mrb30" @click="goto('afterLoan')"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            url:false,
            test:10.22,
        }
    },
    watch:{
    },
    created(){
        if(this.$route.query.token){
            sessionStorage.setItem("token",this.$route.query.token)
            if(this.$route.query.account){
                if(this.$route.query.headerImg){
                    this.$store.commit("userNameData", { userName: this.$route.query.account,headerImg: this.changePercent(this.$route.query.headerImg) });
                }else{
                    this.$store.commit("userNameData", { userName: this.$route.query.account });
                }
            }
        }

    },
    mounted(){
        if(this.$route.fullPath!=='/workbench')this.url = true
    },
    methods:{
        fMoney4(money) {
            if(!money) return ''
            console.clear()
            //汉字的数字
            let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
            let cnIntRadice = new Array('', '拾', '佰', '仟'); //基本单位
            let cnIntUnits = new Array('', '万', '亿', '兆'); //对应整数部分扩展单位
            let cnDecUnits = new Array('仟', '佰', '拾', '元', '角' , '分'); //对应小数部分单位
            let cnInteger = '元'; //整数金额时后面跟的字符
            let cnIntLast = '万'; //整数无小数点的单位
            let zero = "零"
            let int; //金额整数部分
            let dot; //金额小数部分
            let chineseStr = ''; //输出的中文金额字符串
            let parts; //分离金额后用的数组，预定义
            if (money == '') {
                return '';
            }
            //转换为字符串，获取小数点后的值与整数分离
            money = money.toString();
            console.log(money,money.indexOf('.'),'判断小数点')
            if (money.indexOf('.') == -1) {// 取得小树点后面的值
                int = money;
                dot = '';
            } else {
                parts = money.split('.'); //整数小数分离
                int = parts[0];
                dot = parts[1].substr(0, 6); //最多六位小数，计算到 角，分
            }
            console.log(parseInt(int, 10),'parseInt(int, 10)')
            //十进制转换，处理整数部分单位
            if (parseInt(int, 10) > 0) {
                console.log('进入十进制转换')
                let zeroCount = 0;
                let IntLen = int.length;
                for (let i = 0; i < IntLen; i++) {
                    //循环整数部分，给每个位赋值，且判断是否整除4，添加额外赋值
                    let n = int.substr(i, 1);
                    let p = IntLen - i - 1;  // 长度 -i -1 取得
                    let q = p / 4;
                    let m = p % 4;
                    console.log(n,p,q,m,"q,m")
                    if (n == '0') {
                        zeroCount++;
                    } else {
                        if (zeroCount > 0) {
                            chineseStr += cnNums[0];
                        }
                        //归零
                        zeroCount = 0;
                        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                    }
                    // 
                    if (m == 0 && zeroCount < 4) {
                        chineseStr += cnIntUnits[q];
                    }
                }
                chineseStr += cnIntLast;
            }
            //小数部分
            console.log(dot,'dot')
            if (dot != '') {
                console.log('进入小数处理部分')
                let decLen = dot.length;// 循环小数后面的位数
                for (let i = 0; i < decLen; i++) {
                    let n = dot.substr(i, 1);
                    if (n != '0') {
                        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                    }
                    console.log(i,'i',n,'n',dot)
                    /* 
                        如果 indexof 第一个非0数字，后面带有连续的0，或者间隔的0
                    */
                    if(i==3 && n=='0' ){ // 如果i处于千百十的时候，加个元
                        chineseStr += cnInteger
                    }
                }
            }
            // if (chineseStr == '') {// 为0时，
            //     chineseStr += cnNums[0] + cnIntLast + cnInteger;
            // }
            // else if (dot == '') {//小数点为空值时
            
                // chineseStr += cnInteger; // 加上元
            // }
            return chineseStr;
        },
        
         // 跳转方法,传一个字符串地址
        goto(path) {
            this.$router.push('/' + path);
        }
    },
    beforeRouteUpdate:function(to,from,next){
        if(to.path!=='/workbench')this.url = true
        else this.url = false
        next()
    },
    // 删除%转换成/
    changePercent(str){
        return str.replace(/%2F/g,'/').replace(/%3A/g,':')
    },
}
</script>

<style lang="scss" scoped>
@import url('../../assets/css/common.scss');
.Workbench{
    width: 100%;
    height: 100%;
}
.dn{
    display: none;
}
.icon{
    width: 20px;
}

.manpower {
    background: url('../../assets/img/work-man.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}

.span-text {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 20%;
    width: 130px;
    font-size: 30px;
    word-break: break-all;
}
.guarantee {
    background: url('../../assets/img/work-guarantee.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.after-guarantee {
    background: url('../../assets/img/work-afterLoans.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.client {
    background: url('../../assets/img/work-client.png') no-repeat;
    background-size: 100%;
    position: relative;
    cursor: pointer;
}
.card {
    width: 480px;
    height: 250px;
    margin-top: 30px;
}
</style>