<!--
|
* @Descripttion:
|
* @Author: WD丶
|
* @Date: 2019-08-19 09:20:27
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-09 20:30:28
|
-->
|
<template>
|
<div class="business-center">
|
<!-- <x-header class="head-title" title="产品管理" :left-options="{backText:'',showBack:false}"></x-header> -->
|
<van-nav-bar title="产品管理" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<!-- 顶部轮播 -->
|
<!-- <div class="content" v-if="installmentList.length">
|
<div class="content-title">
|
办理分期
|
</div>
|
<div class="nav-code" v-if="hasDmf" @click="goDmf">
|
<i class="icon iconfont scene_Staging-scan" style="font-size:45px"></i>
|
<p>支付宝扫码收款</p>
|
</div>
|
<div class="installment-box ">
|
<div class="item " v-for="(i,index) in installmentList" :key="index" @click="go(i)">
|
<i v-if="i.prodId == 33000001" class="iconfont" :class="i.icon" :style="{color:i.active?'#B036F6':'#a3a3a3'}"></i>
|
<i v-else class="iconfont" :class="i.icon" :style="{color:i.active?'#bfa073':'#a3a3a3'}"></i>
|
<p v-text="i.typeName"></p>
|
</div>
|
<div class="item " @click="shsClick">
|
<i class="iconfont scene_Staging-shanhuishou" :style="{color:'#bfa073'}"></i>
|
<p>闪回收</p>
|
</div>
|
</div>
|
</div> -->
|
<div class="content">
|
<!-- <div class="content-title">
|
办理分期
|
</div> -->
|
<div class="installment-box ">
|
|
<div class="item " v-for="(i,index) in installmentList" :key="index" @click="go(i)">
|
<!-- <i v-if="i.prodId == 33000001" class="iconfont" :class="i.icon" :style="{color:i.active?'#B036F6':'#a3a3a3'}"></i>
|
<i v-else class="iconfont" :class="i.icon" :style="{color:i.active?'#bfa073':'#a3a3a3'}"></i> -->
|
<i v-if="i.prodId == 33000001" class="iconfont" :class="i.icon" style="color:#B036F6"></i>
|
<i v-else class="iconfont" :class="i.icon" style="color:#bfa073"></i>
|
<p v-text="i.typeName"></p>
|
</div>
|
<div class="item " @click="shsClick">
|
<img class="item-logo" src="../../../assets/img/shs.png" alt="闪回收">
|
<p>闪回收</p>
|
</div>
|
<div class="nav-code" v-if="hasDmf" @click="goDmf">
|
<div class="nav-code-logo">
|
<img src="../../../assets/img/shsk.png" alt="商户收款">
|
</div>
|
<p>商户收款</p>
|
</div>
|
</div>
|
|
</div>
|
<f-confirm v-model="showModal" showIcon iconClass='scene_Staging-shenhezhong' iconColor='#fff'
|
:showCancelBtn='false'>
|
<div>{{ tipText }}</div>
|
</f-confirm>
|
|
|
<div class="dialog">
|
<x-dialog v-model="showDialogStyle" @on-hide='clearTel'
|
:dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
|
<img class="logo" src="@/assets/imgs/img_details.png" alt="">
|
<div class="dialog-content" >
|
<p class="text" @click="copyLink">
|
将发送花呗提额链接
|
<span class="blue">http://t.cn/AiTDRMMO</span>
|
至以下手机号
|
</p>
|
<div class="input-box">
|
<i class="icon iconfont scene_Staging-shoujihao"></i>
|
<input v-model="mblNo" class="input" :class="[errorMsg ? 'error':'']" type="tel" maxlength="11"
|
placeholder="请输入接收短信的手机号码" @focus="errorMsg = '';" @blur="changeBlur">
|
</div>
|
<p class="errmsg">{{errorMsg}}</p>
|
<button class="btn" @click.stop="hbLinesSMS">发送短信</button>
|
</div>
|
<van-icon name="cross" size='36' color="#fff" class="close" @click.stop="showDialogStyle =false;"></van-icon>
|
</x-dialog>
|
</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';
|
|
Vue.use(Toast);
|
// import { mapState } from 'vuex';
|
export default {
|
name: 'business-center',
|
components: {
|
XHeader,
|
FBlock,
|
FConfirm,
|
XDialog
|
},
|
data() {
|
return {
|
errorMsg: '',
|
mblNo: '',
|
showDialogStyle: false,
|
showModal: false,
|
tipText: '敬请期待...',
|
installmentList: [],
|
dmfprod_list: [],
|
shsUrl:'',
|
// swiperList: [],
|
// messageList: [],
|
messageId: '',
|
oveNum: '',
|
};
|
},
|
computed:{
|
...mapState(['userinfo', 'msgCount']),
|
...mapGetters(['orgType']),
|
hasDmf(){
|
return this.dmfprod_list.length && this.dmfprod_list[0].openStatus!=0;
|
}
|
},
|
created() {
|
// this.indexInit()
|
this.getShsUrl();
|
this.$api.prodList({
|
pageType: 2
|
}).then(res => {
|
let list = res.body.prodTypeRespVoList2 || [];
|
this.dmfprod_list = res.body.prodTypeRespVoList1 || [];
|
list.forEach(item => {
|
item.active = item.openStatus === 2;
|
});
|
|
this.installmentList.push(...list);
|
});
|
this.$api.overdueNum().then(res => {
|
// console.log(res.body)
|
this.oveNum = res.body;
|
// this.$nextTick(() => {
|
// })
|
console.log(this.oveNum)
|
})
|
},
|
methods: {
|
//初始化banner，notice
|
// indexInit() {
|
// this.$api.indexInit().then(res => {
|
// console.log(res.body)
|
// this.swiperList = res.body.bannerInfoVos
|
// this.messageList = res.body.noticeInfos.noticeInfos
|
// // if(res.body.bannerInfoVos == null){
|
// // this.showSwiper = false;
|
// // }
|
// // if(res.body.noticeInfos.noticeInfos == null){
|
// // this.showNotice = false;
|
// // }
|
// })
|
// },
|
//点击banner跳转到主要内容
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
toBdCourse(e, name) {
|
console.log(name)
|
// if(name == '合约分期') {
|
// Toast('商品分期教程功能暂未开通，敬请期待')
|
// } else {
|
let sum = '';
|
let fileName = '';
|
if(name == '商品分期') {
|
sum = 7
|
fileName = 'hbfq/'
|
}
|
if(name == '智享花') {
|
sum = 9;
|
fileName = 'zxh/'
|
}
|
if(name == '合约分期') {
|
sum = 3;
|
fileName = 'hyfq/'
|
}
|
console.log(sum)
|
this.$router.push(`/bdCourse?courseName=${name}&&sum=${sum}&&fileName=${fileName}`)
|
// }
|
},
|
jump(id) {
|
this.$router.push(`/bannerContent?bannerId=${id}`)
|
},
|
//跳转到逾期界面..
|
toOverdue() {
|
this.$router.push('/overdue')
|
},
|
shsClick(){
|
location.href = this.shsUrl;
|
},
|
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];
|
this.$router.push(`/facepay/calcmoney?typeId=${item.typeId}&prodId=${item.prodId}`)
|
// 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) {
|
if (item.active) {
|
let path = '';
|
item.typeId = Number(item.typeId);
|
switch (item.typeId) {
|
case 200001:
|
path = '/credit-installment';
|
break;
|
case 200002:
|
path = '/hb-credit-installment';
|
|
break;
|
case 200003:
|
path = '/mobile-installment';
|
|
break;
|
case 200004:
|
path = '/contract-installment';
|
|
break;
|
case 200005:
|
path = '/hryd/createcode';
|
break;
|
case 200009:
|
path = '/hbhy-installment';
|
break;
|
case 200010:
|
path = '/hb-merchant-installment';
|
break;
|
}
|
// 花呗提额弹窗显示
|
if (item.prodId == 33000001) {
|
this.showDialogStyle = true;
|
return
|
}
|
this.$router.push({
|
path,
|
query: {
|
typeId: item.typeId,
|
prodId: item.prodId,
|
}
|
});
|
} else {
|
if(item.typeId == 200005) {
|
if (item.statusType == 3) {
|
this.tipText = '商户未开通该产品';
|
} else if (item.statusType == 4 ) {
|
this.tipText = '门店未开通该产品';
|
} else if (item.statusType == 5) {
|
this.tipText = '营业员未开通该产品';
|
} else {
|
this.tipText = '敬请期待...';
|
}
|
} else{
|
this.tipText = flag ? '敬请期待...' : '商户未开通该产品';
|
}
|
this.showModal = true;
|
}
|
},
|
},
|
|
};
|
</script>
|
<style lang='less' scoped>
|
// @import '../../style/mixin';
|
.cus-service{
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
z-index: 1;
|
width: 24px;
|
height: 24px;
|
background: rgba(0,0,0,1);
|
opacity: 0.3;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 24px;
|
i{
|
color: #fff !important;
|
font-size: 16px;
|
}
|
}
|
.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: 160px;
|
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: 5px;
|
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: 20px;
|
white-space: nowrap;
|
color: @c-text-999;
|
}
|
.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: @c-text-999;
|
}
|
.notice-item-f{
|
color: @c-text-999;
|
}
|
.business-center {
|
// padding-top: 54px;
|
.installment-box {
|
.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;
|
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: 300px;
|
height: 270px;
|
margin: 0 auto;
|
padding: 40px 15px 0;
|
box-sizing: border-box;
|
border-radius: 5px;
|
}
|
|
.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;
|
.flexLayout(space-between, center);
|
height: 80px;
|
&-text{
|
padding: 0 10px;
|
font-size: 16px;
|
color: #333;
|
:nth-child(1){
|
span{
|
font-size: 20px;
|
}
|
margin-bottom: 5px;
|
}
|
:nth-child(2){
|
font-size: 12px;
|
color: #999999;
|
span{
|
margin-left: 15px;
|
padding: 3px 10px;
|
padding-right: 20px;
|
width: 40px;
|
height: 14px;
|
line-height: 23px;
|
border-radius: 20px;
|
background: #896EDB;
|
color: #fff;
|
position: relative;
|
i{
|
font-size: 20px;
|
position: absolute;
|
right: 2px;
|
top: 1px;
|
}
|
}
|
}
|
}
|
&-log{
|
width: 94px;
|
height: 65px;
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.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: 25%;
|
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;
|
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>
|
