From 362f5c666a7bf22aeec6688bf6b0ca28749a5abd Mon Sep 17 00:00:00 2001
From: liangjin <liangjin@finlean.com>
Date: Fri, 14 May 2021 18:19:34 +0800
Subject: [PATCH] 和微分
---
src/views/old/store/business-center.vue | 929 +++++++++++++--------------------------------------------
1 files changed, 222 insertions(+), 707 deletions(-)
diff --git a/src/views/old/store/business-center.vue b/src/views/old/store/business-center.vue
index 27458fd..c34b1cd 100644
--- a/src/views/old/store/business-center.vue
+++ b/src/views/old/store/business-center.vue
@@ -1,758 +1,273 @@
<!--
- * @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>
+ <div class="hb-gmzf">
+ <div class="head">
+ <div class="head-left">
</div>
-
+ <div class="head-mid">
+ 和微分
+ </div>
+ <div class="head-right" v-on:click="qrCodePage()">
+ 授权测试
+ </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 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)"></img>
+ </div>
+ <div class="tab-index-row-font">
+ {{grandchildItem.name}}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </van-tab>
+ </van-tabs>
+ </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';
+ import { Tab, Tabs } from 'vant';
+ Vue.use(Tab);
+ Vue.use(Tabs);
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: []
+ active:'',
+ contTypeList:[],
+ mblNoTypeList:{},
+ showHwfProd: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);
- });
+ created () {
+ if(this.orgType == 4) {
+ 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
+ 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
+ })
},
- // 前往选择花呗产品
- 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
+ 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 {
+<style lang="less" scoped>
+ .head {
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{
+ height: 40px;
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;
- }
- }
+ line-height: 40px;
+ background: #FFFFFF;;
+ text-align: center;
+ &-left{
+ width: 33.3%;
+ height: 40px;
}
- }
- .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%;
- }
+ &-mid{
+ width: 33.3%;
+ height: 40px;
+ font-size: 18px;
+ font-family: PingFang SC;
+ font-weight: bold;
+ color: #333333;
}
- 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;
+ &-right{
+ width: 33.4%;
+ height: 40px;
font-size: 14px;
- margin: 0 auto;
- color: #666666;
-
- .blue {
- color: #4074F8;
- text-decoration: underline;
- }
+ font-family: PingFang SC;
+ color: #333333;
}
-
- .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: "";
+
+ .tab {
+ width: 100%;
+ height: 100%;
+ &-head{
+ margin: 20px 30px 20px 30px;
+ width: 100%;
+ height: 24px;
+ line-height: 24px;
+ &-icon{
width: 3px;
- height: 12px;
- background: #9459EC;
- border-radius: 2px;
- display: inline-block;
- margin-right: 6px;
+ margin-top: 3px;
+ float: left;
+ height: 18px;
+ background: #6C68FF;
}
- .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;
- }
+ &-font{
+ width: 20%;
+ margin-left: 10px;
+ height: 20px;
+ float: left;
+ font-size: 16px;
+ font-family: PingFang SC;
+ font-weight: bold;
+ color: #333333;
}
- .tip {
- height: 12px;
- font-size: 12px;
- font-weight: 500;
- color: #999999;
- margin-top: 5px;
+ &-remain{
+ width: 70%;
+ float: left;
+ height: 20px;
}
}
- .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;
+ .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%;
+ height: 30%;
+ &-image {
+ width:100%;
+ height:100%;
+ }
+ }
+ &-font {
+ width: 100%;
+ height: 30%;
+ font-size: 10px;
+ font-family: PingFang SC;
+ color: #333333;
+ }
+ }
+ }
+ }
+
+
+
+
+
+ .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;
- line-height: 28px;
+ &-image {
+ width:43px;
+ height:43px;
+ margin-top:25px;
+ }
+ }
+ &-text {
+ width: 70%;
+ float: left;
+ heght:100%;
+ font-size: 18px;
+ font-family: PingFang SC;
+ color: #333333;
}
}
}
- .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)
+
+ .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;
+ }
+ }
}
- &-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>
--
Gitblit v1.8.0