From 3464c6fe6167dec49edff803dc3b0a411ffd5e52 Mon Sep 17 00:00:00 2001
From: liangjin <liangjin@finlean.com>
Date: Wed, 21 Apr 2021 21:30:08 +0800
Subject: [PATCH] 和微分套餐修改
---
src/views/old/store/business-center.vue | 229 ++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 146 insertions(+), 83 deletions(-)
diff --git a/src/views/old/store/business-center.vue b/src/views/old/store/business-center.vue
index 427e108..8075e0f 100644
--- a/src/views/old/store/business-center.vue
+++ b/src/views/old/store/business-center.vue
@@ -7,46 +7,44 @@
-->
<template>
<div class="hb-gmzf">
- <x-header :left-options="{backText: '', showBack: false}">和微分</x-header>
- <div v-if="showHwfProd">
- <div class="tab">
- <div class="tab-index">
- <p class="tab-index-one">请选择手机号类型</p>
- </div>
+ <div class="head">
+ <div class="head-left">
</div>
- <div class="order-xrw" v-if="showXrwType" @click="productPage(0)">
- <div class="order-xrw-create">
- <div class="order-xrw-create-icon">
- <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_xrw.png"></img>
+ <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>
- <p class="order-xrw-create-text">
- 新入网号码
- </p>
- <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
- </div>
- </div>
- <div class="order-xrw" style="margin-top: 30px" v-if="showXhzwType" @click="productPage(2)">
- <div class="order-xrw-create">
- <div class="order-xrw-create-icon">
- <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_xhzw.png"></img>
+ <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>
- <p class="order-xrw-create-text">
- 携号转网号码
- </p>
- <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
- </div>
- </div>
- <div class="order-xrw" style="margin-top: 30px" v-if="showClType" @click="productPage(1)">
- <div class="order-xrw-create">
- <div class="order-xrw-create-icon">
- <img class="order-xrw-create-icon-image" src="../../../assets/imgs/product_cl.png"></img>
- </div>
- <p class="order-xrw-create-text">
- 存量号码
- </p>
- <i class="iconfont iconyou tab-index-two" style="width:10%;height:30px;"></i>
- </div>
- </div>
+ </van-tab>
+ </van-tabs>
</div>
</div>
</template>
@@ -55,16 +53,18 @@
import { async } from 'q';
import Vue from 'vue';
import { Toast } from 'vant';
+ import { Tab, Tabs } from 'vant';
+ Vue.use(Tab);
+ Vue.use(Tabs);
export default {
components: {
},
data() {
return {
+ active:'',
+ contTypeList:[],
mblNoTypeList:{},
- showHwfProd:false,
- showXrwType:false,
- showClType:false,
- showXhzwType:false,
+ showHwfProd:false
};
},
computed:{
@@ -78,23 +78,25 @@
}
},
methods: {
+ getIndexIcon(item){
+ let iconSrc = "/static/img/"+item.icon+".png";
+ return iconSrc;
+ },
init(){
- this.$api.wxScoreCreInit().then(res => {
- this.mblNoTypeList = res.body.mblNoTypeList|| {};
- this.mblNoTypeList.forEach(item => {
- if(item.code == '0'){
- this.showXrwType = true;
- }else if(item.code == '1'){
- this.showClType = true;
- }else if(item.code == '2'){
- this.showXhzwType = true;
- }
- });
+ this.$api.wxScoreCreInit2().then(res => {
+ this.contTypeList = res.body.contTypeList|| {};
}, err => err);
},
- productPage(type){
+ qrCodePage(){
+ this.$router.push({
+ path: "/wx-test-code",
+ query: "",
+ })
+ },
+ productPage(item){
let queryObj = {
- mblNoType:type,
+ code:item.code,
+ mblNoType:item.mblNoType,
}
this.$router.push({
path: "/wx-pay-score",
@@ -115,36 +117,103 @@
};
</script>
<style lang="less" scoped>
- .hb-gmzf {
+ .head {
width: 100%;
- height: 100%;
- background: #FAFAFC;
+ height: 40px;
+ display: flex;
+ line-height: 40px;
+ background: #FFFFFF;;
+ text-align: center;
+ &-left{
+ width: 33.3%;
+ height: 40px;
+ }
+ &-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;
+ }
}
.tab {
width: 100%;
- height: 200px;
- background: url('../../../assets/imgs/hwf_bg.png');
- background-size: 100% 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;
+ }
+ &-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%;
+ height: 30%;
+ &-image {
+ width:100%;
+ height:100%;
+ }
+ }
+ &-font {
+ width: 100%;
+ height: 30%;
+ font-size: 10px;
+ font-family: PingFang SC;
+ color: #333333;
+ }
+ }
+ }
}
- .tab-index {
- width: 100%;
- height: 40px;
- line-height: 40px;
- box-sizing: border-box;
- padding: 100px 0px 0px 20px;
- color: #ffffff;
- i {
- font-size: 36px;
- }
- &-one,&-two{
- width: 100%;
- float: left;
- box-sizing: border-box;
- font-size: 20px;
- }
- }
+
@@ -177,12 +246,6 @@
font-size: 18px;
font-family: PingFang SC;
color: #333333;
- }
- &-arrow {
- margin-right:10px;
- width: 10%;
- background: url('../../../assets/imgs/product_xrw.png');
- float: right;
}
}
}
--
Gitblit v1.8.0