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

卡单第一次提交

Browse Source
This commit is contained in:
nimengmeng_1990
2019-12-20 18:40:45 +08:00
parent d9f565a88e
commit 621e0867bd
10 changed files with 783 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/api/ebiz/cardList/cardList.js
View File

@@ -2,3 +2,39 @@
import request from '@/assets/js/utils/request'
import getUrl from '@/assets/js/utils/get-url'
// 获取卡单列表
export function getCardList(data) {
return request({
url: getUrl('/sale/product/getProList', 1),
method: 'post',
data
})
}
// 获取我的卡单列表
export function getMyCardList(data) {
return request({
url: getUrl('/sale/card/getMyCardList', 1),
method: 'post',
data
})
}
// 获取产品详情
export function getProductDetails(data) {
return request({
url: getUrl('/sale/product/getItemDetail', 1),
method: 'post',
data
})
}
// 获取产品试算详情
export function getProductInfo(data) {
return request({
url: getUrl('/sale/product/getDetail', 1),
method: 'post',
data
})
}

9
src/config/cardList.js
View File

@@ -1 +1,10 @@
// 卡单
let mockBaseUrl = 'http://mock-api.com/9KOlmpzk.mock'
export default {
// 获取产品列表接口
'/sale/card/getCardList': mockBaseUrl + '/sale/card/getCardList',
// 获取我的卡单接口
getMyCardList: mockBaseUrl + '/sale/card/getMyCardList',
// 获取卡单详情接口
getProductInfo: mockBaseUrl + '/sale/card/getCardDetail'
}

3
src/config/urlMap.js
View File

@@ -10,6 +10,7 @@ import my from './my'
import product from './product'
import serve from './serve'
import common from './common'
import cardList from './cardList'
const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'
let baseObj = {
@@ -17,6 +18,6 @@ let baseObj = {
'/user/info': mockBaseUrl + '/223948/info',
'/user/logout': mockBaseUrl + '/223948/logout'
}
Object.assign(baseObj, proposal, sale, customer, my, product, serve, common)
Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, cardList)
export default baseObj

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

@@ -1,8 +1,10 @@
// 卡单路由
const information = () => import('@/views/ebiz/cardList/information')
const cardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
const productDetails = () => import('@/views/ebiz/cardList/ProductDetails')
const productDetails = () => import('@/views/ebiz/cardList/productDetails')
const ShowPDF = () => import('@/views/ebiz/cardList/ShowPDF')
const pay = () => import('@/views/ebiz/cardList/Pay')
const payResult = () => import('@/views/ebiz/cardList/PayResult')
const paySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
const payLoser = () => import('@/views/ebiz/cardList/PayLoser')
export default [
@@ -25,7 +27,7 @@ export default [
}
},
{
path: '/cardList/productDetails',
path: '/cardList/productDetails/:productDetailCode',
name: 'productDetails',
component: productDetails,
meta: {
@@ -33,6 +35,15 @@ export default [
index: 3
}
},
{
path: '/cardList/ShowPDF',
name: 'ShowPDF',
component: ShowPDF,
meta: {
title: '国富健康保终身重大疾病保险条款',
index: 3
}
},
{
path: '/cardList/pay',
name: 'pay',
@@ -42,6 +53,15 @@ export default [
index: 4
}
},
{
path: '/cardList/payResult',
name: 'payResult',
component: payResult,
meta: {
title: '支付结果',
index: 5
}
},
{
path: '/cardList/paySuccess',
name: 'paySuccess',
@@ -60,6 +80,4 @@ export default [
index: 6
}
}
]

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

