和微分和微分

liangjin

2021-04-09 c0d97faf6b21c033a0a11f0b21083eac9dc1b82e

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

@@ -1,758 +1,210 @@
<!--
 * @Descripttion:
 * @Author: WD丶
 * @Date: 2019-08-19 09:20:27
 * @Author: 小明丶
 * @Date: 2021-01-06 15:50:26
 * @LastEditors: 小明丶
 * @LastEditTime: 2020-12-19 09:58:28
 * @LastEditTime: 2021-01-06 15:50:27
 * @Description:
 -->
<template>
    <div class="business-center">
        <div class="content" v-if="orgType == 4">
            <!-- <div class="content-title">
                办理分期
            </div> -->
            <div class="installment-box ">

                <div class="item " v-for="(i,index) in installmentList" :key="index" @click="go(i)">
                    <img class="item-logo" :src="i.icon"  :alt="i.typeName">
                    <p v-text="i.typeName"></p>
    <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>

            <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>
        <!-- 产品未开通弹窗 -->
        <van-popup v-model="noOpenShow" class="no-open">
            <div class="no-open-img">
                <img src="../../../assets/imgs/openpic.png" alt="">
                        <p class="order-xrw-create-text">
                            新入网号码
                        </p>
                        <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
            </div>
            <p>{{ noOpenText }}</p>
            <van-button type="default" class="no-open-btn" @click="noOpenShow = false" round>确定</van-button>
        </van-popup>
            </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>
                    <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>
        </div>
    </div>
</template>
<script>
    import {
        XHeader,
        XDialog,
    } from 'vux';
    import FBlock from '@/components/old/FBlock';
    import FConfirm from '@/components/old/FConfirm';
    import {
        _copyToClipboard
    } from '@/utils/index';
    import { mapState, mapGetters } from 'vuex';
    import { async } from 'q';
    import Vue from 'vue';
    import { Toast } from 'vant';
    import QRCode from "qrcode";

    Vue.use(Toast);
