[银保项目]保单列表适配调整.保全和续期去掉图片.背景只有蓝色条件,修改保全字段.样式适配

This commit is contained in:
DESKTOP-AFPHKHF\PC
2022-11-29 20:04:46 +08:00
committed by liu.xiaofeng@ebiz-digits.com
parent 8a2a750401
commit 84387a21b7
7 changed files with 188 additions and 162 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 770 B

View File

@@ -1,11 +1,65 @@
<template>
<div class="public_container">
<!-- 最上方的搜索框 -->
<div>
<div style="position:relative;">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
<!-- 右侧搜索按钮 -->
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
<!-- 右侧搜索按钮 -->
<!-- <div style="height:40px;background-color:aqua"> -->
<!-- <label>
<input type="text" value="请输入保单号" style="background-color: aliceblue;height: 30px;width: 70%;border-radius: 50px;border:0"><img src="" alt=""></input>
<img src="../../assets/YB_APP/images/bigglass.png" alt="">
<button style="border:0;padding:17px 20px;background-color:blue;">搜索</button>
</label> -->
<!-- </div> -->
<!-- 无内容显示的背景 -->
<div v-if="filpolicyListDTOList == ''">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
<p class="noContentText">暂无保单</p>
</div>
<!-- 卡片列表 -->
<div v-if="filpolicyListDTOList != ''" style="overflow:hidden">
<!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @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"/>
<button class="rightStateButton" @click="goPolicyDetail(item.policyNo)">查看详情</button>
</div>
</div>
</div>
<!-- </van-list> -->
</div>
<van-popup v-model="showSideBar" position="right" style="width: 80%; height: 100%" :overlay-style="{ opacity: 0.7 }">
<div class="state-content">
<div>
@@ -58,51 +112,6 @@
<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="noContentTip" @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>
@@ -315,7 +324,7 @@ export default {
},
// 关键词搜索过滤
watch: {
// watch: {
// findValue: {
// handler(value) {
// this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
@@ -327,7 +336,7 @@ export default {
// }
// }
// }
}
// }
}
</script>
<style lang="scss" scoped>
@@ -342,22 +351,24 @@ export default {
border-bottom-right-radius: 12px;
/*height: 6vh;*/
}
/deep/ .van-cell--borderless {
height: 32px;
// /deep/ .van-cell--borderless {
// height: 32px;
// background-color: #f7f7f7;
font-size: 12px;
line-height: 30px;
}
// font-size: 12px;
// line-height: 30px;
// }
.searchButton {
position: absolute;
top: 10px;
right: 12px;
top: 2.67vw;
right: 3.2vw;
background-color: #2154cc;
color: #ffffff;
border-radius: 120px;
padding: 9px 15px;
border-radius: 18px;
// padding: 8px 15px;
font-size: 12px;
border: 0px;
height: 34px;
width: 56px;
}
.noContentImg {
height: 216px;
@@ -374,7 +385,7 @@ export default {
color: #b3b5ca;
}
.cardList {
height: 225px;
// height: 225px;
width: 96%;
border-radius: 12px;
background-color: white;
@@ -382,9 +393,10 @@ export default {
overflow: hidden;
}
.cardListImg {
height: 18px;
width: 14px;
margin: 12px 7px;
height: 16px;
// width: 14px;
// margin: 12px 7px;
margin: 0 7px;
/*position: absolute;*/
}
.visitNo {
@@ -393,8 +405,9 @@ export default {
}
.rightState {
height: 100%;
width: 32%;
// width: 32%;
background-color: white;
overflow: hidden;
}
.rightStateImg {
height: 100px;
@@ -407,36 +420,41 @@ export default {
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 36px;
margin-top: 62px;
margin-left: 10px;
font-size: 12px;
}
.cardListText {
line-height: 6px;
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
// height: 22.5vh;
width: 100%;
padding: 0px 20px;
// padding: 0px 20px;
display: flex;
}
.textList {
height: 90%;
width: 68%;
// height: 90%;
// width: 68%;
color: #9d9d9d;
padding-top: 14px;
font-size: 12px;
padding-left: 20px ;
}
.textList > p {
display: flex;
margin-bottom: 11px;
line-height: 20px;
}
.textList > p > span:nth-of-type(1) {
display: block;
// float:left;
width: 50px;
white-space:nowrap;
// background-color: blueviolet;
}
.textList > p > span:nth-of-type(2) {
@@ -521,9 +539,11 @@ export default {
color: #be5759;
}
.policyNo {
line-height: 14px;
font-size: 14px;
font-weight: 600;
margin-bottom: 13px;
// margin-bottom: 16px;
margin-top: 6px;
color: #535353;
}
.underwriteDateClass {

View File

@@ -32,16 +32,16 @@
</div>
<!-- 下方拨打电话 -->
<div class="bottomPhone">
<button class="bottomPhoneBut" @click="showDialog">拨打电话</button>
<button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button>
</div>
<van-dialog
v-model="show"
title="服务热线"
:message="`确认拨打8888410服务热线吗?`"
title="拨打电话"
:message="`确认拨打电话吗?(${ybOrderDTOList.appntPhone})`"
show-cancel-button
@cancel="cancel"
@confirm="contact"
@confirm="contact(ybOrderDTOList.appntPhone)"
>
</van-dialog>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<div class="public_container">
<!-- 最上方的搜索框 -->
<div>
<div style="position:relative;">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
@@ -39,9 +39,8 @@
<div v-if="policyListDTOList != ''">
<!-- <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="[item.state == 2 ? 'topbackground1' : 'topbackground2']">
<img class="cardListImg" v-if="item.state == 2" src="../../assets/YB_APP/images/sign1.png" />
<img class="cardListImg" v-if="item.state != 2" src="../../assets/YB_APP/images/sign2.png" />
<div class="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<span class="cardListText">{{ item.riskName }}</span>
</div>
<div class="cardConetent">
@@ -78,7 +77,6 @@
</p>
</div>
<div class="rightState">
<img class="rightStateImg" :src="item.stateRoute" alt="" />
<button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item.contNo)">查看详情</button>
</div>
</div>
@@ -124,8 +122,8 @@ export default {
calendarValue:'',
calendarShow:false,
currentDate:new Date(),
minDate: new Date(2022, 2, 0),
maxDate: new Date(2022, 12, 0),
minDate: '',
maxDate: '',
params: {
contNo: '', // 保单号
idNo: '', // 身份证号
@@ -136,6 +134,12 @@ export default {
},
created() {},
mounted() {
let aaa = new Date().getMonth()+1
let bbb = aaa - 3
let ccc = aaa + 1
this.minDate = new Date(2022,bbb,0)
this.maxDate = new Date(2022,ccc,0)
console.log(this.minDate,1111)
let yearNum = new Date().getFullYear()
let monthNum = new Date().getMonth()+1
this.calendarValue = yearNum+'-'+monthNum
@@ -224,14 +228,16 @@ export default {
}
.searchButton {
position: absolute;
top: 10px;
right: 12px;
top: 2.67vw;
right: 3.2vw;
background-color: #2154cc;
color: #ffffff;
border-radius: 120px;
padding: 9px 15px;
border-radius: 18px;
// padding: 8px 15px;
font-size: 12px;
border: 0px;
height: 34px;
width: 56px;
}
.beMonth {
width: 94%;
@@ -276,7 +282,7 @@ export default {
color: #b3b5ca;
}
.cardList {
height: 244px;
// height: 244px;
// height: 300px;
width: 96%;
border-radius: 12px;
@@ -296,9 +302,9 @@ export default {
margin-bottom: 12px;
}
.cardListImg {
height: 18px;
width: 14px;
margin: 12px 7px;
height: 16px;
// width: 14px;
margin: 0 7px;
/*position: absolute;*/
}
.rightState {
@@ -317,9 +323,9 @@ export default {
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 57px;
margin-top: 157px;
// margin-top: 113px;
margin-left: 10px;
margin-left: 4px;
font-size: 12px;
}
.rightStateButton2 {
@@ -330,14 +336,16 @@ export default {
border-radius: 30px;
background-color: white;
// margin-top: 57px;
margin-top: 113px;
margin-left: 10px;
margin-top: 213px;
margin-left: 4px;
font-size: 12px;
}
.cardListText {
line-height: 6px;
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
// height: 22.5vh;
@@ -384,14 +392,14 @@ export default {
display: flex;
align-items: center;
}
.topbackground2 {
background: linear-gradient(to right, #fcfcfc, #e8e5e6);
height: 34px;
width: 100%;
color: #323232;
display: flex;
align-items: center;
}
// .topbackground2 {
// background: linear-gradient(to right, #fcfcfc, #e8e5e6);
// height: 34px;
// width: 100%;
// color: #323232;
// display: flex;
// align-items: center;
// }
.redword {
color: #e72611;
font-weight: 700;

View File

@@ -47,7 +47,7 @@ export default {
methods: {
ybSaveAllDetail() {
let params = {
policyNo: this.policyNo
edorAcceptNo: this.policyNo
}
console.log('我是log')
ybSaveAllDetail(params).then((res) => {
@@ -69,7 +69,7 @@ export default {
}
/deep/ .van-cell__title {
color: #0a0808;
max-width: 30%;
max-width: 40%;
}
/deep/ .van-cell__value {
color: #777676;

View File

@@ -42,7 +42,7 @@ export default {
methods: {
ybSaveManyDetail() {
let params = {
policyNo: this.policyNo
contNo: this.policyNo
}
console.log('我是log')
ybSaveManyDetail(params).then((res) => {

View File

@@ -1,7 +1,7 @@
<template>
<div class="public_container">
<!-- 最上方的搜索框 -->
<div>
<div style="position:relative;">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
@@ -33,9 +33,8 @@
<div v-if="policyListDTOList != ''">
<!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
<div class="cardList" v-for="(item, index) in policyListDTOList" :key="index">
<div :class="[item.edorState == 1 ? 'topbackground1' : 'topbackground2']">
<img class="cardListImg" v-if="item.edorState == 1" src="../../assets/YB_APP/images/sign1.png" />
<img class="cardListImg" v-if="item.edorState != 1" src="../../assets/YB_APP/images/sign2.png" />
<div class="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<span class="cardListText">{{ item.riskName }}</span>
</div>
<div class="cardConetent">
@@ -60,8 +59,7 @@
</p>
</div>
<div class="rightState">
<img class="rightStateImg" :src="item.stateRoute" alt="" />
<button class="rightStateButton" @click="goPolicyDetail(item.contNo)">查看详情</button>
<button class="rightStateButton" @click="goPolicyDetail(item.edorAcceptNo)">查看详情</button>
</div>
</div>
</div>
@@ -83,10 +81,9 @@
<!-- 卡片列表 -->
<div v-if="policyListDTOListTwo != ''">
<!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip2" @load="onLoad"> -->
<div class="cardList2" v-for="(item, index) in policyListDTOListTwo" :key="index">
<div :class="[item.contState == 1 ? 'topbackground1' : 'topbackground2']">
<img class="cardListImg" v-if="item.contState == 1" src="../../assets/YB_APP/images/sign1.png" />
<img class="cardListImg" v-if="item.contState != 1" src="../../assets/YB_APP/images/sign2.png" />
<div class="cardList" v-for="(item, index) in policyListDTOListTwo" :key="index">
<div class="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<span class="cardListText">{{ item.riskName }}</span>
</div>
<div class="cardConetent">
@@ -95,14 +92,14 @@
<span>保单号</span><span>{{ item.contNo }}</span>
</p>
<p>
<span>保人</span><span>{{ item.appntName }}</span>
<span>保人</span><span>{{ item.appntName }}</span>
</p>
<p>
<span>承保日期</span><span>{{ item.signDate }}</span>
</p>
</div>
<div class="rightState">
<button class="rightStateButton2" @click="goPolicyDetail2(item.policyNo)">查看详情</button>
<button class="rightStateButton2" @click="goPolicyDetail2(item.contNo)">查看详情</button>
</div>
</div>
</div>
@@ -138,8 +135,7 @@ export default {
policyListDTOList: [], // 保全申请进度卡片列表内容
policyListDTOListTwo: [], // 现金价值卡片列表内容
params: {
contNo: '',
idNo: ''
otherNo: '', // 搜索按钮入参
}
}
},
@@ -155,7 +151,7 @@ export default {
getSaveAllList(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
that.policyListDTOList = res.content.list
that.policyListDTOList = res.content
console.log(this.policyListDTOList, 'data里的policyListDTOList')
} else {
that.policyListDTOList = ''
@@ -165,18 +161,18 @@ export default {
ybSaveManyList(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
that.policyListDTOListTwo = res.content.ybQuerySaveMoneyDTOList
console.log(this.policyListDTOList, 'data里的policyListDTOList')
that.policyListDTOListTwo = res.content
console.log(this.policyListDTOListTwo, 'data里的policyListDTOListTwo')
} else {
that.policyListDTOList = ''
that.policyListDTOListTwo = ''
}
})
},
// 上方关键词搜索按钮
keywordSearch(value) {
console.log('点击搜索了')
this.params.idNo = value
this.params.contNo = value
// this.params.idNo = value
this.params.otherNo = value
this.getSaveAllList()
},
// (查看详情)按钮跳转
@@ -223,14 +219,16 @@ export default {
}
.searchButton {
position: absolute;
top: 10px;
right: 12px;
top: 2.67vw;
right: 3.2vw;
background-color: #2154cc;
color: #ffffff;
border-radius: 120px;
padding: 9px 15px;
border-radius: 18px;
// padding: 8px 15px;
font-size: 12px;
border: 0px;
height: 34px;
width: 56px;
}
.noContentImg {
height: 216px;
@@ -248,16 +246,7 @@ export default {
}
.cardList {
// height: 244px;
height: 224px;
width: 96%;
border-radius: 12px;
background-color: white;
margin: 0 auto;
overflow: hidden;
margin-bottom: 12px;
}
.cardList2 {
height: 136px;
// height: 226px;
width: 96%;
border-radius: 12px;
background-color: white;
@@ -265,17 +254,26 @@ export default {
overflow: hidden;
margin-bottom: 12px;
}
// .cardList2 {
// height: 136px;
// width: 96%;
// border-radius: 12px;
// background-color: white;
// margin: 0 auto;
// overflow: hidden;
// margin-bottom: 12px;
// }
.cardListImg {
height: 18px;
width: 14px;
margin: 12px 7px;
height: 16px;
// width: 14px;
margin: 0 7px;
/*position: absolute;*/
}
.rightState {
height: 100%;
width: 32%;
background-color: white;
}
// .rightState {
// height: 100%;
// width: 32%;
// background-color: rgb(236, 9, 9);
// }
.rightStateImg {
height: 100px;
width: 100px;
@@ -287,8 +285,8 @@ export default {
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 31px;
margin-left: 10px;
margin-top: 124px;
margin-left: 4px;
font-size: 12px;
}
.rightStateButton2 {
@@ -298,24 +296,27 @@ export default {
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 52px;
margin-left: 10px;
margin-top: 46px;
margin-left: 4px;
font-size: 12px;
}
.cardListText {
line-height: 6px;
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
// height: 22.5vh;
width: 100%;
padding: 0px 20px;
// padding: 0px 20px;
display: flex;
}
.textList {
height: 90%;
width: 68%;
// height: 90%;
// width: 68%;
padding-left: 20px;
color: #9d9d9d;
padding-top: 16px;
font-size: 12px;
@@ -323,11 +324,14 @@ export default {
.textList > p {
display: flex;
margin-bottom: 11px;
line-height: 12px;
}
.textList > p > span:nth-of-type(1) {
display: block;
// float:left;
width: 50px;
overflow: hidden;
white-space:nowrap;
// background-color: blueviolet;
// color: #373737;
}
@@ -349,15 +353,9 @@ export default {
display: flex;
align-items: center;
}
.topbackground2 {
background: linear-gradient(to right, #fcfcfc, #e8e5e6);
height: 34px;
width: 100%;
color: #323232;
display: flex;
align-items: center;
}
.warmTip {
white-space:nowrap;
padding: 5px 0;
height: 28px;
background-color: #fff8ed;