[银保app]续期列表和详情接口字段对接修改.添加终止图片.

This commit is contained in:
DESKTOP-AFPHKHF\PC
2022-12-07 14:07:06 +08:00
parent 3f5e4b6627
commit 3375f9231c
3 changed files with 135 additions and 109 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -2,14 +2,27 @@
<div class="public_container"> <div class="public_container">
<!-- 上方小图标 --> <!-- 上方小图标 -->
<div class="topTitle"> <div class="topTitle">
<div v-if="abc == 1"> <div v-if="(changestate == 0)">
<van-icon name="underway-o" color="#EA070A" size="30" /> <van-icon name="underway-o" color="#EA070A" size="30" />
<p class="topTitleText">{{ ybOrderDTOList.defaultReson }}</p> <p class="topTitleText">续期待扣款</p>
</div> </div>
<div v-if="abc == 2"> <div v-if="(changestate == 1)">
<van-icon name="passed" color="#2451C1" size="30" /> <van-icon name="passed" color="#2451C1" size="30" />
<p class="topTitleText">续期扣款成功</p> <p class="topTitleText">续期扣款成功</p>
</div> </div>
<div v-if="(changestate == 2)">
<van-icon name="underway-o" color="#EA070A" size="30" />
<p class="topTitleText">续期扣款中 </p>
</div>
<div v-if="(changestate == 3)">
<van-icon name="close" color="#EA070A" size="30" />
<p class="topTitleText">续期扣款失败 </p>
</div>
<div v-if="(changestate == 4)">
<p><img src="../../assets/YB_APP/images/changestate.png" height="36px"></p>
<!-- <van-icon name="stop-circle-o" size="30"/> -->
<p class="topTitleText">已终止 </p>
</div>
</div> </div>
<!-- 中间内容 --> <!-- 中间内容 -->
<div class="listContent"> <div class="listContent">
@@ -35,15 +48,15 @@
<button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button> <button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button>
</div> </div>
<van-dialog <van-dialog
v-model="show" v-model="show"
title="拨打电话" title="确认拨打电话"
:message="`确认要拨打电话吗?(${ybOrderDTOList.appntPhone})`" :message="`(${ybOrderDTOList.appntPhone})`"
show-cancel-button show-cancel-button
@cancel="cancel" @cancel="cancel"
@confirm="contact(ybOrderDTOList.appntPhone)" @confirm="contact(ybOrderDTOList.appntPhone)"
> >
</van-dialog> </van-dialog>
</div> </div>
</template> </template>
@@ -56,36 +69,39 @@ export default {
return { return {
ybOrderDTOList: '', ybOrderDTOList: '',
policyNo: '', policyNo: '',
abc: 2, changestate: 2,
show: false, show: false
} }
}, },
mounted() { mounted() {
this.policyNo = this.$route.query.policyNo this.policyNo = this.$route.query
console.log(this.policyNo, 'avc') console.log(this.policyNo, 'avc')
console.log(this.$route.query,'我是router里参数');
this.getYBRenewalInfo() this.getYBRenewalInfo()
this.changestate = this.policyNo.payFlag
}, },
methods: { methods: {
cancel(){ cancel() {
this.show = false this.show = false
}, },
showDialog() { showDialog() {
this.show = true;// 显示确认对话框 this.show = true // 显示确认对话框
}, },
contact() { contact() {
const a = document.createElement("a"); const a = document.createElement('a')
a.href = "tel:8888410" a.href = 'tel:8888410'
a.click(); a.click()
this.show = false; this.show = false
}, },
callPhone (phoneNumber) { callPhone(phoneNumber) {
window.location.href = 'tel://' + phoneNumber}, window.location.href = 'tel://' + phoneNumber
},
getYBRenewalInfo() { getYBRenewalInfo() {
let params = { // let params = {
policyNo: this.policyNo // policyNo
} // }
console.log('我是log') console.log('我是log')
getYBRenewalInfo(params).then((res) => { getYBRenewalInfo(this.policyNo).then((res) => {
console.log(res, '我是res') console.log(res, '我是res')
if (res.result == 0) { if (res.result == 0) {
this.ybOrderDTOList = res.content this.ybOrderDTOList = res.content

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="public_container"> <div class="public_container">
<!-- 最上方的搜索框 --> <!-- 最上方的搜索框 -->
<div style="position:relative;"> <div style="position: relative">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" /> <van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button> <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div> </div>
@@ -28,59 +28,65 @@
<!-- 应交月选择 --> <!-- 应交月选择 -->
<div class="beMonth"> <div class="beMonth">
<p class="beMonthLeft">应交月 <span class="beMonthLeftSpan">(查询范围: 当前月份前期前溯3月~后推1月)</span></p> <p class="beMonthLeft">应交月 <span class="beMonthLeftSpan">(查询范围: 当前月份前期前溯3月~后推1月)</span></p>
<p class="beMonthRight" @click="clickCalendar"><span class="beMonthRightSpan">{{calendarValue}}</span></p> <p class="beMonthRight" @click="clickCalendar">
<span class="beMonthRightSpan">{{ calendarValue }}</span
>
</p>
</div> </div>
<!-- 无内容显示的背景 --> <!-- 无内容显示的背景 -->
<div v-if="policyListDTOList == ''" style="position:relative"> <div v-if="policyListDTOList == ''" style="position: relative">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" /> <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
<p class="noContentText">暂无保单</p> <p class="noContentText">暂无保单</p>
</div> </div>
<!-- 卡片列表 --> <!-- 卡片列表 -->
<div v-if="policyListDTOList != ''"> <div v-if="policyListDTOList != ''">
<!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> --> <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
<div :class="[active == 3 ? 'cardList2' : 'cardList']" v-for="(item, index) in policyListDTOList" :key="index"> <div :class="[active == 3 ? 'cardList2' : 'cardList']" v-for="(item, index) in policyListDTOList" :key="index">
<div class="topbackground1"> <div class="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" /> <img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<span class="cardListText">{{ item.riskName }}</span> <span class="cardListText">{{ item.riskName }}</span>
</div>
<div class="cardConetent">
<div class="textList">
<p>
<span>保单号</span><span>{{ item.contNo }}</span>
</p>
<p>
<span>被保人</span><span>{{ item.insuredName }}</span>
</p>
<p>
<span>被保险人</span><span>{{ item.appntName }}</span>
</p>
<p v-if="active == 3">
<span>转账银行</span><span>{{ item.bankName }}</span>
</p>
<p v-if="active == 3">
<span>转账帐号</span><span>{{ item.accNo }}</span>
</p>
<p>
<span>应交日</span><span>{{ item.payToDate }}</span>
</p>
<p v-if="active != 3">
<span>归属指标</span><span>{{ item.rnewIndex }}</span>
</p>
<p v-if="active == 3">
<span>所属渠道</span><span>{{ item.policySource }}</span>
</p>
<p>
<span>终止原因</span><span>{{ item.state }}</span>
</p>
<p>
<span>金额/</span><span class="redword">{{ item.money }}</span>
</p>
<p>
<span>保单状态</span><span>{{ item.contState }}</span>
</p>
</div> </div>
<div class="cardConetent"> <div class="rightState">
<div class="textList"> <button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item)">查看详情</button>
<p>
<span>保单号</span><span>{{ item.contNo }}</span>
</p>
<p>
<span>被保人</span><span>{{ item.insuredName }}</span>
</p>
<p>
<span>被保险人</span><span>{{ item.appntName }}</span>
</p>
<p v-if="active == 3">
<span>转账银行</span><span>{{ item.bankName }}</span>
</p>
<p v-if="active == 3">
<span>转账帐号</span><span>{{ item.accNo }}</span>
</p>
<p>
<span>应交日</span><span>{{ item.payToDate }}</span>
</p>
<p v-if="active != 3">
<span>归属指标</span><span>{{ item.rnewIndex }}</span>
</p>
<p v-if="active == 3">
<span>所属渠道</span><span>{{ item.policySource }}</span>
</p>
<p>
<span>终止原因</span><span>{{ item.contState }}</span>
</p>
<p>
<span>金额/</span><span class="redword">{{ item.money }}</span>
</p>
</div>
<div class="rightState">
<button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item.contNo)">查看详情</button>
</div>
</div> </div>
</div> </div>
</div>
<!-- </van-list> --> <!-- </van-list> -->
</div> </div>
</div> </div>
@@ -119,38 +125,42 @@ export default {
findValue: '', // 上面搜索框的value findValue: '', // 上面搜索框的value
active: '', // 四个选项卡的v-model active: '', // 四个选项卡的v-model
policyListDTOList: [], // 卡片列表内容 policyListDTOList: [], // 卡片列表内容
calendarValue:'', calendarValue: '',
calendarShow:false, calendarShow: false,
currentDate:new Date(), currentDate: new Date(),
minDate: '', minDate: '',
maxDate: '', maxDate: '',
params: { params: {
contNo: '', // 保单号 payDate: '', // 必传扣款日
idNo: '', // 身份证 // contNo: '', // 保单
payToDate: '', // 时间 // idNo: '', // 身份证号
state: '' // 状态 // payToDate: '', // 时间
state: '', // 状态
otherNo: '' ,// 搜索条件
// userModel: {
// id: 'Y0000001'
// }
} }
} }
}, },
created() {}, created() {},
mounted() { mounted() {
let aaa = new Date().getMonth()+1 let aaa = new Date().getMonth() + 1
let bbb = aaa - 3 let bbb = aaa - 3
let ccc = aaa + 1 let ccc = aaa + 1
this.minDate = new Date(2022,bbb,0) this.minDate = new Date(2022, bbb, 0)
this.maxDate = new Date(2022,ccc,0) this.maxDate = new Date(2022, ccc, 0)
console.log(this.minDate,1111) console.log(this.minDate, 1111)
let yearNum = new Date().getFullYear() let yearNum = new Date().getFullYear()
let monthNum = new Date().getMonth()+1 let monthNum = new Date().getMonth() + 1
this.calendarValue = yearNum+'-'+monthNum this.calendarValue = yearNum + '-' + monthNum
this.getYBRenewalsList() this.getYBRenewalsList()
}, },
methods: { methods: {
// 上方关键词搜索按钮 // 上方关键词搜索按钮
keywordSearch(value) { keywordSearch(value) {
console.log('点击搜索了') console.log('点击搜索了')
this.params.idNo = value this.params.otherNo = value
this.params.contNo = value
this.getYBRenewalsList() this.getYBRenewalsList()
}, },
getYBRenewalsList() { getYBRenewalsList() {
@@ -167,32 +177,33 @@ export default {
}, },
// (查看详情)按钮跳转 // (查看详情)按钮跳转
goPolicyDetail(data) { goPolicyDetail(data) {
console.log(data) console.log(data, '我是date')
this.$jump({ this.$jump({
flag: 'h5', flag: 'h5',
extra: { extra: {
url: location.origin + '/#/YB_APP/renewalDetail?policyNo=' + data url: location.origin + '/#/YB_APP/renewalDetail?policyNo='+data.contNo+'&payFlag='+data.payFlag+'&payToDate='+data.payToDate
}, },
routerInfo: { routerInfo: {
path: '/YB_APP/renewalDetail?policyNo=' + data path: `/YB_APP/renewalDetail?contNo=${data.contNo}&payFlag=${data.payFlag}+&payToDate=${data.payToDate}`
} }
}) })
}, },
clickCalendar(){ clickCalendar() {
this.calendarShow = true this.calendarShow = true
}, },
handleCurrentDateCancel() { handleCurrentDateCancel() {
this.calendarShow = false this.calendarShow = false
}, },
handleCurrentDateConfirm(e) { handleCurrentDateConfirm(e) {
this.calendarShow = false this.calendarShow = false
// let titleTime = utils.formatDate(e, 'yyyy-MM') // let titleTime = utils.formatDate(e, 'yyyy-MM')
// this.calendarValue = utils.formatDate(e, 'MM-dd') // this.calendarValue = utils.formatDate(e, 'MM-dd')
let yearNum = utils.formatDate(e, 'yyyy') let yearNum = utils.formatDate(e, 'yyyy')
let monthNum = utils.formatDate(e, 'MM') let monthNum = utils.formatDate(e, 'MM')
this.calendarValue = yearNum+'-'+monthNum this.calendarValue = yearNum + '-' + monthNum
// this.getYBRenewalsList() // this.getYBRenewalsList()
}, }
}, },
watch: { watch: {
active: { active: {
@@ -205,7 +216,7 @@ export default {
calendarValue: { calendarValue: {
deep: true, deep: true,
handler(newvalue) { handler(newvalue) {
this.params.payToDate = newvalue this.params.payDate = newvalue
this.getYBRenewalsList() this.getYBRenewalsList()
} }
} }
@@ -263,8 +274,7 @@ export default {
padding: 2px 5px; padding: 2px 5px;
margin-top: 12px; margin-top: 12px;
line-height: 24px; line-height: 24px;
white-space:nowrap; white-space: nowrap;
} }
.beMonthRightSpan { .beMonthRightSpan {
margin-right: 5px; margin-right: 5px;
@@ -295,7 +305,7 @@ export default {
} }
.cardList2 { .cardList2 {
// height: 244px; // height: 244px;
height: 300px; // height: 300px;
width: 96%; width: 96%;
border-radius: 12px; border-radius: 12px;
background-color: white; background-color: white;
@@ -330,8 +340,7 @@ export default {
// margin-top: 113px; // margin-top: 113px;
margin-left: 4px; margin-left: 4px;
font-size: 12px; font-size: 12px;
align-self:flex-end; align-self: flex-end;
} }
.rightStateButton2 { .rightStateButton2 {
height: 30px; height: 30px;
@@ -341,11 +350,10 @@ export default {
border-radius: 30px; border-radius: 30px;
background-color: white; background-color: white;
// margin-top: 57px; // margin-top: 57px;
margin-bottom:14px; margin-bottom: 14px;
margin-left: 4px; margin-left: 4px;
font-size: 12px; font-size: 12px;
align-self:flex-end; align-self: flex-end;
} }
.cardListText { .cardListText {
line-height: 34px; line-height: 34px;
@@ -375,6 +383,8 @@ export default {
display: block; display: block;
// float:left; // float:left;
width: 50px; width: 50px;
overflow: hidden;
white-space: nowrap;
// background-color: blueviolet; // background-color: blueviolet;
color: #373737; color: #373737;
} }