mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-25 03:42:53 +08:00
555 lines
16 KiB
Vue
555 lines
16 KiB
Vue
<template>
|
|
<div class="public_container">
|
|
<!-- 最上方的搜索框 -->
|
|
<div>
|
|
<van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
|
|
<!-- 右侧搜索按钮 -->
|
|
<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 class="underwriteDateClass">
|
|
<span class="underwriteDateSpan">{{ underwriteDate }}</span
|
|
><img class="underwriteDateImg"
|
|
@click="datechange"
|
|
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">
|
|
<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="year-month" title="选择日期" @cancel="handleCurrentDateCancel" @confirm="handleCurrentDateConfirm" />
|
|
</van-popup>
|
|
</van-popup>
|
|
<!-- 无内容显示的背景 -->
|
|
<div v-if="filpolicyListDTOList == ''">
|
|
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
|
|
<p class="noContentText">暂无保单</p>
|
|
</div>
|
|
<!-- 卡片列表 -->
|
|
<div v-if="filpolicyListDTOList != ''">
|
|
<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="cardConetent">
|
|
<div class="textList">
|
|
<p class="policyNo">
|
|
<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>
|
|
</van-list>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<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 {
|
|
name: 'policyList',
|
|
components: {
|
|
[Button.name]: Button,
|
|
[Search.name]: Search
|
|
},
|
|
setup() {
|
|
const value = ref('')
|
|
return { value }
|
|
},
|
|
data() {
|
|
return {
|
|
findValue: '', // 上面搜索框的value
|
|
policyListDTOList: [],
|
|
filpolicyListDTOList: [], // 结合watch过滤后的卡片数据
|
|
showSideBar: true, // 侧边栏展开否
|
|
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
|
|
this.underwriteDate = this.$route.query.date
|
|
// this.params.signDate = this.$route.query.date
|
|
},
|
|
|
|
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 that = this
|
|
console.log('我是log')
|
|
YBpolicyListAgent(that.params).then((res) => {
|
|
console.log(res, '我是res')
|
|
if (res.result == 0) {
|
|
that.policyListDTOList = res.policyListDTOList
|
|
that.filpolicyListDTOList = res.policyListDTOList
|
|
console.log(this.policyListDTOList, 'data里的policyListDTOList')
|
|
} else {
|
|
that.filpolicyListDTOList = ''
|
|
}
|
|
})
|
|
},
|
|
// (查看详情)按钮跳转
|
|
goPolicyDetail(data) {
|
|
console.log(data)
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + '/#/YB_APP/policyDetail?policyNo=' + data
|
|
},
|
|
routerInfo: {
|
|
path: '/YB_APP/policyDetail?policyNo=' + data
|
|
}
|
|
})
|
|
},
|
|
// 上方关键词搜索按钮
|
|
keywordSearch(value) {
|
|
console.log('点击搜索了')
|
|
// 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')
|
|
}
|
|
},
|
|
|
|
// 关键词搜索过滤
|
|
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>
|
|
.public_container {
|
|
font-size: 12px;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
/deep/ .van-search {
|
|
// background-color: rgb(0, 255, 255);
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
/*height: 6vh;*/
|
|
}
|
|
/deep/ .van-cell--borderless {
|
|
height: 32px;
|
|
// background-color: #f7f7f7;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
.searchButton {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0px;
|
|
background-color: #2154cc;
|
|
color: #ffffff;
|
|
border-radius: 120px;
|
|
padding:9px 15px;
|
|
font-size: 12px;
|
|
border: 0px;
|
|
}
|
|
.noContentImg {
|
|
height: 216px;
|
|
width: 285px;
|
|
position: absolute;
|
|
top: 18%;
|
|
left: calc(50% - 142px);
|
|
}
|
|
.noContentText {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: 37%;
|
|
left: calc(50% - 24px);
|
|
color: #b3b5ca;
|
|
}
|
|
.cardList {
|
|
height: 225px;
|
|
width: 96%;
|
|
border-radius: 12px;
|
|
background-color: white;
|
|
margin: 15px auto;
|
|
overflow: hidden;
|
|
}
|
|
.cardListImg {
|
|
height: 18px;
|
|
width: 14px;
|
|
margin: 12px 7px;
|
|
/*position: absolute;*/
|
|
}
|
|
.visitNo {
|
|
color: #f22220;
|
|
font-weight: 600;
|
|
}
|
|
.rightState {
|
|
height: 100%;
|
|
width: 32%;
|
|
background-color: white;
|
|
}
|
|
.rightStateImg {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
.rightStateButton {
|
|
height: 30px;
|
|
width: 78px;
|
|
color: #d7523b;
|
|
border: #d7523b 1px solid;
|
|
border-radius: 30px;
|
|
background-color: white;
|
|
margin-top: 36px;
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
}
|
|
.cardListText {
|
|
line-height: 5vh;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
.cardConetent {
|
|
height: 22.5vh;
|
|
width: 100%;
|
|
padding: 0px 20px;
|
|
display: flex;
|
|
}
|
|
.textList {
|
|
height: 90%;
|
|
width: 68%;
|
|
color: #9d9d9d;
|
|
padding-top: 14px;
|
|
font-size: 12px;
|
|
}
|
|
.textList > p {
|
|
display: flex;
|
|
margin-bottom: 11px;
|
|
}
|
|
.textList > p > span:nth-of-type(1) {
|
|
display: block;
|
|
// float:left;
|
|
width: 50px;
|
|
// background-color: blueviolet;
|
|
}
|
|
.textList > p > span:nth-of-type(2) {
|
|
// width: 5vh;
|
|
// background-color: rgb(65, 214, 77);
|
|
margin-left: 8vw;
|
|
width: 164px;
|
|
// background-color: chartreuse;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
// .active {
|
|
// color: #f22220;
|
|
// }
|
|
.topbackground1 {
|
|
background: linear-gradient(to right, #435898, #6581c6);
|
|
height: 34px;
|
|
width: 100%;
|
|
color: white;
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
.topbackground2 {
|
|
background: linear-gradient(to right, #fcfcfc, #e8e5e6);
|
|
height: 4.5vh;
|
|
width: 100%;
|
|
color: #323232;
|
|
}
|
|
.state-content {
|
|
padding: 14px;
|
|
}
|
|
.state-content p {
|
|
margin-top: 8px;
|
|
margin-bottom: 6px;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
}
|
|
.bottom-area {
|
|
display:flex;
|
|
justify-content:center;
|
|
margin-top:20px;
|
|
margin-bottom:20px;
|
|
/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;
|
|
}
|
|
.policyNo{
|
|
font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353;
|
|
}
|
|
.underwriteDateClass{
|
|
width: 96%; height: 30px; background-color: #f8f8fa; border-radius: 30px; position: relative;
|
|
}
|
|
.underwriteDateSpan{
|
|
line-height: 30px; margin-left: 10px;
|
|
}
|
|
.underwriteDateImg{
|
|
height: 16px; align-items: center; position: absolute; right: 10px; top: 7px;
|
|
}
|
|
</style>
|