<!--
|
* @Descripttion:
|
* @Author: WD丶
|
* @Date: 2019-08-19 09:20:27
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-19 09:58:28
|
-->
|
<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>
|
</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>
|
</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;
|
}
|
},
|
},
|
|
};
|
</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;
|
}
|
// .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;
|
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;
|
}
|
}
|
}
|
}
|
.notice-continer{
|
width: 95%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-left: 5%;
|
}
|
</style>
|
