|
<template>
|
<div class="getQRCode">
|
<!-- <x-header class="message-head" title="逾期用户" :left-options="{backText:''}"></x-header> -->
|
<van-nav-bar title="逾期详情" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="overdue-body">
|
<div class="overdue-body-header">
|
<div class="overdue-body-header-left">
|
<span>{{ overdueList.prodName }}</span>
|
<p>{{ overdueList.usrName }}</p>
|
</div>
|
<div class="overdue-body-header-right">
|
<span>{{ overdueList.usrMbl }}</span>
|
<a :href="'tel:' + overdueList.usrMbl"><van-icon class="phone-icon" name="phone"/></a>
|
</div>
|
</div>
|
<div class="border"></div>
|
<div class="overdue-body-content">
|
<div>
|
<p class="overdue-body-content-day">
|
逾期天数：
|
<span :style="{color:(overdueList.status==0? '#FF6666' : '#666666')}">{{ overdueList.oveDay }}</span>
|
</p>
|
<p>
|
应还日期：{{ overdueList.shoDate | timeformat('yyyy-MM-dd')}}
|
</p>
|
</div>
|
<div class="overdue-body-content-total">
|
<p >{{overdueList.status==0? "应还总额（元）" : "已还总额（元）"}}</p>
|
<span :style="{color:(overdueList.status==0? '#FF6666' : '#666666')}">{{ overdueList.oveAmt }}</span>
|
</div>
|
</div>
|
<div class="border"></div>
|
<div class="overdue-body-store">
|
<p>渠道：<span>{{ overdueList.chanName == 9999? '无' : overdueList.chanName }}</span></p>
|
<p>办理商户：<span>{{ overdueList.merName }}</span></p>
|
<p>办理门店：<span>{{ overdueList.storeName }}</span></p>
|
</div>
|
</div>
|
<div class="gj-body">
|
<div class="gj-body-header">
|
<p class="gj-body-header-title">跟进记录</p>
|
<div class="gj-body-header-add" @click="showAddModel">
|
新增+
|
</div>
|
</div>
|
<div class="gj-body-content">
|
<div class="gj-body-content-item">
|
<!-- <div class="gj-body-content-item-label">
|
<span></span>
|
<div></div>
|
</div> -->
|
<div class="step" v-for="(item, index) in msgList" :key="index">
|
<span class="spot"></span>
|
<div class="step-content" v-if="msgList.length == index+1" style="border: none;padding-bottom: 0px;">
|
<p class="gj-body-content-item-msg">{{ item.folCont }} </p>
|
<span>{{ item.creTime | timeformat('yyyy-MM-dd HH:mm')}}</span>
|
<span>{{ item.mgrName }}</span>
|
<span v-if="item.isOpr == 1" style="color: #4A75FF; margin-left:15px;" @click="showAddModel(this, 'edit', item.folCont, item.folId)">编辑</span>
|
</div>
|
<div class="step-content" v-else>
|
<p class="gj-body-content-item-msg">{{ item.folCont }} </p>
|
<span>{{ item.creTime | timeformat('yyyy-MM-dd HH:mm')}}</span>
|
<span>{{ item.mgrName }}</span>
|
<span v-if="item.isOpr == 1" style="color: #4A75FF; margin-left:15px;" @click="showAddModel(this, 'edit', item.folCont, item.folId)">编辑</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 新增记录模态窗 -->
|
<van-popup v-model="showAdd" class="addModel">
|
<div class="addModel-title">{{ modelTitle }}</div>
|
<div class="addModel-textarea">
|
<textarea name="" id="" cols="30" rows="10" placeholder="请输入跟进记录" maxlength="100" v-model="val" @keydown="textareaChange" @keyup="textareaChange"></textarea>
|
<span><i>{{ textSum }}</i>/100</span>
|
</div>
|
<div class="addModel-btn">
|
<van-button class="btnNo" type="default" round @click='showAdd = false'>取消</van-button>
|
<van-button class="btnYes" type="default" round @click='AddRec'>提交</van-button>
|
</div>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { XHeader } from 'vux';
|
import { dateFormat} from 'vux';
|
import Vue from 'vue';
|
import { Notify } from 'vant';
|
|
Vue.use(Notify);
|
export default {
|
name: 'message',
|
components: {
|
XHeader,
|
},
|
data() {
|
return {
|
id: this.$route.query.overdueId,
|
val: '',
|
textSum: 0,
|
msgList:[],
|
showAdd: false,
|
overdueList: {},
|
modelTitle: '新增跟进记录', //模态窗标题
|
folCount: '',
|
folId: '',
|
}
|
},
|
created() {
|
this. overdueInt();
|
},
|
methods: {
|
//新增跟进记录模态窗textarea键盘事件
|
textareaChange() {
|
// this.val = this.val.slice(0,100)
|
// console.log(this.val.length)
|
this.textSum = this.val.length;
|
},
|
//显示新增跟进记录模态窗
|
showAddModel(e, val, folCount, folId) {
|
this.modelTitle = '新增跟进记录'
|
this.val = '';
|
if(val == 'edit') {
|
console.log(folCount);
|
console.log(folId);
|
this.modelTitle = '编辑跟进记录';
|
// this. folCount = folCount;
|
this.folId = folId;
|
this.val = folCount;
|
}
|
this.showAdd = true;
|
|
},
|
//新增跟进记录模态窗确认事件
|
AddRec() {
|
console.log(this.val == null || this.val =='')
|
if(this.val == null || this.val =='') {
|
Notify({ type: 'danger', message: '请输入跟进记录'});
|
} else {
|
let date = {}
|
date.oveId = this.id;
|
date.folCont = this.val;
|
if(this.modelTitle == '编辑跟进记录') {
|
date.folId = this.folId;
|
}
|
console.log(date)
|
this.$api.overdueSaveOveFol(date).then(res => {
|
this.showAdd = false;
|
this.folId = '';
|
this.folCount = '';
|
this.$router.go(0);
|
})
|
}
|
},
|
overdueInt() {
|
// this.$api.overdueList().then(res => {
|
// console.log(res.body)
|
// // this.id = 1111;
|
// this.overdueList = res.body.map(item => {
|
// if(item.id == this.id) {
|
// return item
|
// }
|
// });
|
// this.overdueList = this.overdueList[0]
|
// console.log( this.overdueList)
|
// })
|
this.$api.overdueDetail({oveId: this.id}).then(res => {
|
// console.log(res.body);
|
this.overdueList = res.body;
|
this.msgList = res.body.overFolInfList
|
})
|
|
},
|
//返回上一级按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
// src='../../../../style/mixins.less'
|
// @import'@/style/mixins.less';
|
.step{
|
.flexLayout(flex-start, center);
|
position: relative;
|
margin-bottom: 5px;
|
// padding-left: 28px;
|
&-content{
|
// padding-left: 28px;
|
margin-left: 15px;
|
padding-left: 17px;
|
border-left: 1px solid #E6E6E6;
|
padding-bottom: 30px;
|
span{
|
color: #999999;
|
}
|
}
|
}
|
.phone-icon{
|
width: 20px;
|
height: 20px;
|
background: rgba(137,110,219,1);
|
border-radius: 20px;
|
color: #fff;
|
line-height: 20px;
|
text-align: center;
|
transform: translateY(1px);
|
}
|
.spot{
|
width: 7px;
|
height: 7px;
|
background: rgba(255,255,255,1);
|
border: 2px solid rgba(204,204,204,1);
|
border-radius: 50%;
|
position: absolute;
|
top: 0;
|
left: 10px;
|
margin-right: 10px;
|
}
|
.getQRCode{
|
background: #F5F5F7;
|
width: 100%;
|
height: 100%;
|
}
|
.message-head{
|
position: relative;
|
}
|
.addModel{
|
width: 280px;
|
border-radius: 6px;
|
// height: 275px;
|
background-color: #fff;
|
&-title{
|
color: #000;
|
font-size: 14px;
|
height: 58px;
|
line-height: 58px;
|
text-align: center;
|
}
|
&-textarea{
|
textarea{
|
width: 227px;
|
height: 130px;
|
margin-left: 18px;
|
// margin: 0 auto;
|
position: relative;
|
border:1px solid rgba(230,230,230,1);
|
color: #999999;
|
padding: 0 8px;
|
padding-top: 15px;
|
}
|
span{
|
font-size: 12px;
|
color: #999999;
|
position: absolute;
|
right: 20px;
|
bottom: 83px;
|
}
|
}
|
&-btn{
|
height: 77px;
|
.flexLayout(center, center);
|
.van-button{
|
width:110px;
|
height:36px;
|
background:rgba(238,238,238,1);
|
background:rgba(0,0,0,0.72);
|
border-radius:36px;
|
color: #FFFFFF;
|
font-size: 16px;
|
line-height: 36px;
|
}
|
.btnNo{
|
background: #EEEEEE;
|
color: #666666;
|
margin-right: 10px;
|
font-size: 16px;
|
}
|
.btnYes{
|
background: #896EDB;
|
font-size: 16px;
|
}
|
}
|
}
|
.overdue-body{
|
overflow: hidden;
|
width: 92%;
|
margin: 10px 2%;
|
padding: 0 2%;
|
background-color: #fff;
|
font-weight:500;
|
color:rgba(102,102,102,1);
|
&-header{
|
height: 50px;
|
.flex(space-between, center);
|
&-left{
|
.flex(flex-start, center);
|
span{
|
width: 68px;
|
height: 20px;
|
line-height: 20px;
|
font-size: @font-12;
|
text-align: center;
|
background: rgba(66,61,93,1);
|
border-radius: 10px;
|
font-weight:500;
|
color:rgba(255,255,255,1);
|
margin-right: 12px;
|
}
|
p{
|
font-weight:bold;
|
color:rgba(51,51,51,1);
|
font-size: 16px;
|
}
|
}
|
&-right{
|
span{
|
font-weight:500;
|
color:rgba(102,102,102,1);
|
font-size: 13px;
|
}
|
}
|
}
|
.border{
|
height:1px;
|
background:rgba(238,238,238,1);
|
width: 100%;
|
}
|
&-content{
|
height: 48px;
|
padding: 10px 0;
|
font-size: @font-14;
|
.flex(space-between, center);
|
p{
|
margin-bottom: 5px;
|
}
|
span{
|
color: #FF6666;
|
font-family: "微软雅黑";
|
}
|
&-day{
|
margin-top: 12px;
|
}
|
&-total{
|
span{
|
font-size: 24px;
|
font-weight: bold;
|
font-family: "微软雅黑";
|
}
|
}
|
}
|
&-store{
|
// height: 153px;
|
// line-height: 51px;
|
padding: 18px 0;
|
p{
|
margin-top: 10px;
|
}
|
:first-child{
|
margin-top: 0;
|
}
|
}
|
&-channel{
|
height: 30px;
|
line-height: 30px;
|
}
|
}
|
.gj-body{
|
overflow: hidden;
|
width: 92%;
|
margin: 10px 2%;
|
padding: 0 2%;
|
background-color: #fff;
|
font-weight:500;
|
color:rgba(102,102,102,1);
|
&-header{
|
.flex(space-between, center);
|
padding-top: 14px;
|
&-title{
|
font-weight: bold;
|
color: #333;
|
}
|
&-add{
|
text-decoration:underline;
|
color:rgba(137,110,219,1);
|
font-size: 14px;
|
}
|
}
|
&-content{
|
margin-top: 25px;
|
color: #666;
|
font-size: 13px;
|
&-item{
|
// margin-left: 18px;
|
// .flex(space-between, center);
|
&-msg{
|
margin-bottom: 10px;
|
}
|
&-label{
|
height: 100%;
|
span{
|
width:9px;
|
height:9px;
|
background:rgba(255,255,255,1);
|
border:2px solid rgba(204,204,204,1);
|
border-radius:50%;
|
}
|
div{
|
width:2px;
|
// height:60px;
|
height: 96%;
|
background:rgba(230,230,230,1);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