// import { mapState } from 'vuex';
    export default {
        name: 'business-center',
        components: {
            XHeader,
            FBlock,
            FConfirm,
            XDialog
        },
        data() {
            return {
                qrCode:'',
                errorMsg: '',
                mblNo: '',
                showDialogStyle: false,
                showModal: false,
                tipText: '敬请期待...',
                installmentList: [],
                dmfprod_list: [],
                shsUrl:'',
                // swiperList: [],
                // messageList: [],
                messageId: '',
                riskNum: '', //风险订单数
                complaintNum: '', //投诉订单数
                noOpenShow: false, //产品未开通弹窗控制
                noOpenText: '', //产品未开通文本内容
                info: {},
                prodTypeRespVoList2: []
                mblNoTypeList:{},
                showHwfProd:false,
                showXrwType:false,
                showClType:false,
                showXhzwType:false,
            };
        },
        computed:{
            ...mapState(['userinfo', 'msgCount']),
            ...mapGetters(['orgType']),
            hasDmf(){
                return this.dmfprod_list.length && this.dmfprod_list[0].openStatus!=0;
            }
        },
        created() {
            this.info = this.userinfo
            this.getShsUrl();
            if(this.orgType == 4){
                this.$api.prodIndexTypeList().then(res => {
                    let list = res.body.prodTypeRespVoList3 || [];
                    this.prodTypeRespVoList2 = res.body.prodTypeRespVoList2 || [];
                    localStorage.hbcp = JSON.stringify(res.body.prodTypeRespVoList2)
                    this.dmfprod_list = res.body.prodTypeRespVoList1 || [];
                    list.forEach(item => {
                        item.active = item.openStatus === 2;
                    });

                    this.installmentList.push(...list,...res.body.prodTypeRespVoList1);
                });
                this.getProdcuctList();
                this.init();
            }
            // 获取风控订单数
             this.$api.riskNum().then(res => {
                this.complaintNum = res.body.complaintNum;
                this.riskNum = res.body.riskNum;
            })
        },
        methods: {
            hasHjToken(){
                if(localStorage.hjToken){
                    return false
                }else{
                    return true
            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;
                }
            },
            // 前往选择花呗产品
            goHbCp(){
               this.$router.push('/hbcp')
            },
            goLthyj() {
                this.$router.push('/lthyj')
            },
            toBdCourse(e, name) {
                // if(name == '合约分期') {
                //     Toast('花呗分期教程功能暂未开通，敬请期待')
                // } else {
                    let sum = '';
                    let fileName = '';
                    if(name == '花呗分期') {
                        sum = 7
                        fileName = 'hbfq/'
                    }
                    if(name == '智享花' || name == '信用购') {
                        sum = 9;
                        fileName = 'zxh/'
                    }
                    if(name == '花呗合约机') {
                        sum = 3;
                        fileName = 'hyfq/'
                    }
                    this.$router.push(`/bdCourse?courseName=${name}&&sum=${sum}&&fileName=${fileName}`)
                // }
            },
            jump(id) {
                this.$router.push(`/bannerContent?bannerId=${id}`)
            },
            //跳转到逾期界面..
            toOverdue() {
                this.$router.push('/overdue')
            },
            shsClick(val){
                if(val == 'zfblx') {
                    this.$router.push("/product/zfblx");
                }
                if(val != 'zfblx' && val != 'hbjl') {
                    location.href = this.shsUrl;
                }
                // if(val == 'hbjl'){
                //     this.$router.push('/creat-hbjl')
                // }
            },
            toMessage(e,id) {
                this.$router.push(`/message?messageId=${id}`)
            },
            getShsUrl(){
                this.$api.getShsUrl().then((res) => {
                    this.shsUrl = res.body.url;
                }).catch((err) => {

                });
                }, err => err);
            },
            goDmf(){
                let item = this.dmfprod_list[0];
                if(item.openStatus == 2){
                    //this.$router.push(`/facepay/calcmoney?typeId=${item.typeId}&prodId=${item.prodId}`)
                    this.$router.push(`/channel-selection?typeId=${item.typeId}&prodId=${item.prodId}&text=商户收款通道`)
                }else{
                    this.noOpenShow = true
                }
                // this.$router.push(`/order/dmf?typeId=${item.typeId}&prodId=${item.prodId}`)
            },
            changeBlur() {
                let u = navigator.userAgent,
                    app = navigator.appVersion;
                let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (isIOS) {
                    setTimeout(() => {
                        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                    }, 200)
                }
            },
            clearTel() {
                this.mblNo = '';
                this.errorMsg = '';
            },
            // 复制链接
            copyLink() {

                let isCopy = _copyToClipboard('http://t.cn/AiTDRMMO')
                this.$tool.toast('链接已复制');
            },
            // 花呗提额功能
            hbLinesSMS() {
                let v = this.$tool;
                if (v.checkValEmpty(this.mblNo)) {
                    this.errorMsg = '*请输入手机号';
                    return;
                }
                if (!v.checkPhone(this.mblNo)) {
                    this.errorMsg = '*请输入正确的手机号';
                    return;
                }
                this.$api.hbLinesSMS({
                    mblNo: this.mblNo,
                    content: 'http://t.cn/AiTDRMMO'
                }).then((res) => {
                    this.showDialogStyle = false;
                    setTimeout(() => {
                        this.$tool.toast('短信发送成功');
                    }, 500);
                }).catch((err) => {

                });
            },
            // flag 代表是产品 还是收款的标志（flag为true代表收款）
            go(item, flag = false) {
                //alert('item.active:',item.active)
                if (item.active) {
                    let path = '';
                    let text = '';
                    item.typeId = Number(item.typeId);
                    if(item.isHbProd == 1){
                        path = "/channel-selection"
                        switch (item.typeId) {
                            case 200002:
                                text = '花呗通道';
                                break;
                            case 200009:
                                text = '花呗合约机通道';
                                break;
                            case 200010:
                                text = '商户贴息通道';
                                break;
                        }
                    }else{
                       if(item.typeId) {
                            path = '/wx-pay-score';
                        }
            productPage(type){
                let queryObj = {
                    mblNoType:type,
                    }
                    this.$router.push({
                        path,
                        query: {
                            typeId: item.typeId,
                            prodId: item.prodId,
                            text: text
                    path: "/wx-pay-score",
                    query: queryObj
                })
            },
            getProdcuctList(){
                this.$api.prodIndexTypeList().then(res => {
                    let list = res.body.prodTypeRespVoList3 || [];
                    list.forEach(item => {
                        if(item.prodId ==30000016 && item.openStatus == 2){
                            this.showHwfProd = true;
                        }
                    });
                } else {
                    this.noOpenText = flag ? '敬请期待...' :  '商户未开通该产品';
                    this.noOpenShow = true;
                });
            },
                }
            },
        },

    };
