|
- <template>
- <view class="box">
- <view class="content">
- <view class="content-tips" @click="goedit()">
- <view class="content-first">
- <view class="left">
- <view class="img">{{customerInfo.name.slice(0,1) || '--'}}</view>
- <view class="test">{{customerInfo.name || '--'}}</view>
- <view class="edit">
- <image class="screen-sel-img" src="../../../static/images/edit.png" mode=""></image>
- </view>
- </view>
- <!-- <view class="right">
- <view class="point"></view>
- <view class="test">定金</view>
- </view> -->
- </view>
- <view class="content-sec">
- <view class="content-sec-lab">
- 手机号码:<view class="content-sec-lab1">{{customerInfo.phone || '--'}}</view>
- </view>
- <view class="content-sec-lab">
- 客户标签:
- <view class="content-sec-tips">投资</view>
- <view class="content-sec-tips">理财专用</view>
- <view class="content-sec-tips">学区</view>
- </view>
- <view class="content-sec-lab">
- 顾问姓名:<view class="content-sec-lab1">{{customerInfo.agentName}}</view>
- </view>
- <view class="content-sec-lab">
- 添加时间:<view class="content-sec-lab1">{{customerInfo.createTime}}</view>
- </view>
- <view class="content-sec-num">
- <view class="">{{customerInfo.visitRecord || '--'}}次到访</view>
- <view class="">{{customerInfo.fraction || '0'}}% | {{customerInfo.fraction || '0'}}分</view>
- </view>
- </view>
- <view class="content-last">
- <view class="content-last-con">
- 备注:{{customerInfo.demand.remarks ? customerInfo.demand.remarks : "暂无"}}
- </view>
- </view>
- </view>
- </view>
-
- <view class="tabchange">
- <view class="tab">
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
- </view>
- </view>
-
- <view class="tabactive1" v-if="activeTotal==0">
- <view class="content-tips" v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
- <view class="content-first">
- <view class="left">
- <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
- <view class="name">{{item.agentName || '--'}}</view>
- <view class="status">代接待</view>
- </view>
- <!-- <view class="right">
- <view class="point"></view>
- <view class="">优秀案例</view>
- </view> -->
- </view>
-
- <view class="content-sec">
- <view class="left">
- <view class="cus">客户:{{item.name || ''}} |</view>
- <view class="arriveNum">{{item.visitRecord || '--'}}次到访</view>
- </view>
- <view class="right">{{item.fraction || '0'}}% | {{item.fraction || '0'}}分</view>
- </view>
-
- <view class="content-last">{{item.createTime}} | {{item.mm || '--'}}分钟</view>
- </view>
- </view>
- <view class="tabactive2" v-if="activeTotal==1">
- <view class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
- <view class="tab2-first">
- <view class="tab2-first-1">
- <view class="tab2-first-left">
- <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
- <view class="name">{{item.agentName || '||'}}</view>
- </view>
- <view class="tab2-first-right">{{item.createTime}}</view>
- </view>
- <view class="tab2-first-foot">{{item.remarks || '--'}}</view>
- </view>
- <!-- <view class="tab2-sec">
- <view class="tab-sec-edit">编辑记录</view>
- </view> -->
- </view>
- </view>
-
- <!-- <view class="tabactive" v-if="activeTotal==2">执行率</view> -->
- <!-- 评分 -->
- <view v-if="activeTotal==2" class="tabactive rate-box" >
- <view class="title">总执行率 {{totalRate}}%</view>
- <view v-for="(item,index) in ratelist" :key="index" class="u-m-b-14">
- <view class="level1">
- <view class="level-name u-line-1">
- {{item.name}}
- </view>
- <view class="level-progress">
- <view class="color" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
- </view>
- <view class="level-rate">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</view>
- <image v-if="!item.show" class="arrow rotatearrow" @click="changeshow(item,1)" src="/static/images/down.png"
- mode="" />
- <image v-else class="arrow" @click="changeshow(item,0)" src="/static/images/up.png" mode="" />
- </view>
-
- <view class="level1-subbox" v-if="item.show">
- <view class="sub-name" v-for="(subitem,i) in item.children" :key="i">
- <view class="subitem-name u-line-1" @tap="clickaudeopal(subitem)">{{subitem.name}}</view>
- <image class="checkimg" v-if="!subitem.selected" src="/static/images/rate-checked.png" mode="" />
- <image class="checkimg" v-else src="/static/images/rate-nocheck.png" mode="" />
- </view>
- </view>
- </view>
- </view>
-
- </view>
-
- <view class="pon-foot">
- <view class="foot-tab" @click="goRemind">添加提醒</view>
- <!-- <view class="foot-tab">拨打电话</view> -->
- <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
- </view>
-
- </view>
- </template>
-
- <script>
- export default{
- data(){
- return{
- activeTotal: 0,
- customerId:'',
- customerInfo:{
- name:'',
- createTime:'',
- agentName:''
- },
- Thevisitingrecords:[],
- totalRate:[],
- ratelist:[],
- fllowList:[],
- }
- },
- onLoad(options) {
- this.customerId = options.id;
- },
- onShow() {
- this.getCustomerInfo()
- this.tabtimetap(0)
- },
- methods:{
- // 获取到访记录
- getVisitList() {
- this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
- this.Thevisitingrecords = res
- })
- },
- // 获取客户信息
- getCustomerInfo() {
- const that = this;
- this.$u.get("/customer/findById", {
- id: this.customerId
- }).then(res => {
- this.customerInfo = res;
- })
- },
-
-
-
- tabtimetap(idx){
- this.activeTotal=idx
- if(idx==0){
- this.getVisitList()
- }else if(idx==1){
- this.getFollowList()
- }else{
- this.getRatelist()
- }
- },
- tapThevisiting(item) {
- if(item.yon!=0){
- uni.showToast({
- icon:'none',
- title: '暂无录音',
- duration: 2000
- });
- return
- }else{
- const parames = {
- pageNum: 1,
- pageSize: 100,
- query: {
- customerId: item.id,
- }
- }
- var item={
- bg:0,
- customerId:item.id,
- id:''
- }
- this.$u.post("/corpus/findByPage", parames).then(res => {
- if(res[0].recordDuration>360){
- let newobj = res[0];
- uni.navigateTo({
- url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"2"}`
- })
- }else{
- let newobj = res[0];
- uni.navigateTo({
- url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"1"}`
- })
- }
- })
- }
- },
- // 获取跟进记录
- getFollowList() {
- this.fllowList=[];
- this.$u.post("/customer/getCusStage", {
- customerId: this.customerId
- }).then(res => {
- this.fllowList = res;
- })
- },
- // 新增跟进
- followRecordAdd() {
- uni.navigateTo({
- url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}`
- })
- },
- // 去编辑
- goedit(){
- // console.log('去编辑')
- uni.navigateTo({
- url:'/pages/center/consumer/edit'
- })
- },
- // 去添加提醒
- goRemind(){
- uni.navigateTo({
- url:'/pages/center/consumer/remind'
- })
- },
- //评分点击
- clickaudeopal(item){
- if(item.selected==0){
- uni.navigateTo({
- url: '/pages/mine/ScoringPlaylist?customerId='+this.customerId +"&id="+item.marketingId
- })
- }
- },
- changeshow(item, type) {
- if (type == 1) {
- item.show = true
- } else {
- item.show = false
- }
- },
- // 获取评分
- getRatelist() {
- this.$u.get("/customer/findzkMByCusId", {
- cusId: this.customerId
- }).then(res => {
- if (res.length) {
- let level1 = []
- let level2rate = 0
- res.forEach(item => {
- if (item.pid == 0) {
- level1.push({
- id: item.marketingId,
- rate: item.fraction,
- name: item.name,
- sort: item.sort,
- show: false,
- ratepercent: 0,
- children: []
- })
- } else {
- if (item.selected == 0) {
- level2rate += item.fraction
- }
- }
- })
- this.totalRate = level2rate
- res.forEach(subitem => {
- let subitempid = subitem.pid
- level1.forEach(item => {
- if (subitempid == item.id) {
- if (subitem.selected == 0) {
- item.ratepercent += subitem.fraction
- }
- item.children.push({
- id: subitem.id,
- rate: subitem.fraction,
- selected: subitem.selected,
- name: subitem.name,
- marketingId:subitem.marketingId
- })
- }
- })
- })
- level1[0].show = true;
- this.ratelist = level1
- }
- })
- },
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .box {
- width: 100%;
- height: 100%;
- background: #F8F8F8;
- }
- // 评分
- .rate-box {
- padding: 10rpx 20rpx;
- background-color: #FFFFFF;
- .date {
- width: 300rpx;
- height: 33rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #333333;
- line-height: 33rpx;
- letter-spacing: 1rpx;
- margin-bottom: 8rpx;
- }
-
- .title {
- width: 100%;
- height: 42rpx;
- font-size: 30rpx;
- font-weight: 500;
- color: #333333;
- line-height: 42rpx;
- letter-spacing: 2rpx;
- margin-bottom: 20rpx;
- }
-
- .level1 {
- display: flex;
- align-items: center;
-
- .level-name {
- width: 104rpx;
- height: 33rpx;
- font-size: 24rpx;
- font-weight: 500;
- color: #333333;
- line-height: 33rpx;
- letter-spacing: 1rpx;
- margin-right: 10rpx;
- }
-
- .level-progress {
- flex: 1;
- border-radius: 11rpx;
- height: 21rpx;
- background-color: #BEE4FF;
- position: relative;
-
- .color {
- width: 0;
- position: absolute;
- top: 0;
- left: 0;
- height: 21rpx;
- border-radius: 11rpx 0 0 11rpx;
- background-color: #008EF2;
- }
- }
-
- .level-rate {
- width: 65rpx;
- height: 33rpx;
- font-size: 24rpx;
- font-weight: 500;
- color: #333333;
- line-height: 33rpx;
- letter-spacing: 1rpx;
- margin: 0 20rpx 0 15rpx;
- }
-
- .arrow {
- width: 37rpx;
- height: 21rpx;
- padding: 5rpx 20rpx;
- }
-
- .rotatearrow {
- transform: rotate(270deg);
- }
- }
-
- .level1-subbox {
- display: flex;
- margin-top: 20rpx;
- flex-wrap: wrap;
-
- .sub-name {
- width: 50%;
- display: flex;
- margin-bottom: 18rpx;
-
- .subitem-name {
- width: 104rpx;
- height: 33rpx;
- font-size: 24rpx;
- font-weight: 400;
- color: #999999;
- line-height: 33rpx;
- letter-spacing: 1rpx;
- margin-right: 12rpx;
- }
-
- .checkimg {
- width: 27rpx;
- height: 27rpx;
- }
-
- }
- }
- }
- .tab{
- height: 88rpx;
- border-bottom: 1px solid #E0E0E0;
- background: #FFFFFF;
- display: flex;
- align-items: center;
- .tabbox {
- flex: 1;
- height: 100%;
- text-align: center;
- line-height: 92rpx;
- color: #666666;
- font-size: 28rpx;
- display: flex;
- justify-content: center;
-
- .activecllasscet {
- border-bottom: 2px solid #2671E2;
- color: #2671E2;
- font-weight: 600;
- }
- }
- }
- .content{
- // height: 1000rpx;/
- overflow: hidden;
- border-top: 1px solid #E0E0E0;
- .content-tips{
- background: #fff;
- // box-sizing: border-box;
- margin-bottom: 20rpx;
- overflow: hidden;
- .content-first{
- padding: 19rpx 30rpx;
- display: flex;
- justify-content: space-between;
- box-sizing: border-box;
- // border-top: 1px solid #E0E0E0;
- font-weight: 400;
- color: #292929;
- height: 90rpx;
- font-size: 30rpx;
- line-height: 30rpx;
- .left{
- display: flex;
- .img{
- // margin-top: 19rpx;
- width: 52rpx;
- height: 52rpx;
- border: 1px solid #E0E0E0;
- border-radius: 50%;
- text-align: center;
- line-height: 50rpx;
- }
- .test{
- margin-top: 11rpx;
- margin-left: 20rpx;
- font-weight: 500;
- color: #333333;
- }
- .edit{
- height: 30rpx;
- width: 30rpx;
- margin-left: 30rpx;
- margin-top: 11rpx;
- image{
- width: 100%;
- height: 100%;
- }
- }
- }
- .right{
- display: flex;
- .point{
- width: 12rpx;
- height: 12rpx;
- background: #2B6EFF;
- border-radius: 50%;
- margin-right: 9rpx;
- margin-top: 20rpx;
- }
- .test{
- margin-top: 11rpx;
- }
- }
- }
- .content-sec{
- border-top: 1px solid #E0E0E0;
- padding: 0 30rpx;
- height: 270rpx;
- position: relative;
- .content-sec-lab{
- margin-top: 30rpx;
- display: flex;
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- line-height: 30rpx;
- .content-sec-lab1{
- color: #333333;
- }
- .content-sec-tips{
- max-width:174rpx ;
- height: 46rpx;
- background: #F2F2F2;
- border-radius: 6rpx;
- text-align: center;
- line-height: 26rpx;
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- font-size: 26rpx;
- font-weight: 400;
- color: #333333;
- margin-right: 24rpx;
- box-sizing: border-box;
- padding: 10rpx 24rpx;
- }
- }
- .content-sec-num{
- position: absolute;
- width: 190rpx;
- height: 90rpx;
- background: #F4F8FD;
- border-radius: 12rpx;
- font-weight: 400;
- color: #2671E2;
- line-height: 45rpx;
- bottom: 30rpx;
- right: 30rpx;
- text-align: center;
- }
- }
- .content-last{
- padding: 30rpx;
- height: 168rpx;
- .content-last-con{
- width: 690rpx;
- height: 108rpx;
- background: #F8F8F8;
- border-radius: 8rpx;
- padding: 14rpx 20rpx;
- font-size: 28rpx;
- font-weight: 400;
- color: #333333;
- line-height: 40rpx;
- }
- }
-
- }
- }
- .tabchange{
- // background: #FFFFFF;
- overflow: hidden;
- .tabactive1{
- .content-tips{
- background: #fff;
- padding: 0 30rpx;
- box-sizing: border-box;
- overflow: hidden;
- margin-bottom: 20rpx;
- .content-first{
- margin-top: 19rpx;
- display: flex;
- justify-content: space-between;
- .left{
- display: flex;
- .img{
- width: 52rpx;
- height: 52rpx;
- background: #FFFFFF;
- border: 1px solid #C9C9C9;
- border-radius: 50%;
- text-align: center;
- line-height: 52rpx;
- }
- .name{
- font-weight: 600;
- color: #333333;
- margin-left: 20rpx;
- margin-top: 11rpx;
- }
- .status{
- width: 110rpx;
- height: 42rpx;
- background: #FFF9F5;
- border-radius: 4rpx;
- font-size: 26rpx;
- font-weight: 400;
- color: #EC8D49;
- line-height: 42rpx;
- text-align: center;
- margin-left: 19rpx;
- margin-top: 11rpx;
- }
- }
- .right{
- display: flex;
- margin-top: 11rpx;
- .point{
- width: 12rpx;
- height: 12rpx;
- background: #2B6EFF;
- border-radius: 50%;
- margin-right: 9rpx;
- margin-top: 16rpx;
-
- }
- }
- }
-
-
- .content-sec{
- display: flex;
- justify-content: space-between;
- margin-top: 19rpx;
- .left{
- display: flex;
- .cus{
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- line-height: 30rpx;
- }
- .arriveNum{
- font-size: 30rpx;
- font-weight: 400;
- line-height: 30rpx;
- margin-left: 10rpx;
- }
- }
- .right{
- width: 192rpx;
- height: 46rpx;
- background: #F4F8FD;
- border-radius: 6rpx;
- text-align: center;
- line-height: 46rpx;
- font-weight: 400;
- color: #2671E2;
- }
- }
- .content-last{
- margin: 30rpx 0;
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- line-height: 30rpx;
- }
-
- }
- }
-
- .tabactive2{
- .tab2-tips{
- background: #fff;
- height: 270rpx;
- overflow: auto;
- margin-bottom: 20rpx;
- .tab2-first{
- // height: 150rpx;
- border-bottom: 1px solid #E0E0E0;
- padding: 0 30rpx;
- margin-top: 19rpx;
- box-sizing: border-box;
- .tab2-first-1{
- display: flex;
- justify-content: space-between;
- // height: 75rpx;
- .tab2-first-left{
- display: flex;
- .img{
- width: 52rpx;
- height: 52rpx;
- background: #FFFFFF;
- border: 1px solid #C9C9C9;
- border-radius: 50%;
- text-align: center;
- line-height: 52rpx;
- }
- .name{
- font-weight: 600;
- color: #333333;
- margin-left: 20rpx;
- margin-top: 11rpx;
- }
- }
- .tab2-first-right{
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- margin-top: 11rpx;
- }
- }
- .tab2-first-foot{
- margin-top: 19rpx;
- margin-bottom: 30rpx;
- font-size: 30rpx;
- font-weight: 400;
- color: #666666;
- line-height: 30rpx;
- }
- }
- .tab2-sec{
- height: 120rpx;
- padding: 30rpx;
- float: right;
- .tab-sec-edit{
- width: 156rpx;
- height: 60rpx;
- background: #FFFFFF;
- border-radius: 4px;
- border: 1px solid #2671E2;
- text-align: center;
- line-height: 60rpx;
- font-weight: 400;
- color: #2671E2;
- }
- }
- }
- }
- }
- .pon-foot{
- position: fixed;
- width: 750rpx;
- height: 100rpx;
- background: #FFFFFF;
- box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
- bottom: 0;
- display: flex;
- justify-content: space-around;
- align-items: center;
- // padding-top: 24rpx;
- box-sizing: border-box;
- // padding: ;
- .foot-tab{
- text-align: center;
- width: 270rpx;
- height: 70rpx;
- line-height: 70rpx;
- background: #2671E2;
- box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
- border-radius: 6rpx;
- font-size: 30rpx;
- font-weight: 400;
- color: #FFFFFF;
- }
- }
- </style>
|