mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 15:46:43 +08:00
卡单 页面 +功能
This commit is contained in:
吴新澳
BIN
src/assets/images/u10215.png
Normal file
BIN
src/assets/images/u10215.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -13,8 +13,6 @@ import noMoreClick from '@/directive/noMoreClick'
|
||||
//全局注册vant常用组件
|
||||
import { Toast, Button, Dialog, Icon } from 'vant'
|
||||
|
||||
|
||||
|
||||
Vue.use(Icon)
|
||||
|
||||
Vue.use(Toast)
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
// 卡单路由
|
||||
const information = () => import('@/views/ebiz/cardList/information')
|
||||
const CardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
|
||||
const productDetails = () => import('@/views/ebiz/cardList/productDetails')
|
||||
const Pay = () => import('@/views/ebiz/cardList/Pay')
|
||||
const PaySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
|
||||
const PayLoser = () => import('@/views/ebiz/cardList/PayLoser')
|
||||
const cardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
|
||||
const productDetails = () => import('@/views/ebiz/cardList/ProductDetails')
|
||||
const pay = () => import('@/views/ebiz/cardList/Pay')
|
||||
const paySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
|
||||
const payLoser = () => import('@/views/ebiz/cardList/PayLoser')
|
||||
export default [
|
||||
{
|
||||
path: '/cardList/information',
|
||||
name: 'information',
|
||||
component: information,
|
||||
meta: {
|
||||
title: '投被保人信息',
|
||||
title: '填写投被保人信息',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/CardTotreasure',
|
||||
name: 'CardTotreasure',
|
||||
component: CardTotreasure,
|
||||
path: '/cardList/cardTotreasure',
|
||||
name: 'cardTotreasure',
|
||||
component: cardTotreasure,
|
||||
meta: {
|
||||
title: '卡单列表'
|
||||
|
||||
title: '产品列表',
|
||||
index: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -29,35 +29,37 @@ export default [
|
||||
name: 'productDetails',
|
||||
component: productDetails,
|
||||
meta: {
|
||||
title: '卡单详情'
|
||||
|
||||
title: '产品详情',
|
||||
index: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/Pay',
|
||||
name: 'Pay',
|
||||
component: Pay,
|
||||
path: '/cardList/pay',
|
||||
name: 'pay',
|
||||
component: pay,
|
||||
meta: {
|
||||
title: '支付信息'
|
||||
|
||||
title: '支付',
|
||||
index: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/PaySuccess',
|
||||
name: 'PaySuccess',
|
||||
component: PaySuccess,
|
||||
path: '/cardList/paySuccess',
|
||||
name: 'paySuccess',
|
||||
component: paySuccess,
|
||||
meta: {
|
||||
title: '支付成功'
|
||||
|
||||
title: '支付成功',
|
||||
index: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/PayLoser',
|
||||
name: 'PayLoser',
|
||||
component: PayLoser,
|
||||
path: '/cardList/payLoser',
|
||||
name: 'payLoser',
|
||||
component: payLoser,
|
||||
meta: {
|
||||
title: '支付失败'
|
||||
|
||||
title: '支付失败',
|
||||
index: 6
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
@@ -5,8 +5,6 @@ import Example from './example'
|
||||
|
||||
import Ebiz from './ebiz'
|
||||
|
||||
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
const constantRouterMap = [...App, ...Example, ...Ebiz] //后续可以删减模块
|
||||
|
||||
@@ -6,27 +6,61 @@
|
||||
<li>
|
||||
<p class="fw600">app相关页面</p>
|
||||
<ul class="pl20">
|
||||
<li><router-link to="/login">登录</router-link></li>
|
||||
<li><router-link to="/functionList">基础功能清单</router-link></li>
|
||||
<li>
|
||||
<router-link to="/login">登录</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/functionList">基础功能清单</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt10">
|
||||
<p class="fw600">示例页面</p>
|
||||
<ul class="pl20">
|
||||
<li><router-link to="/rate">评分示例</router-link></li>
|
||||
<li><router-link to="/formValidate">表单校验示例（需登录）</router-link></li>
|
||||
<li>
|
||||
<router-link to="/rate">评分示例</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/formValidate">表单校验示例（需登录）</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt10">
|
||||
<p class="fw600">国富人寿</p>
|
||||
<ul class="pl20">
|
||||
<li><router-link to="/proposal/list">建议书</router-link></li>
|
||||
<li><router-link to="/sale/list">电子投保</router-link></li>
|
||||
<li><router-link to="/customer/customerList">客户管理</router-link></li>
|
||||
<li><router-link to="/my/UserIncome">收入</router-link></li>
|
||||
<li><router-link to="/serve/list">保单列表</router-link></li>
|
||||
<li>
|
||||
<router-link to="/proposal/list">建议书</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/sale/list">电子投保</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/customer/customerList">客户管理</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/my/UserIncome">收入</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/serve/list">保单列表</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- ----------------------------------------------- -->
|
||||
<li class="mt10">
|
||||
<p class="fw600">卡单投保</p>
|
||||
<ul class="pl20">
|
||||
<li>
|
||||
<router-link to="/cardList/CardTotreasure">产品列表</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/cardList/information">填写投被保人信息</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/cardList/Pay">支付页面</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- ----------------------------------------------- -->
|
||||
</ul>
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
|
||||
|
||||
@@ -1,228 +1,233 @@
|
||||
<template>
|
||||
<div class="kadantoubao-wxa">
|
||||
<!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> -->
|
||||
<div class="kadantaobao-box">
|
||||
<div class="card-Insurance">
|
||||
<!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> -->
|
||||
<div class="card-Insurance-box">
|
||||
<div class="card-Insurance-header">
|
||||
<div class="nav">
|
||||
<van-icon name="arrowLeft" />
|
||||
<p>
|
||||
<span>卡单产品</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="Tab">
|
||||
<div class="tab" v-for="(item,index) in arr" :key="index" @click="fnTab(index)">
|
||||
<span :class="{ac:iNow==index}">{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kadantoubao-wxa-header">
|
||||
|
||||
<div class="nav">
|
||||
<van-icon name="arrow-left" />
|
||||
<p><span>卡单产品</span></p>
|
||||
</div>
|
||||
<div class="Tab">
|
||||
<div class="tab" v-for="(item,index) in arr" :key='index' @click="fnTab(index)">
|
||||
<span :class="{ac:iNow==index}">{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="show">
|
||||
<ul class="kadanchanping-ul" :style="(this.iNow==0) ? 'display:inline-block':'display:none' " >
|
||||
<li v-for="(itemIcon,index) in list" :key='index'>
|
||||
<div>
|
||||
|
||||
<img src="../../../assets/images/u10247.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<p>{{itemIcon.p}}</p>
|
||||
<span>{{itemIcon.span}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="wodekadan-ul" :style="(this.iNow==1) ? 'display:inline-block':'display:none' ">
|
||||
<li v-for="(itemiNow,index) in tAb" :key='index'>
|
||||
<p>{{itemiNow.h}}</p>
|
||||
<span>{{itemiNow.span1}}</span>
|
||||
<span>{{itemiNow.span2}}</span>
|
||||
<span>{{itemiNow.span3}}</span>
|
||||
<span>{{itemiNow.span4}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show">
|
||||
<ul
|
||||
class="card-Products"
|
||||
:style="(this.iNow==0) ? 'display:block':'display:none' "
|
||||
|
||||
>
|
||||
<li v-for="(itemIcon,index) in list" :key="index" @click="formsD()">
|
||||
<div>
|
||||
<img src="../../../assets/images/u10247.png" alt="">
|
||||
|
||||
<!-- <img :src="itemIcon.url" alt=""> -->
|
||||
</div>
|
||||
<div>
|
||||
<p>{{itemIcon.p}}</p>
|
||||
<span>{{itemIcon.span}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="myCard" :style="(this.iNow==1) ? 'display:block':'display:none' ">
|
||||
<li v-for="(itemiNow,index) in tAb" :key="index">
|
||||
<p>{{itemiNow.h}}</p>
|
||||
<span>{{itemiNow.span1}}</span>
|
||||
<span>{{itemiNow.span2}}</span>
|
||||
<span>{{itemiNow.span3}}</span>
|
||||
<span>{{itemiNow.span4}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'kadantoubao.vue',
|
||||
data() {
|
||||
return {
|
||||
arr: [
|
||||
'产品列表',
|
||||
'我的卡单'
|
||||
],
|
||||
list: [{
|
||||
url: 'img/u10247.png',
|
||||
p: '学生平安保险（小学，初中）',
|
||||
span: '保险费地，为孩子提供全方位的风险保障'
|
||||
},
|
||||
{
|
||||
url: 'images/u10247.png',
|
||||
p: '学生平安保险（高中，高等教育）',
|
||||
span: '保险费地，为孩子提供全方位的风险保障'
|
||||
}
|
||||
|
||||
],
|
||||
iNow: 0,
|
||||
tAb: [
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
},
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
},
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnTab(index) {
|
||||
this.iNow = index;
|
||||
console.log(this.iNow);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'kadantoubao.vue',
|
||||
data() {
|
||||
return {
|
||||
arr: ['产品列表', '我的卡单'],
|
||||
list: [
|
||||
{
|
||||
|
||||
p: '学生平安保险（小学，初中）',
|
||||
span: '保险费地，为孩子提供全方位的风险保障'
|
||||
},
|
||||
{
|
||||
|
||||
p: '学生平安保险（高中，高等教育）',
|
||||
span: '保险费地，为孩子提供全方位的风险保障'
|
||||
}
|
||||
],
|
||||
iNow: 0,
|
||||
tAb: [
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
},
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
},
|
||||
{
|
||||
h: '国家安全出行2.0',
|
||||
span1: '保单号：1297793740298',
|
||||
span2: '卡号：1297793740298',
|
||||
span3: '生效日期：2019-08-22',
|
||||
span4: '出单日期：2019-08-22 17:19:22'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fnTab(index) {
|
||||
this.iNow = index
|
||||
console.log(this.iNow)
|
||||
},
|
||||
formsD() {
|
||||
this.$router.push('/cardList/productDetails')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wodekadan-ul{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wodekadan-ul li{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 7.2rem;
|
||||
height: 2.48rem;
|
||||
border: 0.02rem solid #DADADA;
|
||||
padding-left: 0.3rem;
|
||||
padding-top: 0.3rem;
|
||||
|
||||
}
|
||||
.wodekadan-ul li p{
|
||||
font-size: 0.3rem;
|
||||
margin-bottom: 0.24rem;
|
||||
}
|
||||
.wodekadan-ul li span{
|
||||
font-size: 0.22rem;
|
||||
color: #999999;
|
||||
}
|
||||
.Tab {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 0.6rem;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kadanchanping-ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kadanchanping-ul>li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 2rem;
|
||||
border: 0.02rem solid #CCCCCC;
|
||||
}
|
||||
|
||||
.kadanchanping-ul>li img {
|
||||
width: 2.34rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
.kadanchanping-ul li div:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kadanchanping-ul li>div:nth-of-type(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.3rem 0.1rem;
|
||||
}
|
||||
|
||||
.kadanchanping-ul li>div:nth-of-type(2) p {
|
||||
font-weight: bold;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
|
||||
.kadanchanping-ul li>div:nth-of-type(2) span {
|
||||
color: #B5B5B5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
|
||||
.ac {
|
||||
border-bottom: 0.04rem solid #1296DB;
|
||||
color: #1296DB;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0.2rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
|
||||
.kadantoubao-wxa {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header>img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kadantaobao-box {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.kadantoubao-wxa-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
.myCardl {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.myCard li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 360px;
|
||||
height: 124px;
|
||||
border: 1px solid #dadada;
|
||||
padding-left: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.myCard li p {
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.myCard li span {
|
||||
font-size: 11px;
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.Tab {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-Products{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-Products > li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.card-Products > li img {
|
||||
width: 117px;
|
||||
height: 70px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.card-Products li div:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-Products li > div:nth-of-type(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px 5px;
|
||||
}
|
||||
|
||||
.card-Products li > div:nth-of-type(2) p {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.card-Products li > div:nth-of-type(2) span {
|
||||
color: #b5b5b5;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.ac {
|
||||
border-bottom: 0.04rem solid #1296db;
|
||||
color: #1296db;
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
height:45px;
|
||||
}
|
||||
|
||||
.card-Insurance{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-Insurance-box {
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-Insurance-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,123 +1,189 @@
|
||||
<template>
|
||||
<div class="pay">
|
||||
|
||||
<van-cell-group>
|
||||
<van-field v-model="productName" clearable label="产品名称" placeholder="请输入产品名称" class="projuct"/>
|
||||
<!-- <van-cell-group> -->
|
||||
<div v-if="!isScan">
|
||||
<van-field
|
||||
v-model="productName"
|
||||
clearable
|
||||
label="产品名称"
|
||||
class="projuct"
|
||||
/>
|
||||
<van-field v-model="paymentAmount" clearable label="支付金额" placeholder="请输入支付金额" />
|
||||
<!-- 银行卡支付开始 -->
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名" />
|
||||
|
||||
<div class="money">
|
||||
<div><img src="../../../assets/images/u10280.png" alt="">
|
||||
<span>银行卡支付</span>
|
||||
</div>
|
||||
<van-checkbox v-model="checked" style="margin-right:0.3rem;margin-top:0.1rem;"></van-checkbox>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<van-field />
|
||||
<div class="money">
|
||||
<div>
|
||||
<img src="../../../assets/images/u10280.png" alt style="margin-top:-5px;margin-right:10px;" />
|
||||
<span class="oi">银行卡支付</span>
|
||||
</div>
|
||||
<div class="i">
|
||||
<van-checkbox v-model="checked" style="margin-right:1rem;margin-top:0.2rem;"></van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
<!-- </van-radio-group> -->
|
||||
<!-- 银行卡支付结束 -->
|
||||
<van-field v-model="userName" type="text" label="账户姓名" placeholder="请输入" required />
|
||||
|
||||
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
clearable
|
||||
label="银行卡号"
|
||||
placeholder="请输入"
|
||||
>
|
||||
<van-button slot="button" size="small" type="info" class="btn">银行卡扫描</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<van-field v-model="sms" center clearable label="银行卡号" placeholder="请输入" required>
|
||||
<van-button slot="button" size="small" class="bankCard mr10 w110 h20" @click="cardScanning('0')" v-no-more-click="1000" type="info">银行卡扫描</van-button>
|
||||
</van-field>
|
||||
<!-- <van-button type="danger" size="small" >银行卡扫描</van-button> -->
|
||||
</van-cell-group>
|
||||
<van-field v-model="bankDeposit" type="text" label="开户银行" placeholder="请选择" required />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</van-field>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
|
||||
<van-button type="info" size="large" class="payBtn" @click="Pay()">支付</van-button>
|
||||
<!-- </van-field> -->
|
||||
<!-- </van-cell-group> -->
|
||||
|
||||
<van-button type="info" size="large" class="payBtn" @click="Pay()">支付</van-button>
|
||||
<van-checkbox-group v-model="result" ref="checkboxGroup">
|
||||
<van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡扫描按钮 -->
|
||||
<BankCardScan :scanShow="isScan" :clear="isClear" @getScanInfo="getBankCardInfo"></BankCardScan>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Field } from 'vant';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.use(Checkbox).use(CheckboxGroup);
|
||||
Vue.use(Field);
|
||||
import Vue from 'vue'
|
||||
import { Field } from 'vant'
|
||||
import { Checkbox, CheckboxGroup} from 'vant'
|
||||
import { Button } from 'vant'
|
||||
Vue.use(Checkbox).use(CheckboxGroup)
|
||||
Vue.use(Field)
|
||||
Vue.use(Button)
|
||||
import { saveInformation, getBankList, getOrderDetail } from '@/api/ebiz/sale/sale'
|
||||
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
|
||||
export default {
|
||||
name: "pay",
|
||||
name: 'pay',
|
||||
components: {
|
||||
BankCardScan
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
productName: "国家安全富兴2.0",
|
||||
paymentAmount: "",
|
||||
radio: "",
|
||||
userName:"",
|
||||
bankCardNumber:"",
|
||||
bankDeposit:"",
|
||||
checked:true
|
||||
};
|
||||
productName: '国家安全富兴2.0', //产品名称
|
||||
paymentAmount: '', //支付金额
|
||||
userName: '', //账户姓名
|
||||
bankCardNumber: '', //银行卡号
|
||||
bankDeposit: '', //开户银行
|
||||
checked: true,
|
||||
result:[],
|
||||
sms:'',
|
||||
// 银行卡扫描是否显示
|
||||
isScan: false,
|
||||
//是否清空
|
||||
isClear: false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
Pay(){
|
||||
this.$router.push('/cardList/PaySuccess')
|
||||
}
|
||||
methods: {
|
||||
Pay() {
|
||||
this.$router.push('/cardList/PaySuccess');
|
||||
},
|
||||
//获取身份证扫描信息
|
||||
getBankCardInfo(data) {
|
||||
this.bankId = data.name
|
||||
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '账户信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
this.isScan = false
|
||||
},
|
||||
// 银行卡扫描
|
||||
cardScanning(cardScanningType) {
|
||||
window.localStorage.setItem('cardScanningType', cardScanningType)
|
||||
document.body.style.backgroundColor = '#F5F5F5'
|
||||
let title = ''
|
||||
this.isclear = false
|
||||
;[this.isScan, title] = [true, '银行卡扫描']
|
||||
setTimeout(() => {
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title,
|
||||
hiddenLeft: '1'
|
||||
}
|
||||
})
|
||||
this.closeBtn()
|
||||
}, 400)
|
||||
},
|
||||
closeBtn() {
|
||||
// 筛选按钮的显示
|
||||
this.$jump({
|
||||
flag: 'webview_right_button',
|
||||
extra: {
|
||||
btns: [
|
||||
{
|
||||
img: this.$assetsUrl + 'images/del-close.png',
|
||||
route: { flag: '', extra: {} }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss">
|
||||
.btn{
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bankCard{
|
||||
border-radius: 10em;
|
||||
}
|
||||
.projuct{
|
||||
input{
|
||||
font-weight: bold;
|
||||
}
|
||||
.oi{
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.money{
|
||||
.money {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 1.8rem;
|
||||
z-index: 10;
|
||||
left: 0rem;
|
||||
width: 100%;
|
||||
background: white;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
top: 90px;
|
||||
left: 15px;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
> div:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.money>div:nth-of-type(1){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.4rem;
|
||||
justify-content: center;
|
||||
img{
|
||||
width: 0.64rem;
|
||||
height: 0.64rem;
|
||||
img {
|
||||
width: 33px;
|
||||
height: 32px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
padding-top: 0.15rem;
|
||||
box-sizing: border-box;
|
||||
> div:nth-of-type(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
a {
|
||||
font-size: 0.38rem;
|
||||
}
|
||||
.payBtn{
|
||||
margin-top:4.5rem;
|
||||
// margin-top: 10rem;
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
}
|
||||
.bankCard{
|
||||
padding-bottom:25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="PayLo
|
||||
ser">
|
||||
<div class="PayLoser">
|
||||
<div>
|
||||
<img src="../../../assets/images/u10608.svg" alt="">
|
||||
<p>支付失败</p>
|
||||
</div>
|
||||
<van-button type="info" size="large" class="payBtn">返回首页</van-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,18 +15,38 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.PayLoser{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
height: 650px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
align-items: center;
|
||||
img{
|
||||
width:2rem;
|
||||
height: 2rem;
|
||||
width:100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
.PayLoser>div:nth-of-type(1){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
margin-top: 100px;
|
||||
p{
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="paySuccess">
|
||||
<!-- <a href="javascript:;">＜ 支付结果</a>-->
|
||||
|
||||
<div class="paySucc">
|
||||
<van-icon name="passed" size="1.5rem" color="blue"/>
|
||||
<van-icon name="passed" size="100px" color="blue"/>
|
||||
<span>支付成功</span>
|
||||
</div>
|
||||
<van-cell-group>
|
||||
<van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
|
||||
@@ -13,6 +14,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.use(Field);
|
||||
export default {
|
||||
name: 'paySuccess',
|
||||
data () {
|
||||
@@ -26,17 +31,31 @@ export default {
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
<style>
|
||||
.van-field__label span{
|
||||
font-family: '微软雅黑';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
a {
|
||||
font-size: 0.38rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-field__control{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.paySucc{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
text-align:center;
|
||||
line-height:5rem;
|
||||
border-top: 0.01rem solid #ccc;
|
||||
border-bottom: 0.15rem solid rgb(235, 233, 233);
|
||||
height: 250px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 7.5px solid rgb(235, 233, 233);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,11 @@
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
ref="birthday"
|
||||
:maxDate="maxDate"
|
||||
></FieldDatePicter>
|
||||
>
|
||||
|
||||
|
||||
</FieldDatePicter>
|
||||
|
||||
<van-field
|
||||
:value="userInfo.idType | idToText('insuredIdType')"
|
||||
v-validate="'required'"
|
||||
@@ -69,7 +73,7 @@
|
||||
@click="toSelect('9')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<!-- </van-radio-group> -->
|
||||
|
||||
<!-- 被保人信息 -->
|
||||
<van-cell-group class="mt10">
|
||||
@@ -114,16 +118,55 @@
|
||||
<van-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<!-- </van-radio-group> -->
|
||||
|
||||
<!-- 受益人信息 -->
|
||||
<van-cell-group class="mt10">
|
||||
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p>
|
||||
<van-field required v-model="userInfo.bnfType" clearable label="受益人类型" v-validate="'required'" />
|
||||
<van-field required v-model="userInfo.bnfType" clearable label="受益人类型" v-validate="'required'" style="border-bottom: 1px solid #ebedf0;"/>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<!-- </van-radio-group> -->
|
||||
|
||||
|
||||
|
||||
<p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p>
|
||||
|
||||
<FieldDatePicter
|
||||
v-validate="'required'"
|
||||
label="指定生效日期"
|
||||
name="指定生效日期"
|
||||
required
|
||||
:value.sync="userInfo.birthday"
|
||||
type="date"
|
||||
:flag="true"
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
ref="birthday"
|
||||
:maxDate="maxDate"
|
||||
input-align:right
|
||||
>
|
||||
|
||||
|
||||
</FieldDatePicter>
|
||||
|
||||
<van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">下一步</van-button>
|
||||
|
||||
|
||||
|
||||
|
||||
<van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;padding-top:10px;background:white;">
|
||||
<van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
|
||||
|
||||
|
||||
|
||||
<van-goods-action>
|
||||
|
||||
|
||||
<van-button type="default" style="width:50%;font-size:14px;height:40px;">总保费:<span style="color:red;font-weight:bold;font-size:18px;font-weight:400;">{{allPrice}}</span>元</van-button>
|
||||
<van-goods-action-button type="danger" text="提交" @click="nextStep" v-no-more-click="1000" style="border-radius:0em;width:50%;height:40px;" />
|
||||
</van-goods-action>
|
||||
|
||||
|
||||
|
||||
<!-- 字段选择 -->
|
||||
<van-popup v-model="popupShow" position="bottom">
|
||||
@@ -148,7 +191,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Field, CellGroup, Checkbox, Popup, Picker, Area, RadioGroup, Radio } from 'vant'
|
||||
import { Field, CellGroup, Checkbox,CheckboxGroup, Popup, Picker, Area, RadioGroup, Radio } from 'vant'
|
||||
import SelectRadio from '@/components/ebiz/SelectRadio'
|
||||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||||
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
|
||||
@@ -163,7 +206,19 @@ import idNoCheck from '@/assets/js/utils/idNoCheck'
|
||||
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
|
||||
import { idToData } from './js/verification'
|
||||
import { selectComp } from './js/methods'
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionIcon,
|
||||
GoodsActionButton
|
||||
} from 'vant';
|
||||
|
||||
|
||||
Vue.use(Checkbox).use(CheckboxGroup)
|
||||
Vue
|
||||
.use(GoodsAction)
|
||||
.use(GoodsActionIcon)
|
||||
.use(GoodsActionButton);
|
||||
export default {
|
||||
name: 'insuredInfo',
|
||||
components: {
|
||||
@@ -184,6 +239,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isScan: false, //是否显示证件扫描组件
|
||||
allPrice:'100',
|
||||
result:[],
|
||||
checked:true,
|
||||
sexRadio: [
|
||||
{
|
||||
label: '男',
|
||||
@@ -217,6 +275,7 @@ export default {
|
||||
insuredName: '', // 被保人姓名
|
||||
sex: '0', //投保人性别
|
||||
bnfType: '法定受益人', // 受益人类型
|
||||
bnfSelec:'请选择',
|
||||
birthday: '',
|
||||
relationToAppnt: '',
|
||||
idType: '1', //证件类型
|
||||
@@ -862,7 +921,8 @@ export default {
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
|
||||
.insured-info-container {
|
||||
/deep/.van-checkbox {
|
||||
margin-left: auto;
|
||||
@@ -871,4 +931,7 @@ export default {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.van-checkbox__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,160 +1,70 @@
|
||||
<template>
|
||||
<div class="chanpingxiangqing-wxa">
|
||||
<div class="nav">
|
||||
<van-icon name="arrow-left" />
|
||||
<p><span>卡单产品</span></p>
|
||||
</div>
|
||||
<div class="header">
|
||||
|
||||
<div class="chanpingxiangqing-wxa">
|
||||
|
||||
<div class="header">
|
||||
<img src="../../../assets/images/u10211.jpg" />
|
||||
<img src="../../../assets/images/u10213.png" />
|
||||
<img src="../../../assets/images/u10215.png" />
|
||||
</div>
|
||||
|
||||
<img src="../../../assets/images/u10211.jpg"/>
|
||||
<img src="../../../assets/images/u10213.png"/>
|
||||
</div>
|
||||
<div class="tit">
|
||||
<div class="tit-header"><p class="shuGang"></p><figure>理赔流程</figure></div>
|
||||
<ul>
|
||||
<li v-for="(item,index) in oUl" :key='index'>
|
||||
<div>
|
||||
<span>{{item.num}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{item.tiaojian}}</p>
|
||||
<span>{{item.iCon}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer>
|
||||
<div><span>保险条款</span><a href="javascipt:">查看</a></div>
|
||||
<van-button type="danger" size="large">下一步</van-button>
|
||||
</footer>
|
||||
</div>
|
||||
<footer>
|
||||
<div>
|
||||
<span>保险条款</span>
|
||||
<a href="javascipt:" to="/cardList/productDetails">查看</a>
|
||||
</div>
|
||||
<van-button type="danger" size="large">下一步</van-button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
name:'Chanpingxiangqing.vue',
|
||||
data(){
|
||||
return{
|
||||
oUl:[
|
||||
{
|
||||
num:'1',
|
||||
tiaojian:'申请理赔',
|
||||
iCon:'致电保险公司客服申请理赔'
|
||||
},
|
||||
{
|
||||
num:'2',
|
||||
tiaojian:'提交材料',
|
||||
iCon:'按保险条约约定准备相应理赔资料'
|
||||
},
|
||||
{
|
||||
num:'3',
|
||||
tiaojian:'理赔审核',
|
||||
iCon:'保险公司进行理赔资料审核'
|
||||
},
|
||||
{
|
||||
num:'4',
|
||||
tiaojian:'获得赔款',
|
||||
iCon:'保险公司支付客户赔款'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
import Vue from 'vue'
|
||||
import { Image } from 'vant'
|
||||
|
||||
Vue.use(Image)
|
||||
export default {
|
||||
name: 'Chanpingxiangqing.vue',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
footer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
footer a{
|
||||
color: #949494;
|
||||
}
|
||||
footer>div{
|
||||
display: flex;
|
||||
height:0.7rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0rem 0.3rem;
|
||||
}
|
||||
figure{
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.tit-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.2rem 0.3rem;
|
||||
}
|
||||
.tit ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tit li{
|
||||
display: flex;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
.tit li >div:nth-of-type(2) p{
|
||||
color: #6A7C90;
|
||||
font-size: 0.28rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tit li>div:nth-of-type(2){
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
.tit li >div:nth-of-type(2) span{
|
||||
color: #B1BFCE;
|
||||
|
||||
}
|
||||
.tit li>div:nth-of-type(1) >span{
|
||||
box-sizing: content-box !important;
|
||||
padding: 0.1rem 0.2rem;
|
||||
border: 1px solid red;
|
||||
border-radius: 50%;
|
||||
background-color: #DFEAF8;
|
||||
border: 0.04rem solid #9CC2EE;
|
||||
color: #84B4EB;
|
||||
}
|
||||
.shuGang{
|
||||
width: 0.08rem;
|
||||
height: 0.5rem;
|
||||
background-color: #4A90E2;
|
||||
}
|
||||
.nav{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0.2rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
*{
|
||||
font-size: 0.3rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html,body,.chanpingxiangqing-wxa{
|
||||
margin: 0;padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.chanpingxiangqing-wxa{
|
||||
display: flex;
|
||||
width: 7.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header{
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.header>img{
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.header>img:nth-of-type(1){
|
||||
height: 6.9rem;
|
||||
}
|
||||
.header>img:nth-of-type(2){
|
||||
height: 38rem;
|
||||
}
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
footer > div:nth-of-type(1) {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 20px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
a {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0.2rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
.header{
|
||||
margin-top:10px ;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user