</script>
<style lang='less' scoped>
    // @import '../../style/mixin';
    @font-face {
        font-family: 'iconfont';  /* project id 1351259 */
        src: url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.eot');
        src: url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.woff') format('woff'),
        url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_1351259_bg2i5vlti7u.svg#iconfont') format('svg');
    }
    .no-open{
        width: 280px;
        height: 190px;
        text-align: center;
        border-radius: 6px;
        &-img{
            width: 100%;
            margin-top: 13px;
            img{
                width: 75px;
                height: 75px;
            }
        }
        p{
            font-size: 14px;
            color: #666666;
            margin-top: 7px;
        }
        &-btn{
            height: 36px;
            width: 60%;
            margin: 0 20%;
            background: #896EDB;
            color: #fff;
            margin-top: 28px;
            line-height: 36px;
        }
    }
    .cus-service{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        width: 24px;
        height: 24px;
        background: rgba(0,0,0,1);
         background:rgba(0,0,0,0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        i{
            color: #fff;
            font-size: 16px;
            // opacity: 1;
        }
    }

    .head-title{
        z-index: 10;
    }
    // 顶部轮播
    .swiper-banner {
        width: 100%;
        height: 150px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        // margin-top:-10px;
        padding: 0;
        .vipBg {
            width: 100%;
            height: 150px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            // background-image: url("../../../assets/img/bg-qr-code.png");
        }

        .my-swiper-banner {
            height: 150px;
            width: 100%;
        }
    }
    //播报 部分
    .category {
        height: 30px;
        position: relative;
        width: 94%;
        padding: 0 3%;
        background: #fff;
        .bobao {
            background: rgba(255, 255, 255, 1);
            border-radius: 6px;
            width: 100%;

        }
        .notice-log{
            position: absolute;
            top: 0;
            left: 15px;
            font-size: 20px;
            line-height: 30px;
        }
    }
    .my-swiper-notice{
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        // .flexLayout(flex-start, center, row);
        // flex-wrap: nowrap;
    }
    .swipe-item-box{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100% !important;
    }
    .notice-item-title{
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        margin-left: 10px;
        white-space: nowrap;
        color: #333;
    }
    .notice-item {
        line-height: 30px;
        width: 230px;
        word-wrap: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        // padding-right: 20px;
        color: #333;
    }
    .notice-item-f{
        color: @c-text-999;
    }
    .business-center {
        padding-bottom: 50px;
        // padding-top: 54px;
        // padding-top: 9px;
        .installment-box {
            border-radius: 6px;
            .flexLayout(flex-start, center, row);
            flex-wrap: wrap;
            background: #fff;
            padding: 15px 0;
            .item {
                margin-bottom: 15px;
                width: 33.33%;
                //width: 25%;
                text-align: center;
                i {
                    font-size: 36px;
                }

                p {
                    font-size: 12px;
                    color: #3a3a3a;
                }
                .item-logo{
                    display: block-line;
                    vertical-align: middle;
                    width: 45px;
                    height: 45px;
                    margin-left: auto;
                }
            }
        }
    }
    .nav-code {
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        // text-align: center;
        // height: 120px;
        // background-color: #fff;
        // color: #bb8b52;
        // margin-top: 15px;
        .flexLayout(center, center, row);
        width: 335px;
        height: 50px;
        margin: 12px;
        margin-bottom: 0;
        margin-top: 0;
        border: 1px solid rgba(217,217,217,1);
        border-radius: 6px;
        &-logo{
            width: 36px;
            height: 36px;
            margin-right: 12px;
            img{
<style lang="less" scoped>
    .hb-gmzf {
                width: 100%;
                height: 100%;
            }
        }
        p{
            font-size: 16px;
        }
    }
    .merCollection{
        width: 94%;
        margin: 0 3%;
        height: 50px;
        border:  1px dashed #D9D9D9;
        .flexLayout(center, center, row);
        i{
            font-size: 36px;
            margin-right: 10px;
        }
        background: #FAFAFC;
    }

    .dialog {
        position: relative;

        .dialog-content {
            background-color: #fff;
            width: 280px;
            height: 270px;
            margin: 0 auto;
            padding: 40px 15px 0;
            box-sizing: border-box;
            border-radius: 6px;
        }

        .text {
            width: 150px;
            font-size: 14px;
            margin: 0 auto;
            color: #666666;

            .blue {
                color: #4074F8;
                text-decoration: underline;
            }
        }

        .input-box {
            height: 44px;
            .flexLayout(flex-start, center);
            padding-left: 10px;
            border: 1px solid rgba(230, 230, 230, 1);
            width: 250px;
            margin: 20px auto 0;
            box-sizing: border-box;

            .icon {
                position: relative;
                padding-right: 10px;

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 1px;
                    height: 15px;
                    background-color: #3A3A3A;

                }
            }

            .input {
                margin-left: 10px;
                padding: 10px 0;
                flex: 1;
                font-size: 12px;
                border: none;
                outline: none;

                &.error {
                    color: #FE2A2A;
                }
            }
        }

        .errmsg {
            text-align: left;
            margin-left: 10px;
            margin-bottom: 20px;
            height: 15px;
            color: #FE2A2A;
            font-size: 10px;
        }

        .btn {

            width: 250px;
            height: 44px;
            text-align: center;
            outline: none;
            border: none;
            background-color: #3A3A3A;
            color: #fff;
        }

        .logo {
            width: 64px;
            height: 64px;
            transform: translateY(32px);
        }

        .close {
            margin-top: 20px;
        }

    }
    //逾期
    .overdue-box{
        width: 96%;
        margin: 12px 2%;
        background: #fff;
        border-radius:6px;
        height: 92px;
        display: flex;
        padding: 10px;
        box-sizing: border-box;
        font-family: PingFang SC;
        color: #666666;
        .overdue-box-left {
            width: 74%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .title {
                font-size: 12px;
                font-weight: 500;
            }
            .title:before {
                content: "";
                width: 3px;
                height: 12px;
                background: #9459EC;
                border-radius: 2px;
                display: inline-block;
                margin-right: 6px;
            }
            .order {
                margin-top: 5px;
                font-size: 12px;
                color: #666;
                .orderItem {
                    margin-right: 10px;
                }
                .ordernum {
                    font-size: 18px;
                    font-weight: bold;
                    color: #333;
                    margin-right: 5px;
                }
            }
            .tip {
                height: 12px;
                font-size: 12px;
                font-weight: 500;
                color: #999999;
                margin-top: 5px;
            }
        }
        .overdue-box-right {
            width: 26%;
            display: flex;
            flex-direction: column;
            justify-items: center;
            justify-content: center;
            .view {
                width: 80px;
                height: 28px;
                background: linear-gradient(90deg, #8F6AFF, #9459EC);
                box-shadow: 0px 4px 7px 0px rgba(99, 19, 232, 0.25);
                border-radius: 14px;
                font-size: 12px;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                line-height: 28px;
            }
        }
    }
  .content{
    //   width: 100%;
    width: 96%;
    margin: 12px 2%;
    border-radius: 6px;
  }
//   .content-title{
//       width: 96%;
//       height: 45px;
//       background-color: #fff;
//       line-height: 45px;
//       margin-top: 20px;
//       padding-left: 4%;
//       margin-bottom: 5px;
//   }
//办单教程
.course{
    width: 96%;
    height: 140px;
    margin: 12px 2%;
    margin-bottom: 20px;
    padding-bottom: 27px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 6px;
    &-title{
        // padding: 10px;
        padding-top: 15px;
        padding-left: 12px;
        padding-bottom: 15px;
        font-size: 16px;
        font-weight:bold;
        color:rgba(51,51,51,1)
    }
    &-content{
        margin-top: 10px;
      .flexLayout(space-between, center);
      &-item{
          width: 33.33%;
          text-align: center;
          i{
              font-size: 36px;
          }
          p{
              color: #666666;
              margin-top: 5px;
              font-size: 14px;
          }
      }
    }
}
.courseDl{
    width: 96%;
    height: 165px;
    margin: 12px 2% 0 2%;
    // margin-bottom: 20px;
    // padding-bottom: 27px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 6px;
    &-title{
        // padding: 10px;
        padding-top: 15px;
        padding-left: 12px;
        padding-bottom: 15px;
        font-size: 16px;
        font-weight:bold;
        color:rgba(51,51,51,1)
    }
    &-content{
        // margin-top: 10px;
        border-radius: 6px;
    .tab {
        width: 100%;
      .flexLayout(space-between, center);
      flex-wrap: wrap;
      &-item{
          width: 50%;
        height: 200px;
        background: url('../../../assets/imgs/hwf_bg.png');
        background-size: 100% 100%;
    }

    .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;
        }
    }



    .order-xrw {
        margin:-50px 10px 10px 10px;
        padding: 0 10px 0 10px;
        line-height: 100px;
        background: #FFFFFF;
        box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.04);
        border-radius: 16px;
        &-create {
            width: 100%;
            height: 100px;
            margin:0px 10px 0px 10px;
            &-icon {
                width:20%;
                height: 100%;
                float: left;
                text-align: center;
                &-image {
                    width:43px;
                    height:43px;
                    margin-top:25px;
                }
            }
            &-text {
                width: 70%;
                float: left;
                heght:100%;
                font-size: 18px;
                font-family: PingFang SC;
                color: #333333;
            }
            &-arrow {
                margin-right:10px;
                width: 10%;
                background: url('../../../assets/imgs/product_xrw.png');
                float: right;
            }
        }
    }

    .button-maintain {
        width:100%;
        height:100%;
        padding: 0 20px 0 20px;
        box-sizing: inherit;
        .button {
            margin: 50px 0 0 0;
            width:100%;
          height: 50px;
          text-align: center;
          .flexLayout(flex-start, center);
          i{
              margin-left: 40px;
              font-size: 30px;
              margin-right: 13px;
          }
          p{
              width: 60px;
              color: #666666;
              text-align: left;
            //   margin-top: 5px;
              font-size: 14px;
              line-height: 50px;
            background: linear-gradient(90deg, #1C87FD, #219FFD);
            border-radius: 44px;
            .button-txt {
                margin: 8px 0 0 0;
                font-size: 22px;
                color: #FFFFFF;
          }
      }
    }
}
.notice-continer{
    width: 95%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;
}
</style>