<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-30 18:04:49
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-04 14:17:25
|
* @Description:
|
-->
|
<template>
|
<div class="productManagement-page">
|
<!-- <x-header title="产品管理" :left-options="{backText:'',showBack:false}"></x-header> -->
|
<van-nav-bar title="产品管理" left-text="返回" left-arrow @click-left="onClickLeft" fixed style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<!--<x-header slot="header" title="产品管理" :left-options="{backText:'',preventGoBack:true}"-->
|
<!--@on-click-back="pageGoBack()"></x-header>-->
|
<div class="productManagement-header">
|
<ul class="productManagement-list">
|
<!-- v-if="productList1.length" -->
|
<li class="item" @click="handleJump(item)" v-for="(item,index) in productList1" :key="index">
|
<img :src="item.icon" style="width:40px;height:40px"></img>
|
<p style="margin-top:5px">商户收款</p>
|
</li>
|
<li class="item" @click="goHbCp" v-if="productList2.length">
|
<i class="iconfont iconhuabei" style="color:#108FEA;width:20px;height:20px"></i>
|
<p style="margin-top:5px">花呗分期</p>
|
</li>
|
<li class="item" @click="handleJump(i)" v-for="(i,index) in productList3" :key="index" v-show="productList3.length">
|
<img class="item-logo" :src="i.icon" :alt="i.typeName">
|
<p>{{i.typeName}}</p>
|
<div class="tip-box" :style="i.openStatus==0?{background:'#F2F2F2'}:i.openStatus==1?{background:'#FFF5D9'}:i.openStatus==2?{background:'#E3FAEF'}:i.openStatus==3?{background:'#FCF0F0'}:''">
|
<p v-if="i.openStatus==2" style="color:#19BE6B;">已开通</p>
|
<p v-if="i.openStatus==1" style="color:#FFC421;">开通中</p>
|
<p v-if="i.openStatus==3" style="color:#FF6666;">未通过</p>
|
<p v-if="i.openStatus==0" style="color:#999999;">未开通</p>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<f-no-data v-if="(productList2.length == 0) && (productList3.length == 0)"></f-no-data>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
import Vue from 'vue';
|
import { NavBar } from 'vant';
|
|
Vue.use(NavBar);
|
export default {
|
name: 'productManagement',
|
data() {
|
return {
|
productList3: [],
|
productList2: [],
|
productList1: []
|
};
|
},
|
created(){
|
this.init();
|
},
|
computed:{
|
...mapState(['userinfo']),
|
},
|
methods: {
|
goShsk(){
|
|
},
|
goHbCp() {
|
this.$router.push('/hbcp_sh')
|
},
|
onClickLeft() {
|
this.$router.push({
|
path: '/main/mine'
|
});
|
},
|
handleJump(productItem) {
|
let {
|
typeId,
|
prodId,
|
openStatus,
|
zfbVersion
|
} = productItem,
|
path = '',
|
title = '',
|
query = {
|
typeId,
|
prodId,
|
zfbVersion,
|
openStatus
|
};
|
if(zfbVersion){
|
path = '/main/hb-product'
|
}
|
if(typeId==='200014'){
|
switch(openStatus){
|
case 2 :
|
path = "/huabei/staging_hbjl";
|
break;
|
}
|
query={
|
typeId,
|
orgType: this.userinfo.orgType,
|
orgId: this.userinfo.orgId
|
}
|
}
|
if(typeId==='200010'){
|
switch(openStatus){
|
case 0:
|
path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
path = '/huabei/open-result';
|
break;
|
case 2:
|
path = '/shtx/staging';
|
break;
|
default:
|
path = '/huabei/open';
|
break;
|
}
|
}
|
if(typeId === '200008'){
|
path = '/channel-selection_sh';
|
}
|
if(typeId==='200009'){
|
typeId = '200002'
|
}
|
// openStatus 1-开通中，2-已开通, 3-未开通
|
// openStatus 0-待开通 1-开通中，2-已开通, 3-开通失败
|
// typeId 200001 信用卡分期
|
|
if (typeId === '200001') {
|
path = '/creditStaging';
|
query = {
|
typeId,
|
orgType: this.userinfo.orgType,
|
orgId: this.userinfo.id
|
}
|
} else if (typeId === '200002') {
|
switch (openStatus) {
|
case 0:
|
path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
path = '/huabei/open-result';
|
break;
|
case 2:
|
if(typeId=='200008'){
|
path = '/huabei/staging_dmf';
|
}else{
|
path = '/huabei/staging';
|
}
|
break;
|
default:
|
path = '/huabei/open';
|
break;
|
}
|
if(typeId==='200002'){
|
title = '花呗分期';
|
}else{
|
title = '商户收款';
|
}
|
} else if (typeId === '200003') {
|
path = '/ljcreditStaging';
|
query = {
|
typeId,
|
orgType: this.userinfo.orgType,
|
orgId: this.userinfo.id
|
}
|
// 购机直降
|
} else if (typeId === '200004') {
|
// 0-待开通,1-开通中,2-已开通,3-开通失败
|
switch (openStatus) {
|
case 0:
|
path = '/gjzj/open';
|
break;
|
case 1:
|
case 2:
|
case 3:
|
path = '/gjzj/open-result';
|
break;
|
default:
|
path = '/huabei/open';
|
break;
|
}
|
query = {
|
typeId,
|
openStatus: openStatus,
|
icon: productItem.icon,
|
}
|
}else if (typeId === '200005') {
|
// 0-待开通,1-开通中,2-已开通,3-开通失败
|
switch (openStatus) {
|
case 0:
|
path = '/heyd/merOpen';
|
break;
|
case 1:
|
case 2:
|
case 3:
|
path = '/heyd/open-result';
|
break;
|
case 4:
|
path = '/heyd/open-result';
|
break;
|
default:
|
path = '/heyd/merOpen';
|
break;
|
}
|
query = {
|
typeId,
|
openStatus: openStatus,
|
orgType: this.userinfo.orgType,
|
icon: productItem.icon,
|
}
|
}else if (typeId === '200011') {
|
if(productItem.prodId=='30000012'){
|
switch (openStatus) {
|
case 0:
|
path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
path = '/huabei/open-result';
|
break;
|
case 2:
|
path = '/huabei/staging';
|
break;
|
default:
|
path = '/huabei/open';
|
break;
|
}
|
title = '信用购-花呗分期';
|
query = {
|
typeId,
|
openStatus: openStatus,
|
orgType: this.userinfo.orgType,
|
icon: productItem.icon,
|
prodId:productItem.prodId
|
}
|
}else{
|
// 0-待开通,1-开通中,2-已开通,3-开通失败
|
switch (openStatus) {
|
case 0:
|
path = '/xyg/merOpen';
|
break;
|
case 1:
|
case 2:
|
case 3:
|
path = '/xyg/open-result';
|
break;
|
case 4:
|
path = '/xyg/open-result';
|
break;
|
default:
|
path = '/xyg/merOpen';
|
break;
|
}
|
title = '信用购-储蓄卡';
|
query = {
|
typeId,
|
openStatus: openStatus,
|
orgType: this.userinfo.orgType,
|
icon: productItem.icon,
|
prodId:productItem.prodId
|
}
|
}
|
|
}else if (typeId === '200017') {
|
// 0-待开通,1-开通中,2-已开通,3-开通失败
|
switch (openStatus) {
|
case 0:
|
path = '/gzzj/merOpen';
|
break;
|
case 1:
|
case 2:
|
case 3:
|
path = '/gzzj/open-result';
|
break;
|
case 4:
|
path = '/gzzj/open-result';
|
break;
|
default:
|
path = '/gzzj/merOpen';
|
break;
|
}
|
query = {
|
typeId,
|
openStatus: openStatus,
|
orgType: this.userinfo.orgType,
|
icon: productItem.icon,
|
}
|
}
|
query.title = title;
|
this.$router.push({
|
path,
|
query
|
});
|
},
|
//初始化
|
init() {
|
this.$api.prodManagerInit().then(res => {
|
this.productList3 = [...res.body.prodTypeRespVoList3];
|
this.productList2 = [...res.body.prodTypeRespVoList2];
|
this.productList1 = []
|
this.productList2.forEach(item=>{
|
if(item.prodId == 30000008){
|
this.productList1.push(item)
|
}
|
})
|
localStorage.setItem('hbcp_sh', JSON.stringify(res.body.prodTypeRespVoList2))
|
});
|
}
|
},
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.item-logo{
|
display: block-line;
|
vertical-align: middle;
|
width: 45px;
|
height: 45px;
|
margin-left: auto;
|
}
|
.productManagement-page {
|
// padding-top: 54px;
|
background-color: #F5F5F7;
|
min-height: 100vh;
|
// padding-top: 44px;
|
|
.productManagement-header {
|
height: 100%;
|
background: #F5F5F7;
|
//margin-top: 50px;
|
padding-top: 50px;
|
.productManagement-list {
|
box-sizing: border-box;
|
padding:0 25px 50px;
|
border-radius:3px;
|
overflow: hidden;
|
height: 100%;
|
width: 359px;
|
margin: auto;
|
background: #fff;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.item{
|
position: relative;
|
margin-top: 28px;
|
width:35vw;
|
height:80px;
|
background:rgba(255,255,255,1);
|
box-shadow:0px 0px 15px 0px rgba(66,61,93,0.08);
|
border-radius:8px;
|
.tip-box{
|
position: absolute;
|
width:45px;
|
height:16px;
|
line-height: 16px;
|
border-radius:8px 0px 0px 8px;
|
top: 7px;
|
right: 0;
|
p{
|
font-size: 10px;
|
}
|
}
|
}
|
.open{
|
color:#19BE6B;
|
margin-top: 8px;
|
}
|
.notOpen{
|
color:#ED4014;
|
margin-top: 8px;
|
}
|
.iconfont {
|
font-size: 36px;
|
color: @color-text-placeholder;
|
}
|
|
.usable {
|
color: @color-text-three !important;
|
}
|
|
li {
|
list-style: none;
|
float: left;
|
width: 49%;
|
text-align: center;
|
padding-top: 20px;
|
|
p {
|
font-size: @font-size-small;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
