修改页面样式, 调试接口

This commit is contained in:
mengxiaolong
2020-08-12 14:59:00 +08:00
parent 83dc14803b
commit 4942b0f8d2
3 changed files with 154 additions and 164 deletions

View File

@@ -4,7 +4,7 @@ import getUrl from '@/assets/js/utils/get-url'
//获取续期列表 //获取续期列表
export function getList(data) { export function getList(data) {
return request({ return request({
url: getUrl('/renewal/getRenewalList', 0), //0=》mock数据 1=》正式数据 url: getUrl('/renewal/renewal/getRenewalList', 1), //0=》mock数据 1=》正式数据
method: 'post', method: 'post',
data data
}) })
@@ -13,7 +13,7 @@ export function getList(data) {
//获取续期扣款详情 //获取续期扣款详情
export function getDetail(data) { export function getDetail(data) {
return request({ return request({
url: getUrl('/renewal/getRenewalDetail', 0), //0=》mock数据 1=》正式数据 url: getUrl('/renewal/renewal/getRenewalDetail', 1), //0=》mock数据 1=》正式数据
method: 'post', method: 'post',
data data
}) })
@@ -22,7 +22,7 @@ export function getDetail(data) {
//获取短信模板 //获取短信模板
export function getMsg(data) { export function getMsg(data) {
return request({ return request({
url: getUrl('/renewal/msgTemplate', 0), url: getUrl('/renewal/renewal/msgTemplate', 1),
method: 'post', method: 'post',
data data
}) })
@@ -31,7 +31,7 @@ export function getMsg(data) {
//发送短信 //发送短信
export function sendMsg(data) { export function sendMsg(data) {
return request({ return request({
url: getUrl('/renewal/sendSms', 0), url: getUrl('/renewal/renewal/sendSms', 1),
method: 'post', method: 'post',
data data
}) })

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="detail-container pl5 pr5"> <div class="detail-container">
<div> <div>
<div v-if="renewalDTO.deductionStatus == '0'" class="status"> <div v-if="renewalDTO.deductionStatus == '0'" class="status">
<img src="@/assets/images/renewalManage/u51770.png" alt="" /> <img src="@/assets/images/renewalManage/u51770.png" alt="" />
@@ -14,58 +14,75 @@
<div>续期扣款失败</div> <div>续期扣款失败</div>
</div> </div>
</div> </div>
<van-cell-group>
<van-cell title="保单号" :value="renewalDTO.contNo" />
<van-cell title="产品名称" :value="renewalDTO.riskName" />
<van-cell title="投保人" :value="renewalDTO.applicant" />
<van-cell title="金额" :value="renewalDTO.duePayMoney" />
<van-cell title="账号" :value="renewalDTO.accountNo" />
<van-cell title="缴费次数" :value="renewalDTO.currentPeriod" />
<van-cell title="扣款日" :value="renewalDTO.duePayDate" />
</van-cell-group>
<div class="flex justify-content-s bottom-btn">
<div> <div>
<img :src="$assetsUrl + 'images/phone.png'" @click="callSystem(renewalDTO.receiveMobile)" width="24" height="23" class="ml10 mr10" /> <div class="cell">
<span class="mt8 fs14">拨打电话</span> <div class="wrapper">
<div class="cellLeft">保单号</div>
<div class="cellRight">xxxxx</div>
</div> </div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">产品名称</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">投保人</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">金额</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">账号</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">缴费次数</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="cellLeft">扣款日</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
</div>
<div class="phone">
<div> <div>
<img :src="$assetsUrl + 'images/ms.png'" @click="sendMsg" width="24" height="23" class="ml10 mr10" /> <van-icon name="phone" class="phoneIcon" />
<span class="mt8 fs14">发送短信</span> <span class="mt8 fs14">拨打电话</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Cell, CellGroup } from 'vant' import { Cell, CellGroup, Icon } from 'vant'
// import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import { getDetail } from '@/api/ebiz/renewalManage/renewalManage' import { getDetail } from '@/api/ebiz/renewalManage/renewalManage'
export default { export default {
name: 'renewalDetail', name: 'renewalDetail',
components: { components: {
[Cell.name]: Cell, [Cell.name]: Cell,
[CellGroup.name]: CellGroup [CellGroup.name]: CellGroup,
[Icon.name]: Icon
}, },
data() { data() {
return { return {
renewalDTO: {}, //续期保单详情 renewalDTO: {}, //续期保单详情
contNo: '' //保单号 contNo: ''
// renewalDTO: {
// deductionStatus: '', //扣款状态
// contNo: '6200987623439759',
// riskName: '重大疾病保险',
// duePayMoney: '2888.00',
// currentPeriod: '2',
// duePayDate: '应缴费日期',
// applicant: '李四',
// failReason: '扣款金额不足',
// accountNo: '1233465768686',
// receiveMobile: '13700020000' //客户电话号
// } //续期保单详情
} }
}, },
created() { created() {},
document.body.style.backgroundColor = '#fff'
},
mounted() { mounted() {
this.getDetail() this.getDetail()
this.contNo = this.$route.query.contNo this.contNo = this.$route.query.contNo
@@ -76,9 +93,10 @@ export default {
}, },
methods: { methods: {
async getDetail() { async getDetail() {
getDetail({ contNo: '6200987623439759' }).then(res => { let contNo = this.$route.query.contNo
// getDetail({ contNo: this.contNo }).then(res => { getDetail({ contNo: contNo, payToDate: '2020-07-22', payFlag: '1' }).then(res => {
if (res.result == '0') { if (res.result == '0') {
console.log(res)
this.renewalDTO = res.content this.renewalDTO = res.content
} }
}) })
@@ -90,48 +108,44 @@ export default {
system: 'tel', system: 'tel',
number: value number: value
}) })
},
//发送短信
sendMsg() {
// let param = {
// deductionStatus: '',
// agentName: '',
// contNo: '',
// riskName: '',
// accountNo: '',
// duePayMoney: '',
// failReason: ''
// }
// param = this.renewalDTO
this.$store.commit('updateRenewalMsgParam', this.renewalDTO)
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/renewalManage/msgTemplate`
},
routerInfo: { path: `/renewalManage/msgTemplate` }
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-container > div:first-child { .detail-container {
text-align: center; position: relative;
.status { height: 100vh;
margin: 40px 0; background-color: #fff;
div {
margin-top: 10px;
font-weight: bold;
}
}
} }
.justify-content-s > div {
.cell {
padding: 0 1em;
}
.wrapper {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #d7d7d7;
padding: 1em 0;
}
.phoneIcon {
font-size: 35px;
color: #1296db;
}
.phone {
position: absolute;
bottom: 70px;
display: flex;
width: 100%;
justify-content: center;
}
.phone > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 20px 0;
width: 50%;
} }
</style> </style>

View File

@@ -1,8 +1,7 @@
<template> <template>
<div class="renewal-manage bg-white"> <div class="renewal-manage bg-white">
<div v-if="!isShow"> <div>
<van-sticky> <van-sticky>
<!-- <van-field v-model="searchVal" label="保单号/投保人" placeholder="请输入" sticky /> -->
<div class="list-header"> <div class="list-header">
<van-search placeholder="请输入保单号/投保人" v-model="searchVal" @search="search" /> <van-search placeholder="请输入保单号/投保人" v-model="searchVal" @search="search" />
</div> </div>
@@ -15,46 +14,43 @@
type="year-month" type="year-month"
:flag="true" :flag="true"
></FieldDatePicter> ></FieldDatePicter>
<van-tabs v-model="active" sticky @change="tabChange"> <van-tabs v-model="active" sticky @change="tabChange" class="changeTab">
<van-tab title="待扣款" name="wait"></van-tab> <van-tab title="待扣款" :name="0"></van-tab>
<van-tab title="扣款成功" name="success"></van-tab> <van-tab title="扣款成功" :name="1"></van-tab>
<van-tab title="扣款失败" name="fail"></van-tab> <van-tab title="扣款失败" :name="2"></van-tab>
<van-tab title="正在扣款" :name="3"></van-tab>
</van-tabs> </van-tabs>
</van-sticky> </van-sticky>
<div class="list-container fs12 pb10 pt10 pl20 pr20" v-for="(item, index) in searchList" :key="index" @click="goDetail(item)"> <div class="list-container fs12 pb10 pt10 pl20 pr20" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
<div class="flex justify-content-s"> <div class="flex justify-content-s">
<div> <div>
<span>保单号</span><span>{{ item.contNo }}</span> <span>保单号</span><span>{{ item.contNo }}</span>
</div> </div>
<div> <div>
<span>金额</span><span class="green">{{ item.duePayMoney }}</span> <span>金额</span><span class="green">{{ item.money }}</span>
</div> </div>
</div> </div>
<div> <div>
投保人<span>{{ item.applicant }}</span> 投保人<span>{{ item.appntName }}</span>
</div> </div>
<div> <div>
被保人<span>{{ item.insured }}</span> 被保人<span>{{ item.insuredName }}</span>
</div> </div>
<div> <div>
扣款日<span>{{ item.duePayDate }}</span> 扣款日<span>{{ item.payToDate }}</span>
</div> </div>
</div> </div>
<div v-if="searchList.length == 0" class="list text-center"> <div v-if="list.length === 0" class="list text-center">
<img :src="src" /> <img :src="src" />
<div class="mt20">暂无续期保单</div> <div class="mt20">暂无续期保单</div>
</div> </div>
</div> </div>
<div v-else class="list text-center">
<img :src="src" />
<div class="mt20" v-if="errMessage != ''">{{ errMessage }}</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Sticky, Tabs, Tab, Col, Row, Search, Field, Cell } from 'vant' import { Sticky, Tabs, Tab, Col, Row, Search, Field } from 'vant'
import FieldDatePicter from '@/components/ebiz/FieldDatePicter' import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import { getList, getDetail } from '@/api/ebiz/renewalManage/renewalManage' import { getList } from '@/api/ebiz/renewalManage/renewalManage'
import formatDate from '@/assets/js/utils/date-utils' import formatDate from '@/assets/js/utils/date-utils'
export default { export default {
@@ -67,111 +63,82 @@ export default {
[Row.name]: Row, [Row.name]: Row,
[Search.name]: Search, [Search.name]: Search,
[Sticky.name]: Sticky, [Sticky.name]: Sticky,
[Cell.name]: Cell,
[FieldDatePicter.name]: FieldDatePicter [FieldDatePicter.name]: FieldDatePicter
}, },
data() { data() {
return { return {
payDate: formatDate.formatDate(new Date(), 'yyyy-MM'), //扣款日期 // 扣款日期
searchVal: '', //搜索内容 payDate: formatDate.formatDate(new Date(), 'yyyy-MM'),
// list: [] //列表数据 // 搜索内容
list: [ searchVal: '',
// { list: [],
// riskName: '重大疾病保险', searchList: [],
// duePayMoney: '2888.00', active: 'wait',
// currentPeriod: '2', isShow: false,
// contNo: '6200987623439788',
// duePayDate: '2020-04-01',
// applicant: '李四',
// insured: '张三',
// failReason: '扣款金额不足',
// accountNo: '1233465768686',
// deductionStatus: '1'
// },
// {
// riskName: '重大疾病保险',
// duePayMoney: '122888.00',
// currentPeriod: '2',
// contNo: '6200987623439759',
// duePayDate: '2020-04-01',
// applicant: '李四',
// insured: '张三',
// failReason: '扣款金额不足',
// accountNo: '1233465768686',
// deductionStatus: '0'
// }
],
searchList: [], //搜索列表
active: 'wait', //扣款类型 wait-待扣款 success-扣款成功 fail-扣款失败
isShow: false, //无数据时显示
maxDate: new Date(), maxDate: new Date(),
errMessage: '', //错误提示 errMessage: '',
src: this.$assetsUrl + 'images/background.png' //图片路径 src: this.$assetsUrl + 'images/background.png'
} }
}, },
created() {}, created() {
// for (let i = 0; i < 10; i++) {
// this.list.push({
// contNo: '6200987623439759',
// riskName: '重大疾病保险',
// money: '2888.00',
// payToDate: '2020-07-20',
// appntName: '李四',
// insuredName: '张三',
// payFlag: '1'
// })
// }
},
mounted() { mounted() {
this.getpolicyList() //获取续期保单列表 this.getpolicyList()
document.body.style.backgroundColor = '#fff'
if (this.list.length > 0) {
this.searchList = this.NewItems(this.active)
}
},
beforeRouteLeave(to, from, next) {
document.body.style.backgroundColor = ''
next()
}, },
methods: { methods: {
//获取续期保单列表 // 获取续期保单列表
async getpolicyList() { async getpolicyList() {
let param = { deductionMonth: '2019-06' } let param = {
// let param = { deductionMonth: this.payDate } payDate: '2020-07',
getList(param).then(res => { otherNo: '',
this.$toast.clear() payFlag: '0'
if (res.result == 0) {
this.list = res.content
this.searchList = this.NewItems(this.active)
this.isShow = false
} else {
this.isShow = true
this.errMessage = res.resultMessage || '暂无续期保单'
} }
}) let result = await getList(param)
console.log(result)
}, },
// 搜索
//搜索
search(val) { search(val) {
this.searchVal = val this.searchVal = val
this.searchList = this.NewItems(this.active) this.searchList = this.NewItems(this.active)
}, },
//选定日期 // 选定日期
onDateConfirm(val) { onDateConfirm(val) {
this.payDate = val this.payDate = val
this.getpolicyList() this.getpolicyList()
}, },
//去保单详情页 // 去保单详情页
goDetail(val) { goDetail(val) {
this.$jump({ this.$jump({
flag: 'h5', flag: 'h5',
extra: { extra: {
// url: location.origin + `/#/renewalManage/detail`
url: location.origin + `/#/renewalManage/detail?contNo=${val.contNo}` url: location.origin + `/#/renewalManage/detail?contNo=${val.contNo}`
}, },
routerInfo: { routerInfo: {
// path: `/renewalManage/detail`
path: `/renewalManage/detail?contNo=${val.contNo}` path: `/renewalManage/detail?contNo=${val.contNo}`
} }
}) })
}, },
//切换扣款状态tab // 切换扣款状态tab
tabChange(name) { tabChange(name) {
this.active = name console.log(name)
this.searchList = this.NewItems(name) // this.active = name
// this.searchList = this.NewItems(name)
}, },
//筛选排序list // 筛选排序list
NewItems(name) { NewItems(name) {
let _this = this let _this = this
let type = '' //扣款状态标识 0待扣款1扣款成功2扣款失败 let type = ''
switch (name) { switch (name) {
case 'wait': case 'wait':
type = '0' type = '0'
@@ -196,19 +163,28 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.changeTab {
margin-top: -1px;
}
/deep/ .mb1 {
margin-bottom: 1px !important;
}
.renewal-manage { .renewal-manage {
background: rgba(236, 249, 255, 1); background: rgba(236, 249, 255, 1);
min-height: 100vh;
img { img {
width: 253px; width: 253px;
height: 201px; height: 201px;
} }
} }
/deep/ .van-field__label { /deep/ .van-field__label {
width: 50%; width: 50%;
} }
.list-container { .list-container {
border-bottom: 1px solid #ebedf0; border-bottom: 1px solid #ebedf0;
border-top: 1px solid #ebedf0;
.flex { .flex {
div:first-child { div:first-child {
width: 62%; width: 62%;