mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 05:46:44 +08:00
450 lines
11 KiB
Vue
450 lines
11 KiB
Vue
<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 == ''" style="position: relative">
|
|
<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.appntName }}</span>
|
|
</p>
|
|
<p>
|
|
<span>被保险人</span><span>{{ item.insuredName }}</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 v-if="active == 3">终止原因</span><span>{{ item.terminateReason }}</span>
|
|
</p>
|
|
<p>
|
|
<span>金额/元</span><span class="redword">{{ item.money }}</span>
|
|
</p>
|
|
<p>
|
|
<span>保单状态</span><span>{{ item.state }}</span>
|
|
</p>
|
|
</div>
|
|
<div class="rightState">
|
|
<button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item)">查看详情</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'
|
|
import warterMark from '@/assets/js/utils/warterMark.js'
|
|
import { getAgentInfo } from '@/api/ebiz/my/my.js'
|
|
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: {
|
|
payDate: '', // 必传扣款日
|
|
// contNo: '', // 保单号
|
|
// idNo: '', // 身份证号
|
|
// payToDate: '', // 时间
|
|
state: '', // 状态
|
|
otherNo: '' // 搜索条件
|
|
// userModel: {
|
|
// id: 'Y0000001'
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.$toast.loading({
|
|
duration: 0, // 持续展示 toast
|
|
forbidClick: true, // 禁用背景点击
|
|
loadingType: 'spinner',
|
|
message: '加载中……'
|
|
})
|
|
let aaa = new Date().getMonth() + 1
|
|
let bbb = aaa - 3
|
|
let ccc = aaa + 1
|
|
this.minDate = new Date(2023, bbb, 0)
|
|
this.maxDate = new Date(2023, ccc, 0)
|
|
console.log(this.minDate, 1111)
|
|
let yearNum = new Date().getFullYear()
|
|
let monthNum = new Date().getMonth() + 1
|
|
if (monthNum < 10) {
|
|
monthNum = '0' + monthNum
|
|
}
|
|
this.calendarValue = yearNum + '-' + monthNum
|
|
this.getYBRenewalsList()
|
|
this.getAgentInfo()
|
|
},
|
|
methods: {
|
|
// 水印
|
|
getAgentInfo() {
|
|
getAgentInfo({}).then((res) => {
|
|
if (res.result == 0) {
|
|
console.log('123')
|
|
warterMark.set(res.name + res.jobNo, '')
|
|
}
|
|
})
|
|
},
|
|
// 上方关键词搜索按钮
|
|
keywordSearch(value) {
|
|
console.log('点击搜索了')
|
|
this.params.otherNo = 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, '我是date')
|
|
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + '/#/YB_APP/renewalDetail?contNo=' + data.contNo + '&payFlag=' + data.payFlag + '&payToDate=' + data.payToDate
|
|
},
|
|
routerInfo: {
|
|
path: `/YB_APP/renewalDetail?contNo=${data.contNo}&payFlag=${data.payFlag}+&payToDate=${data.payToDate}`
|
|
}
|
|
})
|
|
},
|
|
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.payDate = 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;
|
|
}
|
|
/deep/ .van-icon-clear {
|
|
margin-right: 46px;
|
|
// background-color:blue ;
|
|
}
|
|
.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;
|
|
white-space: nowrap;
|
|
}
|
|
.beMonthRightSpan {
|
|
margin-right: 5px;
|
|
}
|
|
.noContentImg {
|
|
height: 216px;
|
|
// width: 285px;
|
|
position: absolute;
|
|
top: 66px;
|
|
left: calc(50% - 142px);
|
|
}
|
|
.noContentText {
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: 225px;
|
|
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;
|
|
display: flex;
|
|
}
|
|
.rightStateImg {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
.rightStateButton {
|
|
height: 30px;
|
|
width: 78px;
|
|
color: #d7523b;
|
|
border: #d7523b 1px solid;
|
|
border-radius: 30px;
|
|
background-color: white;
|
|
margin-bottom: 14px;
|
|
// margin-top: 113px;
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
align-self: flex-end;
|
|
}
|
|
.rightStateButton2 {
|
|
height: 30px;
|
|
width: 78px;
|
|
color: #d7523b;
|
|
border: #d7523b 1px solid;
|
|
border-radius: 30px;
|
|
background-color: white;
|
|
// margin-top: 57px;
|
|
margin-bottom: 14px;
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
align-self: flex-end;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
// .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>
|