接入宁夏移动

zhaoxiaoqiang

2021-07-27 d1425aa67c0c6c0e087ce32b1779ee02bbcdc4c6

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

@@ -1,758 +1,283 @@
<!--
 * @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">
    <div v-if='hnOrnxtype == 410000'>
      <div class="head">
        <div class="head-left"></div>
        <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>
              <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)"
                      />
                    </div>
                    <div class="tab-index-row-font">
                      {{ grandchildItem.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

        </div>
        <!-- 产品未开通弹窗 -->
        <van-popup v-model="noOpenShow" class="no-open">
            <div class="no-open-img">
                <img src="../../../assets/imgs/openpic.png" alt="">
            </div>
            <p>{{ noOpenText }}</p>
            <van-button type="default" class="no-open-btn" @click="noOpenShow = false" round>确定</van-button>
        </van-popup>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <wxPayScore v-else></wxPayScore>
  </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: []
            };
        },
        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.$api.riskNum().then(res => {
                this.complaintNum = res.body.complaintNum;
                this.riskNum = res.body.riskNum;
            })
        },
        methods: {
            hasHjToken(){
                if(localStorage.hjToken){
                    return false
                }else{
                    return 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) => {

                });
            },
            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';
                        }
                    }
                    this.$router.push({
                        path,
                        query: {
                            typeId: item.typeId,
                            prodId: item.prodId,
                            text: text
                        }
                    });
                } else {
                    this.noOpenText = flag ? '敬请期待...' :  '商户未开通该产品';
                    this.noOpenShow = true;
                }
            },
        },

import { mapState, mapGetters } from "vuex";
import  wxPayScore from './wx-pay-score.vue'
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {wxPayScore},
  data() {
    return {
      active: "",
      contTypeList: [],
      mblNoTypeList: {},
      showHwfProd: false,
    };
  },
  computed: {
    ...mapState(["userinfo", "msgCount","hnOrnxtype"]),
    ...mapGetters(["orgType"]),
  },
  created() {
    if (this.orgType == 4) {
      this.getProdcuctList();
      this.init();
    }
  },
  methods: {
    getIndexIcon(item) {
      let iconSrc =
        location.origin +
        location.pathname +
        "/static/img/" +
        item.icon +
        ".png";
      return iconSrc;
    },
    init() {
      this.$api.wxScoreCreInit2().then(
        (res) => {
          this.contTypeList = res.body.contTypeList || {};
        },
        (err) => err
      );
    },
    qrCodePage() {
      this.$router.push({
        path: "/wx-test-code",
        query: "",
      });
    },
    productPage(item) {
      let queryObj = {
        code: item.code,
        mblNoType: item.mblNoType,
      };
      this.$router.push({
        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;
          }
        });
      });
    },
  },
};
</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{
                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;
        }
    }

    .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;
<style lang="less" scoped>
.head {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  background: #ffffff;
  text-align: center;
  &-left {
    width: 33.3%;
    height: 40px;
  }
//   .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;
          }
      }
    }
  &-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;
  }
}
.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)

.tab {
  width: 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;
    }
    &-content{
        // margin-top: 10px;
        border-radius: 6px;
    &-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%;
      .flexLayout(space-between, center);
      flex-wrap: wrap;
      &-item{
          width: 50%;
          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;
          }
        height: 30%;
        &-image {
          width: 100%;
          height: 100%;
        }
      }
      &-font {
        width: 100%;
        height: 30%;
        font-size: 10px;
        font-family: PingFang SC;
        color: #333333;
      }
    }
  }
}
.notice-continer{
    width: 95%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5%;

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

.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;
    line-height: 50px;
    background: linear-gradient(90deg, #1c87fd, #219ffd);
    border-radius: 44px;
    .button-txt {
      margin: 8px 0 0 0;
      font-size: 22px;
      color: #ffffff;
    }
  }
}
</style>