hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-11 12:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

卡单 页面 +功能

Browse Source
This commit is contained in:
吴新澳
2019-12-09 15:03:17 +08:00
parent 32d464211e
commit d9f565a88e
11 changed files with 637 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/u10215.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

2
src/main.js
View File

@@ -13,8 +13,6 @@ import noMoreClick from '@/directive/noMoreClick'
//全局注册vant常用组件 //全局注册vant常用组件
import { Toast, Button, Dialog, Icon } from 'vant' import { Toast, Button, Dialog, Icon } from 'vant'
Vue.use(Icon) Vue.use(Icon)
Vue.use(Toast) Vue.use(Toast)

58
src/router/ebiz/cardList.js
View File

@@ -1,27 +1,27 @@
// 卡单路由 // 卡单路由
const information = () => import('@/views/ebiz/cardList/information') const information = () => import('@/views/ebiz/cardList/information')
const CardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure') const cardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
const productDetails = () => import('@/views/ebiz/cardList/productDetails') const productDetails = () => import('@/views/ebiz/cardList/ProductDetails')
const Pay = () => import('@/views/ebiz/cardList/Pay') const pay = () => import('@/views/ebiz/cardList/Pay')
const PaySuccess = () => import('@/views/ebiz/cardList/PaySuccess') const paySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
const PayLoser = () => import('@/views/ebiz/cardList/PayLoser') const payLoser = () => import('@/views/ebiz/cardList/PayLoser')
export default [ export default [
{ {
path: '/cardList/information', path: '/cardList/information',
name: 'information', name: 'information',
component: information, component: information,
meta: { meta: {
title: '投被保人信息', title: '填写投被保人信息',
index: 1 index: 1
} }
}, },
{ {
path: '/cardList/CardTotreasure', path: '/cardList/cardTotreasure',
name: 'CardTotreasure', name: 'cardTotreasure',
component: CardTotreasure, component: cardTotreasure,
meta: { meta: {
title: '卡单列表' title: '产品列表',
index: 2
} }
}, },
{ {
@@ -29,35 +29,37 @@ export default [
name: 'productDetails', name: 'productDetails',
component: productDetails, component: productDetails,
meta: { meta: {
title: '卡单详情' title: '产品详情',
index: 3
} }
}, },
{ {
path: '/cardList/Pay', path: '/cardList/pay',
name: 'Pay', name: 'pay',
component: Pay, component: pay,
meta: { meta: {
title: '支付信息' title: '支付',
index: 4
} }
}, },
{ {
path: '/cardList/PaySuccess', path: '/cardList/paySuccess',
name: 'PaySuccess', name: 'paySuccess',
component: PaySuccess, component: paySuccess,
meta: { meta: {
title: '支付成功' title: '支付成功',
index: 5
} }
}, },
{ {
path: '/cardList/PayLoser', path: '/cardList/payLoser',
name: 'PayLoser', name: 'payLoser',
component: PayLoser, component: payLoser,
meta: { meta: {
title: '支付失败' title: '支付失败',
index: 6
} }
} }
] ]

2
src/router/index.js
View File

@@ -5,8 +5,6 @@ import Example from './example'
import Ebiz from './ebiz' import Ebiz from './ebiz'
Vue.use(Router) Vue.use(Router)
const constantRouterMap = [...App, ...Example, ...Ebiz] //后续可以删减模块 const constantRouterMap = [...App, ...Example, ...Ebiz] //后续可以删减模块

52
src/views/app/Home.vue
View File

@@ -6,27 +6,61 @@
<li> <li>
<p class="fw600">app相关页面</p> <p class="fw600">app相关页面</p>
<ul class="pl20"> <ul class="pl20">
<li><router-link to="/login">登录</router-link></li> <li>
<li><router-link to="/functionList">基础功能清单</router-link></li> <router-link to="/login">登录</router-link>
</li>
<li>
<router-link to="/functionList">基础功能清单</router-link>
</li>
</ul> </ul>
</li> </li>
<li class="mt10"> <li class="mt10">
<p class="fw600">示例页面</p> <p class="fw600">示例页面</p>
<ul class="pl20"> <ul class="pl20">
<li><router-link to="/rate">评分示例</router-link></li> <li>
<li><router-link to="/formValidate">表单校验示例（需登录）</router-link></li> <router-link to="/rate">评分示例</router-link>
</li>
<li>
<router-link to="/formValidate">表单校验示例（需登录）</router-link>
</li>
</ul> </ul>
</li> </li>
<li class="mt10"> <li class="mt10">
<p class="fw600">国富人寿</p> <p class="fw600">国富人寿</p>
<ul class="pl20"> <ul class="pl20">
<li><router-link to="/proposal/list">建议书</router-link></li> <li>
<li><router-link to="/sale/list">电子投保</router-link></li> <router-link to="/proposal/list">建议书</router-link>
<li><router-link to="/customer/customerList">客户管理</router-link></li> </li>
<li><router-link to="/my/UserIncome">收入</router-link></li> <li>
<li><router-link to="/serve/list">保单列表</router-link></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> </ul>
</li> </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> </ul>
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="home-o">首页</van-tabbar-item>

443
src/views/ebiz/cardList/CardTotreasure.vue
View File

@@ -1,228 +1,233 @@
<template> <template>
<div class="kadantoubao-wxa"> <div class="card-Insurance">
<!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> --> <!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> -->
<div class="kadantaobao-box"> <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="show">
<ul
<div class="nav"> class="card-Products"
<van-icon name="arrow-left" /> :style="(this.iNow==0) ? 'display:block':'display:none' "
<p><span>卡单产品</span></p>
</div> >
<div class="Tab"> <li v-for="(itemIcon,index) in list" :key="index" @click="formsD()">
<div class="tab" v-for="(item,index) in arr" :key='index' @click="fnTab(index)"> <div>
<span :class="{ac:iNow==index}">{{item}}</span> <img src="../../../assets/images/u10247.png" alt="">
</div>
</div> <!-- <img :src="itemIcon.url" alt=""> -->
</div>
<div class="show"> <div>
<ul class="kadanchanping-ul" :style="(this.iNow==0) ? 'display:inline-block':'display:none' " > <p>{{itemIcon.p}}</p>
<li v-for="(itemIcon,index) in list" :key='index'> <span>{{itemIcon.span}}</span>
<div> </div>
</li>
<img src="../../../assets/images/u10247.png" alt=""> </ul>
</div> <ul class="myCard" :style="(this.iNow==1) ? 'display:block':'display:none' ">
<div> <li v-for="(itemiNow,index) in tAb" :key="index">
<p>{{itemIcon.p}}</p> <p>{{itemiNow.h}}</p>
<span>{{itemIcon.span}}</span> <span>{{itemiNow.span1}}</span>
</div> <span>{{itemiNow.span2}}</span>
</li> <span>{{itemiNow.span3}}</span>
</ul> <span>{{itemiNow.span4}}</span>
<ul class="wodekadan-ul" :style="(this.iNow==1) ? 'display:inline-block':'display:none' "> </li>
<li v-for="(itemiNow,index) in tAb" :key='index'> </ul>
<p>{{itemiNow.h}}</p> </div>
<span>{{itemiNow.span1}}</span> </div>
<span>{{itemiNow.span2}}</span> </div>
<span>{{itemiNow.span3}}</span> </div>
<span>{{itemiNow.span4}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'kadantoubao.vue', name: 'kadantoubao.vue',
data() { data() {
return { return {
arr: [ arr: ['产品列表', '我的卡单'],
'产品列表', list: [
'我的卡单' {
],
list: [{ p: '学生平安保险（小学，初中）',
url: 'img/u10247.png', span: '保险费地，为孩子提供全方位的风险保障'
p: '学生平安保险（小学，初中）', },
span: '保险费地，为孩子提供全方位的风险保障' {
},
{ p: '学生平安保险（高中，高等教育）',
url: 'images/u10247.png', span: '保险费地，为孩子提供全方位的风险保障'
p: '学生平安保险（高中，高等教育）', }
span: '保险费地，为孩子提供全方位的风险保障' ],
} iNow: 0,
tAb: [
], {
iNow: 0, h: '国家安全出行2.0',
tAb: [ span1: '保单号：1297793740298',
{ span2: '卡号：1297793740298',
h: '国家安全出行2.0', span3: '生效日期：2019-08-22',
span1: '保单号：1297793740298', span4: '出单日期：2019-08-22 17:19:22'
span2: '卡号：1297793740298', },
span3: '生效日期：2019-08-22', {
span4: '出单日期：2019-08-22 17:19:22' h: '国家安全出行2.0',
}, span1: '保单号：1297793740298',
{ span2: '卡号：1297793740298',
h: '国家安全出行2.0', span3: '生效日期：2019-08-22',
span1: '保单号：1297793740298', span4: '出单日期：2019-08-22 17:19:22'
span2: '卡号：1297793740298', },
span3: '生效日期：2019-08-22', {
span4: '出单日期：2019-08-22 17:19:22' h: '国家安全出行2.0',
}, span1: '保单号：1297793740298',
{ span2: '卡号：1297793740298',
h: '国家安全出行2.0', span3: '生效日期：2019-08-22',
span1: '保单号：1297793740298', span4: '出单日期：2019-08-22 17:19:22'
span2: '卡号：1297793740298', }
span3: '生效日期：2019-08-22', ]
span4: '出单日期：2019-08-22 17:19:22' }
} },
] methods: {
} fnTab(index) {
}, this.iNow = index
methods: { console.log(this.iNow)
fnTab(index) { },
this.iNow = index; formsD() {
console.log(this.iNow); this.$router.push('/cardList/productDetails')
} }
}, }
mounted() { }
}
}
</script> </script>
<style scoped> <style scoped>
.wodekadan-ul{ .myCardl {
width:100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.wodekadan-ul li{ .myCard li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 7.2rem; width: 360px;
height: 2.48rem; height: 124px;
border: 0.02rem solid #DADADA; border: 1px solid #dadada;
padding-left: 0.3rem; padding-left: 15px;
padding-top: 0.3rem; padding-top: 15px;
}
} .myCard li p {
.wodekadan-ul li p{ font-size: 15px;
font-size: 0.3rem; margin-bottom: 12px;
margin-bottom: 0.24rem; }
} .myCard li span {
.wodekadan-ul li span{ font-size: 11px;
font-size: 0.22rem; font-family: '微软雅黑';
color: #999999; font-weight: 400;
} font-style: normal;
.Tab { font-size: 12px;
width: 100%; color: #999999;
display: flex; }
height: 0.6rem; .Tab {
background-color: #F2F2F2; width: 100%;
} display: flex;
height: 30px;
.tab { background-color: #f2f2f2;
width: 50%; }
display: flex;
align-items: center; .tab {
justify-content: center; width: 50%;
} display: flex;
align-items: center;
.kadanchanping-ul { justify-content: center;
width: 100%; }
display: flex;
flex-direction: column; .card-Products{
} width: 100%;
display: flex;
.kadanchanping-ul>li { flex-direction: column;
width: 100%; }
display: flex;
height: 2rem; .card-Products > li {
border: 0.02rem solid #CCCCCC; width: 100%;
} display: flex;
height: 100px;
.kadanchanping-ul>li img { border: 1px solid #cccccc;
width: 2.34rem; }
height: 1.3rem;
} .card-Products > li img {
width: 117px;
.kadanchanping-ul li div:nth-of-type(1) { height: 70px;
display: flex; margin-left: 10px;
align-items: center; }
justify-content: center;
} .card-Products li div:nth-of-type(1) {
display: flex;
.kadanchanping-ul li>div:nth-of-type(2) { align-items: center;
display: flex; justify-content: center;
flex-direction: column; }
justify-content: center;
justify-content: space-between; .card-Products li > div:nth-of-type(2) {
padding: 0.3rem 0.1rem; display: flex;
} flex-direction: column;
justify-content: center;
.kadanchanping-ul li>div:nth-of-type(2) p { justify-content: space-between;
font-weight: bold; padding: 15px 5px;
font-size: 0.3rem; }
}
.card-Products li > div:nth-of-type(2) p {
.kadanchanping-ul li>div:nth-of-type(2) span { font-weight: bold;
color: #B5B5B5; font-size: 15px;
font-size: 0.22rem; }
}
.card-Products li > div:nth-of-type(2) span {
.ac { color: #b5b5b5;
border-bottom: 0.04rem solid #1296DB; font-size:11px;
color: #1296DB; }
}
.ac {
.nav { border-bottom: 0.04rem solid #1296db;
width: 100%; color: #1296db;
display: flex; }
align-items: center;
padding-left: 0.2rem; .nav {
height: 0.9rem; width: 100%;
} display: flex;
align-items: center;
.kadantoubao-wxa { padding-left: 10px;
width: 100%; height:45px;
display: flex; }
flex-direction: column;
} .card-Insurance{
width: 100%;
.header>img { display: flex;
width: 100%; flex-direction: column;
} }
.kadantaobao-box { .header > img {
width: 95%; width: 100%;
display: flex; }
flex-direction: column;
margin: 0 auto; .card-Insurance-box {
} width: 95%;
display: flex;
.kadantoubao-wxa-header { flex-direction: column;
width: 100%; margin: 0 auto;
display: flex; }
flex-direction: column;
} .card-Insurance-header {
width: 100%;
* { display: flex;
margin: 0; flex-direction: column;
padding: 0; }
box-sizing: border-box;
font-size: 0.26rem; * {
} margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 13px;
}
</style> </style>

240
src/views/ebiz/cardList/Pay.vue
View File

@@ -1,123 +1,189 @@
<template> <template>
<div class="pay"> <div class="pay">
<!-- <van-cell-group> -->
<van-cell-group> <div v-if="!isScan">
<van-field v-model="productName" clearable label="产品名称" placeholder="请输入产品名称" class="projuct"/> <van-field
v-model="productName"
clearable
label="产品名称"
class="projuct"
/>
<van-field v-model="paymentAmount" clearable label="支付金额" placeholder="请输入支付金额" /> <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="请输入支付金额" />
<!-- 银行卡支付开始 --> <!-- 银行卡支付开始 -->
<van-cell-group> <van-cell-group>
<van-field v-model="value" placeholder="请输入用户名" /> <van-field />
<div class="money">
<div class="money"> <div>
<div><img src="../../../assets/images/u10280.png" alt=""> <img src="../../../assets/images/u10280.png" alt style="margin-top:-5px;margin-right:10px;" />
<span>银行卡支付</span> <span class="oi">银行卡支付</span>
</div> </div>
<van-checkbox v-model="checked" style="margin-right:0.3rem;margin-top:0.1rem;"></van-checkbox> <div class="i">
</div> <van-checkbox v-model="checked" style="margin-right:1rem;margin-top:0.2rem;"></van-checkbox>
</van-cell-group> </div>
</van-radio-group> </div>
</van-cell-group>
<!-- </van-radio-group> -->
<!-- 银行卡支付结束 --> <!-- 银行卡支付结束 -->
<van-field v-model="userName" type="text" label="账户姓名" placeholder="请输入" required /> <van-field v-model="userName" type="text" label="账户姓名" placeholder="请输入" required />
<van-cell-group> <van-cell-group>
<van-field <van-field v-model="sms" center clearable label="银行卡号" placeholder="请输入" required>
v-model="sms" <van-button slot="button" size="small" class="bankCard mr10 w110 h20" @click="cardScanning('0')" v-no-more-click="1000" type="info">银行卡扫描</van-button>
center </van-field>
clearable <!-- <van-button type="danger" size="small" >银行卡扫描</van-button> -->
label="银行卡号" </van-cell-group>
placeholder="请输入"
>
<van-button slot="button" size="small" type="info" class="btn">银行卡扫描</van-button>
</van-field>
</van-cell-group>
<van-field v-model="bankDeposit" type="text" label="开户银行" placeholder="请选择" required /> <van-field v-model="bankDeposit" type="text" label="开户银行" placeholder="请选择" required />
</van-field>
</van-cell-group> <!-- </van-field> -->
<!-- </van-cell-group> -->
<van-button type="info" size="large" class="payBtn" @click="Pay()">支付</van-button> <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> </div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue'
import { Field } from 'vant'; import { Field } from 'vant'
import { Checkbox, CheckboxGroup } from 'vant'; import { Checkbox, CheckboxGroup} from 'vant'
import { Button } from 'vant'
Vue.use(Checkbox).use(CheckboxGroup); Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Field); Vue.use(Field)
Vue.use(Button)
import { saveInformation, getBankList, getOrderDetail } from '@/api/ebiz/sale/sale'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
export default { export default {
name: "pay", name: 'pay',
components: {
BankCardScan
},
data() { data() {
return { return {
productName: "国家安全富兴2.0", productName: '国家安全富兴2.0', //产品名称
paymentAmount: "", paymentAmount: '', //支付金额
radio: "", userName: '', //账户姓名
userName:"", bankCardNumber: '', //银行卡号
bankCardNumber:"", bankDeposit: '', //开户银行
bankDeposit:"", checked: true,
checked:true result:[],
}; sms:'',
// 银行卡扫描是否显示
isScan: false,
//是否清空
isClear: false,
}
}, },
methods:{ methods: {
Pay(){ Pay() {
this.$router.push('/cardList/PaySuccess') 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> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"> <style lang="scss" scoped>
.btn{ * {
box-sizing: border-box;
}
.bankCard{
border-radius: 10em; border-radius: 10em;
} }
.projuct{ .oi{
input{ font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: bold; font-weight: 700;
} font-style: normal;
color: #666666;
} }
.money{ .money {
display: flex; display: flex;
width: 100%;
align-items: center; align-items: center;
justify-content: space-between;
position: absolute; position: absolute;
top: 1.8rem; top: 90px;
z-index: 10; left: 15px;
left: 0rem; z-index: 100;
width: 100%; background: white;
background: white; height: 40px;
justify-content: space-between; overflow: hidden;
> div:nth-of-type(1) {
} display: flex;
align-items: center;
.money>div:nth-of-type(1){ img {
display: flex; width: 33px;
align-items: center; height: 32px;
margin-left: 0.4rem; }
justify-content: center; span {
img{ font-size: 14px;
width: 0.64rem; }
height: 0.64rem;
} }
span{ > div:nth-of-type(2) {
padding-top: 0.15rem; display: flex;
box-sizing: border-box; align-items: center;
// padding-bottom: 15px;
} }
} }
span{
font-size: 0.3rem;
}
a {
font-size: 0.38rem;
}
.payBtn{ .payBtn{
margin-top:4.5rem; // margin-top: 10rem;
position: fixed;
bottom:0;
}
.bankCard{
padding-bottom:25px;
} }
</style> </style>

32
src/views/ebiz/cardList/PayLoser.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<div class="PayLo <div class="PayLoser">
ser">
<div> <div>
<img src="../../../assets/images/u10608.svg" alt=""> <img src="../../../assets/images/u10608.svg" alt="">
<p>支付失败</p> <p>支付失败</p>
</div> </div>
<van-button type="info" size="large" class="payBtn">返回首页</van-button> <van-button type="info" size="large" class="payBtn">返回首页</van-button>
</div> </div>
</template> </template>
@@ -15,18 +15,38 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
}
html,body{
margin: 0;
padding: 0;
width:100%;
height:100%;
} }
.PayLoser{ .PayLoser{
display: flex; display: flex;
flex-direction:column; flex-direction:column;
height: 650px;
justify-content: space-between; justify-content: space-between;
} align-items: center;
img{ img{
width:2rem; width:100px;
height: 2rem; 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> </style>

37
src/views/ebiz/cardList/PaySuccess.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<div class="paySuccess"> <div class="paySuccess">
<!-- <a href="javascript:;">＜ 支付结果</a>-->
<div class="paySucc"> <div class="paySucc">
<van-icon name="passed" size="1.5rem" color="blue"/> <van-icon name="passed" size="100px" color="blue"/>
<span>支付成功</span>
</div> </div>
<van-cell-group> <van-cell-group>
<van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" /> <van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
@@ -13,6 +14,10 @@
</template> </template>
<script> <script>
import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
export default { export default {
name: 'paySuccess', name: 'paySuccess',
data () { data () {
@@ -26,17 +31,31 @@ export default {
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- 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 { a {
font-size: 0.38rem; font-size: 16px;
}
.van-field__control{
margin-left: 30px;
} }
.paySucc{ .paySucc{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
width: 100%; width: 100%;
height: 5rem; height: 250px;
text-align:center; align-items: center;
line-height:5rem; justify-content: center;
border-top: 0.01rem solid #ccc; border-top: 1px solid #ccc;
border-bottom: 0.15rem solid rgb(235, 233, 233); border-bottom: 7.5px solid rgb(235, 233, 233);
} }
</style> </style>

79
src/views/ebiz/cardList/information.vue
View File

@@ -26,7 +26,11 @@
@confirm="onDateConfirm($event, '2')" @confirm="onDateConfirm($event, '2')"
ref="birthday" ref="birthday"
:maxDate="maxDate" :maxDate="maxDate"
></FieldDatePicter> >
</FieldDatePicter>
<van-field <van-field
:value="userInfo.idType | idToText('insuredIdType')" :value="userInfo.idType | idToText('insuredIdType')"
v-validate="'required'" v-validate="'required'"
@@ -69,7 +73,7 @@
@click="toSelect('9')" @click="toSelect('9')"
/> />
</van-cell-group> </van-cell-group>
</van-radio-group> <!-- </van-radio-group> -->
<!-- 被保人信息 --> <!-- 被保人信息 -->
<van-cell-group class="mt10"> <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-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
</van-field> </van-field>
</van-cell-group> </van-cell-group>
</van-radio-group> <!-- </van-radio-group> -->
<!-- 受益人信息 --> <!-- 受益人信息 -->
<van-cell-group class="mt10"> <van-cell-group class="mt10">
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p> <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-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"> <van-popup v-model="popupShow" position="bottom">
@@ -148,7 +191,7 @@
</div> </div>
</template> </template>
<script> <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 SelectRadio from '@/components/ebiz/SelectRadio'
import FieldDatePicter from '@/components/ebiz/FieldDatePicter' import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker' 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 beforeDate from '@/assets/js/utils/getBeforeDate.js'
import { idToData } from './js/verification' import { idToData } from './js/verification'
import { selectComp } from './js/methods' 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 { export default {
name: 'insuredInfo', name: 'insuredInfo',
components: { components: {
@@ -184,6 +239,9 @@ export default {
data() { data() {
return { return {
isScan: false, //是否显示证件扫描组件 isScan: false, //是否显示证件扫描组件
allPrice:'100',
result:[],
checked:true,
sexRadio: [ sexRadio: [
{ {
label: '男', label: '男',
@@ -217,6 +275,7 @@ export default {
insuredName: '', // 被保人姓名 insuredName: '', // 被保人姓名
sex: '0', //投保人性别 sex: '0', //投保人性别
bnfType: '法定受益人', // 受益人类型 bnfType: '法定受益人', // 受益人类型
bnfSelec:'请选择',
birthday: '', birthday: '',
relationToAppnt: '', relationToAppnt: '',
idType: '1', //证件类型 idType: '1', //证件类型
@@ -862,7 +921,8 @@ export default {
// } // }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.insured-info-container { .insured-info-container {
/deep/.van-checkbox { /deep/.van-checkbox {
margin-left: auto; margin-left: auto;
@@ -871,4 +931,7 @@ export default {
margin-left: auto; margin-left: auto;
} }
} }
.van-checkbox__label{
font-size: 13px;
}
</style> </style>

214
src/views/ebiz/cardList/productDetails.vue
View File

@@ -1,160 +1,70 @@
<template> <template>
<div class="chanpingxiangqing-wxa"> <div class="chanpingxiangqing-wxa">
<div class="nav">
<van-icon name="arrow-left" /> <div class="header">
<p><span>卡单产品</span></p> <img src="../../../assets/images/u10211.jpg" />
</div> <img src="../../../assets/images/u10213.png" />
<div class="header"> <img src="../../../assets/images/u10215.png" />
</div>
<img src="../../../assets/images/u10211.jpg"/> <footer>
<img src="../../../assets/images/u10213.png"/> <div>
</div> <span>保险条款</span>
<div class="tit"> <a href="javascipt:" to="/cardList/productDetails">查看</a>
<div class="tit-header"><p class="shuGang"></p><figure>理赔流程</figure></div> </div>
<ul> <van-button type="danger" size="large">下一步</van-button>
<li v-for="(item,index) in oUl" :key='index'> </footer>
<div> </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>
</template> </template>
<script> <script>
export default{ import Vue from 'vue'
name:'Chanpingxiangqing.vue', import { Image } from 'vant'
data(){
return{ Vue.use(Image)
oUl:[ export default {
{ name: 'Chanpingxiangqing.vue',
num:'1', data() {
tiaojian:'申请理赔', return {}
iCon:'致电保险公司客服申请理赔' }
}, }
{
num:'2',
tiaojian:'提交材料',
iCon:'按保险条约约定准备相应理赔资料'
},
{
num:'3',
tiaojian:'理赔审核',
iCon:'保险公司进行理赔资料审核'
},
{
num:'4',
tiaojian:'获得赔款',
iCon:'保险公司支付客户赔款'
}
]
}
}
}
</script> </script>
<style scoped> <style lang="scss" scoped>
footer{ * {
display: flex; margin: 0;
flex-direction: column; padding: 0;
} }
footer a{ img {
color: #949494; width: 100%;
} }
footer>div{ footer {
display: flex; width: 100%;
height:0.7rem;
align-items: center; display: flex;
justify-content: space-between; flex-direction: column;
padding: 0rem 0.3rem; }
} footer > div:nth-of-type(1) {
figure{ display: flex;
margin-left: 0.3rem; height: 40px;
} align-items: center;
.tit-header{ justify-content: space-between;
display: flex; padding: 0px 20px;
align-items: center; span {
margin: 0.2rem 0.3rem; font-size: 14px;
} }
.tit ul{ a {
display: flex; font-size: 14px;
flex-direction: column; }
} }
.tit li{ .nav {
display: flex; width: 100%;
margin: 0.2rem; display: flex;
} align-items: center;
.tit li >div:nth-of-type(2) p{ padding-left: 0.2rem;
color: #6A7C90; height: 0.9rem;
font-size: 0.28rem; }
font-weight: bold; .header{
} margin-top:10px ;
.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> </style>