@@ -1,46 +1,47 @@
<template>
<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="show">
<ul
class="card-Products"
:style="(this.iNow==0) ? 'display:block':'display:none' "
>
<li v-for="(itemIcon,index) in list" :key="index" @click="formsD()">
<li v-for="(itemIcon,index) in list" :key="index" class="border-gb" @click="formsD(itemIcon.productCode)">
<div>
<img src="../../../assets/images/u10247.png" alt="">
<!-- <img :src="itemIcon.url" alt=""> -->
<img :src="itemIcon.productImageUrl" class="ml10" width="118" height="70" />
</div>
<div>
<p>{{itemIcon.p}}</p>
<span>{{itemIcon.span}}</span>
<p>{{itemIcon.productName}}</p>
<span>{{itemIcon.productDesc}}</span>
</div>
</li>
<template v-if="list.length === 0">
<li class="flex flex-direction-colunm align-items-c">
<img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
<p class="gray text-center pt20">暂无产品</p>
</li>
</template>
</ul>
<ul class="myCard" :style="(this.iNow==1) ? 'display:block':'display:none' ">
<li v-for="(itemiNow,index) in tAb" :key="index">
<li v-for="(itemiNow,index) in tAb" style=" border: 1px solid #dadada;box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35);" class="mb10 pl15 pt15" :key="index">
<p>{{itemiNow.h}}</p>
<span>{{itemiNow.span1}}</span>
<span>{{itemiNow.span2}}</span>
<span>{{itemiNow.span3}}</span>
<span>{{itemiNow.span4}}</span>
</li>
<template v-if="tAb.length === 0">
<li class="flex flex-direction-colunm align-items-c">
<img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
<p class="gray text-center pt20">暂无产品</p>
</li>
</template>
</ul>
</div>
</div>
@@ -49,22 +50,24 @@
</template>
<script>
import icon1 from '@/assets/images/u10247.png'
import { getCardList } from '@/api/ebiz/cardList/cardList.js'
export default {
name: 'kadantoubao.vue',
data() {
return {
arr: ['产品列表', '我的卡单'],
list: [
{
p: '学生平安保险（小学，初中）',
span: '保险费地，为孩子提供全方位的风险保障'
},
{
p: '学生平安保险（高中，高等教育）',
span: '保险费地，为孩子提供全方位的风险保障'
}
// {
// headImgUrl: icon1,
// p: '学生平安保险（小学，初中）',
// span: '保险费地，为孩子提供全方位的风险保障'
// },
// {
// headImgUrl: icon1,
// p: '学生平安保险（高中，高等教育）',
// span: '保险费地，为孩子提供全方位的风险保障'
// }
],
iNow: 0,
tAb: [
@@ -92,32 +95,97 @@ export default {
]
}
},
created() {
this.getLists()
},
mounted() {
document.body.style.backgroundColor = '#fff'
},
methods: {
fnTab(index) {
this.iNow = index
console.log(this.iNow)
},
formsD() {
this.$router.push('/cardList/productDetails')
formsD(productCode) {
localStorage.productDetailCode = productCode
//跳转到详情页
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/cardList/productDetails/${productCode}`
},
routerInfo: {
path: `/cardList/productDetails/${productCode}`
}
})
},
// getLists: function() {
// var self = this
// // 产品列表
// getCardList({
// type: 'app'
// })
// .then(res => {
// console.log(res)
// // if (res.result == 0) {
// // self.navList = res.productTypeList
// // window.localStorage.setItem('productList', JSON.stringify(res.productList))
// // let productList = window.localStorage.getItem('productList')
// // var resu = JSON.parse(productList).filter(function(obj) {
// // return obj.productType == '01'
// // })
// // self.dataList = resu
// // } else {
// // Toast.fail(res.resultMessage)
// // }
// })
// .then(function(err) {
// console.log(err)
// })
// }
getLists() {
// 获取卡单列表
let data = {
type: 'appCard'
}
getCardList(data)
.then(res => {
console.log('res', res)
if (res.result == 0) {
this.list = res.productList
} else {
Toast.fail(res.resultMessage)
}
})
.catch(err => {
console.log("errerr", err)
})
}
}
}
</script>
<style scoped>
.myCardl {
/* .myCardl {
width: 100%;
display: flex;
flex-direction: column;
} */
.product-list-default-bg {
left: 50%;
transform: translateX(-50%);
}
.myCard li {
display: flex;
flex-direction: column;
width: 360px;
height: 124px;
border: 1px solid #dadada;
padding-left: 15px;
padding-top: 15px;
/* border: 1px solid #dadada; */
/* box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35); */
margin: 0 auto;
}
.myCard li:nth-child(1) {
margin-top: 15px;
}
.myCard li p {
font-size: 15px;
@@ -126,10 +194,10 @@ export default {
.myCard li span {
font-size: 11px;
font-family: '微软雅黑';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #999999;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #999999;
}
.Tab {
width: 100%;
@@ -145,7 +213,7 @@ export default {
justify-content: center;
}
.card-Products{
.card-Products {
width: 100%;
display: flex;
flex-direction: column;
@@ -155,13 +223,13 @@ export default {
width: 100%;
display: flex;
height: 100px;
border: 1px solid #cccccc;
/* border-bottom: 1px solid #cccccc; */
}
.card-Products > li img {
width: 117px;
/* width: 117px;
height: 70px;
margin-left: 10px;
margin-left: 10px; */
}
.card-Products li div:nth-of-type(1) {
@@ -185,7 +253,7 @@ export default {
.card-Products li > div:nth-of-type(2) span {
color: #b5b5b5;
font-size:11px;
font-size: 11px;
}
.ac {
@@ -198,10 +266,10 @@ export default {
display: flex;
align-items: center;
padding-left: 10px;
height:45px;
height: 45px;
}
.card-Insurance{
.card-Insurance {
width: 100%;
display: flex;
flex-direction: column;
@@ -212,7 +280,7 @@ export default {
}
.card-Insurance-box {
width: 95%;
width: 100%;
display: flex;
flex-direction: column;
margin: 0 auto;
@@ -228,6 +296,6 @@ export default {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 13px;
font-size: 14px;
}
</style>

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

@@ -1,94 +1,201 @@
<template>
<div class="pay">
<!-- <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="underWriteData.appntName"
clearable
label="产品名称"
class="projuct"
/>
<van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" clearable label="支付金额" placeholder="请输入支付金额" />
</van-cell-group>
<!-- 银行卡支付开始 -->
<van-cell-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 class="i mr20">
<van-radio-group v-model="radio" class="flex justify-content-fe">
<van-radio name="1"></van-radio>
</van-radio-group>
</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="请输入" 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 v-model="underWriteData.accountName" label="姓名" name="姓名" placeholder="请输入" v-validate="'required|name'" maxlength="6" clearable required />
<van-field v-model="underWriteData.cardBookCode" maxlength="19" label="银行卡号" name="银行卡号" placeholder="请输入" required clearable v-validate="'required|bankCard'">
<van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
</van-field>
<!-- <van-button type="danger" size="small" >银行卡扫描</van-button> -->
<van-field
:value="underWriteData.bankName"
label="开户银行"
name="开户银行"
placeholder="请输入"
v-validate="'required'"
readonly
@click="focus"
right-icon="arrow"
data-vv-name="开户银行"
required
/>
</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-checkbox-group v-model="result" ref="checkboxGroup">
<van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
</van-checkbox-group>
<!-- 第三方支付所需表单 -->
<form ref="payForm" :action="formActionUrl" method="post">
<input name="TransSource" type="hidden" v-model="payParam.TransSource" />
<input name="TransDate" type="hidden" v-model="payParam.TransDate" />
<input name="TransTime" type="hidden" v-model="payParam.TransTime" />
<input name="TransSeq" type="hidden" v-model="payParam.TransSeq" />
<input name="Version" type="hidden" v-model="payParam.Version" />
<input name="RdSeq" type="hidden" v-model="payParam.RdSeq" />
<input name="PaymentCode" type="hidden" v-model="payParam.PaymentCode" />
<input name="PayType" type="hidden" v-model="payParam.PayType" />
<input name="SettleMode" type="hidden" v-model="payParam.SettleMode" />
<input name="ApplyEntity" type="hidden" v-model="payParam.ApplyEntity" />
<input name="Cur" type="hidden" v-model="payParam.Cur" />
<input name="OurAmount" type="hidden" v-model="payParam.OurAmount" />
<input name="FixUser" type="hidden" v-model="payParam.FixUser" />
<input name="Insurer" type="hidden" v-model="payParam.Insurer" />
<input name="CertType" type="hidden" v-model="payParam.CertType" />
<input name="CertNum" type="hidden" v-model="payParam.CertNum" />
<input name="OppBank" type="hidden" v-model="payParam.OppBank" />
<input name="OppAct" type="hidden" v-model="payParam.OppAct" />
<input name="OppActName" type="hidden" v-model="payParam.OppActName" />
<input name="CellPhone" type="hidden" v-model="payParam.CellPhone" />
<input name="ExpireDate" type="hidden" v-model="payParam.ExpireDate" />
<input name="Purpose" type="hidden" v-model="payParam.Purpose" />
<input name="Memo" type="hidden" v-model="payParam.Memo" />
<input name="Description" type="hidden" v-model="payParam.Description" />
<input name="SourceNotecode" type="hidden" v-model="payParam.SourceNotecode" />
<input name="ReturnURL" type="hidden" v-model="payParam.ReturnURL" />
<input name="NotifyURL" type="hidden" v-model="payParam.NotifyURL" />
<input name="SaleChannel" type="hidden" v-model="payParam.SaleChannel" />
<input name="ReqReserved1" type="hidden" v-model="payParam.ReqReserved1" />
<input name="ReqReserved2" type="hidden" v-model="payParam.ReqReserved2" />
<input name="ReqReserved3" type="hidden" v-model="payParam.ReqReserved3" />
<input name="ReqReserved4" type="hidden" v-model="payParam.ReqReserved4" />
<input name="ReqReserved5" type="hidden" v-model="payParam.ReqReserved5" />
<input name="S3Sign" type="hidden" v-model="payParam.S3Sign" />
</form>
<div class="bg-white bottom-btn">
<van-button type="danger" size="large" @click="payMent" v-no-more-click="1000">支付</van-button>
</div>
<!-- 银行卡扫描按钮 -->
</div>
<!-- 银行卡扫描按钮 -->
<van-popup v-model="isScan" style="height:100vh" position="bottom">
<BankCardScan :scanShow="isScan" :clear="isClear" @getScanInfo="getBankCardInfo"></BankCardScan>
</van-popup>
<!-- 开户银行选择 -->
<van-popup v-model="show" position="bottom" style="height:400px">
<van-list>
<van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item.bankName, item.code)" />
</van-list>
</van-popup>
</div>
</template>
<script>
import Vue from 'vue'
import { Field } from 'vant'
import { Checkbox, CheckboxGroup} from 'vant'
import { Button } from 'vant'
import { Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Popup, CellGroup, Button, List, Cell } from 'vant'
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Field)
Vue.use(Button)
import { saveInformation, getBankList, getOrderDetail } from '@/api/ebiz/sale/sale'
import { acceptInsurance, getBankList, underWrite, getOrderDetail } from '@/api/ebiz/sale/sale'
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
import config from '@/config'
export default {
name: 'pay',
components: {
BankCardScan
BankCardScan,
[Popup.name]: Popup,
[CellGroup.name]: CellGroup,
[Field.name]: Field,
[List.name]: List,
[Cell.name]: Cell,
[RadioGroup.name]: RadioGroup,
[Radio.name]: Radio
},
data() {
return {
productName: '国家安全富兴2.0', //产品名称
paymentAmount: '', //支付金额
userName: '', //账户姓名
bankCardNumber: '', //银行卡号
bankDeposit: '', //开户银行
checked: true,
result:[],
sms:'',
// 银行卡扫描是否显示
isScan: false,
//是否清空
isClear: false,
// 核保数据
underWriteData: {
appntName: '国家安全富兴2.0', //产品名称
orderAmount: 200, //支付金额
name: '',
bankCode: '', //银行卡号
bankName: '' //开户银行
},
radio: '1',
result: [],
isScan: false, //是否显示证件扫描组件
isClear: false, //是否清空
show: false, // 银行列表弹框
bankList: [], // 银行卡列表
formActionUrl: config.payUrl, // 支付表单
payParam: {
TransSource: '', // 对接系统
TransDate: '', // 请求日期
TransTime: '', // 请求时间
TransSeq: '', // 时间戳
Version: '', // 版本号
RdSeq: '', // 指令流水号
PaymentCode: '', // 业务唯一号
PayType: '', // 交易类型
SettleMode: '', // 支付方式
ApplyEntity: '', // 业务发生机构
Cur: '', // 币种
OurAmount: '', // 金额
FixUser: '', // 实名认证标识
Insurer: '', // 对接系统
CertType: '', // 证件类型
CertNum: '', // 证件号码
OppBank: '', // 交易方银行
OppAct: '', // 交易方账号
OppActName: '', // 交易方名称
CellPhone: '', // 手机号码
ExpireDate: '', // 订单失效时间
Purpose: '', // 用途
Memo: '', // 备注
Description: '', // 描述
SourceNotecode: '', // 外部系统业务单据号
ReturnURL: '', // 页面跳转同步通知地址
NotifyURL: '', // 后台通知地址
SaleChannel: '', // 销售渠道
ReqReserved1: '', // 备用字段1
ReqReserved2: '', // 备用字段2
ReqReserved3: '', // 备用字段3
ReqReserved4: '', // 备用字段4
ReqReserved5: '', // 备用字段5
S3Sign: '', // 验签信息
tradeState: '' // 状态
},
gotPayParam: false, // 是否已正确获取支付参数,
payStatus: '' // 接口返回的支付状态
}
},
mounted() {
document.body.style.backgroundColor = '#fff'
window.appCallBack = this.appCallBack
// 获取银行卡
this.getBankList()
console.log('----保融form.action', config.payUrl)
if (localStorage.salelist == '1') {
// 第一次支付 调核保获取
this.underWrite()
this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
} else {
// 再次支付 调详情 获取信息
this.twounderWrite()
this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
}
console.log('--自核结果--支付信息：', JSON.stringify(this.underWriteData))
},
methods: {
Pay() {
this.$router.push('/cardList/PaySuccess');
},
//获取身份证扫描信息
getBankCardInfo(data) {
this.bankId = data.name
this.$jump({
flag: 'navigation',
extra: {
@@ -130,6 +237,170 @@ export default {
}
})
},
appCallBack() {
// 筛选按钮的点击事件
this.$jump({
flag: 'navigation',
extra: {
title: '支付',
hiddenRight: '1'
}
})
this.isScan = false
},
// 获取银行列表的focus
focus() {
let that = this
that.show = true
},
// 获取银行卡列表
getBankList() {
let self = this
let data = {
operateType: 'enter_bank_type'
}
getBankList(data).then(res => {
if (res.result == '0') {
console.log('银行卡列表', res.content)
self.bankList = res.content
} else {
this.$toast(res.resultMessage)
}
})
},
// 选择银行卡
clickList(item, bankCode) {
console.log('英航卡', item, bankCode)
let that = this
// that.userInfo.bankName = item
// that.userInfo.bankCode = bankCode
that.underWriteData.bankName = bankCode
that.show = false
},
// 再次支付
twounderWrite() {
let _this = this
getOrderDetail({ orderNo: window.localStorage.getItem('orderNo') }).then(res => {
console.log(res)
if (res.result == '0') {
this.$toast.clear()
console.log(res.orderDTO.orderAccountDTO.bankCode)
let underWriteData = {
accountName: res.orderDTO.orderAccountDTO.accountName,
appntName: res.orderDTO.appntDTO.name,
bankCode: _this.typebank[res.orderDTO.orderAccountDTO.bankCode],
bankName: res.orderDTO.orderAccountDTO.bankName,
cardBookCode: res.orderDTO.orderAccountDTO.cardBookCode,
orderAmount: res.orderDTO.orderInfoDTO.orderAmount,
orderNo: res.orderDTO.orderAccountDTO.orderNo,
result: '',
resultMessage: '交易处理成功',
uwResult: '02'
}
window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
} else {
let underWriteData = {
accountName: '',
appntName: '',
bankCode: '',
bankName: '',
cardBookCode: '',
orderAmount: '',
orderNo: '',
result: '',
resultMessage: '交易处理失败',
uwResult: '00'
}
window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
this.$toast(res.resultMessage)
}
})
},
// 获取支付信息
underWrite() {
let data = {
platform: 'app',
type: '1',
orderDTO: {
orderInfoDTO: {
orderNo: window.localStorage.getItem('orderNo')
}
}
}
underWrite(data).then(res => {
if (res.result == '0') {
this.$toast.clear()
if (res.uwResult == '02') {
// window.localStorage.setItem('uwResult', res.uwResult)
window.localStorage.setItem('underWriteData', JSON.stringify(res))
} else if (res.uwResult == '33') {
window.localStorage.setItem('underWriteData', JSON.stringify(res))
window.localStorage.setItem('uwResult', res.uwResult)
window.localStorage.setItem('resultMessage', res.message)
} else {
window.localStorage.setItem('uwResult', res.uwResult)
window.localStorage.setItem('underWriteData', JSON.stringify(res))
// window.localStorage.setItem('resultMessage', res.resultMessage)
}
} else {
this.$toast(res.resultMessage)
}
})
},
// 点击支付
payMent() {
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
let that = this
let data = {
orderNo: window.localStorage.getItem('orderNo')
}
acceptInsurance(data).then(res => {
console.log('----取支付参数结果：', JSON.stringify(res))
// res = {'result':'0','resultMessage':'','content':null,'prtNo':'8186270000000008','payStatus':'4','amnt':'63700.00','appntName':'投保人','message':null,'brPayReturnData':{'result':'','resultMessage':'','content':null,'businessId':'1569125393518','businessNo':'8186270000000008','tradeSubType':'COMM','businessType':'SALE','systemType':'GF','money':63700,'businessSubType':'XDCB','thirdType':'0002','thirdName':null,'bankCode':'ABC','epayOrderNo':'1909221209536259999900','companyAccount':null,'tradeState':'TRADING','standardCode':'DEALING','standardMsg':null,'thirdOrderNo':null,'respRemark':null,'tradeTime':'2019-09-22T04:09:53.518+0000','description':'','version':'1','sourceNotecode':'8186270000000008','payType':'MIT01','expireDate':'20191010101010','transSeq':'20190922120953782','transSource':'MIT','applyEntity':'11860000','paymentCode':'8186270000000008','transDate':'20190922','rdSeq':'1909221209536259999900','settleMode':null,'cur':'CNY','transTime':'120953','ourAmount':63700,'fixUser':'1','insurer':'投保人','certType':'0','certNum':'110101199009210011','oppBank':'ABC','oppAct':'6228481200290317812','oppActName':'投保人','cellPhone':null,'purpose':null,'memo':null,'returnURL':'http://139.199.50.151/#/sale/payResult','notifyURL':'http://139.199.50.151:7000/api/v1/epay/epay/payResult','s3Sign':'e3f0581ec6b751337e8eca360a0746bc'}}
if (res.result == '0') {
// 1成 4支付中 2支付失败 8转批扣(无此情况）
this.payStatus = res.payStatus
if (this.payStatus == '1') {
this.$toast({ message: '当前投保单已支付成功，请返回列表页查询', duration: 5000 })
return
}
// 支付参数大小写转换
let keyMap = {}
for (let key in this.payParam) {
keyMap[key.toLowerCase()] = key
}
let paramKey
for (let rKey in res.brPayReturnData) {
if (keyMap.hasOwnProperty(rKey.toLowerCase())) {
paramKey = keyMap[rKey.toLowerCase()]
this.payParam[paramKey] = res.brPayReturnData[rKey]
}
}
console.log('----支付参数：this.payParam:', JSON.stringify(this.payParam))
this.gotPayParam = true
this.$forceUpdate()
let thisRef = this
this.$nextTick(() => {
thisRef.$refs.payForm.submit() // 表单提交，发起支付，跳至收银台
})
window.localStorage.setItem('resMessage', res.resultMessage)
window.localStorage.setItem('payStatus', res.payStatus)
window.localStorage.setItem('payInfo', JSON.stringify(res))
} else {
that.$toast.clear()
that.$toast(res.resultMessage)
}
})
}
}
}
</script>
@@ -139,23 +410,17 @@ export default {
* {
box-sizing: border-box;
}
.bankCard{
border-radius: 10em;
}
.oi{
.oi {
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: 700;
font-style: normal;
color: #666666;
font-weight: 700;
font-style: normal;
color: #666666;
}
.money {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
position: absolute;
top: 90px;
left: 15px;
z-index: 100;
background: white;
height: 40px;
@@ -175,15 +440,6 @@ export default {
> div:nth-of-type(2) {
display: flex;
align-items: center;
// padding-bottom: 15px;
}
}
.payBtn{
// margin-top: 10rem;
position: fixed;
bottom:0;
}
.bankCard{
padding-bottom:25px;
}
</style>

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

@@ -1,30 +1,58 @@
<template>
<div class="paySuccess">
<div class="paySucc">
<van-icon name="passed" size="100px" color="blue"/>
<span>支付成功</span>
</div>
<van-cell-group>
<van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
<van-field v-model="paymentAmount" clearable label="支付金额" placeholder="100.00元" />
<van-field v-model="bankCardNumber" clearable label="卡号" placeholder="1297793740298" />
</van-cell-group>
<template v-if="payStatus == '1'">
<div class="paySucc">
<van-icon name="passed" size="100px" color="#1296DB"/>
<span>支付成功</span>
</div>
<van-cell-group>
<van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
<van-field v-model="paymentAmount" clearable label="支付金额" placeholder="100.00元" />
<van-field v-model="bankCardNumber" clearable label="卡号" placeholder="1297793740298" />
</van-cell-group>
</template>
<template v-else-if="payStatus == '2'">
<div class="flex flex-direction-colunm align-items-c pt100">
<img src="../../../assets/images/u10608.svg" class="w100 h100" alt="">
<p class="mt30">支付失败</p>
</div>
<div class="bg-white bottom-btn">
<van-button type="danger" size="large" class="payBtn">返回首页</van-button>
</div>
</template>
</div>
</template>
<script>
import Vue from 'vue';
import { Field } from 'vant';
import Vue from 'vue'
import { Field } from 'vant'
Vue.use(Field);
Vue.use(Field)
export default {
name: 'paySuccess',
data () {
data() {
return {
productName: "",
paymentAmount: "",
bankCardNumber:""
payStatus: '2',
productName: '',
paymentAmount: '',
bankCardNumber: '',
// 保融收银台返回的支付流水号
paySeqNo: '',
// 接口返回数据前，不做页面渲染
isReady: false,
// 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
isReloaded: false,
// 结果原因
resMessage: '',
// 支付结果
payStatus: '',
// 支付信息
payInfo: {
appntName: '', // 投保人
prtNo: '', // 投保单号
amnt: '' // 支付金额
},
}
}
}
@@ -32,20 +60,20 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.van-field__label span{
font-family: '微软雅黑';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #666666;
.van-field__label span {
font-family: '微软雅黑';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #666666;
}
a {
font-size: 16px;
}
.van-field__control{
.van-field__control {
margin-left: 30px;
}
.paySucc{
.paySucc {
margin: 0;
padding: 0;
display: flex;
@@ -57,5 +85,4 @@ a {
border-top: 1px solid #ccc;
border-bottom: 7.5px solid rgb(235, 233, 233);
}
</style>

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

@@ -26,11 +26,8 @@
@confirm="onDateConfirm($event, '2')"
ref="birthday"
:maxDate="maxDate"
>
</FieldDatePicter>
>
</FieldDatePicter>
<van-field
:value="userInfo.idType | idToText('insuredIdType')"
v-validate="'required'"
@@ -73,8 +70,6 @@
@click="toSelect('9')"
/>
</van-cell-group>
<!-- </van-radio-group> -->
<!-- 被保人信息 -->
<van-cell-group class="mt10">
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p>
@@ -89,13 +84,13 @@
@nameChange="nameChange"
@on-click="selectClick('1','1')"
></customer-picker>
<select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.sex"></select-radio>
<select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.insuredSex"></select-radio>
<FieldDatePicter
v-validate="'required'"
label="出生日期"
name="出生日期"
required
:value.sync="userInfo.birthday"
:value.sync="userInfo.insuredBirthday"
type="date"
:flag="true"
@confirm="onDateConfirm($event, '2')"
@@ -118,19 +113,12 @@
<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-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'" style="border-bottom: 1px solid #ebedf0;"/>
</van-cell-group>
<!-- </van-radio-group> -->
<p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p>
<p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p>
<FieldDatePicter
v-validate="'required'"
label="指定生效日期"
@@ -141,28 +129,15 @@
:flag="true"
@confirm="onDateConfirm($event, '2')"
ref="birthday"
:maxDate="maxDate"
input-align:right
>
>
</FieldDatePicter>
<van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;padding-top:10px;background:white;">
<van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;" class="pl8 pt10 bg-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-checkbox-group>
<van-goods-action>
<van-button type="default" style="width:50%;font-size:14px;height:40px;background:white">总保费:<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>
@@ -191,7 +166,7 @@
</div>
</template>
<script>
import { Field, CellGroup, Checkbox,CheckboxGroup, 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'
@@ -206,19 +181,13 @@ 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';
import Vue from 'vue'
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
Vue.use(Checkbox).use(CheckboxGroup)
Vue
.use(GoodsAction)
Vue.use(GoodsAction)
.use(GoodsActionIcon)
.use(GoodsActionButton);
.use(GoodsActionButton)
export default {
name: 'insuredInfo',
components: {
@@ -239,9 +208,9 @@ export default {
data() {
return {
isScan: false, //是否显示证件扫描组件
allPrice:'100',
result:[],
checked:true,
allPrice: '100',
result: [],
checked: true,
sexRadio: [
{
label: '男',
@@ -274,12 +243,15 @@ export default {
name: '', //投保人姓名
insuredName: '', // 被保人姓名
sex: '0', //投保人性别
insuredSex:'0', //被保人性别
bnfType: '法定受益人', // 受益人类型
bnfSelec:'请选择',
birthday: '',
bnfSelec: '请选择',
birthday: '', //投保人出生日期
insuredBirthday:'', //被保人出生日期
relationToAppnt: '',
idType: '1', //证件类型
idNo: '', //证件号码
insuredidNo:'', //被保人证件号码
areaName: '', // 投保人地址
mobile: '', //移动电话
stature: '', //身高
@@ -404,13 +376,13 @@ export default {
if (this.pickerType == '1') {
this.userInfo.nativeplace = value.id
} else if (this.pickerType == '2') {
//身份证以外的证件类型可以使用长期
if (value.id != '1') {
this.effectiveDateTypeAble = false
} else {
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
this.effectiveDateTypeAble = !(age >= 45)
}
// //身份证以外的证件类型可以使用长期
// if (value.id != '1') {
// this.effectiveDateTypeAble = false
// } else {
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
// this.effectiveDateTypeAble = !(age >= 45)
// }
this.userInfo.idType = value.id
} else if (this.pickerType == '3') {
this.userInfo.degree = value.id
@@ -440,12 +412,12 @@ export default {
return this.$toast('证件起始日期填写错误')
}
// 计算年龄
if (this.userInfo.idType == '1') {
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
// 长期按钮是否禁用
this.effectiveDateTypeAble = age <= 45
}
// // 计算年龄
// if (this.userInfo.idType == '1') {
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
// // 长期按钮是否禁用
// this.effectiveDateTypeAble = age <= 45
// }
}
break
case '1':
@@ -502,11 +474,11 @@ export default {
this.$refs.birthday.date = ''
return this.$toast('出生日期不晚于当日')
}
//长判断
if (this.userInfo.idType == '1') {
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
this.effectiveDateTypeAble = !(age >= 45)
}
// //长判断
// if (this.userInfo.idType == '1') {
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
// this.effectiveDateTypeAble = !(age >= 45)
// }
}
break
}
@@ -922,7 +894,6 @@ export default {
}
</script>
<style lang="scss">
.insured-info-container {
/deep/.van-checkbox {
margin-left: auto;
@@ -931,7 +902,7 @@ export default {
margin-left: auto;
}
}
.van-checkbox__label{
.van-checkbox__label {
font-size: 13px;
}
</style>

73
src/views/ebiz/cardList/js/methods.js
View File

@@ -52,29 +52,58 @@ function closeBtn(that) {
* @param {*} type 1 投保人 2 被保人
*/
export function getIdentityInfo(that, data, type) {
// 正面
if (data.name && data.name != '待识别') {
that.userInfo.name = data.name
that.userInfo.idNo = data.idNo
that.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
that.userInfo.sex = data.gender == '男' ? '0' : '1'
if (type == '1') {
// 正面
if (data.name && data.name != '待识别') {
that.userInfo.name = data.name
that.userInfo.idNo = data.idNo
that.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
that.userInfo.sex = data.gender == '男' ? '0' : '1'
}
// 反面
if (data.startDate && data.startDate != '待识别') {
that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
//that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
// 是否为长期身份证
if (data.endDate != '长期') {
that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
// that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
that.effectiveDateTypeAble = true
} else {
// 勾选长期
that.userInfo.effectiveDateType = true
// 长期按钮不禁用
that.effectiveDateTypeAble = false
// 证件截止日期不需要校验
that.certiexpiredateRequired = false
}
}
}
// 反面
if (data.startDate && data.startDate != '待识别') {
that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
//that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
// 是否为长期身份证
if (data.endDate != '长期') {
that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
// that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
that.effectiveDateTypeAble = true
} else {
// 勾选长期
that.userInfo.effectiveDateType = true
// 长期按钮不禁用
that.effectiveDateTypeAble = false
// 证件截止日期不需要校验
that.certiexpiredateRequired = false
if (type == '2') {
// 正面
if (data.name && data.name != '待识别') {
that.userInfo.insuredName = data.name
that.userInfo.insuredidNo = data.idNo
that.userInfo.insuredBirthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
that.userInfo.insuredSex = data.gender == '男' ? '0' : '1'
}
// 反面
if (data.startDate && data.startDate != '待识别') {
that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
//that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
// 是否为长期身份证
if (data.endDate != '长期') {
that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
// that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
that.effectiveDateTypeAble = true
} else {
// 勾选长期
that.userInfo.effectiveDateType = true
// 长期按钮不禁用
that.effectiveDateTypeAble = false
// 证件截止日期不需要校验
that.certiexpiredateRequired = false
}
}
}
that.isScan = false

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

@@ -1,70 +1,147 @@
<template>
<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 class="mt10">
<img v-for="(items, id) in introductImages" :key="id" :src="items" alt="产品详情" width="100%" />
</div>
<footer>
<div>
<span>保险条款</span>
<a href="javascipt:" to="/cardList/productDetails">查看</a>
<div class="pb50 pt10">
<van-cell
class="product-detail-list-item p10 fs12 fw400 bg-white"
:title="item.name"
is-link
v-for="(item, index) in docuList"
:key="index"
@click="goDocu(item.url, item.type, item.name)"
/>
</div>
<div class="bottom-area bottom-btn">
<van-button type="danger" size="large" @click="gotoInformation">下一步</van-button>
</div>
<van-button type="danger" size="large">下一步</van-button>
</footer>
</div>
</template>
<script>
import Vue from 'vue'
import { Image } from 'vant'
Vue.use(Image)
import icon1 from '@/assets/images/u10211.jpg'
import icon2 from '@/assets/images/u10213.png'
import icon3 from '@/assets/images/u10215.png'
import { Cell } from 'vant'
import { getProductDetails, getProductInfo } from '@/api/ebiz/cardList/cardList.js'
export default {
name: 'Chanpingxiangqing.vue',
components: {
[Cell.name]: Cell
},
data() {
return {}
return {
introductImages: [],
docuList: []
}
},
created() {
let code = this.$route.params.productDetailCode
console.log(code)
this.getData(code)
this.getProductDetail(code)
},
methods: {
goDocu(url, type, name) {
let pdfUrl = encodeURIComponent(url)
console.log('pdfUrl',pdfUrl)
this.$jump({
flag: 'h5',
extra: {
title: name,
// url: 'http://47.96.143.111/pdfjs/web/viewer.html?file=' + url //测试代码
url: this.$mainUrl + '/pdfjs/web/viewer.html?file=' + pdfUrl
}
})
// 跳转到产品资料详情
// 保存url
// window.localStorage.setItem('documentInfo', JSON.stringify({ documentUrl: url, documentType: type }))
// // 保存文件类型
// // 0-图片, 1-pdf, 2-word, 3-excel
// window.localStorage.setItem('documentType', type)
// this.$jump({
// flag: 'h5',
// extra: {
// url: location.origin + '/#/product/productDocument'
// },
// routerInfo: {
// path: `/product/productDocument`
// }
// })
},
//点击跳转到pdf展示页
handleClick(url) {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/cardList/ShowPDF'
},
routerInfo: {
path: '/cardList/ShowPDF'
}
})
},
gotoInformation() {
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/cardList/information'
},
routerInfo: {
path: '/cardList/information'
}
})
},
getProductDetail(code) {
// 获取卡单列表
let data = {
platform: 'app',
productCodes: [code],
type: '1'
}
getProductInfo(data)
.then(res => {
console.log('res', res)
// if (res.result == 0) {
// this.list = res.productList
// } else {
// Toast.fail(res.resultMessage)
// }
})
.catch(err => {
console.log('errerr', err)
})
},
getData(code) {
let data = {
itemCode: code,
platform: 'app'
}
getProductDetails(data)
.then(res => {
console.log('res', res)
if (res.result == 0) {
// 获取产品特色图片
this.introductImages = res.productShowInfo.introductImages
// 获取产品资料文件
this.docuList = res.productShowInfo.documents
console.log(this.docuList)
} else {
Toast.fail(res.resultMessage)
}
})
.catch(err => {
console.log('errerr', err)
})
}
}
}
</script>
<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>