修改页面样式, 调试接口

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) {
return request({
url: getUrl('/renewal/getRenewalList', 0), //0=》mock数据 1=》正式数据
url: getUrl('/renewal/renewal/getRenewalList', 1), //0=》mock数据 1=》正式数据
method: 'post',
data
})
@@ -13,7 +13,7 @@ export function getList(data) {
//获取续期扣款详情
export function getDetail(data) {
return request({
url: getUrl('/renewal/getRenewalDetail', 0), //0=》mock数据 1=》正式数据
url: getUrl('/renewal/renewal/getRenewalDetail', 1), //0=》mock数据 1=》正式数据
method: 'post',
data
})
@@ -22,7 +22,7 @@ export function getDetail(data) {
//获取短信模板
export function getMsg(data) {
return request({
url: getUrl('/renewal/msgTemplate', 0),
url: getUrl('/renewal/renewal/msgTemplate', 1),
method: 'post',
data
})
@@ -31,7 +31,7 @@ export function getMsg(data) {
//发送短信
export function sendMsg(data) {
return request({
url: getUrl('/renewal/sendSms', 0),
url: getUrl('/renewal/renewal/sendSms', 1),
method: 'post',
data
})

View File

@@ -1,5 +1,5 @@
<template>
<div class="detail-container pl5 pr5">
<div class="detail-container">
<div>
<div v-if="renewalDTO.deductionStatus == '0'" class="status">
<img src="@/assets/images/renewalManage/u51770.png" alt="" />
@@ -14,58 +14,75 @@
<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>
<img :src="$assetsUrl + 'images/phone.png'" @click="callSystem(renewalDTO.receiveMobile)" width="24" height="23" class="ml10 mr10" />
<span class="mt8 fs14">拨打电话</span>
<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 class="cell">
<div class="wrapper">
<div class="cellLeft">扣款日</div>
<div class="cellRight">xxxxx</div>
</div>
</div>
</div>
<div class="phone">
<div>
<img :src="$assetsUrl + 'images/ms.png'" @click="sendMsg" width="24" height="23" class="ml10 mr10" />
<span class="mt8 fs14">发送短信</span>
<van-icon name="phone" class="phoneIcon" />
<span class="mt8 fs14">拨打电话</span>
</div>
</div>
</div>
</template>
<script>
import { Cell, CellGroup } from 'vant'
// import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
import { Cell, CellGroup, Icon } from 'vant'
import { getDetail } from '@/api/ebiz/renewalManage/renewalManage'
export default {
name: 'renewalDetail',
components: {
[Cell.name]: Cell,
[CellGroup.name]: CellGroup
[CellGroup.name]: CellGroup,
[Icon.name]: Icon
},
data() {
return {
renewalDTO: {}, //续期保单详情
contNo: '' //保单号
// renewalDTO: {
// deductionStatus: '', //扣款状态
// contNo: '6200987623439759',
// riskName: '重大疾病保险',
// duePayMoney: '2888.00',
// currentPeriod: '2',
// duePayDate: '应缴费日期',
// applicant: '李四',
// failReason: '扣款金额不足',
// accountNo: '1233465768686',
// receiveMobile: '13700020000' //客户电话号
// } //续期保单详情
contNo: ''
}
},
created() {
document.body.style.backgroundColor = '#fff'
},
created() {},
mounted() {
this.getDetail()
this.contNo = this.$route.query.contNo
@@ -76,9 +93,10 @@ export default {
},
methods: {
async getDetail() {
getDetail({ contNo: '6200987623439759' }).then(res => {
// getDetail({ contNo: this.contNo }).then(res => {
let contNo = this.$route.query.contNo
getDetail({ contNo: contNo, payToDate: '2020-07-22', payFlag: '1' }).then(res => {
if (res.result == '0') {
console.log(res)
this.renewalDTO = res.content
}
})
@@ -90,48 +108,44 @@ export default {
system: 'tel',
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>
<style lang="scss" scoped>
.detail-container > div:first-child {
text-align: center;
.status {
margin: 40px 0;
div {
margin-top: 10px;
font-weight: bold;
}
}
.detail-container {
position: relative;
height: 100vh;
background-color: #fff;
}
.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;
flex-direction: column;
align-items: center;
margin: 20px 0;
width: 50%;
}
</style>

View File

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