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

Merge branch 'feature/GFRS-222【0423】续期管理-续期列表' into dev

Browse Source
This commit is contained in:
na.guo
2020-09-01 18:48:33 +08:00
parent 86b004d6fe 54ac27310b
commit 2190b5640e
8 changed files with 1252 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/ebiz/renewalManage/renewalManage.js
View File

@@ -1,6 +1,21 @@
import request from '@/assets/js/utils/request'
import getUrl from '@/assets/js/utils/get-url'
//获取续期客户列表
export function getRenewalCustomerList(data) {
return request({
url: getUrl('/data/Customer/customerList', 1), //0=》mock数据 1=》正式数据
method: 'post',
data
})
}
//获取续期保单列表
export function getPolicyList(data) {
return request({
url: getUrl('/renewal/renewal/getPolicyList', 1), //0=》mock数据 1=》正式数据
method: 'post',
data
})
}
//获取续期列表
export function getList(data) {
return request({
@@ -36,3 +51,12 @@ export function sendMsg(data) {
data
})
}
// 获取失效/终止保单列表
export function getInvalidOrderList(data) {
return request({
url: getUrl('/sale/policy/policyListAgent', 1),
method: 'post',
data
})
}

30
src/router/ebiz/renewalManage.js
View File

@@ -1,5 +1,8 @@
const list = () => import('@/views/ebiz/renewalManage/List')
const customerList = () => import('@/views/ebiz/renewalManage/customerList')
const policyList = () => import('@/views/ebiz/renewalManage/policyList')
const detail = () => import('@/views/ebiz/renewalManage/Detail')
const policyDetail = () => import('@/views/ebiz/renewalManage/policyDetail')
const msgTemplate = () => import('@/views/ebiz/renewalManage/MsgTemplate')
export default [
{
@@ -11,6 +14,33 @@ export default [
index: 1
}
},
{
path: '/renewalManage/customerList',
name: 'customerList',
component: customerList,
meta: {
title: '客户续期清单',
index: 1
}
},
{
path: '/renewalManage/policyList',
name: 'policyList',
component: policyList,
meta: {
title: '保单列表',
index: 1
}
},
{
path: '/renewalManage/policyDetail',
name: 'policyDetail',
component: policyDetail,
meta: {
title: '保单详情',
index: 1
}
},
{
path: '/renewalManage/detail/:contNo/:payToDate/:payFlag',
name: 'renewalManageDetail',

76
src/views/ebiz/renewalManage/Detail.vue
View File

@@ -14,23 +14,35 @@
<div class="resultTitle">续期扣款失败</div>
</div>
<div v-else-if="$route.params.payFlag === '3'" class="status">
<img src="@/assets/images/renewalManage/u51859.png" />
<div class="resultTitle">正在扣款</div>
<img src="@/assets/images/renewalManage/u17218.png" />
<div class="resultTitle">续期扣款中</div>
</div>
</div>
<div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">保单号</div>
<div class="cellRight">{{ renewalDTO.contNo }}</div>
<div class="cellRight contNo" @click="toDetail">{{ renewalDTO.contNo }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">产品名称</div>
<div class="cellLeft">险种名称</div>
<div class="cellRight">{{ renewalDTO.riskName }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">金额(元)</div>
<div class="cellRight">{{ renewalDTO.money }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">保额(元)</div>
<div class="cellRight">{{ renewalDTO.money }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">投保人</div>
@@ -39,33 +51,45 @@
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">金额</div>
<div class="cellRight">{{ renewalDTO.money }}</div>
<div class="cellLeft">被保人</div>
<div class="cellRight">{{ renewalDTO.accName }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">账号</div>
<div class="cellLeft">转账银行</div>
<div class="cellRight">{{ renewalDTO.bankCode }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">转账账号</div>
<div class="cellRight">{{ renewalDTO.bankAccNo }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">缴费次数</div>
<div class="cellLeft">交费次数</div>
<div class="cellRight">{{ renewalDTO.payTimes }}</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">扣款日</div>
<div class="cellLeft">应交日</div>
<div class="cellRight">{{ renewalDTO.payToDate }}</div>
</div>
</div>
<div class="cell" v-if="$route.params.payFlag === '2'">
<div class="wrapper">
<div class="cellLeft">最近转账失败原因</div>
<div class="cellRight">{{ renewalDTO.defaultReson }}</div>
</div>
</div>
</div>
<div class="phone">
<div @click="callSystem">
<van-icon name="phone" class="phoneIcon" />
<span class="mt8 fs14">拨打电话</span>
<span class="fs14">拨打电话</span>
</div>
</div>
</div>
@@ -90,6 +114,18 @@ export default {
this.getDetail()
},
methods: {
toDetail() {
localStorage.setItem('policyNo', this.$route.params.contNo)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/renewalManage/policyDetail`
},
routerInfo: {
path: `/renewalManage/policyDetail`
}
})
},
async getDetail() {
let contNo = this.$route.params.contNo
let payToDate = this.$route.params.payToDate
@@ -100,7 +136,13 @@ export default {
loadingType: 'spinner'
})
let result = await getDetail({ contNo, payToDate, payFlag })
this.renewalDTO = result
if (result.result === '0') {
if (result.content) {
this.renewalDTO = result.content
}
} else {
this.$toast(result.resultMessage)
}
},
//打电话
callSystem() {
@@ -114,6 +156,10 @@ export default {
}
</script>
<style lang="scss" scoped>
.contNo {
color: red;
}
.cellLeft,
.cellRight {
font-size: 14px;
@@ -142,8 +188,8 @@ export default {
.wrapper {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #d7d7d7;
padding: 1em 0;
border-bottom: 1px solid #f5f5f5;
padding: 0.75em 0;
}
.phoneIcon {
@@ -152,8 +198,8 @@ export default {
}
.phone {
position: absolute;
bottom: 30px;
position: fixed;
bottom: 1em;
display: flex;
width: 100%;
justify-content: center;

226
src/views/ebiz/renewalManage/List.vue
View File

@@ -2,7 +2,7 @@
<div class="renewal-manage bg-white">
<div>
<van-sticky>
<div class="list-header">
<div>
<van-search placeholder="请输入保单号/投保人" v-model="searchVal" show-action>
<template slot="action">
<div @click="search">搜索</div>
@@ -11,43 +11,92 @@
</div>
<FieldDatePicter
@confirm="onDateConfirm"
label="扣款日期"
name="扣款日期"
label="应交日"
name="应交日"
:value.sync="payDate"
:maxDate="maxDate"
type="year-month"
:flag="true"
></FieldDatePicter>
<van-tabs v-model="active" sticky @change="tabChange" class="changeTab">
<van-tab title="待扣款" :name="0"></van-tab>
<van-tab title="扣款成功" :name="1"></van-tab>
<van-tab title="应收未收" :name="0"></van-tab>
<van-tab title="已交费" :name="1"></van-tab>
<van-tab title="扣款失败" :name="2"></van-tab>
<van-tab title="正在扣款" :name="3"></van-tab>
<van-tab title="失效/终止" :name="3"></van-tab>
</van-tabs>
</van-sticky>
<van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="">
<div v-for="item in list" :key="item.contNo" class="dataList" @click="goDetail(item)">
<div class="flex justify-content-s dataLine">
<van-list v-if="active !== 3" :immediate-check="false" v-model="loading" :finished="finished" :finished-text="finishedText">
<div v-for="item in list" :key="item.contNo" class="dataList">
<div style="font-size: 16px;" class="flex justify-content-s dataLine">
<div>
<span>保单号：</span><span>{{ item.contNo }}</span>
<span>保单号:</span><span class="ml10">{{ item.contNo }}</span>
</div>
<div>
<span>金额：</span><span class="green">{{ item.money }}</span>
<span>金额:</span><span class="green">{{ item.money }}</span>
</div>
</div>
<div class="dataLine">
投保人：<span>{{ item.appntName }}</span>
<span>投保人:</span><span class="ml10">{{ item.appntName }}</span>
</div>
<div class="dataLine">
被保人：<span>{{ item.insuredName }}</span>
<span>被保人:</span><span class="ml10">{{ item.insuredName }}</span>
</div>
<div class="dataLine">
扣款日：<span>{{ item.payToDate }}</span>
<span>转账银行:</span><span class="ml10">{{ item.bankName }}</span>
</div>
<div class="dataLine">
<span>转账账号:</span><span class="ml10">{{ item.contNo }}</span>
</div>
<div class="dataLine">
<span>险种名称:</span><span class="ml10">{{ item.riskName }}</span>
</div>
<div class="dataLine">
<span>应交日:</span><span class="ml10">{{ item.payToDate }}</span>
</div>
<div class="dataLine detail-wrapper">
<span>保单状态:</span><span class="ml10">{{ item.state | stateFilter }}</span>
<div class="detail-text" @click="goDetail(item)">
<span>详情</span>
<van-icon name="arrow" />
<van-icon class="detail-arrow" name="arrow" />
</div>
</div>
</div>
</van-list>
<div v-if="list && list.length === 0" class="list text-center">
<div v-if="list.length === 0 && active !== 3" class="list text-center">
<img :src="src" />
<div class="mt20">暂无数据</div>
</div>
<van-list v-if="active === 3" :immediate-check="false" v-model="invalidLoading" :finished="invalidFinished" :finished-text="invalidFinishedText">
<div style="padding: 1em; border-bottom: 1px solid #e5e5e5;" class="invalidOrder" v-for="item in invalidList" :key="item.id">
<p class="invalidLine">{{ item.riskName }}</p>
<p class="invalidLine fs14" style="color: #999;">
<span>保单号:</span><span class="ml10">{{ item.policyNo }}</span>
</p>
<p class="invalidLine fs14">
<span>投保人:</span><span class="ml10">{{ item.appntName }}</span>
</p>
<p class="invalidLine fs14">
<span>被保人:</span><span class="ml10">{{ item.insuredName }}</span>
</p>
<p class="invalidLine fs14">
<span>保额(元):</span><span class="ml10">{{ item.amount }}</span>
</p>
<p class="invalidLine fs14">
<span>保单生效日期:</span><span class="ml10">{{ item.cvaliDate }}</span>
</p>
<p class="invalidLine fs14"><span>保单状态:</span><span class="ml10">终止</span></p>
<div class="detail fs14">
<span>保单状态:</span><span class="ml10">{{ item.state | stateFilter }}</span>
<div class="detail-text" @click="toPolicyDetail(item)">
<span>详情</span>
<van-icon name="arrow" />
<van-icon class="detail-arrow" name="arrow" />
</div>
</div>
</div>
</van-list>
<div v-if="invalidList.length === 0 && active === 3" class="list text-center">
<img :src="src" />
<div class="mt20">暂无数据</div>
</div>
@@ -55,9 +104,9 @@
</div>
</template>
<script>
import { Sticky, Tabs, Tab, Col, Row, Search, Field, List } from 'vant'
import { Sticky, Tabs, Tab, Col, Row, Search, Field, List, Icon } from 'vant'
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import { getList } from '@/api/ebiz/renewalManage/renewalManage'
import { getList, getInvalidOrderList } from '@/api/ebiz/renewalManage/renewalManage'
import formatDate from '@/assets/js/utils/date-utils'
export default {
@@ -71,25 +120,31 @@ export default {
[Search.name]: Search,
[Sticky.name]: Sticky,
[FieldDatePicter.name]: FieldDatePicter,
[List.name]: List
[List.name]: List,
[Icon.name]: Icon
},
data() {
return {
loading: false,
invalidLoading: false,
finishedText: '',
finished: true,
invalidFinished: true,
invalidFinishedText: '',
// 扣款日期
payDate: formatDate.formatDate(new Date(), 'yyyy-MM'),
// 搜索内容
searchVal: '',
list: [],
invalidList: [],
active: 0,
isShow: false,
maxDate: new Date(),
errMessage: '',
src: this.$assetsUrl + 'images/background.png'
}
},
created() {
document.title = '续期应收清单'
this.getpolicyList()
},
@@ -97,22 +152,69 @@ export default {
// 获取续期保单列表
async getpolicyList() {
let param = {
payDate: this.payDate,
// 失效/终止状态不限制时间
payDate: this.active === 4 ? '' : this.payDate,
otherNo: this.searchVal,
payFlag: this.active
}
this.$toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
})
let result = await getList(param)
this.list.splice(0)
this.list = result.list ? result.list : []
this.finishedText = ''
let result = await getList(param)
this.finishedText = '没有更多了...'
if (result.result === '0') {
if (result.content) {
this.list = result.content.list ? result.content.list : []
}
this.$toast.clear()
} else {
this.finishedText = ''
this.$toast.clear()
this.$toast(result.resultMessage)
}
},
async getInvalidList(data) {
this.invalidList.splice(0)
this.$toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
})
this.invalidFinishedText = ''
let result = await getInvalidOrderList(data)
this.invalidFinishedText = '没有更多了...'
this.$toast.clear()
if (result.result === '0') {
if (result.policyListDTOList) {
for (let item of result.policyListDTOList) {
if (item.orderStatus === '1') {
this.invalidList.push(item)
}
}
}
} else {
this.invalidFinishedText = ''
this.$toast(result.resultMessage)
}
console.dir(result)
},
// 搜索
search() {
this.getpolicyList()
if (!this.searchVal.trim()) {
this.$toast('请输入保单号/投保人')
return
}
if (this.active === 3) {
this.getInvalidList({ status: '2' })
} else {
this.getpolicyList()
}
},
// 选定日期
onDateConfirm(val) {
@@ -131,23 +233,75 @@ export default {
}
})
},
toPolicyDetail(item) {
localStorage.setItem('policyNo', item.policyNo)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/renewalManage/policyDetail`
},
routerInfo: {
path: `/renewalManage/policyDetail`
}
})
},
// 切换扣款状态tab
tabChange(name) {
this.searchVal = ''
this.active = name
this.getpolicyList()
if (name !== 3) {
this.active = name
this.getpolicyList()
} else {
this.getInvalidList({ status: '2' })
}
}
},
filters: {
stateFilter(val) {
let states = {
'0': '投保中',
'1': '已承保',
'4': '终止'
}
return states[val]
}
}
}
</script>
<style lang="scss" scoped>
.detail-wrapper {
display: flex;
justify-content: flex-start;
}
.detail-arrow {
margin-left: -0.5em;
}
.invalidLine {
margin-bottom: 0.5em;
}
.detail {
display: flex;
align-items: center;
justify-content: flex-end;
}
.detail-text {
display: flex;
margin-left: auto;
align-items: center;
color: red;
}
.dataList {
padding: 1em;
border-bottom: 1px solid #d7d7d7;
border-bottom: 1px solid #e5e5e5;
}
.dataLine {
padding: 0.25em 0;
font-size: 14px;
}
.changeTab {
@@ -169,22 +323,4 @@ export default {
/deep/ .van-field__label {
width: 50%;
}
.list-container {
border-bottom: 1px solid #ebedf0;
.flex {
div:first-child {
width: 62%;
}
div:nth-child(2) {
width: 32%;
}
div {
text-align: left;
}
}
div {
margin: 3px 0;
}
}
</style>

34
src/views/ebiz/renewalManage/compontents/cellLine.vue Normal file
View File

@@ -0,0 +1,34 @@
<!-- -->
<template>
<div class="cellLine" :style="{ fontSize: fontSize + 'px' }">
<span :style="{ color: fontColor }" v-if="title" class="name">{{ title }}:</span>
<span :style="{ color: fontColor }" v-if="text"> {{ text }}</span>
<span v-else> 暂无</span>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {}
},
props: ['title', 'text', 'fontColor', 'fontSize'],
name: 'cellLine',
components: {},
computed: {},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped>
.cellLine {
padding: 3px;
font-size: 12px;
color: #fefefe;
span {
color: #000;
}
}
</style>

335
src/views/ebiz/renewalManage/customerList.vue Normal file
View File

@@ -0,0 +1,335 @@
<template>
<div class="container">
<van-search placeholder="请输入客户姓名/电话" v-model="searchVal" @input="searchList" />
<div v-if="isSuccess">
<div v-if="customerList.length > 0">
<van-index-bar highlight-color="#E9332E" v-if="!searchVal" :index-list="indexList">
<div v-for="(item, index) in customerList" :key="index" class="bg-white mb10">
<van-index-anchor :index="item.key" class="border-gb" />
<div
v-for="(item, index) in customerList[index].list"
:key="index"
class="pr15 h60 flex align-items-c border-gb bg-white mr15"
@click="go('policyList', item)"
>
<img class="w40 ml15" src="../../../assets/images/bnf_avatar.png" />
<div class="ml10 flex1" style="line-height:25px">
<div>{{ item.appntName }}</div>
</div>
</div>
</div>
</van-index-bar>
<div v-else>
<div v-for="(item, index) in newList" :key="index" class="pr15 h60 flex align-items-c border-gb bg-white mr15" @click="go('customerInfo', item)">
<img class="w40 ml15" src="../../../assets/images/bnf_avatar.png" />
<div class="ml10 flex1" style="line-height:25px">
<div>{{ item.appntName }}</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="customerList.length <= 0 || isFlag" class="text-center">
<img class="mt40" src="@/assets/images/pic_page-non.png" />
<div class="fs17 mt40">暂无客户</div>
</div>
<van-popup v-model="show1" position="right" :style="{ width: '70%', height: '100%' }">
<div class="tab pv10 ph20 border-gb">
<p class="fs16 mv10 h30 c-gray-dark">客户筛选</p>
<ul class="fs13 flex justify-content-s flex-wrap">
<li
v-for="(item, index) in tabList1"
:key="index"
@click="selectTab('tab1', index)"
:class="{ active: index == active1 }"
class="pv6 ph10 m5
c-gray-darker"
>
{{ item.name }}
</li>
</ul>
</div>
<div class="tab pv10 ph20 border-gb">
<p>客户来源</p>
<ul class="fs13 flex justify-content-s flex-wrap">
<li
v-for="(item, index) in tabList2"
:key="index"
@click="selectTab('tab2', index)"
:class="{ active: index == active2 }"
class="pv6 ph10 m5 c-gray-darker"
>
{{ item.name }}
</li>
</ul>
</div>
<div class="bottom-btn flex">
<van-button class="green" color="#FEEFD8" @click="reset" v-no-more-click="1000">重置</van-button>
<van-button type="danger" @click="select" v-no-more-click="1000">确定</van-button>
</div>
</van-popup>
</div>
</template>
<script>
import { Search, Cell, IndexBar, IndexAnchor, Popup, Button, Tag } from 'vant'
import { getRenewalCustomerList } from '@/api/ebiz/renewalManage/renewalManage'
export default {
name: 'login',
components: {
[Search.name]: Search,
[Cell.name]: Cell,
[IndexBar.name]: IndexBar,
[IndexAnchor.name]: IndexAnchor,
[Popup.name]: Popup,
[Button.name]: Button,
[Tag.name]: Tag
},
data() {
return {
searchVal: '',
show1: false,
show2: false,
active1: 0,
active2: 0,
isFlag: false,
// type: ['success', 'primary', 'danger', ''],
type: ['success', 'primary', ''],
indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
customerList: [],
newList: [],
isSuccess: false,
tabList1: [
{
name: '全部',
value: ''
},
{
name: '准客户',
value: '0'
},
{
name: '老客户',
value: '1'
}
],
tabList2: [
{
name: '全部',
value: ''
},
{
name: '转介绍',
value: '0'
},
{
name: '缘故',
value: '1'
},
{
name: '陌生',
value: '2'
}
]
}
},
mounted() {
this.getCustomerList() //客户列表查询
},
methods: {
searchList() {
let $this = this
$this.newList = []
if ($this.searchVal) {
$this.customerList.map(function(item) {
item.list.map(function(item) {
if (item.appntName.search($this.searchVal) != -1) {
$this.newList.push(item)
if ($this.length <= 0) {
$this.isFlag = true
}
}
})
})
} else {
$this.getCustomerList()
}
},
selectTab(name, index) {
if (name == 'tab1') {
this.active1 = index
} else if (name == 'tab2') {
this.active2 = index
}
},
select() {
let $this = this
let sxIndex = $this.active1 - 1
let lyIndex = $this.active2 - 1
if (sxIndex < 0) {
sxIndex = ''
}
if (lyIndex < 0) {
lyIndex = ''
}
$this.show1 = false
$this.getCustomerList(sxIndex, lyIndex)
},
reset() {
this.active1 = ''
this.active2 = ''
},
//获取客户列表
getCustomerList(customerType, customerSource) {
let $this = this
$this.customerList = []
let data = {
customerType: customerType,
customerSource: customerSource
}
getRenewalCustomerList(data)
.then(res => {
if (res.result == 0) {
$this.formatData(res)
$this.isSuccess = true
// if ($this.customerList[0].key == '#') {
// let tempObj = $this.customerList[0]
// $this.customerList.splice(0, 1)
// $this.customerList.push(tempObj)
// }
//根据新数据获取筛选列表
$this.newList = []
$this.customerList.map(function(item) {
item.list.map(function(item) {
if (item.customerName.search($this.searchVal) != -1 || item.customerPhone.search($this.searchVal) != -1) {
$this.newList.push(item)
if ($this.length <= 0) {
$this.isFlag = true
}
}
})
})
}
})
.catch(err => {})
},
formatData(data) {
//数据重新组装
// let i
// for (i in data.content) {
// this.customerList.push({
// key: data.content[i].groupByChar,
// list: data.content[i]
// })
// }
var map = {},
dest = []
for (var i = 0; i < data.content.length; i++) {
var ai = data.content[i]
if (!map[ai.groupByChar]) {
dest.push({
key: ai.groupByChar,
list: [ai]
})
map[ai.groupByChar] = ai
} else {
for (var j = 0; j < dest.length; j++) {
var dj = dest[j]
if (dj.groupByChar == ai.groupByChar) {
dj.data.push(ai)
break
}
}
}
}
this.customerList = dest
this.indexList = dest.map(item => {
return item.key
})
},
close() {
this.show2 = false
},
//获取原生通讯录方法
phoneList() {
this.close()
EWebBridge.webCallAppInJs('contactList', {})
},
go(path, item) {
if (item) {
// url = path + '?id=' + encodeURIComponent(id)
localStorage.setItem('customerInfo', JSON.stringify(item))
}
console.log(path, 'path')
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/renewalManage/' + path
},
routerInfo: {
path: path
}
})
this.close()
}
}
}
</script>
<style lang="scss" scoped>
.container {
.van-search__content {
background: #fff !important;
border-radius: 10px;
}
.van-search {
background: none !important;
}
.list {
&:last-child {
border-bottom: none;
}
}
.tab {
p {
line-height: 30px;
}
ul {
li {
border-radius: 4px;
background: #f5f5f5;
&.active {
background: #e9332e;
color: #fff !important;
border: none;
}
}
}
}
.bottom-btn {
width: 100%;
button {
width: 50%;
border: none !important;
}
}
.box {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ededed;
}
}
}
.van-tag--plain {
margin-right: 10px;
}
.van-tag--primary.van-tag--plain {
color: #5ca7de;
}
.van-tag--success.van-tag--plain {
color: #7ed321;
}
</style>

455
src/views/ebiz/renewalManage/policyDetail.vue Normal file
View File

@@ -0,0 +1,455 @@
<template>
<div class="detail-container pb50">
<van-collapse v-model="activeNames">
<!-- 保单信息 -->
<van-collapse-item title="保单信息" name="1" class="pb10 pt10">
<van-cell-group>
<van-cell title="保单号" :value="OrderInfoDTO.contNo" />
<van-cell title="生效日期" :value="OrderInfoDTO.cvaliDate" />
<van-cell title="保单状态" :value="OrderInfoDTO.contState" />
<van-cell title="签收状态" :value="OrderInfoDTO.orderStatusText" />
<van-cell v-if="OrderInfoDTO.receiptDate != null && OrderInfoDTO.receiptDate != ''" title="签收日期" :value="OrderInfoDTO.receiptDate" />
</van-cell-group>
</van-collapse-item>
<!-- 投保人信息 -->
<van-collapse-item title="投保人信息" name="2" class="detail-title pb10">
<van-cell-group>
<van-cell title="投保人" :value="appntDTO.name" />
<van-cell title="性别" :value="appntDTO.sexText" />
<van-cell title="证件类型" :value="appntDTO.idTypeText" />
<van-cell title="证件号码" :value="appntDTO.idNo" />
<van-cell title="联系电话" :value="appntDTO.mobile" />
</van-cell-group>
</van-collapse-item>
<!-- 多被保险人信息 -->
<div v-for="(item, index) in insuredDTOs" :key="index" class="pb10">
<van-collapse-item title="被保险人信息" :name="index + 40" class="pb10">
<van-cell-group>
<!-- <van-cell title="是投保人的" :value="item.relationToAppnt" /> -->
<van-cell title="姓名" :value="item.name" />
<van-cell title="性别" :value="item.sexText" />
<van-cell title="证件类型" :value="item.idTypeText" />
<van-cell title="证件号码" :value="item.idNo" />
<van-cell title="联系电话" :value="item.mobile" />
</van-cell-group>
</van-collapse-item>
<div v-for="(itm, i) in item.bnfDTOs" :key="i" class="pb10">
<!-- 受益人信息 -->
<van-collapse-item title="受益人信息" :name="i + 81">
<van-cell-group>
<van-cell title="受益人" :value="itm.bnfTypeText" />
<div v-if="itm.bnfType == '1'">
<van-cell title="姓名" :value="itm.name" />
<van-cell title="性别" :value="itm.sexText" />
<!-- <van-cell title="是被保险人的" :value="itm.relationText" /> -->
<van-cell title="受益比例" :value="`${itm.bnfLot * 100}%`" v-if="itm.bnfLot != null" />
<van-cell title="证件类型" :value="itm.idTypeText" />
<van-cell title="证件号码" :value="itm.idNo" />
</div>
</van-cell-group>
</van-collapse-item>
</div>
<div v-for="(it, ind) in list" :key="it.riskName" class="pb10">
<van-collapse-item title="险种信息" :name="ind + 10">
<van-cell-group>
<van-cell title="险种名称" :value="it.riskName" />
<van-cell title="保险期间" :value="it.insuYear" />
<!-- <van-cell title="交费期间" :value="Number(it.years) > 30 ? '至70周岁' : `${it.years}年交`" /> -->
<van-cell title="交费期间" :value="it.payIntv" />
<van-cell title="险种保额(元)" :value="it.amt | moneyFormat" />
<van-cell title="险种保费(元)" :value="it.mainPremDetail | moneyFormat" />
<van-collapse-item title="附加险信息" :name="num + 61" v-for="(i, num) in it.addtion" :key="num">
<van-cell-group>
<van-cell title="险种名称" :value="i.riskName" />
<van-cell title="保险期间" :value="i.insuYear" />
<!-- <van-cell title="交费期间" :value="Number(i.years) > 30 ? '至70周岁' : `${i.years}年交`" /> -->
<van-cell title="交费期间" :value="i.payIntv" />
<van-cell title="险种保额(元)" v-if="i.amt == '1' || i.amt == '2' || i.amt == '3'" :value="`计划${i.amt}`"></van-cell>
<van-cell title="险种保额(元)" :value="i.amt | moneyFormat" v-else />
<van-cell title="险种保费(元)" :value="i.prem | moneyFormat" />
</van-cell-group>
</van-collapse-item>
</van-cell-group>
</van-collapse-item>
</div>
</div>
<!-- 续期信息 -->
<van-collapse-item title="续期交费信息" name="100" class="detail-title pb10">
<van-cell-group>
<van-cell title="交费方式" :value="renewalManage.payMode" />
<van-cell title="转账银行" :value="renewalManage.bankName" />
<van-cell title="转账账号" :value="renewalManage.bankAccNo" />
<van-cell title="下次扣款日" :value="renewalManage.paytoDate" />
<van-cell title="下期扣款金额(元)" :value="renewalManage.xqprem" />
</van-cell-group>
</van-collapse-item>
</van-collapse>
<!-- <van-dialog v-model="show" title="提示" show-cancel-button @confirm="authConfirm(authCode)" @cancel="clearTimer">
<p class="p10 fs14">为确保是您本人操作，短信验证码已发送至您手机号{{ encyCustomerMobile }}，请您输入验证码以完成后续投保操作。</p>
<van-cell-group class="flex align-items-c pr5 mb15">
<van-field maxlength="6" placeholder="请输入短信验证码" v-model="authCode" clearable label-width="0" />
<van-button type="danger" plain size="small" class="w160 p0" @click="getAuthCode" :disabled="codeDisabled" v-no-more-click="2000">{{
codeDisabled ? `${countDown}s后重新获取` : '获取验证码'
}}</van-button>
</van-cell-group>
</van-dialog> -->
</div>
</template>
<script>
import { Collapse, CollapseItem, Cell, CellGroup, Button, Field, Dialog } from 'vant'
import { getPolicyDetail, getReceiptSign } from '@/api/ebiz/serve/serve'
import { getAuthCode, autchCodeCheck } from '@/api/ebiz/sale/sale'
import { checkPhone } from '@/api/ebiz/customer/customer'
import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典进行页面展示
import { formatAllRisk } from '@/assets/js/utils/formatRiskList'
export default {
data() {
return {
show: false, // 获取短信验证码
codeDisabled: false, // 获取验证码按钮是否禁用
timeId: null, // 计时器ID
countDown: 60, // 倒计时
authCode: '', // 验证码
smsAuthNum: 3,
operaFlag: null,
encyCustomerMobile: null,
customerMobile: null,
sid: null,
//人脸识别认证次数
faceAuthCount: {
appnt: 0,
insured: 0,
weixin: 0
},
// 折叠面板
activeNames: ['1'],
// 保单基本信息
OrderInfoDTO: {},
// 投保人信息
appntDTO: {},
// 被保险人信息
insuredDTOs: [],
renewalManage: {}, // 续期信息
// 保单号
contNo: '',
list: []
}
},
created() {
setTimeout(() => {
// 右上角的显示
window.EWebBridge.webCallAppInJs('webview_right_button', {
btns: [
{
img: this.$assetsUrl + 'images/share@3x.png'
}
]
})
}, 1000)
window['appCallBack'] = this.appCallBack
// 获取保单详情
this.getPolicyDetail()
},
components: {
[Collapse.name]: Collapse,
[CollapseItem.name]: CollapseItem,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[Button.name]: Button,
[Field.name]: Field,
[Dialog.name]: Dialog
},
methods: {
// 获取短信验证码
getAuthCode() {
this.codeDisabled = true
//倒计时
this.timeId = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
window.clearInterval(this.timeId)
this.codeDisabled = false
this.countDown = 60
}
}, 1000)
getAuthCode({
operateType: 'appntInfoEntry',
type: 'H5',
operateCode: this.customerMobile,
system: 'agentApp',
operateCodeType: '0'
}).then(res => {
console.log(res)
if (res.result == 0) {
this.sid = res.sessionId
} else {
this.$toast(res.resultMessage)
}
})
},
// 验证码确认事件
async authConfirm() {
//清理计时器
this.clearTimer()
this.changeSubmit()
},
// 清理计时器
clearTimer() {
window.clearInterval(this.timeId)
this.timeId = null
this.countDown = 60
this.codeDisabled = false
},
//提交变更申请
async changeSubmit() {
if (null == this.sid) {
this.$toast('请先进行发送短信验证码')
return
}
let res = await autchCodeCheck({
smsId: this.sid,
code: this.authCode
})
if (res.result == 0) {
this.toNextPage()
} else {
this.$toast(res.resultMessage)
}
},
realPeopelCheck() {
this.$toast.loading({
// 持续展示 toast
duration: 0,
// 禁用背景点击s
forbidClick: true,
loadingType: 'spinner',
message: '加载中……'
})
let data = {
name: this.appntDTO.name,
idType: this.appntDTO.idType,
idNo: this.appntDTO.idNo,
mobile: this.appntDTO.mobile
}
this.customerMobile = this.appntDTO.mobile
this.encyCustomerMobile = this.customerMobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
this.authCode = null
// eslint-disable-next-line no-unused-vars
return new Promise((resolve, reject) => {
checkPhone(data).then(res => {
if (res.result == '0') {
console.log(res)
this.show = true
} else {
Dialog.confirm({
title: '提示',
message: '抱歉，您预留的手机号非您本人的手机号，请进行线下投保！',
showCancelButton: false
})
}
})
})
},
// 获取保单详情
getPolicyDetail() {
let that = this
let data = {
policyNo: window.localStorage.getItem('policyNo')
// policyNo: '809920190000597308'
}
getPolicyDetail(data).then(res => {
if (res.result == '0') {
let appntDTO = res.content.appntDTO
let orderInfoDTO = res.content.orderInfoDTO
this.renewalManage = res.content.xqPayDTO
// 保单信息
if (orderInfoDTO.orderStatus == '0') {
orderInfoDTO.orderStatusText = '未签收'
} else if (orderInfoDTO.orderStatus == '1') {
orderInfoDTO.orderStatusText = '已签收'
} else {
orderInfoDTO.orderStatusText = ''
}
// 测试用
// orderInfoDTO.orderStatus = '0'
that.OrderInfoDTO = orderInfoDTO
// 投保人信息
this.filterData(dataDictionary.sex, 'sex', appntDTO)
this.filterData(dataDictionary.idType, 'idType', appntDTO)
that.appntDTO = appntDTO
window.localStorage.setItem('saleInsuredInfo', JSON.stringify(appntDTO))
// 被保险人信息
res.content.insuredDTOs.map(insured => {
insured.riskDTOLst.map(risk => {
Number(risk.payIntv)
switch (risk.payIntv) {
case -1:
risk.payIntv = '不定期交'
break
case 0:
risk.payIntv = '一次交清'
break
case 1:
risk.payIntv = '月交'
break
case 3:
risk.payIntv = '季交'
break
case 6:
risk.payIntv = '半年交'
break
case 12:
risk.payIntv = '年交'
break
}
if (risk.insuYear == '70') {
risk.insuYear = '至70周岁'
} else if (risk.insuYear == '75') {
risk.insuYear = '至75周岁'
} else if (risk.insuYear == '80') {
risk.insuYear = '至80周岁'
} else if (risk.insuYear == '106') {
risk.insuYear = '终身'
} else {
risk.insuYear = `${risk.insuYear}年`
}
})
this.filterData(dataDictionary.sex, 'sex', insured)
this.filterData(dataDictionary.idType, 'idType', insured)
this.filterData(dataDictionary.relationToAppnt, 'relation', insured)
insured.bnfDTOs.map(bnf => {
this.filterData(dataDictionary.bnfType, 'bnfType', bnf)
this.filterData(dataDictionary.sex, 'sex', bnf)
this.filterData(dataDictionary.idType, 'idType', bnf)
this.filterData(dataDictionary.relationToAppnt, 'relation', bnf)
})
})
that.insuredDTOs = res.content.insuredDTOs
this.list = formatAllRisk(this.insuredDTOs[0].riskDTOLst)
} else {
this.$toast(res.resultMessage)
}
})
},
appCallBack(data) {
if (data.trigger == 'right_button_click') {
console.log(localStorage.saleInsuredInfo)
EWebBridge.webCallAppInJs('bridge', {
flag: 'share',
extra: {
title: '国富人寿保单回执签字',
content: '国富人寿保单回执签收',
url:
location.origin +
'/#/serve/airSign?policyNo=' +
localStorage.policyNo +
'&token=' +
localStorage.token +
'&saleInsuredInfo=' +
encodeURI(localStorage.saleInsuredInfo),
// url: 'http://47.96.143.111/#/proposal/exhibition?proposalNo=' + localStorage.orderNo + '&token=' + localStorage.token,
img: this.$assetsUrl + 'images/logo.png'
}
})
}
},
//根据数据字典 将后端返回的数据渲染到页面中
filterData(dictionary, key, pageData) {
dictionary.forEach(item => {
if (pageData[key] == item.id) {
pageData[key + 'Text'] = item.text //渲染页面使用的字段
}
})
},
// 回执签收
next() {
let that = this
if (this.faceAuthCount.appnt < this.smsAuthNum) {
if (this.appntDTO.idType == '1') {
//证件类型为身份证时，进行人脸识别
EWebBridge.webCallAppInJs('face_auth', {
number: this.appntDTO.idNo, //身份证号码
name: this.appntDTO.name //姓名
}).then(data => {
this.$toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中……'
})
this.$toast.clear()
if (JSON.parse(data).state == '1') {
this.toNextPage()
} else {
that.faceAuthCount.appnt++
if (that.faceAuthCount.appnt >= this.smsAuthNum) {
this.realPeopelCheck()
}
}
})
} else {
this.toNextPage()
}
} else {
this.realPeopelCheck()
}
},
toNextPage() {
let params = {
contNo: window.localStorage.getItem('policyNo')
}
getReceiptSign(params).then(res => {
if (res.result == '0') {
this.$toast.clear()
window.localStorage.setItem('insurance-policyUrl', res.signUrl)
window.localStorage.setItem('detailJump', '1')
window.localStorage.setItem('contNo', this.OrderInfoDTO.contNo)
window.localStorage.setItem('orderNo', this.OrderInfoDTO.orderNo)
window.localStorage.setItem('orderStatus', this.OrderInfoDTO.orderStatus)
window.localStorage.setItem('saleInsuredInfo', JSON.stringify(this.appntDTO))
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/sale/signatureOfElectronic',
forbidSwipeBack: '1',
title: '保险合同签收回执电子确认书签名'
},
routerInfo: {
path: '/sale/signatureOfElectronic'
}
})
} else {
this.$toast(res.resultMessage)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.detail-container {
.van-hairline--top-bottom::after {
border: none;
}
/deep/ .van-collapse-item__content {
padding-top: 0;
}
/deep/.van-collapse-item__title {
padding-left: 30px;
}
/deep/ .van-cell__value {
text-align: left !important;
}
}
</style>

131
src/views/ebiz/renewalManage/policyList.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div class="policy-list-container">
<div class="policy-list-content">
<!-- tab 栏切换 -->
<!-- <van-tabs @click="onClick">
<van-tab title="有效" :name="1">
</van-tab>
</van-tabs> -->
<van-tabs @click="onClick">
<van-tab :title="item" v-for="(item, index) in titleList" :key="index"></van-tab>
<div v-if="list">
<div class="fs12" v-for="(item, index) in list" :key="index">
<div class="bg-white pv15 pr15 pl10" @click="goToDetail(item.policyNo)">
<cellLine :text="item.riskName" fontSize="22"></cellLine>
<cellLine title="保单号" :text="item.policyNo" fontColor="#7d7e80" fontSize="18"></cellLine>
<cellLine title="投保人" :text="item.appntName"></cellLine>
<cellLine title="被保人" :text="item.insuredName"></cellLine>
<cellLine title="保额(元)" :text="item.amount"></cellLine>
<cellLine title="保单生效日期" :text="item.cvaliDate"></cellLine>
<cellLine title="保单状态" :text="item.orderStatus == '0' ? '有效' : '终止'"></cellLine>
</div>
</div>
</div>
<div v-else class="text-center">
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
<div class="fs17 c-gray-dark mt40">暂无保单列表</div>
</div>
</van-tabs>
</div>
</div>
</template>
<script>
import { Search, List, Tab, Tabs, Tag, Row, Col } from 'vant'
import { getPolicyList } from '@/api/ebiz/renewalManage/renewalManage'
import cellLine from './compontents/cellLine'
export default {
data() {
return {
// 搜索框
titleList: ['有效', '失效/终止'],
lineWidth: 45,
// 列表信息
policyListDTOList: [],
// 高亮的 tab 栏
active: '1',
list: [], // 列表
invalidList: [], // 无效列表
customerNumber: localStorage.getItem('customerNumber'),
customerInfo: []
}
},
created() {
let that = this
// 获取表单列表
this.customerInfo = JSON.parse(localStorage.getItem('customerInfo'))
this.lineWidth = document.body.clientWidth / 2
that.getPolicyList()
},
methods: {
onClick(index) {
this.active = index + 1 + ''
this.getPolicyList()
},
// 获取保单列表
getPolicyList() {
let that = this
let data = {
status: this.active,
idNo: this.customerInfo.idNo,
idType: this.customerInfo.idType,
sex: this.customerInfo.sex,
appntName: this.customerInfo.appntName,
birthday: this.customerInfo.birthday
}
getPolicyList(data).then(res => {
// console.log(res)
if (res.result == 0) {
this.list = res.policyListDTOList
} else {
this.$toast(res.resultMessage)
// EWebBridge.webCallAppInJs('bridge', {
// flag: 'webview_toast',
// extra: { content: res.resultMessage }
// })
}
})
},
// 点击去详情
goToDetail(policyNo) {
console.log(policyNo)
window.localStorage.setItem('policyNo', policyNo)
let that = this
that.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/renewalManage/policyDetail'
},
routerInfo: {
path: '/renewalManage/policyDetail'
}
})
}
},
components: {
cellLine,
[Search.name]: Search,
[List.name]: List,
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Tag.name]: Tag,
[Row.name]: Row,
[Col.name]: Col
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/sass/variables.scss';
.list-container {
.list-content {
.list-header {
background: $white;
}
.list-main {
background: $white;
}
}
}
</style>