[银保app]宋凯琪----添加一个暂时用的接口,mine里///加入两张图片,保单查询的弹出层功能建设.

This commit is contained in:
DESKTOP-AFPHKHF\PC
2022-11-23 09:15:06 +08:00
committed by liu.xiaofeng@ebiz-digits.com
parent ac21e00753
commit 9962b8be38
5 changed files with 358 additions and 76 deletions

View File

@@ -106,3 +106,11 @@ export function getBankNetPerformanceYB(data) {
})
}
// 暂时数据接口
export function getAgentInfoByAgentCode(data) {
return request({
url: getUrl('/agent/agent/getAgentInfoByAgentCode', 1,3),
method: 'post',
data
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 688 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -58,7 +58,7 @@
<script>
import { Icon, Cell } from 'vant'
import { homeConfigYB, mineConfigYB } from '@/api/YB_APP/index'
import { homeConfigYB, mineConfigYB, getAgentInfoByAgentCode } from '@/api/YB_APP/index'
import imagePath from '@/assets/YB_APP/images/25.png'
export default {
name: 'mine',
@@ -98,6 +98,21 @@ export default {
if(res.result == 0){
console.log(res)
this.userInfo = res.content
}else if(res.result == 1){
console.log('aaaaa');
this.getAgentInfoByAgentCode()
}else{
this.$toast(res.resultMessage)
}
})
},
getAgentInfoByAgentCode(){
let params = {
}
getAgentInfoByAgentCode(params).then(res=>{
if(res.result == 0){
this.userInfo = res.content
}else{
this.$toast(res.resultMessage)
}
@@ -107,6 +122,7 @@ export default {
let params = {
}
homeConfigYB(params).then(res=>{
if(res.result == 0){
console.log(res)
@@ -119,7 +135,8 @@ export default {
})
})
}
}else{
}
else{
this.$toast(res.resultMessage)
}
})

View File

@@ -6,6 +6,62 @@
<!-- 右侧搜索按钮 -->
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
<van-popup v-model="showSideBar" position="right" :style="{ width: '80%', height: '100%' }" :overlay-style="{ opacity: 0.7 }">
<div class="state-content">
<div>
<p>承保日期</p>
<div style="width: 96%; height: 30px; background-color: #f8f8fa; border-radius: 30px; position: relative">
<span style="line-height: 30px; margin-left: 10px">{{ underwriteDate }}</span
><img
@click="datechange"
style="height: 16px; align-items: center; position: absolute; right: 10px; top: 7px"
src="../../assets/YB_APP/images/date.png"
/>
</div>
</div>
<div>
<p>保单状态</p>
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in list1" :key="index">
<button @click="warrantyState(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangewarranty == index }">{{ item.name }}</button>
</div>
</div>
</div>
<div>
<p>渠道名称</p>
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in list2" :key="index">
<button @click="channelName(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangechannel == index }">{{ item.name }}</button>
</div>
</div>
</div>
<div>
<p>回访成功</p>
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in list3" :key="index">
<button @click="visitSucceed(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitSucceed == index }">{{ item.name }}</button>
</div>
</div>
</div>
<div>
<p>回访完成</p>
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in list3" :key="index">
<button @click="visitAccomplish(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitAccomplish == index }">
{{ item.name }}
</button>
</div>
</div>
</div>
</div>
<div class="bottom-area bottom-btn">
<van-button class="m-btn-left" @click="reset">重置</van-button>
<van-button class="m-btn-right" @click="submit">确定</van-button>
</div>
<van-popup v-model="calendarShow" position="bottom">
<van-datetime-picker v-model="currentDate" type="date" title="选择日期" @cancel="handleCurrentDateCancel" @confirm="handleCurrentDateConfirm" />
</van-popup>
</van-popup>
<!-- 无内容显示的背景 -->
<div v-if="filpolicyListDTOList == ''">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
@@ -13,54 +69,44 @@
</div>
<!-- 卡片列表 -->
<div v-if="filpolicyListDTOList != ''">
<div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
<div :class="[item.orderStatus == 0 ? 'topbackground1' : 'topbackground2']">
<img class="cardListImg" v-if="item.orderStatus == 0" src="../../assets/YB_APP/images/sign1.png" />
<!-- 字左边小对号图片 -->
<img class="cardListImg" v-if="item.orderStatus != 0" src="../../assets/YB_APP/images/sign2.png" />
<span class="cardListText">{{ item.riskName }}</span>
</div>
<!-- 卡片内容 -->
<div class="cardConetent">
<div class="textList">
<p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
<span>保单号</span><span>{{ item.policyNo }}</span>
</p>
<p>
<span>被保人</span><span>{{ item.insuredName }}</span>
</p>
<p>
<span>承保日期</span><span>{{ item.cvaliDate }}</span>
</p>
<p>
<span>销售渠道</span><span>{{ item.bankChannel }}</span>
</p>
<!-- 根据0,1状态判断显示是否和文字颜色 -->
<p v-if="item.visitSuccess == 0"><span>回访成功</span><span class="visitNo"></span></p>
<p v-if="item.visitSuccess == 1"><span>回访成功</span><span></span></p>
<p v-if="item.visitFinish == 0"><span>回访完成</span><span class="visitNo"></span></p>
<p v-if="item.visitFinish == 1"><span>回访完成</span><span></span></p>
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<div class="cardList" v-for="(item, index) in filpolicyListDTOList" :key="index">
<div :class="[item.orderStatus == 1 ? 'topbackground1' : 'topbackground2']">
<img class="cardListImg" v-if="item.orderStatus == 1" src="../../assets/YB_APP/images/sign1.png" />
<!-- 字左边小对号图片 -->
<img class="cardListImg" v-if="item.orderStatus != 1" src="../../assets/YB_APP/images/sign2.png" />
<span class="cardListText">{{ item.riskName }}</span>
</div>
<!-- 右边状态图片 -->
<div class="rightState">
<!-- 有效 -->
<img v-if="item.orderStatus == 0" class="rightStateImg" src="../../assets/YB_APP/images/stamp1.png" alt="" />
<!-- 退保终止 -->
<img v-if="item.orderStatus == 1" class="rightStateImg" src="../../assets/YB_APP/images/stamp2.png" alt="" />
<!-- 犹退终止 -->
<img v-if="item.orderStatus == 2" class="rightStateImg" src="../../assets/YB_APP/images/stamp3.png" alt="" />
<!-- 协退终止 -->
<img v-if="item.orderStatus == 3" class="rightStateImg" src="../../assets/YB_APP/images/stamp4.png" alt="" />
<!-- 当日撤单 -->
<img v-if="item.orderStatus == 4" class="rightStateImg" src="../../assets/YB_APP/images/stamp5.png" alt="" />
<!-- 理赔终止 -->
<img v-if="item.orderStatus == 5" class="rightStateImg" src="../../assets/YB_APP/images/stamp6.png" alt="" />
<!-- 失效终止 -->
<img v-if="item.orderStatus == 6" class="rightStateImg" src="../../assets/YB_APP/images/stamp7.png" alt="" />
<button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
<!-- 卡片内容 -->
<div class="cardConetent">
<div class="textList">
<p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
<span>保单号</span><span>{{ item.policyNo }}</span>
</p>
<p>
<span>被保人</span><span>{{ item.insuredName }}</span>
</p>
<p>
<span>承保日期</span><span>{{ item.cvaliDate }}</span>
</p>
<p>
<span>销售渠道</span><span>{{ item.bankChannel }}</span>
</p>
<!-- 根据0,1状态判断显示是否和文字颜色 -->
<p v-if="item.visitSuccess == 0"><span>回访成功</span><span class="visitNo"></span></p>
<p v-if="item.visitSuccess == 1"><span>回访成功</span><span></span></p>
<p v-if="item.visitFinish == 0"><span>回访完成</span><span class="visitNo"></span></p>
<p v-if="item.visitFinish == 1"><span>回访完成</span><span></span></p>
</div>
<!-- 右边状态图片 -->
<div class="rightState">
<!-- 有效 -->
<img class="rightStateImg" :src="item.stateRoute" alt="" />
<button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
</div>
</div>
</div>
</div>
</van-list>
</div>
</div>
</template>
@@ -68,6 +114,7 @@
<script>
import { Button, Search } from 'vant'
import { ref } from 'vue'
import utils from '@/assets/js/utils/date-utils'
import { YBpolicyListAgent } from '@/api/YB_APP/index'
export default {
@@ -84,27 +131,130 @@ export default {
return {
findValue: '', // 上面搜索框的value
policyListDTOList: [],
filpolicyListDTOList: [] // 结合watch过滤后的卡片数据
filpolicyListDTOList: [], // 结合watch过滤后的卡片数据
showSideBar: false, // 侧边栏展开否
list1: [
{ id: 0, name: '全部' },
{ id: 1, name: '有效' },
{ id: 2, name: '退保终止' },
{ id: 3, name: '理赔终止' },
{ id: 4, name: '协退终止' },
{ id: 5, name: '犹退终止' },
{ id: 6, name: '当日撤单' }
],
list2: [
{ id: 0, name: '全部' },
{ id: 1, name: '邮政储蓄银行' },
{ id: 2, name: '农业银行' },
{ id: 3, name: '工商银行' },
{ id: 4, name: '北部湾银行' }
],
list3: [
{ id: 0, name: '全部' },
{ id: 1, name: '是' },
{ id: 2, name: '否' }
],
clickChangewarranty: 0,
clickChangechannel: 0,
clickChangevisitSucceed: 0,
clickChangevisitAccomplish: 0,
calendarShow: false,
currentDate: new Date(),
underwriteDate: '', // 承保日期的时间
loading: false,
finished: false,
params: {
signDate: '', // 日期
riskCode: '', // 保单号
stateName: '', // 保单状态
bankChannel: '', // 渠道名称
visitSuccess: '', // 回访成功
visitFinish: '' // 回访完成
}
}
},
created() {
// 初始化显示按钮
setTimeout(() => {
this.filterBtn()
}, 500)
},
mounted() {
this.YBpolicyListAgent()
// 筛选按钮的点击事件
window.appCallBack = this.appCallBack
},
methods: {
appCallBack(data, flag) {
// 筛选按钮的点击事件
this.showSideBar = true
},
filterBtn() {
// 筛选按钮的显示
// eslint-disable-next-line no-undef
setTimeout(() => {
EWebBridge.webCallAppInJs('webview_right_button', {
btns: [
{
img: this.$assetsUrl + 'images/filter_btn.png',
route: { flag: '', extra: {} }
}
]
})
}, 500)
},
datechange() {
this.calendarShow = true
},
onLoad() {
console.log('onLoad')
setTimeout(() => {
// for (let i = 0; i < 10; i++) {
// list.value.push(list.value.length + 1)
// }
// console.log(this.filpolicyListDTOList, '过滤后卡片')
// 加载状态结束
// loading.value = false
// 数据全部加载完成
if (this.filpolicyListDTOList.length >= 4) {
;(this.finished = true), (this.loading = false)
}
}, 500)
},
// 四个选择的状态
warrantyState(val) {
this.clickChangewarranty = val
console.log(this.clickChangewarranty, '保单的data')
console.log(val, '保单的val')
},
channelName(val) {
this.clickChangechannel = val
console.log(this.clickChangechannel, '渠道的data')
console.log(val, '渠道的val')
},
visitSucceed(val) {
this.clickChangevisitSucceed = val
console.log(this.clickChangevisitSucceed, '回访完成的data')
console.log(val, '回访成功的val')
},
visitAccomplish(val) {
this.clickChangevisitAccomplish = val
console.log(this.clickChangevisitSucceed, '回访完成的data')
console.log(val, '回访完成的val')
},
// 请求卡片数据
YBpolicyListAgent() {
let params = {
signDate: '2022-09',
appntName: '',
insureName: '',
riskCode: ''
}
let that = this
console.log('我是log')
YBpolicyListAgent(params).then((res) => {
YBpolicyListAgent(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
this.policyListDTOList = res.policyListDTOList
this.filpolicyListDTOList = res.policyListDTOList
that.policyListDTOList = res.policyListDTOList
that.filpolicyListDTOList = res.policyListDTOList
console.log(this.policyListDTOList, 'data里的policyListDTOList')
} else {
that.filpolicyListDTOList = ''
}
})
},
@@ -124,25 +274,80 @@ export default {
// 上方关键词搜索按钮
keywordSearch(value) {
console.log('点击搜索了')
this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
return p.policyNo.indexOf(value) !== -1
})
// this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
// return p.policyNo.indexOf(value) !== -1
// })
this.params.riskCode = value
this.YBpolicyListAgent()
// console.log(value,'我是value');
// console.log(this.riskCode,'我是this.riskCode');
},
reset() {
// 筛选的重置操作
// 全部按钮选中; list全部匹配(点击全部的时候可以通过匹配规则匹配到所有的产品)
// this.isActive = [true, false, false, false, false]
// this.list = this.proList
// this.showSideBar = false
;(this.clickChangewarranty = ''),
(this.clickChangechannel = ''),
(this.clickChangevisitSucceed = ''),
(this.clickChangevisitAccomplish = ''),
(this.underwriteDate = '')
},
submit() {
// 筛选的确定操作
// this.isActive.some((item, index) => {
// if (item) {
// 获取选中的险种
// this.risk = this.risks[0].content[index].code
// }
// })
this.showSideBar = false
this.params.signDate = this.underwriteDate
// this.params.signDate = '2022-09'
console.log(this.params.signDate)
this.params.stateName = this.list1[this.clickChangewarranty].id
console.log(this.params.stateName)
this.params.bankChannel = this.list1[this.clickChangechannel].id
console.log(this.params.bankChannel)
this.params.visitSuccess = this.list1[this.clickChangevisitSucceed].id
console.log(this.params.visitSuccess)
this.params.visitFinish = this.list1[this.clickChangevisitAccomplish].id
console.log(this.params.visitFinish)
this.YBpolicyListAgent()
// this.filpolicyListDTOList = ''
// 根据选中险别对产品列表进行筛选
// this.list = this.proList.filter((item) => {
// if (this.risk == '') {
// return item
// } else {
// return item.categoryCode.indexOf(this.risk) != -1
// }
// })
},
handleCurrentDateCancel() {
this.calendarShow = false
},
handleCurrentDateConfirm(e) {
this.calendarShow = false
this.underwriteDate = utils.formatDate(e, 'yyyy-MM-dd')
}
}
},
// 关键词搜索过滤
// watch: {
// findValue: {
// handler(value) {
// this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
// // return p.policyNo.indexOf(value) !== -1 || p.insuredName.indexOf(value) !== -1
// return p.policyNo.indexOf(value) !== -1
// })
// if (value == '') {
// this.filpolicyListDTOList = this.policyListDTOList
// }
// }
// }
// }
watch: {
// findValue: {
// handler(value) {
// this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
// // return p.policyNo.indexOf(value) !== -1 || p.insuredName.indexOf(value) !== -1
// return p.policyNo.indexOf(value) !== -1
// })
// if (value == '') {
// this.filpolicyListDTOList = this.policyListDTOList
// }
// }
// }
}
}
</script>
<style lang="scss" scoped>
@@ -183,10 +388,10 @@ export default {
left: calc(50% - 142px);
}
.noContentText {
font-size: 9px;
font-size: 12px;
position: absolute;
top: 37%;
left: 44.5%;
left: calc(50% - 24px);
color: #b3b5ca;
}
.cardList {
@@ -281,4 +486,56 @@ export default {
width: 100%;
color: #323232;
}
.state-content {
padding: 14px;
}
.state-content p {
margin-top: 8px;
margin-bottom: 6px;
font-weight: 700;
font-size: 14px;
}
.bottom-btn {
text-align: center;
margin-bottom: 24px;
}
.bottom-area {
/deep/.m-btn-left {
width: 40%;
border-color: transparent;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border: 1px solid #bd5653;
border-right: 0;
color: #f1372d;
}
/deep/.m-btn-right {
width: 40%;
border-color: transparent;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background-color: #ff3a3f;
border: 1px solid #bd5653;
border-left: 0;
color: #ffffff;
}
}
.buttonChangebe {
border: 0;
height: 38px;
width: 78px;
border-radius: 20px;
margin: 5px;
background-color: #f8f8fa;
color: #757477;
}
.buttonChangeaf {
border: 1px solid #d28b86;
height: 38px;
width: 78px;
border-radius: 20px;
margin: 5px;
background-color: #fbe7e4;
color: #be5759;
}
</style>