mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 01:06:45 +08:00
Merge branch 'dev_cardList' into feature/GFRS-247【待确定】卡单产品投保
# Conflicts: # src/assets/js/utils/request.js # src/config/urlMap.js # src/router/ebiz/index.js # src/views/app/Home.vue # src/views/ebiz/sale/InsuredInfo.vue
This commit is contained in:
tian.guangyuan
@@ -17,5 +17,6 @@
|
||||
<!-- built files will be auto injected -->
|
||||
<!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> -->
|
||||
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
67
src/api/ebiz/cardList/cardList.js
Normal file
67
src/api/ebiz/cardList/cardList.js
Normal file
@@ -0,0 +1,67 @@
|
||||
// 卡单接口
|
||||
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
// 进行试算
|
||||
export function insureTrial(data) {
|
||||
return request({
|
||||
url: getUrl('/sale/insure/trial', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 保存卡单信息
|
||||
export function saveOrUpdateCard(data) {
|
||||
return request({
|
||||
url: getUrl('/sale/card/saveOrUpdateCard', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 保存卡单支付信息
|
||||
export function saveOrUpdateAccount(data) {
|
||||
return request({
|
||||
url: getUrl('/sale/card/saveOrUpdateAccount', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/u10211.jpg
Normal file
BIN
src/assets/images/u10211.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
src/assets/images/u10213.png
Normal file
BIN
src/assets/images/u10213.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
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 |
BIN
src/assets/images/u10247.png
Normal file
BIN
src/assets/images/u10247.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
src/assets/images/u10280.png
Normal file
BIN
src/assets/images/u10280.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
1
src/assets/images/u10608.svg
Normal file
1
src/assets/images/u10608.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1567079553293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20073" width="200" height="200"><path d="M358.419788 392.527249c0-37.683671-30.557838-68.26503-68.256849-68.26503-37.700034 0-68.257872 30.582382-68.257872 68.26503 0 37.715373 30.557838 68.26503 68.257872 68.26503C327.86195 460.793302 358.419788 430.242622 358.419788 392.527249zM733.847287 324.262218c-37.699011 0-68.267076 30.582382-68.267076 68.26503 0 37.715373 30.568065 68.26503 68.267076 68.26503s68.256849-30.55068 68.256849-68.26503C802.104137 354.843577 771.546298 324.262218 733.847287 324.262218zM511.999489 0c-282.737469 0-511.94222 229.212932-511.94222 511.991307s229.204751 512.008693 511.94222 512.008693 511.943243-229.229295 511.943243-512.008693S794.736958 0 511.999489 0zM511.999489 972.783586c-254.462188 0-460.743192-206.313728-460.743192-460.792279 0-254.478551 206.279981-460.775917 460.743192-460.775917 254.463211 0 460.75035 206.297366 460.75035 460.775917C972.749839 766.469858 766.463722 972.783586 511.999489 972.783586zM512.066984 597.339725c-154.214767 0-204.796114 136.532106-204.796114 136.532106l51.199028 0c0 0 39.032548-85.331032 153.597085-85.331032 116.072948 0 153.597085 85.331032 153.597085 85.331032l51.198006 0C716.863098 733.871831 666.28175 597.339725 512.066984 597.339725z" p-id="20074" fill="#1296db"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -65,6 +65,9 @@ let survey = [
|
||||
let manpower = [
|
||||
'/customer/answer/queryList' //DISC性格分析
|
||||
]
|
||||
]
|
||||
// 卡单
|
||||
let cardList = []
|
||||
let whiteList = ['/customer/agent/getCustomersList', ...proposal, ...sale, ...agentEnter, ...claims, ...survey, ...manpower]
|
||||
|
||||
// 创建axios实例
|
||||
|
||||
@@ -52,6 +52,7 @@ export default {
|
||||
mounted() {},
|
||||
methods: {
|
||||
choose(data) {
|
||||
console.log(data)
|
||||
let params = {
|
||||
customerNumber: data.customerNumber
|
||||
}
|
||||
@@ -59,17 +60,21 @@ export default {
|
||||
console.log(res, '详情')
|
||||
if (res.result == '0') {
|
||||
this.isSuccess = true
|
||||
let Data = []
|
||||
let content = res.content
|
||||
let value = localStorage.getItem('value')
|
||||
Data.push(content)
|
||||
Data.push(value)
|
||||
if (content.birthday) {
|
||||
content.age = utils.jsGetAge(content.birthday)
|
||||
}
|
||||
this.$emit('on-choose', content)
|
||||
this.$emit('on-choose', Data)
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
getCustomersList({}).then(res => {
|
||||
console.log(res)
|
||||
// console.log(res)
|
||||
if (res.result == '0') {
|
||||
let customerList = []
|
||||
//根据数据字典中的客户等级 展示
|
||||
|
||||
10
src/config/cardList.js
Normal file
10
src/config/cardList.js
Normal file
@@ -0,0 +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'
|
||||
}
|
||||
@@ -12,6 +12,7 @@ import serve from './serve'
|
||||
import common from './common'
|
||||
import survey from './survey'
|
||||
import manpower from './manpower'
|
||||
import cardList from './cardList'
|
||||
const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'
|
||||
|
||||
let baseObj = {
|
||||
@@ -19,6 +20,6 @@ let baseObj = {
|
||||
'/user/info': mockBaseUrl + '/223948/info',
|
||||
'/user/logout': mockBaseUrl + '/223948/logout'
|
||||
}
|
||||
Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, survey, manpower)
|
||||
Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, cardList, survey, manpower)
|
||||
|
||||
export default baseObj
|
||||
|
||||
73
src/router/ebiz/cardList.js
Normal file
73
src/router/ebiz/cardList.js
Normal file
@@ -0,0 +1,73 @@
|
||||
// 卡单路由
|
||||
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 payResult = () => import('@/views/ebiz/cardList/PayResult')
|
||||
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: '填写投被保人信息',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/cardTotreasure',
|
||||
name: 'cardTotreasure',
|
||||
component: cardTotreasure,
|
||||
meta: {
|
||||
title: '产品列表',
|
||||
index: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/productDetails/:productDetailCode',
|
||||
name: 'productDetails',
|
||||
component: productDetails,
|
||||
meta: {
|
||||
title: '产品详情',
|
||||
index: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/pay',
|
||||
name: 'pay',
|
||||
component: pay,
|
||||
meta: {
|
||||
title: '支付',
|
||||
index: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/payResult',
|
||||
name: 'payResult',
|
||||
component: payResult,
|
||||
meta: {
|
||||
title: '支付结果',
|
||||
index: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/paySuccess',
|
||||
name: 'paySuccess',
|
||||
component: paySuccess,
|
||||
meta: {
|
||||
title: '支付成功',
|
||||
index: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/cardList/payLoser',
|
||||
name: 'payLoser',
|
||||
component: payLoser,
|
||||
meta: {
|
||||
title: '支付失败',
|
||||
index: 6
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -13,4 +13,4 @@ import report from './report'
|
||||
import survey from './survey'
|
||||
import nbs from './nbs'
|
||||
import manpower from './manpower'
|
||||
export default [...proposal, ...sale, ...customer, ...my, ...serve, ...common, ...product, ...agentEenter, ...milestone, ...poster, ...report, ...survey, ...nbs, ...manpower] //根据需要进行删减
|
||||
export default [...proposal, ...sale, ...customer, ...my, ...serve, ...common, ...product, ...cardList ,...agentEenter, ...milestone, ...poster, ...report, ...survey, ...nbs, ...manpower] //根据需要进行删减
|
||||
|
||||
@@ -2,6 +2,7 @@ import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import App from './app'
|
||||
import Example from './example'
|
||||
|
||||
import Ebiz from './ebiz'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -32,6 +32,20 @@
|
||||
<li><router-link to="/manpower/DiscAnalysis/List">DISC性格分析</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>
|
||||
|
||||
301
src/views/ebiz/cardList/CardTotreasure.vue
Normal file
301
src/views/ebiz/cardList/CardTotreasure.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="card-Insurance">
|
||||
<div class="card-Insurance-box">
|
||||
<div class="card-Insurance-header">
|
||||
<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" class="border-gb" @click="formsD(itemIcon.productCode)">
|
||||
<div>
|
||||
<img :src="itemIcon.productImageUrl" class="ml10" width="118" height="70" />
|
||||
</div>
|
||||
<div>
|
||||
<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" 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>
|
||||
</div>
|
||||
</div>
|
||||
</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: [
|
||||
// {
|
||||
// headImgUrl: icon1,
|
||||
// p: '学生平安保险（小学，初中）',
|
||||
// span: '保险费地，为孩子提供全方位的风险保障'
|
||||
// },
|
||||
// {
|
||||
// headImgUrl: icon1,
|
||||
// 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLists()
|
||||
},
|
||||
mounted() {
|
||||
document.body.style.backgroundColor = '#fff'
|
||||
},
|
||||
methods: {
|
||||
fnTab(index) {
|
||||
this.iNow = index
|
||||
console.log(this.iNow)
|
||||
},
|
||||
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 {
|
||||
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; */
|
||||
/* 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;
|
||||
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-bottom: 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: 100%;
|
||||
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: 14px;
|
||||
}
|
||||
</style>
|
||||
480
src/views/ebiz/cardList/Pay.vue
Normal file
480
src/views/ebiz/cardList/Pay.vue
Normal file
@@ -0,0 +1,480 @@
|
||||
<template>
|
||||
<div class="pay">
|
||||
<div v-if="!isScan">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="underWriteData.appntName"
|
||||
readonly
|
||||
label="产品名称"
|
||||
class="projuct"
|
||||
/>
|
||||
<van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" readonly label="支付金额" />
|
||||
</van-cell-group>
|
||||
<!-- 银行卡支付开始 -->
|
||||
<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 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-field v-model="underWriteData.name" label="姓名" name="姓名" placeholder="请输入" v-validate="'required|name'" maxlength="6" clearable required />
|
||||
<van-field v-model="underWriteData.bankCode" maxlength="19" label="银行卡号" name="银行卡号" placeholder="请输入" required clearable v-validate="'required|bankCard'" data-vv-name="银行卡号">
|
||||
<van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
|
||||
</van-field>
|
||||
<van-field
|
||||
:value="bankListName"
|
||||
label="开户银行"
|
||||
name="开户银行"
|
||||
placeholder="请输入"
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
@click="focus"
|
||||
right-icon="arrow"
|
||||
data-vv-name="开户银行"
|
||||
required
|
||||
/>
|
||||
<!-- <van-field v-model="bank" label="开户银行" placeholder="请选择" required @click="focus" readonly v-validate="'required'" data-vv-name="开户银行" /> -->
|
||||
</van-cell-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:354px">
|
||||
<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, Checkbox, CheckboxGroup, RadioGroup, Radio, Popup, CellGroup, Button, List, Cell } from 'vant'
|
||||
Vue.use(Checkbox).use(CheckboxGroup)
|
||||
Vue.use(Field)
|
||||
Vue.use(Button)
|
||||
import { acceptInsurance, getBankList, underWrite, getOrderDetail } from '@/api/ebiz/sale/sale'
|
||||
import { saveOrUpdateAccount } from '@/api/ebiz/cardList/cardList.js'
|
||||
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
|
||||
import config from '@/config'
|
||||
export default {
|
||||
name: 'pay',
|
||||
components: {
|
||||
BankCardScan,
|
||||
[Popup.name]: Popup,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Field.name]: Field,
|
||||
[List.name]: List,
|
||||
[Cell.name]: Cell,
|
||||
[RadioGroup.name]: RadioGroup,
|
||||
[Radio.name]: Radio
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// trialList: JSON.parse(localStorage.trialList),
|
||||
// 核保数据
|
||||
underWriteData: {
|
||||
appntName: '国家安全富兴2.0', //产品名称
|
||||
orderAmount: 0, //支付金额
|
||||
name: '',
|
||||
bankCode: '', //银行卡号
|
||||
bankName: 'ABC' //开户银行
|
||||
},
|
||||
radio: '1',
|
||||
result: [],
|
||||
isScan: false, //是否显示证件扫描组件
|
||||
isClear: false, //是否清空
|
||||
show: false, // 银行列表弹框
|
||||
bankList: [], // 银行卡列表
|
||||
bankListName: '', // 银行列表ID
|
||||
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() {
|
||||
// console.log('trialList', this.trialList[0].prem)
|
||||
// this.underWrite.orderAmount = this.trialList[0].prem
|
||||
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: {
|
||||
//获取银行卡扫描信息
|
||||
getBankCardInfo(data) {
|
||||
this.underWriteData.bankCode = 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: {} }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
},
|
||||
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: '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.bankListName = item
|
||||
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() {
|
||||
let that = this
|
||||
let data = {
|
||||
orderDTO: {
|
||||
orderInfoDTO: {
|
||||
orderNo: window.localStorage.getItem('orderNo')
|
||||
},
|
||||
orderAccountDTO: {
|
||||
accountType: '0',
|
||||
accountName: that.underWriteData.name,
|
||||
bankName: that.bankListName,
|
||||
bankCode: that.underWriteData.bankName,
|
||||
cardBookType: '1',
|
||||
cardBookCode: that.underWriteData.bankCode,
|
||||
isAutoPay: '0',
|
||||
isAutoRenewal: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
loadingType: 'spinner',
|
||||
message: '加载中……'
|
||||
})
|
||||
/*
|
||||
支付之前要先保存银行账户信息
|
||||
*/
|
||||
saveOrUpdateAccount(data).then(res => {
|
||||
console.log('res', res)
|
||||
that.$toast.clear()
|
||||
if (res.result == '0') {
|
||||
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)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.oi {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #666666;
|
||||
}
|
||||
.money {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
> div:nth-of-type(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 33px;
|
||||
height: 32px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
src/views/ebiz/cardList/PayLoser.vue
Normal file
52
src/views/ebiz/cardList/PayLoser.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<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: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>
|
||||
172
src/views/ebiz/cardList/PayResult.vue
Normal file
172
src/views/ebiz/cardList/PayResult.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="payResult-container" v-if="isReady">
|
||||
<div class="payResult-header flex justify-content-c align-items-c m15 bg-white flex-direction-colunm">
|
||||
<img :src="srcSuccess" class="payResult-img mb15 pt15" v-if="payStatus == '1'" />
|
||||
<img :src="srcPending" class="payResult-img mb15 pt15" v-if="payStatus == '4' || payStatus == '8'" />
|
||||
<img :src="srcFail" class="payResult-img mb15 pt15" v-if="payStatus == '2'" />
|
||||
<h3 v-if="payStatus == '1'" class="mb10">支付成功</h3>
|
||||
<h3 v-if="payStatus == '4'" class="mb10">支付中...</h3>
|
||||
<h3 v-if="payStatus == '2'" class="mb10">支付失败</h3>
|
||||
<span v-if="payStatus == '4'" class="pb10">银行扣款中，请稍后查询</span>
|
||||
<span v-if="payStatus == '8'" class="pb10">线下批扣中……</span>
|
||||
<!-- <span v-if="payStatus == '8'">{{ resMessage }}</span> -->
|
||||
</div>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="付款人" :value="payInfo.appntName" v-if="payInfo.appntName != ''" />
|
||||
<van-cell title="投保单号" :value="payInfo.prtNo" />
|
||||
<van-cell title="支付金额" :value="`${payInfo.amnt}元` | moneyFormat" v-if="payInfo.amnt != ''" />
|
||||
</van-cell-group>
|
||||
<!-- <div v-if="payStatus != '2' && payStatus != '1'" class=" p10 pb250 bg-white">
|
||||
<span class="pt150 fs14"> 如有相关问题，请联系信息技术部运维人员</span>
|
||||
</div> -->
|
||||
<div v-if="payStatus == '1'" class=" p10 pb250 bg-white">
|
||||
<span class="pt150 fs14"> 核心承保中，请您稍后查看</span>
|
||||
</div>
|
||||
<div v-if="payStatus == '2' || payStatus == '4' || payStatus == '8'" class=" p10 pb250 bg-white">
|
||||
<span v-html="resMessage"></span>
|
||||
</div>
|
||||
<!-- <div class=" p10 pb250 bg-white">
|
||||
<span v-html="resMessage"></span>
|
||||
</div> -->
|
||||
|
||||
<div class="bottom-btn bg-white" v-if="payStatus == '1' || payStatus == '4' || payStatus == '8'">
|
||||
<van-button type="danger" size="large" @click="next" v-no-more-click="1000">返回列表页</van-button>
|
||||
</div>
|
||||
<div class="bottom-area bottom-btn flex" v-if="payStatus == '2'">
|
||||
<van-button class="m-btn w250" type="danger" size="normal" @click="rePayMent">重新支付</van-button>
|
||||
<van-button class="m-btn w250" type="danger" size="normal" @click="next">返回列表页</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cell, CellGroup } from 'vant'
|
||||
import { getPayState } from '@/api/ebiz/sale/sale'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 保融收银台返回的支付流水号
|
||||
paySeqNo: '',
|
||||
// 接口返回数据前，不做页面渲染
|
||||
isReady: false,
|
||||
// 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
|
||||
isReloaded: false,
|
||||
// 结果原因
|
||||
resMessage: '',
|
||||
// 支付结果
|
||||
payStatus: '',
|
||||
// 支付信息
|
||||
payInfo: {
|
||||
appntName: '', // 投保人
|
||||
prtNo: '', // 投保单号
|
||||
amnt: '' // 支付金额
|
||||
},
|
||||
// 图片
|
||||
srcSuccess: this.$assetsUrl + 'images/success.png',
|
||||
srcPending: this.$assetsUrl + 'images/pending.png',
|
||||
srcFail: this.$assetsUrl + 'images/fail.png'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[Cell.name]: Cell,
|
||||
[CellGroup.name]: CellGroup
|
||||
},
|
||||
methods: {
|
||||
// 返回列表页
|
||||
next() {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
url: location.origin + '/#/cardList/cardTotreasure'
|
||||
},
|
||||
|
||||
routerInfo: {
|
||||
path: '/cardList/cardTotreasure'
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查询支付状态
|
||||
queryPayState() {
|
||||
this.$toast.clear()
|
||||
this.$toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
loadingType: 'spinner',
|
||||
message: '加载中……'
|
||||
})
|
||||
let data = { orderNo: this.paySeqNo }
|
||||
getPayState(data).then(res => {
|
||||
this.$toast.clear()
|
||||
this.isReady = true
|
||||
console.log('----支付结果查询', JSON.stringify(res))
|
||||
if (res.result == '0') {
|
||||
this.payStatus = res.payStatus
|
||||
this.payInfo = { appntName: res.appntName, prtNo: res.prtNo, amnt: res.amnt }
|
||||
|
||||
// 如果是支付中，2秒后，重新获取一次支付状态
|
||||
if (this.payStatus == '4' && !this.isReloaded) {
|
||||
this.isReloaded = true
|
||||
setTimeout(() => {
|
||||
this.queryPayState()
|
||||
}, 2000)
|
||||
}
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
}
|
||||
})
|
||||
},
|
||||
// // 重新支付
|
||||
// rePayMent() {
|
||||
// // localStorage.orderNo = order.orderInfoDTO.orderNo
|
||||
// // 再次支付 salelist为 0
|
||||
// localStorage.salelist = '0'
|
||||
// this.$jump({
|
||||
// flag: 'h5',
|
||||
// extra: {
|
||||
// url: location.origin + '/#/sale/payMent'
|
||||
// },
|
||||
// routerInfo: {
|
||||
// path: '/sale/payMent'
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
let that = this
|
||||
// document.body.style.backgroundColor = '#fff'
|
||||
that.payStatus = window.localStorage.getItem('payStatus')
|
||||
that.payInfo = JSON.parse(window.localStorage.getItem('payInfo'))
|
||||
if (window.localStorage.getItem('resMessage') != null) {
|
||||
that.resMessage = window.localStorage.getItem('resMessage').replace(/\\n/g, '<br>')
|
||||
}
|
||||
|
||||
this.paySeqNo = this.$route.query.RdSeq
|
||||
if (!this.paySeqNo) {
|
||||
this.$toast({ message: '参数错误，缺少支付流水号‘RdSeq’查询参数', duration: 5000 })
|
||||
} else {
|
||||
this.queryPayState()
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
document.body.style.backgroundColor = ''
|
||||
next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payResult-container {
|
||||
.payResult-header {
|
||||
width: 345px;
|
||||
// height: 143px;
|
||||
.payResult-img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// /deep/ .van-cell__value {
|
||||
// text-align: left;
|
||||
// }
|
||||
</style>
|
||||
88
src/views/ebiz/cardList/PaySuccess.vue
Normal file
88
src/views/ebiz/cardList/PaySuccess.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="paySuccess">
|
||||
<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'
|
||||
|
||||
Vue.use(Field)
|
||||
export default {
|
||||
name: 'paySuccess',
|
||||
data() {
|
||||
return {
|
||||
payStatus: '2',
|
||||
productName: '',
|
||||
paymentAmount: '',
|
||||
bankCardNumber: '',
|
||||
// 保融收银台返回的支付流水号
|
||||
paySeqNo: '',
|
||||
// 接口返回数据前，不做页面渲染
|
||||
isReady: false,
|
||||
// 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
|
||||
isReloaded: false,
|
||||
// 结果原因
|
||||
resMessage: '',
|
||||
// 支付结果
|
||||
payStatus: '',
|
||||
// 支付信息
|
||||
payInfo: {
|
||||
appntName: '', // 投保人
|
||||
prtNo: '', // 投保单号
|
||||
amnt: '' // 支付金额
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 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;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-field__control {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.paySucc {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 7.5px solid rgb(235, 233, 233);
|
||||
}
|
||||
</style>
|
||||
964
src/views/ebiz/cardList/information.vue
Normal file
964
src/views/ebiz/cardList/information.vue
Normal file
@@ -0,0 +1,964 @@
|
||||
<template>
|
||||
<div class="insured-info-container pb50">
|
||||
<!-- 投保人信息 -->
|
||||
<van-cell-group class="mt10">
|
||||
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">投保人信息</p>
|
||||
<customer-picker
|
||||
@on-choose="chooseCustomer(arguments)"
|
||||
v-validate="'required|name'"
|
||||
name="投保姓名"
|
||||
label="投保姓名"
|
||||
required
|
||||
:parentShowPicker.sync="customerShowPicker"
|
||||
:value.sync="userInfo.name"
|
||||
@nameChange="nameChange"
|
||||
@on-click="selectClick('1','0')"
|
||||
></customer-picker>
|
||||
<select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.sex"></select-radio>
|
||||
<FieldDatePicter
|
||||
v-validate="'required'"
|
||||
label="出生日期"
|
||||
name="出生日期"
|
||||
required
|
||||
:value.sync="userInfo.birthday"
|
||||
type="date"
|
||||
:flag="true"
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
ref="birthday"
|
||||
:maxDate="maxDate"
|
||||
>
|
||||
</FieldDatePicter>
|
||||
<van-field
|
||||
:value="userInfo.idType | idToText('insuredIdType')"
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label="证件类型"
|
||||
name="证件类型"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('2')"
|
||||
/>
|
||||
<!-- <van-field v-model="userInfo.idNo" v-validate="'required|idNo'" maxlength="18" label="证件号码" name="证件号码" placeholder="请输入" clearable> -->
|
||||
<van-field v-model="userInfo.idNo" maxlength="18" required label="证件号码" v-validate="'required'" name="证件号码" placeholder="请输入" clearable @blur="getRelatedData(userInfo.idNo,'1')">
|
||||
<van-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
|
||||
</van-field>
|
||||
<van-field required v-model="userInfo.mobile" clearable label="手机号码" name="手机号码" placeholder="请输入" v-validate="'required|mobile'" maxlength="11" />
|
||||
<van-field v-model="userInfo.email" required label="邮箱" name="邮箱" placeholder="请输入" v-validate="'required|email'" clearable />
|
||||
<!-- <van-field v-model="userInfo.workcompany" required label="工作单位" name="工作单位" placeholder="请输入" v-validate="'required'" maxlength="50" clearable /> -->
|
||||
<van-field
|
||||
v-model="homeName"
|
||||
readonly
|
||||
label="地址"
|
||||
name="地址"
|
||||
required
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
v-validate="'required'"
|
||||
@click="homeShow = true"
|
||||
/>
|
||||
<van-field v-model="userInfo.homeAddress" label name="详细地址" placeholder="请输入详细地址" v-validate="'required'" clearable maxlength="30" />
|
||||
<van-field
|
||||
:value="userInfo.relationToInsured | idToText('relationToAppnt')"
|
||||
readonly
|
||||
required
|
||||
label="与被保人关系"
|
||||
name="与被保人关系"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
v-validate="'required'"
|
||||
@click="toSelect('9')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<!-- 被保人信息 -->
|
||||
<van-cell-group class="mt10">
|
||||
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p>
|
||||
<customer-picker
|
||||
@on-choose="chooseCustomer(arguments)"
|
||||
v-validate="'required|name'"
|
||||
name="被保险人姓名"
|
||||
label="被保险人姓名"
|
||||
required
|
||||
:parentShowPicker.sync="customerShowPicker"
|
||||
:value.sync="insuredInfo.name"
|
||||
@nameChange="nameChanges"
|
||||
@on-click="selectClick('1','1')"
|
||||
></customer-picker>
|
||||
<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="insuredInfo.birthday"
|
||||
type="date"
|
||||
:flag="true"
|
||||
@confirm="onDateConfirm($event, '5')"
|
||||
ref="insuredBirthday"
|
||||
:maxDate="maxDate"
|
||||
></FieldDatePicter>
|
||||
<van-field
|
||||
:value="insuredInfo.idType | idToText('insuredIdType')"
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label="证件类型"
|
||||
name="证件类型"
|
||||
right-icon="arrow"
|
||||
placeholder="请选择"
|
||||
@click="toSelect('11')"
|
||||
/>
|
||||
|
||||
<van-field v-model="insuredInfo.idNo" maxlength="18" required label="证件号码" v-validate="'required'" name="证件号码" placeholder="请输入" clearable @blur="getRelatedData(insuredInfo.idNo,'2')" >
|
||||
<van-button v-if="insuredInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<!-- 受益人信息 -->
|
||||
<van-cell-group class="mt10">
|
||||
<p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p>
|
||||
<van-field required v-model="bnfTypeVal" clearable label="受益人类型" v-validate="'required'" style="border-bottom: 1px solid #ebedf0;"/>
|
||||
</van-cell-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.effectiveDate"
|
||||
type="date"
|
||||
:flag="true"
|
||||
@confirm="onDateConfirm($event, '6')"
|
||||
ref="effectiveDate"
|
||||
input-align:right
|
||||
>
|
||||
</FieldDatePicter>
|
||||
<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;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>
|
||||
|
||||
|
||||
|
||||
<!-- 字段选择 -->
|
||||
<van-popup v-model="popupShow" position="bottom">
|
||||
<van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
|
||||
</van-popup>
|
||||
<!-- 地区选择 -->
|
||||
<van-popup v-model="areaShow" position="bottom">
|
||||
<van-area :area-list="areaList" value="110101" @confirm="sureArea($event, '1')" @cancel="areaShow = false" />
|
||||
</van-popup>
|
||||
<!-- 家庭地址选择 -->
|
||||
<van-popup v-model="homeShow" position="bottom">
|
||||
<van-area :area-list="areaList" value="110101" @confirm="sureArea($event, '2')" @cancel="homeShow = false" />
|
||||
</van-popup>
|
||||
<!-- 户籍选择 -->
|
||||
<van-popup v-model="censusShow" position="bottom">
|
||||
<van-area :area-list="areaList" value="110101" :columns-num="2" @confirm="sureArea($event, '3')" @cancel="censusShow = false" />
|
||||
</van-popup>
|
||||
<!--身份证扫描 -->
|
||||
<van-popup v-model="isScan" position="bottom">
|
||||
<IdentityCardScan @getScanInfo="getIdentityInfo"></IdentityCardScan>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
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'
|
||||
import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
|
||||
import DataDictionary from '@/assets/js/utils/data-dictionary'
|
||||
import areaList from '@/assets/js/utils/area'
|
||||
import { saveOrUpdateCard } from '@/api/ebiz/cardList/cardList.js'
|
||||
import utilsAge from '@/assets/js/utils/age'
|
||||
import getAreaName from '@/assets/js/utils/get-area-name'
|
||||
import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
|
||||
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: {
|
||||
[SelectRadio.name]: SelectRadio,
|
||||
[FieldDatePicter.name]: FieldDatePicter,
|
||||
[OccupationPicker.name]: OccupationPicker,
|
||||
[CustomerPicker.name]: CustomerPicker,
|
||||
[Field.name]: Field,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Checkbox.name]: Checkbox,
|
||||
[Popup.name]: Popup,
|
||||
[Picker.name]: Picker,
|
||||
[Area.name]: Area,
|
||||
[RadioGroup.name]: RadioGroup,
|
||||
[Radio.name]: Radio,
|
||||
[IdentityCardScan.name]: IdentityCardScan
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScan: false, //是否显示证件扫描组件
|
||||
allPrice: 0,
|
||||
result: [],
|
||||
checked: true,
|
||||
sexRadio: [
|
||||
{
|
||||
label: '男',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '女',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
medicalRadio: [
|
||||
{
|
||||
label: '有',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '无',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
maxDate: beforeDate.getBeforeYear(18),
|
||||
popupShow: false,
|
||||
areaShow: false, //省级联动
|
||||
homeShow: false, //家庭地址联动
|
||||
censusShow: false, //户籍联动
|
||||
pickerType: undefined,
|
||||
columns: [],
|
||||
valueKey: 'text',
|
||||
homeName: '', //家庭地址
|
||||
bnfTypeVal:'法定受益人', //受益人类型文字展示
|
||||
//投保人信息
|
||||
userInfo: {
|
||||
name: '', //投保人姓名
|
||||
insuredname: '',
|
||||
sex: '0', //投保人性别
|
||||
bnfType: '0', // 受益人类型
|
||||
bnfSelec: '请选择',
|
||||
birthday: '', //投保人出生日期
|
||||
relationToInsured: '',
|
||||
idType: '1', //证件类型
|
||||
idNo: '', //证件号码
|
||||
homeProvince: '', //家庭省
|
||||
homeCity: '', //家庭市
|
||||
homeArea: '', //家庭区
|
||||
homeAddress: '', //详细地址
|
||||
mobile: '', //移动电话
|
||||
email: '', //电子邮箱
|
||||
effectiveDate: '' //指定生效日期
|
||||
},
|
||||
//被保人信息
|
||||
insuredInfo: {
|
||||
name: '', // 被保人姓名
|
||||
idType: '1', //被保人证件类型
|
||||
idNo: '', //被保人证件号码
|
||||
sex: '0', //被保人性别
|
||||
birthday: '' //被保人出生日期
|
||||
},
|
||||
areaList: areaList,
|
||||
currentPopupIndex: '',
|
||||
customerShowPicker: false,
|
||||
occupationShowPicker: false,
|
||||
timeId: null,
|
||||
chooseProducts: JSON.parse(localStorage.chooseProducts),
|
||||
trialList: JSON.parse(localStorage.trialList)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// document.body.style.backgroundColor = '#F5F5F5'
|
||||
//如果是编辑进来
|
||||
// if (this.$route.query.edit) {
|
||||
// getOrderDetail({ orderNo: localStorage.orderNo }).then(res => {
|
||||
// if (res.result == 0) {
|
||||
// //投保人信息返显
|
||||
// this.userInfo = res.orderDTO.appntDTO
|
||||
// //是否长期
|
||||
// this.userInfo.effectiveDateType = res.orderDTO.appntDTO.effectiveDateType == 'false' ? false : true
|
||||
// //有无社保
|
||||
// this.userInfo.medical = '1'
|
||||
// //设为联系地址
|
||||
// this.userInfo.addressStatus = '0'
|
||||
// //证件类型
|
||||
// this.userInfo.idType = '1'
|
||||
// //国家/地区
|
||||
// this.userInfo.nativeplace = '1'
|
||||
// this.$utils.intLocalStorage(res)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
// 筛选按钮的点击事件
|
||||
window.appCallBack = this.appCallBack
|
||||
this.allPrice = this.trialList[0].prem
|
||||
},
|
||||
methods: {
|
||||
//监听名字变化
|
||||
nameChange(name) {
|
||||
// console.log('name',name)
|
||||
this.userInfo.name = name
|
||||
},
|
||||
//监听名字变化
|
||||
nameChanges(name) {
|
||||
// console.log('name',name)
|
||||
this.insuredInfo.name = name
|
||||
},
|
||||
selectClick(index, value) {
|
||||
console.log(index, value)
|
||||
localStorage.setItem('value', value)
|
||||
selectComp(this, index, '1')
|
||||
},
|
||||
// closeBtn() {
|
||||
// // 筛选按钮的显示
|
||||
// this.$jump({
|
||||
// flag: 'webview_right_button',
|
||||
// extra: {
|
||||
// btns: [
|
||||
// {
|
||||
// img: this.$assetsUrl + 'images/del-close.png',
|
||||
// route: { flag: '', extra: {} }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
appCallBack() {
|
||||
// 筛选按钮的点击事件
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '投被保人信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
if (this.currentPopupIndex == 1) {
|
||||
this.customerShowPicker = false
|
||||
} else if (this.currentPopupIndex == 2) {
|
||||
this.occupationShowPicker = false
|
||||
} else if (this.currentPopupIndex == 3) {
|
||||
this.isScan = false
|
||||
}
|
||||
},
|
||||
chooseOccupation() {
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '投被保人信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
this.occupationShowPicker = false
|
||||
},
|
||||
//弹框选择
|
||||
toSelect(pickerType, valueKey) {
|
||||
console.log(valueKey)
|
||||
//pickerType 1、国家地区 2、证件类型 3、文化程度 4、有无社保(弃用) 5、税收居民身份 6、婚姻状况 7、在职情况 8、收入来源, 9 关系
|
||||
;[this.popupShow, this.pickerType] = [true, pickerType]
|
||||
if (valueKey) this.valueKey = valueKey
|
||||
if (pickerType == '1') {
|
||||
this.columns = DataDictionary.nativeplace
|
||||
} else if (pickerType == '2') {
|
||||
this.columns = DataDictionary.insuredIdType
|
||||
} else if (pickerType == '3') {
|
||||
this.columns = DataDictionary.degree
|
||||
} else if (pickerType == '4') {
|
||||
this.columns = [{ id: 0, text: '有' }, { id: 1, text: '无' }]
|
||||
} else if (pickerType == '5') {
|
||||
this.columns = DataDictionary.taxIdentity
|
||||
} else if (pickerType == '6') {
|
||||
this.columns = DataDictionary.marriage
|
||||
} else if (pickerType == '7') {
|
||||
this.columns = DataDictionary.workCondition
|
||||
} else if (pickerType == '8') {
|
||||
this.columns = DataDictionary.salarySource
|
||||
} else if (pickerType == '9') {
|
||||
this.columns = DataDictionary.relationToAppnt
|
||||
}
|
||||
},
|
||||
//确认选择字段
|
||||
onConfirm(value) {
|
||||
this.popupShow = false
|
||||
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)
|
||||
// }
|
||||
this.userInfo.idType = value.id
|
||||
} else if (this.pickerType == '3') {
|
||||
this.userInfo.degree = value.id
|
||||
} else if (this.pickerType == '4') {
|
||||
this.userInfo.socialSecurity = value.id
|
||||
} else if (this.pickerType == '5') {
|
||||
this.userInfo.taxResidentId = value.id
|
||||
} else if (this.pickerType == '6') {
|
||||
this.userInfo.marriage = value.id
|
||||
} else if (this.pickerType == '7') {
|
||||
this.userInfo.jobStatus = value.id
|
||||
} else if (this.pickerType == '8') {
|
||||
this.userInfo.salarySource = value.id
|
||||
} else if (this.pickerType == '9') {
|
||||
this.userInfo.relationToInsured = value.id
|
||||
} else if (this.pickerType == '11') {
|
||||
this.insuredInfo.idType = value.id
|
||||
}
|
||||
},
|
||||
//证件起始截止日期
|
||||
onDateConfirm(val, type) {
|
||||
console.log(type)
|
||||
switch (type) {
|
||||
case '0':
|
||||
{
|
||||
//证件起始日期
|
||||
//如果录入日期早于出生日期或晚于当前日期
|
||||
if (Date.parse(val) > Date.parse(new Date()) || Date.parse(val) < Date.parse(this.userInfo.birthday)) {
|
||||
this.userInfo.certificateValidate = ''
|
||||
this.$refs.certificateValidate.date = ''
|
||||
return this.$toast('证件起始日期填写错误')
|
||||
}
|
||||
|
||||
// // 计算年龄
|
||||
// if (this.userInfo.idType == '1') {
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
// // 长期按钮是否禁用
|
||||
// this.effectiveDateTypeAble = age <= 45
|
||||
// }
|
||||
}
|
||||
break
|
||||
case '1':
|
||||
{
|
||||
console.log('证件截止日期')
|
||||
//证件截止日期
|
||||
//如果已经勾选了长期
|
||||
if (this.userInfo.effectiveDateType) {
|
||||
//清空数据并返回
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
return
|
||||
}
|
||||
//如果录入日期早于当前日期
|
||||
if (Date.parse(val) < Date.parse(new Date())) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
return this.$toast('您的证件已过期')
|
||||
}
|
||||
//不同证件类型的判断
|
||||
// if (this.userInfo.idType) {
|
||||
// //获取年龄
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
// console.log(age)
|
||||
// //年龄在16-25周岁之间
|
||||
// if (age >= 16 && age <= 25) {
|
||||
// if (new Date(val).getFullYear() - new Date(this.userInfo.certificateValidate).getFullYear() != 10) {
|
||||
// this.userInfo.certiexpiredate = ''
|
||||
// this.$refs.certiexpiredate.date = ''
|
||||
// return this.$toast('16周岁~25周岁的证件有效期为10年')
|
||||
// }
|
||||
// //年龄在26-45周岁之间
|
||||
// } else if (age >= 26 && age <= 45) {
|
||||
// if (new Date(val).getFullYear() - new Date(this.userInfo.certificateValidate).getFullYear() != 20) {
|
||||
// this.userInfo.certiexpiredate = ''
|
||||
// this.$refs.certiexpiredate.date = ''
|
||||
// return this.$toast('26周岁~45周岁的证件有效期为20年')
|
||||
// }
|
||||
// //此外的年龄段不支持
|
||||
// } else {
|
||||
// this.userInfo.certiexpiredate = ''
|
||||
// this.$refs.certiexpiredate.date = ''
|
||||
// return this.$toast('身份证不支持此年龄段')
|
||||
// }
|
||||
// }
|
||||
}
|
||||
break
|
||||
case '2':
|
||||
{
|
||||
//出生日期
|
||||
//如果录入日期晚于当前日期
|
||||
if (Date.parse(val) > Date.parse(new Date())) {
|
||||
this.userInfo.birthday = ''
|
||||
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)
|
||||
// }
|
||||
}
|
||||
break
|
||||
case '5':
|
||||
{
|
||||
//被保人出生日期
|
||||
//如果录入日期晚于当前日期
|
||||
if (Date.parse(val) > Date.parse(new Date())) {
|
||||
this.userInfo.insuredBirthday = ''
|
||||
this.$refs.insuredBirthday.date = ''
|
||||
return this.$toast('出生日期不晚于当日')
|
||||
}
|
||||
}
|
||||
break
|
||||
case '6':
|
||||
{
|
||||
//指定生效日期
|
||||
//如果录入日期晚于当前日期
|
||||
if (Date.parse(val) < Date.parse(new Date())) {
|
||||
this.userInfo.birthday = ''
|
||||
this.$refs.birthday.date = ''
|
||||
return this.$toast('当前日期早于当日')
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
//选择客户
|
||||
chooseCustomer(data) {
|
||||
console.log(data)
|
||||
console.log(data[0][0], data[0][1])
|
||||
this.customerShowPicker = false
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '投被保人信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
if (data[0][1] == '0') {
|
||||
let { customerName, customerSex } = data[0][0]
|
||||
this.userInfo.name = customerName //用户名
|
||||
this.userInfo.sex = String(customerSex) //性别
|
||||
|
||||
this.userInfo.birthday = data[0][0].birthday //出生日期
|
||||
this.userInfo.idType = data[0][0].customerIdType //证件类型
|
||||
this.userInfo.idNo = data[0][0].customerIdNumber //证件类别
|
||||
|
||||
this.userInfo.mobile = data[0][0].customerPhone //移动电话
|
||||
this.userInfo.homeProvince = data[0][0].homeProvince //家庭省
|
||||
this.userInfo.homeCity = data[0][0].homeCity //家庭市
|
||||
this.userInfo.homeArea = data[0][0].homeArea //家庭区
|
||||
this.userInfo.homeAddress = data[0][0].homeAddress //家庭详细地址
|
||||
|
||||
// 计算年龄
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
|
||||
this.getRelatedData(this.userInfo.idNo,'1')
|
||||
} else if (data[0][1] == '1') {
|
||||
let { customerName, customerSex } = data[0][0]
|
||||
this.insuredInfo.name = customerName //用户名
|
||||
this.insuredInfo.sex = String(customerSex) //性别
|
||||
|
||||
this.insuredInfo.birthday = data[0][0].birthday //出生日期
|
||||
this.insuredInfo.idType = data[0][0].customerIdType //证件类型
|
||||
this.insuredInfo.idNo = data[0][0].customerIdNumber //证件类别
|
||||
|
||||
// 计算年龄
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
|
||||
// 计算年龄
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
|
||||
this.getRelatedData(this.insuredInfo.idNo,'2')
|
||||
}
|
||||
// console.log(data, val)
|
||||
},
|
||||
nextStep() {
|
||||
// console.log(this.userInfo.idType)
|
||||
// console.log(this.userInfo.salarySource)
|
||||
// console.log(this.userInfo.otherSalarySource)
|
||||
//表单校验, 成功跳转
|
||||
this.$validator.validate().then(valid => {
|
||||
if (true === valid) {
|
||||
// localStorage.chooseProductCodesNew = localStorage.chooseProductCodes
|
||||
// 计算年龄
|
||||
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
// 如果是未成年人
|
||||
if (age < 18) {
|
||||
return this.$toast('投保人必须是具有民事行为能力且有固定职业和收入的自然人，请确定')
|
||||
}
|
||||
|
||||
//如果证件类型是身份证
|
||||
if (this.userInfo.idType == '1') {
|
||||
console.log('证件类型是身份证')
|
||||
//校验性别是否与身份证号码位相符
|
||||
if (this.userInfo.idNo.length == '15') {
|
||||
//15位身份证第15位是性别位, 奇男偶女
|
||||
let sexSign = this.userInfo.idNo.substr(14, 1)
|
||||
console.log('性别位' + sexSign)
|
||||
if ((parseInt(sexSign) % 2 == 0 && this.userInfo.sex != 1) || (parseInt(sexSign) % 2 != 0 && this.userInfo.sex != 0)) {
|
||||
return this.$toast('性别录入与身份证不符')
|
||||
}
|
||||
|
||||
//15位身份证第7-12位是生日位, 年月日
|
||||
let birthSign = this.userInfo.idNo.substr(6, 6)
|
||||
console.log('生日位' + birthSign)
|
||||
if (
|
||||
this.userInfo.birthday.substr(2, 2) != birthSign.substr(0, 2) ||
|
||||
this.userInfo.birthday.substr(5, 2) != birthSign.substr(2, 2) ||
|
||||
this.userInfo.birthday.substr(8, 2) != birthSign.substr(4, 2)
|
||||
) {
|
||||
return this.$toast('生日录入与身份证不符')
|
||||
}
|
||||
} else if (this.userInfo.idNo.length == '18') {
|
||||
//18位身份证第17位是性别位, 奇男偶女
|
||||
let sexSign = this.userInfo.idNo.substr(16, 1)
|
||||
if ((parseInt(sexSign) % 2 == 0 && this.userInfo.sex != 1) || (parseInt(sexSign) % 2 != 0 && this.userInfo.sex != 0)) {
|
||||
return this.$toast('性别录入与身份证不符')
|
||||
}
|
||||
|
||||
//18位身份证第7-14位是生日位, 年月日
|
||||
let birthSign = this.userInfo.idNo.substr(6, 8)
|
||||
if (
|
||||
this.userInfo.birthday.substr(0, 4) != birthSign.substr(0, 4) ||
|
||||
this.userInfo.birthday.substr(5, 2) != birthSign.substr(4, 2) ||
|
||||
this.userInfo.birthday.substr(8, 2) != birthSign.substr(6, 2)
|
||||
) {
|
||||
return this.$toast('生日录入与身份证不符')
|
||||
}
|
||||
}
|
||||
|
||||
// 证件号码规则校验
|
||||
if (!idNoCheck.isIdno(this.userInfo.idNo)) {
|
||||
console.log('证件号码校验有误')
|
||||
return this.$toast('您填写的证件号码有误')
|
||||
}
|
||||
|
||||
// 年龄在 16-25 周岁之间
|
||||
if (age >= 16 && age <= 25) {
|
||||
console.log('年龄在16-25周岁之间')
|
||||
if (Date.parse(this.userInfo.certiexpiredate) - Date.parse(new Date()) > Date.parse('1980-01-01')) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
this.effectiveDateTypeAble = true
|
||||
return this.$toast('证件有效期不正常，16周岁至25周岁公民身份证有效期应小于等于10年')
|
||||
}
|
||||
//年龄在 26-45 周岁之间
|
||||
} else if (age >= 26 && age <= 45) {
|
||||
console.log('年龄在26-45周岁之间')
|
||||
if (Date.parse(this.userInfo.certiexpiredate) - Date.parse(new Date()) > Date.parse('1990-01-01')) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
this.effectiveDateTypeAble = true
|
||||
return this.$toast('证件有效期不正常，26周岁至45周岁公民身份证有效期应小于等于20年')
|
||||
}
|
||||
}
|
||||
//证件类型是户口本
|
||||
} else if (this.userInfo.idType == '2') {
|
||||
if (age > 16) {
|
||||
return this.$toast('客户年龄在16周岁以上，不能使用户口本作为有效证件')
|
||||
}
|
||||
} else if (this.userInfo.idType == '3') {
|
||||
if (age >= 2) {
|
||||
return this.$toast('客户年龄在2周岁及以上，不能使用出生证作为有效证件')
|
||||
}
|
||||
}
|
||||
// else if (this.userInfo.idType == '4' && this.userInfo.idNo.length < 3) {
|
||||
// console.log('证件类型是护照')
|
||||
// return this.$toast('护照须大于等于3个字符')
|
||||
// //证件是港澳居民通行证
|
||||
// } else if (this.userInfo.idType == '5') {
|
||||
// console.log('证件类型是港澳居民通行证')
|
||||
// if (this.userInfo.idNo.length != 9) {
|
||||
// return this.$toast('证件类型为港澳居民通行证的，证件号码须为9位')
|
||||
// } else if (!/^(H|M)[0-9]{8}$/.test(this.userInfo.idNo)) {
|
||||
// return this.$toast('证件类型为港澳居民通行证的，证件号码首位字母为"H"/"M",证件号码第2位至第9位为阿拉伯数字')
|
||||
// }
|
||||
// //证件是台湾居民通行证
|
||||
// } else if (this.userInfo.idType == '6' && this.userInfo.idNo.length != 8) {
|
||||
// console.log('证件类型是台湾居民通行证')
|
||||
// return this.$toast('证件类型为台湾居民通行证的，证件号码须为8位数字')
|
||||
// }
|
||||
|
||||
//投保人需大于等于 18 周岁
|
||||
// if (age < 18) {
|
||||
// return this.$toast('投保人必须是具有民事行为能力且有固定职业和收入的自然人，请确定')
|
||||
// }
|
||||
|
||||
// //职业类型不能为 '一般学生'
|
||||
// if (this.userInfo.occupationCode == '2099907') {
|
||||
// this.userInfo.occupationName = ''
|
||||
// return this.$toast('学生不可以作为投保人，请更换投保人投保')
|
||||
// }
|
||||
|
||||
// if (this.userInfo.salarySource == '4') {
|
||||
// if (!this.userInfo.otherSalarySource) {
|
||||
// return this.$toast('请输入其它收入来源')
|
||||
// }
|
||||
// }
|
||||
|
||||
//如果是已婚
|
||||
if ((this.userInfo.sex == '0' && age < 22) || (this.userInfo.sex == '1' && age < 20)) {
|
||||
if (this.userInfo.marriage != '2') {
|
||||
return this.$toast('投保人不符合国家婚姻法定年龄')
|
||||
}
|
||||
}
|
||||
// if (this.userInfo.marriage == '1') {
|
||||
// if (this.userInfo.sex == '0' && age < 22) {
|
||||
// return this.$toast('年龄与婚姻状况不符')
|
||||
// } else if (this.userInfo.sex == '1' && age < 20) {
|
||||
// return this.$toast('年龄与婚姻状况不符')
|
||||
// }
|
||||
// }
|
||||
|
||||
this.infoUpdate()
|
||||
// console.log('success')
|
||||
} else {
|
||||
this.$toast(this.$validator.errors.all()[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
//信息变更
|
||||
infoUpdate() {
|
||||
//local 里面是否存有险种信息
|
||||
// let chooseProductCodes = localStorage.chooseProductCodes && JSON.parse(localStorage.chooseProductCodes)
|
||||
// if (chooseProductCodes && chooseProductCodes.length) {
|
||||
// console.log('haha')
|
||||
// //获取险种列表
|
||||
// //取出local中的投保人信息
|
||||
// let saleInsuredInfo = JSON.parse(localStorage.saleInsuredInfo)
|
||||
// //如果 性别, 出生日期, 有无社保, 职业 发生变化
|
||||
// if (this.userInfo.sex != saleInsuredInfo.sex || this.userInfo.birthday != saleInsuredInfo.birthday) {
|
||||
// console.log('hehe')
|
||||
// //提示用户
|
||||
// return this.$dialog
|
||||
// .confirm({
|
||||
// className: 'dialog-delete',
|
||||
// title: '提示',
|
||||
// message: '当前信息已经发生改变，有可能影响险种费率，是否确认修改并清除险种信息?',
|
||||
// cancelButtonColor: '#E9332E',
|
||||
// confirmButtonColor: '#FFFFFF'
|
||||
// })
|
||||
// .then(() => {
|
||||
// // on confirm
|
||||
// this.save('isShow=1')
|
||||
// console.log('success')
|
||||
// })
|
||||
// .catch(() => {
|
||||
// // on cancel
|
||||
// return
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
this.save()
|
||||
},
|
||||
async save(str = '') {
|
||||
// console.log('this.riskDTOLst', this.riskDTOLst)
|
||||
let params = {
|
||||
orderDTO: {
|
||||
orderInfoDTO: {
|
||||
bnfFlag: '0'
|
||||
},
|
||||
appntDTO: {},
|
||||
insuredDTOs: [
|
||||
{
|
||||
riskDTOLst: this.riskDTOLst
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
params.orderDTO.appntDTO = this.userInfo
|
||||
params.orderDTO.insuredDTOs = [this.insuredInfo]
|
||||
//组装险种提交数据
|
||||
let [mainRiskCode, riskDTOLst] = ['', []]
|
||||
let rollInResult = '' //校验预计转入保费结果
|
||||
this.chooseProducts.forEach((item, index) => {
|
||||
console.log('itemssss', item)
|
||||
if (item.isMainRisk == 0) {
|
||||
mainRiskCode = item.productCode
|
||||
}
|
||||
let riskItem = {
|
||||
isMainRisk: item.isMainRisk,
|
||||
riskName: item.riskName,
|
||||
riskType: item.riskType,
|
||||
riskCode: item.productCode,
|
||||
mainRiskCode: mainRiskCode,
|
||||
prem: this.trialList[index] && this.trialList[index].prem,
|
||||
standPrem: this.trialList[index] && this.trialList[index].standPrem,
|
||||
predictTransferPrem: item.predictTransferPrem,
|
||||
thirdInsuraceNo: this.policyNo,
|
||||
mult: this.mult
|
||||
}
|
||||
if (item.hasPredictTransferPrem && item.hasPredictTransferPrem === '0') {
|
||||
//增加万能险 预计转入保费校验
|
||||
rollInResult = this.rollInCheck(item.predictTransferPrem)
|
||||
} else {
|
||||
rollInResult = true
|
||||
}
|
||||
//责任险保存参数构建
|
||||
if (this.trialList[index].duty) {
|
||||
riskItem['dutyLst'] = this.trialList[index].duty
|
||||
//930折中方案，责任险分档
|
||||
riskItem['amt'] = this.trialList[index].amt
|
||||
}
|
||||
//保费算保额
|
||||
if (this.trialList[index].trialType == '1') {
|
||||
riskItem['amt'] = this.trialList[index].amt
|
||||
}
|
||||
//万能型产品保费赋值给保额
|
||||
if (this.trialList[index].productCode == 'GFRS_M0003') {
|
||||
riskItem['amt'] = this.trialList[index].prem
|
||||
}
|
||||
// //豁免险保额处理
|
||||
// if (item.isRemit == '0') {
|
||||
// this.trialInfos[index].amt = this.trialList[0].prem
|
||||
// }
|
||||
// console.log()
|
||||
// riskItem = Object.assign(riskItem, this.trialInfos[index])
|
||||
riskDTOLst.push(riskItem)
|
||||
})
|
||||
if (!rollInResult) {
|
||||
return
|
||||
}
|
||||
params.orderDTO.insuredDTOs[0].riskDTOLst = riskDTOLst
|
||||
|
||||
let resultData = await saveOrUpdateCard(params)
|
||||
|
||||
if (resultData.result == 0) {
|
||||
console.log(' resultData.orderNo', resultData.orderNo)
|
||||
//存储被保人信息
|
||||
// let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
// localStorage.saleInsuredInfo = JSON.stringify({
|
||||
// birthday: this.userInfo.birthday,
|
||||
// name: this.userInfo.name,
|
||||
// sex: this.userInfo.sex,
|
||||
// idType: this.userInfo.idType,
|
||||
// age
|
||||
// })
|
||||
// this.userInfo.age = age
|
||||
// localStorage.saleInsuredInfo = JSON.stringify(this.userInfo)
|
||||
// console.log(this.userInfo)
|
||||
|
||||
localStorage.orderNo = resultData.orderNo
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
url: location.origin + `/#/cardList/pay`
|
||||
},
|
||||
routerInfo: {
|
||||
path: `/cardList/pay`
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$toast(resultData.resultMessage)
|
||||
}
|
||||
},
|
||||
//区域选择
|
||||
sureArea(area, type) {
|
||||
switch (type) {
|
||||
case '1': //单位地址
|
||||
this.areaName = getAreaName(area)
|
||||
;[this.userInfo.companyProvince, this.userInfo.companyCity, this.userInfo.companyArea] = [area[0].code, area[1].code, area[2].code]
|
||||
this.areaShow = false
|
||||
break
|
||||
case '2': //家庭地址
|
||||
this.homeName = getAreaName(area)
|
||||
;[this.userInfo.homeProvince, this.userInfo.homeCity, this.userInfo.homeArea] = [area[0].code, area[1].code, area[2].code]
|
||||
this.homeShow = false
|
||||
break
|
||||
case '3': //户籍
|
||||
this.census = getAreaName(area)
|
||||
;[this.userInfo.householdProvince, this.userInfo.householdCity] = [area[0].code, area[1].code]
|
||||
this.censusShow = false
|
||||
break
|
||||
}
|
||||
},
|
||||
//获取身份证扫描信息
|
||||
getIdentityInfo(data) {
|
||||
getIdentityInfo(this, data, '1')
|
||||
},
|
||||
// getIdentityInfo(data) {
|
||||
// console.log(data)
|
||||
// if (data.name && data.name != '待识别') {
|
||||
// this.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
|
||||
// this.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
|
||||
// this.userInfo.name = data.name
|
||||
// this.userInfo.idNo = data.idNo
|
||||
// this.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
|
||||
// this.userInfo.sex = data.gender == '男' ? '0' : '1'
|
||||
// }
|
||||
// this.isScan = false
|
||||
// this.$jump({
|
||||
// flag: 'navigation',
|
||||
// extra: {
|
||||
// title: '投保人信息',
|
||||
// hiddenRight: '1'
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
getRelatedData(val, ind) {
|
||||
if (ind == '1') {
|
||||
if (this.userInfo.idType != '1') {
|
||||
return
|
||||
}
|
||||
//如果证件校验不通过,恢复默认值
|
||||
if (idToData(val).text) {
|
||||
;[this.userInfo.idNo, this.userInfo.sex, this.userInfo.birthday] = ['', '0', '']
|
||||
return this.$toast(idToData(val).text)
|
||||
}
|
||||
this.userInfo.birthday = idToData(val).birthday
|
||||
this.userInfo.sex = idToData(val).sex
|
||||
}
|
||||
if (ind == '2') {
|
||||
if (this.insuredInfo.idType != '1') {
|
||||
return
|
||||
}
|
||||
//如果证件校验不通过,恢复默认值
|
||||
if (idToData(val).text) {
|
||||
;[this.insuredInfo.idNo, this.insuredInfo.sex, this.insuredInfo.birthday] = ['', '0', '']
|
||||
return this.$toast(idToData(val).text)
|
||||
}
|
||||
this.insuredInfo.birthday = idToData(val).birthday
|
||||
this.insuredInfo.sex = idToData(val).sex
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
//清理计时器
|
||||
console.log('123')
|
||||
window.clearInterval(this.timeId)
|
||||
this.timeId = null
|
||||
this.countDown = 60
|
||||
this.codeDisabled = false
|
||||
}
|
||||
// watch: {
|
||||
// 'userInfo.idNo': {
|
||||
// handler(newName, oldName) {
|
||||
// // console.log('obj.a changed');
|
||||
// if(newName != oldName) {
|
||||
// this.getRelatedData(this.userInfo.idNo)
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// deep: true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.insured-info-container {
|
||||
/deep/.van-checkbox {
|
||||
margin-left: auto;
|
||||
}
|
||||
/deep/.van-radio {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.van-checkbox__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
118
src/views/ebiz/cardList/js/methods.js
Normal file
118
src/views/ebiz/cardList/js/methods.js
Normal file
@@ -0,0 +1,118 @@
|
||||
//点击弹出组件
|
||||
export function selectComp(that, index, type = '') {
|
||||
that.currentPopupIndex = index
|
||||
let title = ''
|
||||
if (index == 1) {
|
||||
;[that.customerShowPicker, title] = [true, '客户列表']
|
||||
} else if (index == 2) {
|
||||
;[that.occupationShowPicker, title] = [true, '职业类别']
|
||||
} else if (index == 3) {
|
||||
if (type == '1') {
|
||||
//投保人
|
||||
localStorage.scanFromInsured = 'true'
|
||||
} else if (type == '2') {
|
||||
//被保人
|
||||
localStorage.scanFromInsured = 'false'
|
||||
}
|
||||
;[that.isScan, title] = [true, '身份证扫描']
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
that.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title,
|
||||
hiddenLeft: '1'
|
||||
}
|
||||
})
|
||||
closeBtn(that)
|
||||
}, 400)
|
||||
}
|
||||
|
||||
// 关闭按钮的显示
|
||||
function closeBtn(that) {
|
||||
that.$jump({
|
||||
flag: 'webview_right_button',
|
||||
extra: {
|
||||
btns: [
|
||||
{
|
||||
img: that.$assetsUrl + 'images/del-close.png',
|
||||
route: { flag: '', extra: {} }
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取身份证扫描信息
|
||||
/**
|
||||
*
|
||||
* @param {*} that 上下文
|
||||
* @param {*} data 扫描数据
|
||||
* @param {*} type 1 投保人 2 被保人
|
||||
*/
|
||||
export function getIdentityInfo(that, data, type) {
|
||||
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 (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
|
||||
let title = type == '1' ? '投保人信息' : '被保人信息'
|
||||
that.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title,
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
}
|
||||
52
src/views/ebiz/cardList/js/verification.js
Normal file
52
src/views/ebiz/cardList/js/verification.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import changeFifteenToEighteen from '@/assets/js/utils/changeFifteenToEighteen'
|
||||
import idNoCheck from '@/assets/js/utils/idNoCheck'
|
||||
import utilsAge from '@/assets/js/utils/age'
|
||||
|
||||
//身份证带出出生日期,性别,年龄
|
||||
export function idToData(idNo) {
|
||||
//非空
|
||||
if (!idNo.trim()) {
|
||||
return {
|
||||
text: '证件号码不能为空'
|
||||
}
|
||||
}
|
||||
|
||||
// 证件号码规则校验
|
||||
if (!idNoCheck.isIdno(idNo)) {
|
||||
return {
|
||||
text: '您填写的证件号码有误'
|
||||
}
|
||||
}
|
||||
|
||||
//如果是15位身份证号先转为18位
|
||||
if (idNo.length == 15) {
|
||||
idNo = changeFifteenToEighteen(idNo)
|
||||
}
|
||||
let birthday = getBirthById(idNo)
|
||||
let age = utilsAge.getAge(birthday, new Date())
|
||||
let sex = getSexById(idNo)
|
||||
return {
|
||||
birthday,
|
||||
age,
|
||||
sex
|
||||
}
|
||||
}
|
||||
|
||||
function getBirthById(idNo) {
|
||||
// 获取生日
|
||||
var year = idNo.substr(6, 4)
|
||||
var month = idNo.substr(10, 2)
|
||||
var day = idNo.substr(12, 2)
|
||||
return year + '-' + month + '-' + day
|
||||
}
|
||||
|
||||
function getSexById(idNo) {
|
||||
// 获取性别
|
||||
if (idNo.charAt(16) >= '0' && idNo.charAt(16) <= '9') {
|
||||
if (parseInt(idNo.charAt(16)) % 2 == 0) {
|
||||
return '1'
|
||||
} else {
|
||||
return '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
267
src/views/ebiz/cardList/productDetails.vue
Normal file
267
src/views/ebiz/cardList/productDetails.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="chanpingxiangqing-wxa">
|
||||
<div class="mt10">
|
||||
<img v-for="(items, id) in introductImages" :key="id" :src="items" alt="产品详情" width="100%" />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import icon1 from '@/assets/images/u10211.jpg'
|
||||
import icon2 from '@/assets/images/u10213.png'
|
||||
import icon3 from '@/assets/images/u10215.png'
|
||||
import { Cell, Toast } from 'vant'
|
||||
import { getProductDetails, getProductInfo, insureTrial } from '@/api/ebiz/cardList/cardList.js'
|
||||
export default {
|
||||
name: 'Chanpingxiangqing.vue',
|
||||
components: {
|
||||
[Cell.name]: Cell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
introductImages: [],
|
||||
docuList: [],
|
||||
productCode: '',
|
||||
results:[],
|
||||
trialInfos: []
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
let code = this.$route.params.productDetailCode
|
||||
console.log(code)
|
||||
await this.getData(code)
|
||||
await this.getProductDetail()
|
||||
await this.insureTrial()
|
||||
},
|
||||
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'
|
||||
}
|
||||
})
|
||||
},
|
||||
async getData(code) {
|
||||
let data = {
|
||||
itemCode: code,
|
||||
platform: 'app'
|
||||
}
|
||||
await getProductDetails(data)
|
||||
.then(res => {
|
||||
console.log('res', res)
|
||||
if (res.result == 0) {
|
||||
// 获取产品特色图片
|
||||
this.introductImages = res.productShowInfo.introductImages
|
||||
// 获取产品资料文件
|
||||
this.docuList = res.productShowInfo.documents
|
||||
this.productCode = res.productShowInfo.itemProductDTOS[0].productCode
|
||||
this.results = res.productShowInfo.itemProductDTOS[0]
|
||||
console.log(' this.resultresultss', this.results)
|
||||
} else {
|
||||
Toast.fail(res.resultMessage)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('errerr', err)
|
||||
})
|
||||
},
|
||||
async getProductDetail() {
|
||||
let that = this
|
||||
|
||||
let data = {
|
||||
platform: 'app',
|
||||
productCodes: [that.productCode],
|
||||
type: '1'
|
||||
}
|
||||
console.log('data', data)
|
||||
await getProductInfo(data)
|
||||
.then(res => {
|
||||
if (res.result == 0) {
|
||||
this.trialInfos = res.trialDTOS[0].productTrialInfoDTO
|
||||
console.log('this.trialInfos', this.trialInfos)
|
||||
let resultData = res.trialDTOS[0]
|
||||
if (resultData.productTrialInfoDTO.dutyGroup != null) {
|
||||
resultData.productTrialInfoDTO.dutyGroup.map(item => {
|
||||
if (item.dutyName == '意外身故/伤残保险金') {
|
||||
item.defaultDutyAmt = '50'
|
||||
}
|
||||
})
|
||||
}
|
||||
//保存附加险
|
||||
localStorage.addtionRiskLst = JSON.stringify(resultData.productTrialInfoDTO.addtionRiskLst)
|
||||
// console.log('resultData', resultData)
|
||||
localStorage.isAutoPay = resultData.isAutoPay
|
||||
localStorage.isRenew = resultData.isRenew
|
||||
let calFactorLst = this.getFactorList(resultData)
|
||||
let hasAddtionRisk = resultData.productTrialInfoDTO.addtionRiskLst ? true : false
|
||||
console.log('that.results.riskName', that.results.riskName)
|
||||
let currentProductInfo = {
|
||||
calFactorLst,
|
||||
hasAddtionRisk,
|
||||
isMainRisk: 0,
|
||||
riskType: resultData.riskType,
|
||||
riskName: that.results.productName,
|
||||
productCode: that.results.productCode,
|
||||
mainRiskCode: that.results.productCode,
|
||||
documentDTOS: resultData.productTrialInfoDTO.documentDTOS,
|
||||
influences: resultData.productTrialInfoDTO.influences,
|
||||
isRemit: resultData.productTrialInfoDTO.isRemit,
|
||||
hasPredictTransferPrem: resultData.productTrialInfoDTO.hasPredictTransferPrem, //建议书使用 是否展示预计转入保费
|
||||
predictTransferPrem: null //建议书使用 预计转入保费字段
|
||||
}
|
||||
|
||||
//构建险种数组
|
||||
let productsData
|
||||
// if (localStorage.chooseProducts) {
|
||||
// productsData = JSON.parse(localStorage.chooseProducts)
|
||||
// productsData.push(currentProductInfo)
|
||||
// } else {
|
||||
productsData = [currentProductInfo]
|
||||
console.log('productsDataproductsData', productsData)
|
||||
// }
|
||||
|
||||
//保存选择险种
|
||||
localStorage.chooseProducts = JSON.stringify(productsData)
|
||||
} else {
|
||||
Toast.fail(res.resultMessage)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('errerr', err)
|
||||
})
|
||||
},
|
||||
insureTrial() {
|
||||
let that = this
|
||||
// 获取卡单列表
|
||||
let data = {
|
||||
trialInfos: [{ productCode: that.productCode }]
|
||||
}
|
||||
|
||||
insureTrial(data)
|
||||
.then(res => {
|
||||
console.log('resrrrrrr', res)
|
||||
if (res.result == 0) {
|
||||
localStorage.trialList = JSON.stringify(res.trialList)
|
||||
} else {
|
||||
Toast.fail(res.resultMessage)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('errerr', err)
|
||||
})
|
||||
},
|
||||
//构建险种因子列表
|
||||
getFactorList(resultData) {
|
||||
let productTrialInfoDTO = resultData.productTrialInfoDTO
|
||||
console.log(productTrialInfoDTO, 'wode')
|
||||
let calFactorLst = resultData.productTrialInfoDTO.calFactorLst
|
||||
console.log('calFactorLst', calFactorLst)
|
||||
|
||||
calFactorLst.forEach(item => {
|
||||
item['isMainRisk'] = 0
|
||||
item.columns = []
|
||||
if (item.type == 0) {
|
||||
//1、type=0 select 2、type=1 input+stepper
|
||||
productTrialInfoDTO[item.code].forEach(factor => {
|
||||
if (factor.defaultValue == 0) {
|
||||
item.showContent = factor.showContent
|
||||
if (factor[item.code + 'Flag'] != undefined) {
|
||||
item[item.code] = factor[item.code]
|
||||
item[item.code + 'Flag'] = factor[item.code + 'Flag']
|
||||
item.hasFlag = '1'
|
||||
} else {
|
||||
item[item.code] = factor[item.code]
|
||||
}
|
||||
}
|
||||
item.columns.push({ text: factor.showContent, value: factor[item.code], flag: factor[item.code + 'Flag'] })
|
||||
})
|
||||
} else if (item.type == 1) {
|
||||
//按年龄选择
|
||||
productTrialInfoDTO[item.code].forEach(factor => {
|
||||
item = Object.assign(item, factor)
|
||||
})
|
||||
if (item.code == 'inputPrem') {
|
||||
item['inputPrem'] = Number(item.minPrem) * Number(item.moneyUnit)
|
||||
} else {
|
||||
item['amt'] = Number(item.minAmt) * Number(item.moneyUnit)
|
||||
}
|
||||
}
|
||||
//规则储存
|
||||
item['rules'] = productTrialInfoDTO[item.code]
|
||||
})
|
||||
// // 用于意外险初始化保额
|
||||
// calFactorLst.map(item => {
|
||||
// if (item.code == '"dutyGroup"') {
|
||||
// item.rules.map(factor => {
|
||||
// factor[0].defaultDutyAmt = 50
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
return calFactorLst
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user