From a5604d778ca31451a95d8dabdf94f7ebc78e5c55 Mon Sep 17 00:00:00 2001 From: zhaoxiaoqiang <287285524@qq.com> Date: Fri, 14 Apr 2023 11:24:10 +0800 Subject: [PATCH] v-console --- src/views/old/store/business-center.vue | 1003 +++++++++++++++------------------------------------------- 1 files changed, 264 insertions(+), 739 deletions(-) diff --git a/src/views/old/store/business-center.vue b/src/views/old/store/business-center.vue index 27458fd..2b98c40 100644 --- a/src/views/old/store/business-center.vue +++ b/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> -- Gitblit v1.8.0