和微分改造

liangjin

2021-04-22 f4dfe7df479ffb980b32c1375bfc97c0731448e1

 src/views/old/store/business-center.vue

@@ -7,46 +7,44 @@
-->
<template>
    <div class="hb-gmzf">
        <x-header :left-options="{backText: '', showBack: false}">和微分</x-header>
        <div v-if="showHwfProd">
            <div class="tab">
                <div class="tab-index">
                    <p class="tab-index-one">请选择手机号类型</p>
                </div>
        <div class="head">
            <div class="head-left">
            </div>
            <div class="order-xrw" v-if="showXrwType" @click="productPage(0)">
                <div class="order-xrw-create">
                        <div class="order-xrw-create-icon">
                            <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_xrw.png"></img>
            <div class="head-mid">
                和微分
            </div>
            <div class="head-right" v-on:click="qrCodePage()">
                授权测试
            </div>
        </div>
        <div class="tab">
            <van-tabs v-model="active" animated @click="onClick">
                <van-tab v-for="(item,index) in contTypeList" :title="item.name" :key="index" >
                    <div v-for="(childItem,index) in item.childList" :key="index">
                        <div class="tab-head">
                            <div class="tab-head-icon">
                            </div>
                            <div class="tab-head-font">
                                {{childItem.name}}
                            </div>
                            <div class="tab-head-remain">
                            </div>
                        </div>
                        <p class="order-xrw-create-text">
                            新入网号码
                        </p>
                        <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
                </div>
            </div>
            <div class="order-xrw" style="margin-top: 30px" v-if="showXhzwType" @click="productPage(2)">
                <div class="order-xrw-create">
                    <div class="order-xrw-create-icon">
                        <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_xhzw.png"></img>
                        <div class="tab-index">
                            <div class="tab-index-row">
                                <div class="tab-index-row-main" v-for="(grandchildItem,index) in childItem.childList" :key="index" v-on:click="productPage(grandchildItem)">
                                    <div class="tab-index-row-icon">
                                        <img class="order-xrw-create-icon-image" :src="getIndexIcon(grandchildItem)"></img>
                                    </div>
                                    <div class="tab-index-row-font">
                                        {{grandchildItem.name}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="order-xrw-create-text">
                        携号转网号码
                    </p>
                    <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
                </div>
            </div>
            <div class="order-xrw" style="margin-top: 30px" v-if="showClType" @click="productPage(1)">
                <div class="order-xrw-create">
                    <div class="order-xrw-create-icon">
                        <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_cl.png"></img>
                    </div>
                    <p class="order-xrw-create-text">
                        存量号码
                    </p>
                    <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
                </div>
            </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
@@ -55,16 +53,18 @@
    import { async } from 'q';
    import Vue from 'vue';
    import { Toast } from 'vant';
    import { Tab, Tabs } from 'vant';
    Vue.use(Tab);
    Vue.use(Tabs);
    export default {
        components: {
        },
        data() {
            return {
                active:'',
                contTypeList:[],
                mblNoTypeList:{},
                showHwfProd:false,
                showXrwType:false,
                showClType:false,
                showXhzwType:false,
                showHwfProd:false
            };
        },
        computed:{
@@ -78,23 +78,25 @@
            }
        },
        methods: {
            getIndexIcon(item){
                let iconSrc = location.origin + location.pathname +"/static/img/"+item.icon+".png";
                return iconSrc;
            },
            init(){
                this.$api.wxScoreCreInit().then(res => {
                    this.mblNoTypeList = res.body.mblNoTypeList|| {};
                    this.mblNoTypeList.forEach(item => {
                        if(item.code == '0'){
                            this.showXrwType = true;
                        }else if(item.code == '1'){
                            this.showClType = true;
                        }else if(item.code == '2'){
                            this.showXhzwType = true;
                        }
                    });
                this.$api.wxScoreCreInit2().then(res => {
                    this.contTypeList = res.body.contTypeList|| {};
                }, err => err);
            },
            productPage(type){
            qrCodePage(){
                this.$router.push({
                    path: "/wx-test-code",
                    query: "",
                })
            },
            productPage(item){
                let queryObj = {
                    mblNoType:type,
                    code:item.code,
                    mblNoType:item.mblNoType,
                }
                this.$router.push({
                    path: "/wx-pay-score",
@@ -115,36 +117,103 @@
    };
</script>
<style lang="less" scoped>
    .hb-gmzf {
    .head {
        width: 100%;
        height: 100%;
        background: #FAFAFC;
        height: 40px;
        display: flex;
        line-height: 40px;
        background: #FFFFFF;;
        text-align: center;
        &-left{
            width: 33.3%;
            height: 40px;
        }
        &-mid{
            width: 33.3%;
            height: 40px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
        }
        &-right{
            width: 33.4%;
            height: 40px;
            font-size: 14px;
            font-family: PingFang SC;
            color: #333333;
        }
    }

    .tab {
        width: 100%;
        height: 200px;
        background: url('../../../assets/imgs/hwf_bg.png');
        background-size: 100% 100%;
        height: 100%;
        &-head{
            margin: 20px 30px 20px 30px;
            width: 100%;
            height: 24px;
            line-height: 24px;
            &-icon{
                width: 3px;
                margin-top: 3px;
                float: left;
                height: 18px;
                background: #6C68FF;
            }
            &-font{
                width: 20%;
                margin-left: 10px;
                height: 20px;
                float: left;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }
            &-remain{
                width: 70%;
                float: left;
                height: 20px;
            }
        }
        .tab-index {
            margin: 20px;
            height: 110px;
            line-height: 110px;
            background: #FFFFFF;
            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.04);
            border-radius: 16px;
            &-row {
                width:100%;
                height: 100px;
                line-height: 100px;
                margin:0px 20px 0px 20px;
                &-main {
                    width:22.5%;
                    height: 100%;
                    float: left;
                    text-align: center;
                }
                &-icon {
                    width:100%;
                    height: 30%;
                    &-image {
                        width:100%;
                        height:100%;
                    }
                }
                &-font {
                    width: 100%;
                    height: 30%;
                    font-size: 10px;
                    font-family: PingFang SC;
                    color: #333333;
                }
            }
        }
    }

    .tab-index {
        width: 100%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 100px 0px 0px 20px;
        color: #ffffff;
        i {
            font-size: 36px;
        }
        &-one,&-two{
            width: 100%;
            float: left;
            box-sizing: border-box;
            font-size: 20px;
        }
    }




@@ -177,12 +246,6 @@
                font-size: 18px;
                font-family: PingFang SC;
                color: #333333;
            }
            &-arrow {
                margin-right:10px;
                width: 10%;
                background: url('../../../assets/imgs/product_xrw.png');
                float: right;
            }
        }
    }