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

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

Browse Source
This commit is contained in:
DESKTOP-AFPHKHF\PC
2022-11-29 20:04:46 +08:00
committed by liu.xiaofeng@ebiz-digits.com
parent 48054da8c3
commit 1728dd4072
7 changed files with 1224 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/YB_APP/images/bigglass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 770 B

247
src/views/YB_APP/policyList.vue
View File

@@ -1,26 +1,77 @@
<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>
<van-popup v-model="showSideBar" position="right" style="width: 80%;height: 100%;" :overlay-style="{ opacity: 0.7 }">
<!-- 右侧搜索按钮 -->
<!-- <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>
<p>承保日期</p>
<div class="underwriteDateClass">
<span class="underwriteDateSpan">{{ underwriteDate }}</span
><img class="underwriteDateImg"
@click="datechange"
src="../../assets/YB_APP/images/date.png"
/>
><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 class="chooseMessage">
<div v-for="(item, index) in list1" :key="index">
<button @click="warrantyState(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangewarranty == index }">{{ item.name }}</button>
</div>
@@ -28,7 +79,7 @@
</div>
<div>
<p>渠道名称</p>
<div style="display: flex; flex-wrap: wrap">
<div class="chooseMessage">
<div v-for="(item, index) in list2" :key="index">
<button @click="channelName(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangechannel == index }">{{ item.name }}</button>
</div>
@@ -36,7 +87,7 @@
</div>
<div>
<p>回访成功</p>
<div style="display: flex; flex-wrap: wrap">
<div class="chooseMessage">
<div v-for="(item, index) in list3" :key="index">
<button @click="visitSucceed(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitSucceed == index }">{{ item.name }}</button>
</div>
@@ -44,7 +95,7 @@
</div>
<div>
<p>回访完成</p>
<div style="display: flex; flex-wrap: wrap">
<div class="chooseMessage">
<div v-for="(item, index) in list3" :key="index">
<button @click="visitAccomplish(index)" class="buttonChangebe" :class="{ buttonChangeaf: clickChangevisitAccomplish == index }">
{{ item.name }}
@@ -61,52 +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="没有更多了" @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>
@@ -160,8 +165,6 @@ export default {
calendarShow: false,
currentDate: new Date(),
underwriteDate: '', // 承保日期的时间
loading: false,
finished: false,
params: {
signDate: '', // 日期
riskCode: '', // 保单号
@@ -208,21 +211,6 @@ export default {
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
@@ -336,7 +324,7 @@ export default {
},
// 关键词搜索过滤
watch: {
// watch: {
// findValue: {
// handler(value) {
// this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
@@ -348,7 +336,7 @@ export default {
// }
// }
// }
}
// }
}
</script>
<style lang="scss" scoped>
@@ -363,39 +351,41 @@ 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: 0px;
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;
width: 285px;
// width: 285px;
position: absolute;
top: 18%;
top: 120px;
left: calc(50% - 142px);
}
.noContentText {
font-size: 12px;
position: absolute;
top: 37%;
top: 279px;
left: calc(50% - 24px);
color: #b3b5ca;
}
.cardList {
height: 225px;
// height: 225px;
width: 96%;
border-radius: 12px;
background-color: white;
@@ -403,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 {
@@ -414,8 +405,9 @@ export default {
}
.rightState {
height: 100%;
width: 32%;
// width: 32%;
background-color: white;
overflow: hidden;
}
.rightStateImg {
height: 100px;
@@ -428,42 +420,47 @@ 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: 5vh;
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
height: 22.5vh;
// 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) {
// width: 5vh;
// background-color: rgb(65, 214, 77);
margin-left: 8vw;
margin-left: 28px;
width: 164px;
// background-color: chartreuse;
overflow: hidden;
@@ -478,14 +475,16 @@ export default {
height: 34px;
width: 100%;
color: white;
display:flex;
align-items:center;
display: flex;
align-items: center;
}
.topbackground2 {
background: linear-gradient(to right, #fcfcfc, #e8e5e6);
height: 4.5vh;
height: 34px;
width: 100%;
color: #323232;
display: flex;
align-items: center;
}
.state-content {
padding: 14px;
@@ -497,10 +496,10 @@ export default {
font-size: 14px;
}
.bottom-area {
display:flex;
justify-content:center;
margin-top:20px;
margin-bottom:20px;
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
/deep/.m-btn-left {
width: 40%;
border-color: transparent;
@@ -539,16 +538,34 @@ export default {
background-color: #fbe7e4;
color: #be5759;
}
.policyNo{
font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353;
.policyNo {
line-height: 14px;
font-size: 14px;
font-weight: 600;
// margin-bottom: 16px;
margin-top: 6px;
color: #535353;
}
.underwriteDateClass{
width: 96%; height: 30px; background-color: #f8f8fa; border-radius: 30px; position: relative;
.underwriteDateClass {
width: 96%;
height: 30px;
background-color: #f8f8fa;
border-radius: 30px;
position: relative;
}
.underwriteDateSpan{
line-height: 30px; margin-left: 10px;
.underwriteDateSpan {
line-height: 30px;
margin-left: 10px;
}
.underwriteDateImg{
height: 16px; align-items: center; position: absolute; right: 10px; top: 7px;
.underwriteDateImg {
height: 16px;
align-items: center;
position: absolute;
right: 10px;
top: 7px;
}
.chooseMessage {
display: flex;
flex-wrap: wrap;
}
</style>

142
src/views/YB_APP/renewalDetail.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<div class="public_container">
<!-- 上方小图标 -->
<div class="topTitle">
<div v-if="abc == 1">
<van-icon name="underway-o" color="#EA070A" size="30" />
<p class="topTitleText">{{ ybOrderDTOList.defaultReson }}</p>
</div>
<div v-if="abc == 2">
<van-icon name="passed" color="#2451C1" size="30" />
<p class="topTitleText">续期扣款成功</p>
</div>
</div>
<!-- 中间内容 -->
<div class="listContent">
<van-cell-group inset>
<van-cell title="保单号" :value="ybOrderDTOList.contNo" />
<van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
<van-cell title="首期保费/元" :value="ybOrderDTOList.money" />
<van-cell title="保额/元" :value="ybOrderDTOList.amnt" />
<van-cell title="投保人" :value="ybOrderDTOList.appntName" />
<van-cell title="被保险人" :value="ybOrderDTOList.insuredName" />
<van-cell title="转账银行" :value="ybOrderDTOList.bankCode" />
<van-cell title="转账帐号" :value="ybOrderDTOList.bankAccNo" />
<van-cell title="交费次数" :value="ybOrderDTOList.payTimes" />
<van-cell title="应交日" :value="ybOrderDTOList.chargeDate" />
<van-cell title="归属网点" :value="ybOrderDTOList.netWorkName" />
<van-cell title="归属地市" :value="ybOrderDTOList.city" />
<van-cell title="保单生效日" :value="ybOrderDTOList.payToDate" />
<van-cell title="归属指标" :value="ybOrderDTOList.rnewIndex" />
</van-cell-group>
</div>
<!-- 下方拨打电话 -->
<div class="bottomPhone">
<button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button>
</div>
<van-dialog
v-model="show"
title="拨打电话"
:message="`确认要拨打电话吗?(${ybOrderDTOList.appntPhone})`"
show-cancel-button
@cancel="cancel"
@confirm="contact(ybOrderDTOList.appntPhone)"
>
</van-dialog>
</div>
</template>
<script>
import { getYBRenewalInfo } from '@/api/YB_APP/index'
export default {
name: 'policyDetail',
components: {},
data() {
return {
ybOrderDTOList: '',
policyNo: '',
abc: 2,
show: false,
}
},
mounted() {
this.policyNo = this.$route.query.policyNo
console.log(this.policyNo, 'avc')
this.getYBRenewalInfo()
},
methods: {
cancel(){
this.show = false
},
showDialog() {
this.show = true;// 显示确认对话框
},
contact() {
const a = document.createElement("a");
a.href = "tel:8888410"
a.click();
this.show = false;
},
callPhone (phoneNumber) {
window.location.href = 'tel://' + phoneNumber},
getYBRenewalInfo() {
let params = {
policyNo: this.policyNo
}
console.log('我是log')
getYBRenewalInfo(params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
this.ybOrderDTOList = res.content
console.log(this.ybOrderDTOList, '请求成功的res')
}
})
}
}
}
</script>
<style lang="scss" scoped>
.public_container {
font-size: 12px;
height: 100vh;
width: 100vw;
}
/deep/ .van-cell__title {
color: #0a0808;
max-width: 30%;
}
/deep/ .van-cell__value {
color: #777676;
// text-align: left;
}
// /deep/ .van-cell-group >
.topTitle {
text-align: center;
margin: 22px;
}
.topTitleText {
font-weight: 700;
margin-top: 4px;
font-size: 14px;
}
.listContent {
width: 96%;
background-color: white;
margin: 12px auto;
overflow: hidden;
border-radius: 12px;
}
.bottomPhone {
text-align: center;
margin-top: 30px;
}
.bottomPhoneBut {
padding: 8px 40px;
background-color: #fd3841;
color: #ffffff;
border: 0;
border-radius: 24px;
font-size: 14px;
}
</style>

408
src/views/YB_APP/renewalList.vue Normal file
View File

@@ -0,0 +1,408 @@
<template>
<div class="public_container">
<!-- 最上方的搜索框 -->
<div style="position:relative;">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
<!-- 标签选择 -->
<div>
<van-tabs
v-model="active"
sticky
color="#2551CA"
line-width="20px"
line-height="5px"
title-active-color="#000000"
title-inactive-color="#6A6A6A"
title-active-font-width="14px"
>
<van-tab title="应收未收"></van-tab>
<van-tab title="已交费"></van-tab>
<van-tab title="扣费失败"></van-tab>
<van-tab title="终止"></van-tab>
</van-tabs>
</div>
<!-- 内容 -->
<div>
<!-- 应交月选择 -->
<div class="beMonth">
<p class="beMonthLeft">应交月 <span class="beMonthLeftSpan">(查询范围: 当前月份前期前溯3月~后推1月)</span></p>
<p class="beMonthRight" @click="clickCalendar"><span class="beMonthRightSpan">{{calendarValue}}</span>▼</p>
</div>
<!-- 无内容显示的背景 -->
<div v-if="policyListDTOList == ''">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
<p class="noContentText">暂无保单</p>
</div>
<!-- 卡片列表 -->
<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="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<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.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>
<!-- </van-list> -->
</div>
</div>
<van-popup v-model="calendarShow" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="year-month"
title="选择日期"
:min-date="minDate"
:max-date="maxDate"
@cancel="handleCurrentDateCancel"
@confirm="handleCurrentDateConfirm"
/>
</van-popup>
</div>
</template>
<script>
import { Button, Search } from 'vant'
import { ref } from 'vue'
import { getYBRenewalsList } from '@/api/YB_APP/index'
import utils from '@/assets/js/utils/date-utils'
export default {
name: 'renewalList',
components: {
[Button.name]: Button,
[Search.name]: Search
},
setup() {
const value = ref('')
return { value }
},
data() {
return {
findValue: '', // 上面搜索框的value
active: '', // 四个选项卡的v-model
policyListDTOList: [], // 卡片列表内容
calendarValue:'',
calendarShow:false,
currentDate:new Date(),
minDate: '',
maxDate: '',
params: {
contNo: '', // 保单号
idNo: '', // 身份证号
payToDate: '', // 时间
state: '' // 状态
}
}
},
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
this.getYBRenewalsList()
},
methods: {
// 上方关键词搜索按钮
keywordSearch(value) {
console.log('点击搜索了')
this.params.idNo = value
this.params.contNo = value
this.getYBRenewalsList()
},
getYBRenewalsList() {
let that = this
getYBRenewalsList(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
that.policyListDTOList = res.content.list
console.log(res.content.list, 'data里的policyListDTOList')
} else {
that.policyListDTOList = ''
}
})
},
// (查看详情)按钮跳转
goPolicyDetail(data) {
console.log(data)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/YB_APP/renewalDetail?policyNo=' + data
},
routerInfo: {
path: '/YB_APP/renewalDetail?policyNo=' + data
}
})
},
clickCalendar(){
this.calendarShow = true
},
handleCurrentDateCancel() {
this.calendarShow = false
},
handleCurrentDateConfirm(e) {
this.calendarShow = false
// let titleTime = utils.formatDate(e, 'yyyy-MM')
// this.calendarValue = utils.formatDate(e, 'MM-dd')
let yearNum = utils.formatDate(e, 'yyyy')
let monthNum = utils.formatDate(e, 'MM')
this.calendarValue = yearNum+'-'+monthNum
// this.getYBRenewalsList()
},
},
watch: {
active: {
deep: true,
handler(newvalue) {
this.params.state = newvalue
this.getYBRenewalsList()
}
},
calendarValue: {
deep: true,
handler(newvalue) {
this.params.payToDate = newvalue
this.getYBRenewalsList()
}
}
}
}
</script>
<style lang="scss" scoped>
.public_container {
font-size: 12px;
height: 100vh;
width: 100vw;
}
/deep/ .van-hairline--top-bottom::after {
border: 0px;
}
/deep/ .van-tab--active {
font-weight: 800;
font-size: 15px;
}
.searchButton {
position: absolute;
top: 2.67vw;
right: 3.2vw;
background-color: #2154cc;
color: #ffffff;
border-radius: 18px;
// padding: 8px 15px;
font-size: 12px;
border: 0px;
height: 34px;
width: 56px;
}
.beMonth {
width: 94%;
margin: 0 auto;
display: flex;
justify-content: space-between;
height: 50px;
line-height: 50px;
}
.beMonthLeft {
font-size: 14px;
color: #323232;
font-weight: 600;
}
.beMonthLeftSpan {
font-weight: 500;
font-size: 12px;
color: #929292;
}
.beMonthRight {
background-color: #ffffff;
height: 24px;
padding: 2px 5px;
margin-top: 12px;
line-height: 24px;
}
.beMonthRightSpan {
margin-right: 5px;
}
.noContentImg {
height: 216px;
// width: 285px;
position: absolute;
top: 156px;
left: calc(50% - 142px);
}
.noContentText {
font-size: 12px;
position: absolute;
top: 315px;
left: calc(50% - 24px);
color: #b3b5ca;
}
.cardList {
// height: 244px;
// height: 300px;
width: 96%;
border-radius: 12px;
background-color: white;
margin: 0 auto;
overflow: hidden;
margin-bottom: 12px;
}
.cardList2 {
// height: 244px;
height: 300px;
width: 96%;
border-radius: 12px;
background-color: white;
margin: 0 auto;
overflow: hidden;
margin-bottom: 12px;
}
.cardListImg {
height: 16px;
// width: 14px;
margin: 0 7px;
/*position: absolute;*/
}
.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: 157px;
// margin-top: 113px;
margin-left: 4px;
font-size: 12px;
}
.rightStateButton2 {
height: 30px;
width: 78px;
color: #d7523b;
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
// margin-top: 57px;
margin-top: 213px;
margin-left: 4px;
font-size: 12px;
}
.cardListText {
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
// height: 22.5vh;
width: 100%;
padding: 0px 20px;
display: flex;
}
.textList {
height: 90%;
width: 68%;
color: #9d9d9d;
padding-top: 16px;
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;
color: #373737;
}
.textList > p > span:nth-of-type(2) {
// width: 5vh;
// background-color: rgb(65, 214, 77);
margin-left: 28px;
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: 34px;
// width: 100%;
// color: #323232;
// display: flex;
// align-items: center;
// }
.redword {
color: #e72611;
font-weight: 700;
font-size: 14px;
}
</style>

86
src/views/YB_APP/saveallDetail.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<div class="public_container">
<!-- 中间内容 -->
<div class="listContent">
<van-cell-group inset>
<van-cell title="保单号" :value="ybOrderDTOList.contNo" />
<van-cell title="保全项目" :value="ybOrderDTOList.edorName" />
<van-cell title="投保人" :value="ybOrderDTOList.appntName" />
<van-cell title="网点名称" :value="ybOrderDTOList.networdName" />
<van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
<van-cell title="首期规模保费/元" :value="ybOrderDTOList.prem" />
<van-cell title="保单累计已交保费/元" :value="ybOrderDTOList.sumPrem" />
<van-cell title="承保日期" :value="ybOrderDTOList.signDate" />
<van-cell title="保全申请日期" :value="ybOrderDTOList.edorAppDate" />
<van-cell title="保全生效日期" :value="ybOrderDTOList.edorValiDate" />
<van-cell title="保单状态" :value="ybOrderDTOList.contState" />
<van-cell title="申请渠道" :value="ybOrderDTOList.appChannel" />
<van-cell title="办理类型" :value="ybOrderDTOList.appType" />
<van-cell title="代办顾问姓名" :value="ybOrderDTOList.agencyName" />
<van-cell title="代办顾问工号" :value="ybOrderDTOList.agencyCode" />
<van-cell title="保全进度" :value="ybOrderDTOList.edorState" />
<van-cell title="交易状态" :value="ybOrderDTOList.transState" />
<van-cell title="交易账户银行" :value="ybOrderDTOList.transBank" />
<van-cell title="交易账户" :value="ybOrderDTOList.transCardNo" />
<van-cell title="退保金额/元" :value="ybOrderDTOList.transMoney" />
</van-cell-group>
</div>
</div>
</template>
<script>
import { ybSaveAllDetail } from '@/api/YB_APP/index'
export default {
name: 'policyDetail',
components: {},
data() {
return {
ybOrderDTOList: '',
policyNo: ''
}
},
mounted() {
this.policyNo = this.$route.query.policyNo
console.log(this.policyNo, 'avc')
this.ybSaveAllDetail()
},
methods: {
ybSaveAllDetail() {
let params = {
edorAcceptNo: this.policyNo
}
console.log('我是log')
ybSaveAllDetail(params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
this.ybOrderDTOList = res.content
console.log(this.ybOrderDTOList, '请求成功的res')
}
})
}
}
}
</script>
<style lang="scss" scoped>
.public_container {
font-size: 12px;
height: 100vh;
width: 100vw;
}
/deep/ .van-cell__title {
color: #0a0808;
max-width: 40%;
}
/deep/ .van-cell__value {
color: #777676;
// text-align: left;
}
// /deep/ .van-cell-group >
.listContent {
width: 96%;
background-color: white;
margin: 12px auto;
overflow: hidden;
border-radius: 12px;
}
</style>

81
src/views/YB_APP/saveallDetailTwo.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<div class="public_container">
<!-- 中间内容 -->
<div class="listContent">
<van-cell-group inset>
<van-cell title="保单号" :value="ybOrderDTOList.contNo" />
<van-cell title="投保人" :value="ybOrderDTOList.appntName" />
<van-cell title="投保人身份证号" :value="ybOrderDTOList.appntIdNo" />
<van-cell title="投保人年龄/周岁" :value="ybOrderDTOList.appntAge" />
<van-cell title="网点名称" :value="ybOrderDTOList.networkName" />
<van-cell title="险种名称" :value="ybOrderDTOList.riskName" />
<van-cell title="首期规模保费/元" :value="ybOrderDTOList.prem" />
<van-cell title="交费期间" :value="ybOrderDTOList.payEndYear" />
<van-cell title="保险期间" :value="ybOrderDTOList.insuYear" />
<van-cell title="保全状态" :value="ybOrderDTOList.contState" />
<van-cell title="承保日期" :value="ybOrderDTOList.signDate" />
<van-cell title="保单现金价值/元" :value="ybOrderDTOList.cashValue" />
<van-cell title="累计账户红利余额/元 (含本期)" :value="ybOrderDTOList.bonusMoney" />
<van-cell title="累计账户生存金余额/元 (含本期)" :value="ybOrderDTOList.survivalMoney" />
<van-cell title="满期生存金/元" :value="ybOrderDTOList.getMoney" />
</van-cell-group>
</div>
</div>
</template>
<script>
import { ybSaveManyDetail } from '@/api/YB_APP/index'
export default {
name: 'policyDetail',
components: {},
data() {
return {
ybOrderDTOList: '',
policyNo: ''
}
},
mounted() {
this.policyNo = this.$route.query.policyNo
console.log(this.policyNo, 'avc')
this.ybSaveManyDetail()
},
methods: {
ybSaveManyDetail() {
let params = {
contNo: this.policyNo
}
console.log('我是log')
ybSaveManyDetail(params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
this.ybOrderDTOList = res.content
console.log(this.ybOrderDTOList, '请求成功的res')
}
})
}
}
}
</script>
<style lang="scss" scoped>
.public_container {
font-size: 12px;
height: 100vh;
width: 100vw;
}
/deep/ .van-cell__title {
color: #0a0808;
max-width: 50%;
}
/deep/ .van-cell__value {
color: #777676;
// text-align: left;
}
// /deep/ .van-cell-group >
.listContent {
width: 96%;
background-color: white;
margin: 12px auto;
overflow: hidden;
border-radius: 12px;
}
</style>

375
src/views/YB_APP/saveallList.vue Normal file
View File

@@ -0,0 +1,375 @@
<template>
<div class="public_container">
<!-- 最上方的搜索框 -->
<div style="position:relative;">
<van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
<button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
</div>
<!-- 标签选择 -->
<div>
<van-tabs
v-model="active"
color="#2551CA"
line-width="20px"
line-height="5px"
title-active-color="#000000"
title-inactive-color="#6A6A6A"
title-active-font-width="14px"
>
<!-- 保全申请进度第一个标签内容 -->
<van-tab title="保全申请进度">
<!-- 温馨提示 -->
<div>
<p class="warmTip">
<img class="warmImg" src="../../assets/YB_APP/images/plaint.png" /><span>温馨提示: 支持保单号或投保人身份证号查询保全申请进度。</span>
</p>
</div>
<!-- 无内容显示的背景 -->
<div v-if="policyListDTOList == ''">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
<p class="noContentText">暂无保单</p>
</div>
<!-- 卡片列表 -->
<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="topbackground1">
<img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
<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.edorName }}</span>
</p>
<p>
<span>投保人</span><span>{{ item.appntName }}</span>
</p>
<p>
<span>网点名称</span><span>{{ item.networkName }}</span>
</p>
<p>
<span>转账帐号</span><span>{{ item.edorAcceptNo }}</span>
</p>
<p>
<span>申请日期</span><span>{{ item.edorAppDate }}</span>
</p>
</div>
<div class="rightState">
<button class="rightStateButton" @click="goPolicyDetail(item.edorAcceptNo)">查看详情</button>
</div>
</div>
</div>
<!-- </van-list> -->
</div>
</van-tab>
<!-- 现金价值第二个标签内容 -->
<van-tab title="现金价值"
><div>
<p class="warmTip">
<img class="warmImg" src="../../assets/YB_APP/images/plaint.png" /><span>温馨提示: 支持保单号或投保人身份证号查询保全申请进度。</span>
</p>
</div>
<!-- 无内容显示的背景 -->
<div v-if="policyListDTOListTwo == ''">
<img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
<p class="noContentText">暂无保单</p>
</div>
<!-- 卡片列表 -->
<div v-if="policyListDTOListTwo != ''">
<!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip2" @load="onLoad"> -->
<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">
<div class="textList">
<p>
<span>保单号</span><span>{{ item.contNo }}</span>
</p>
<p>
<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.contNo)">查看详情</button>
</div>
</div>
</div>
<!-- </van-list> -->
</div></van-tab
>
</van-tabs>
</div>
<!-- 内容 -->
<div></div>
</div>
</template>
<script>
import { Button, Search } from 'vant'
import { ref } from 'vue'
import { getSaveAllList, ybSaveManyList } from '@/api/YB_APP/index'
export default {
name: 'renewalList',
components: {
[Button.name]: Button,
[Search.name]: Search
},
setup() {
const value = ref('')
return { value }
},
data() {
return {
findValue: '', // 上面搜索框的value
active: '', // 四个选项卡的v-model
policyListDTOList: [], // 保全申请进度卡片列表内容
policyListDTOListTwo: [], // 现金价值卡片列表内容
params: {
otherNo: '', // 搜索按钮入参
}
}
},
created() {},
mounted() {
this.getSaveAllList()
},
methods: {
getSaveAllList() {
let that = this
console.log('我是log123')
// 保全申请列表
getSaveAllList(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
that.policyListDTOList = res.content
console.log(this.policyListDTOList, 'data里的policyListDTOList')
} else {
that.policyListDTOList = ''
}
})
// 现金价值
ybSaveManyList(that.params).then((res) => {
console.log(res, '我是res')
if (res.result == 0) {
that.policyListDTOListTwo = res.content
console.log(this.policyListDTOListTwo, 'data里的policyListDTOListTwo')
} else {
that.policyListDTOListTwo = ''
}
})
},
// 上方关键词搜索按钮
keywordSearch(value) {
console.log('点击搜索了')
// this.params.idNo = value
this.params.otherNo = value
this.getSaveAllList()
},
// (查看详情)按钮跳转
goPolicyDetail(data) {
console.log(data)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/YB_APP/saveallDetail?policyNo=' + data
},
routerInfo: {
path: '/YB_APP/saveallDetail?policyNo=' + data
}
})
},
goPolicyDetail2(data) {
console.log(data)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/YB_APP/saveallDetailTwo?policyNo=' + data
},
routerInfo: {
path: '/YB_APP/saveallDetailTwo?policyNo=' + data
}
})
}
}
}
</script>
<style lang="scss" scoped>
.public_container {
font-size: 12px;
height: 100vh;
width: 100vw;
}
/deep/ .van-hairline--top-bottom::after {
border: 0px;
}
/deep/ .van-tab--active {
font-weight: 800;
font-size: 15px;
}
.searchButton {
position: absolute;
top: 2.67vw;
right: 3.2vw;
background-color: #2154cc;
color: #ffffff;
border-radius: 18px;
// padding: 8px 15px;
font-size: 12px;
border: 0px;
height: 34px;
width: 56px;
}
.noContentImg {
height: 216px;
// width: 285px;
position: absolute;
top: 124px;
left: calc(50% - 142px);
}
.noContentText {
font-size: 12px;
position: absolute;
top: 283px;
left: calc(50% - 24px);
color: #b3b5ca;
}
.cardList {
// height: 244px;
// height: 226px;
width: 96%;
border-radius: 12px;
background-color: white;
margin: 0 auto;
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: 16px;
// width: 14px;
margin: 0 7px;
/*position: absolute;*/
}
// .rightState {
// height: 100%;
// width: 32%;
// background-color: rgb(236, 9, 9);
// }
.rightStateImg {
height: 100px;
width: 100px;
}
.rightStateButton {
height: 30px;
width: 78px;
color: #d7523b;
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 124px;
margin-left: 4px;
font-size: 12px;
}
.rightStateButton2 {
height: 30px;
width: 78px;
color: #d7523b;
border: #d7523b 1px solid;
border-radius: 30px;
background-color: white;
margin-top: 46px;
margin-left: 4px;
font-size: 12px;
}
.cardListText {
line-height: 34px;
font-weight: 600;
font-size: 14px;
height: 100%;
width: 100%;
}
.cardConetent {
// height: 22.5vh;
width: 100%;
// padding: 0px 20px;
display: flex;
}
.textList {
// height: 90%;
// width: 68%;
padding-left: 20px;
color: #9d9d9d;
padding-top: 16px;
font-size: 12px;
}
.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;
}
.textList > p > span:nth-of-type(2) {
// width: 5vh;
// background-color: rgb(65, 214, 77);
margin-left: 28px;
width: 164px;
// background-color: chartreuse;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
}
.topbackground1 {
background: linear-gradient(to right, #435898, #6581c6);
height: 34px;
width: 100%;
color: white;
display: flex;
align-items: center;
}
.warmTip {
white-space:nowrap;
padding: 5px 0;
height: 28px;
background-color: #fff8ed;
color: #c88b40;
border: 1px solid #f8e7d7;
margin: 10px;
border-radius: 8px;
text-align: center;
line-height: 28px;
}
.warmImg {
height: 14px;
vertical-align: middle;
margin-right: 6px;
margin-bottom: 2px;
}
</style>