430 lines
9.9 KiB
Vue
430 lines
9.9 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部标签栏 -->
|
||
<selectTemp
|
||
:sortData="sortData"
|
||
:de_staffid="de_staffid"
|
||
:de_starttime="de_starttime"
|
||
:de_endtime="de_endtime"
|
||
:cusStatus="cusStatus"
|
||
@screenClick="screenClick"
|
||
@queryData="queryData"
|
||
@changeSearchData="changeSearchData"
|
||
@resetForm="resetForm"
|
||
:searchForm="searchForm"
|
||
>
|
||
</selectTemp>
|
||
<view class="tab_list">
|
||
<view class="tabli" :class="de_type == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">全部</view>
|
||
<view class="tabli" :class="de_type == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">我的门店</view>
|
||
<view class="tabli" :class="de_type == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">下属的门店</view>
|
||
<view class="tabli" :class="de_type == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">我参与的门店</view>
|
||
</view>
|
||
|
||
<!-- 客户信息 -->
|
||
<view class="manage_con">
|
||
<view class="clineInfo" v-for="(item,index) in list" :key="index" @click.stop="toMore(item.id,1)">
|
||
<view class="info_head">
|
||
<view>{{item.name}}</view>
|
||
</view>
|
||
<view class="info_main">
|
||
<view >
|
||
<view class="main_left">
|
||
<view class="left_top" v-if="item.contacts" style="margin-top: 20rpx;color: #666;font-size: 30rpx;">
|
||
{{item.contacts ? item.contacts.name : '--'}}
|
||
</view>
|
||
<view class="left_followUp" style="margin-top: 20rpx;color: #666;font-size: 30rpx;">
|
||
<view>下次跟进时间：</view>
|
||
<view>{{item.next_time ? item.next_time : '--'}}</view>
|
||
</view>
|
||
<view class="left_star">
|
||
<view>客户星级：</view>
|
||
<view>
|
||
<u-rate :count="5" v-model="item.level" disabled active-color="#FFD049" inactive-color="#b2b2b2" :size="30" :gutter="10"></u-rate>
|
||
</view>
|
||
</view>
|
||
<view class="left_foot" v-if="item.follow">
|
||
<view class="l_box">
|
||
<span>{{item.follow}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main_right" v-if="item.owner_staff">
|
||
<image :src="item.owner_staff ? item.owner_staff.img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill">
|
||
</image>
|
||
<view>{{item.owner_staff?item.owner_staff.name:''}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="info_footer" @click.stop.prevent>
|
||
<view class="footer_content" @click.stop="followClick(item.id,1)">
|
||
<image :src="BASE_IMG_URL+'tj.png'" mode="scaleToFill"></image>
|
||
<view>跟进</view>
|
||
</view>
|
||
<view class="footer_content" @click.stop="linkmanClick(item.id)">
|
||
<image :src="BASE_IMG_URL+'rq.png'" mode="scaleToFill"></image>
|
||
<view>联系人</view>
|
||
</view>
|
||
<view class="footer_content" @click.stop="telClick(item)">
|
||
<image :src="BASE_IMG_URL+'dh.png'" mode="scaleToFill"></image>
|
||
<view>电话</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
|
||
</view>
|
||
<!-- 创建用户图标 -->
|
||
<view class="icon_creat" @click="createClineClick">
|
||
<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>
|
||
</view>
|
||
<!-- 选择联系人 -->
|
||
<select-link ref="linkChild" @linkInfo="linkInfo"></select-link>
|
||
<u-action-sheet
|
||
:list="taskActions"
|
||
v-model="taskShow"
|
||
:cancel-btn = "true"
|
||
@cancel.natice="onCancel"
|
||
></u-action-sheet>
|
||
<!-- 底部导航 -->
|
||
<uniTabbar z-index="10" v-if="tipNumber || tipNumber==0" :tipNumber="tipNumber"></uniTabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uniTabbar from '@/components/tabbar/tabbar.vue'
|
||
import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
|
||
import selectLink from '@/components/selectLink.vue'
|
||
import {
|
||
customerSortDatas
|
||
} from 'components/content/data/data.js';
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
import {
|
||
customerPageJumps
|
||
} from "../crm_page_jumps.js";
|
||
import {
|
||
netKehuList,
|
||
netContactList
|
||
} from '@/api/kehu.js'
|
||
import {
|
||
netAgentList
|
||
} from '@/api/clues.js'
|
||
export default {
|
||
mixins: [customerPageJumps],
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
sort: false,
|
||
screen: false,
|
||
date: '',
|
||
show: false,
|
||
sortData: customerSortDatas,
|
||
screenData: [],
|
||
taskShow: false,
|
||
telShow: false,
|
||
description: '',
|
||
taskActions: [{
|
||
name: '普通任务',
|
||
color: '#008EFF'
|
||
},
|
||
{
|
||
name: '跟进任务',
|
||
color: '#008EFF'
|
||
}
|
||
],
|
||
queryObj: {},
|
||
page: 1,
|
||
totalPage: 1,
|
||
limit: 10,
|
||
list: [],
|
||
//默认 筛选条件
|
||
de_type: 0, //0全部 1我的 2下属负责的
|
||
de_starttime: '',
|
||
de_endtime: '',
|
||
cusStatus:'', //0：未成交 1：已成交
|
||
de_staffid: null,
|
||
tipNumber: null,
|
||
isAdd:true,
|
||
searchForm:[]
|
||
}
|
||
},
|
||
components: {
|
||
selectTemp,
|
||
uniTabbar,
|
||
selectLink
|
||
},
|
||
onLoad(options) {
|
||
if (options.type) {
|
||
let t = options.type
|
||
this.de_type = t == 0 ? 1 : t == 1 ? 0 : null
|
||
this.de_starttime = options.startTime
|
||
this.de_endtime = options.endTime
|
||
this.de_staffid = options.staffid
|
||
}
|
||
if(options.status){
|
||
this.de_type = options.status
|
||
this.de_starttime = options.stime
|
||
this.de_endtime = options.etime
|
||
}
|
||
if(options.cusStatus) {
|
||
this.cusStatus = String(options.cusStatus)
|
||
this.de_starttime = options.stime
|
||
this.de_endtime = options.etime
|
||
}
|
||
//获取 客户搜索表单
|
||
this.handleSearchForm('customer',(data)=>{
|
||
this.searchForm = data
|
||
})
|
||
},
|
||
onShow() {
|
||
this.getTip()
|
||
},
|
||
onReachBottom() {
|
||
if (this.page >= this.totalPage) {
|
||
return
|
||
}
|
||
this.page++
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
changeSearchData(type,key,value){
|
||
let arr = this.searchForm
|
||
arr.forEach((ele,index)=>{
|
||
if(ele.field == type){
|
||
ele[key] = value
|
||
this.$set(this.searchForm, index, ele)
|
||
}
|
||
})
|
||
},
|
||
resetForm() {
|
||
this.searchForm = this.handleResetSearch(this.searchForm)
|
||
},
|
||
changeFirTab(type) {
|
||
this.de_type = type
|
||
this.init()
|
||
},
|
||
init() {
|
||
this.list = []
|
||
this.page = 1
|
||
//获取客户 列表
|
||
this.getList()
|
||
},
|
||
getTip() {
|
||
netAgentList().then(res => {
|
||
uni.setStorageSync('token', res.data.userinfo.token)
|
||
uni.setStorageSync('roleType', res.data.userinfo.role_type)
|
||
uni.setStorageSync('rules', res.data.userinfo.rules)
|
||
this.tipNumber = res.data.total
|
||
this.init()
|
||
})
|
||
},
|
||
queryData(params) {
|
||
this.queryObj = params
|
||
this.init()
|
||
},
|
||
getList() {
|
||
let params = {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
createtime: (this.de_starttime && this.de_endtime) ? (this.de_starttime + ',' + this.de_endtime) : '',
|
||
type: this.de_type,
|
||
staff_id: this.de_staffid,
|
||
contract_status: this.cusStatus,
|
||
...this.queryObj,
|
||
...this.handleSureSearch(this.searchForm)
|
||
}
|
||
netKehuList(params).then(res => {
|
||
res = res.data
|
||
this.list = this.list.concat(res.data)
|
||
this.page = res.current_page
|
||
this.totalPage = res.last_page
|
||
})
|
||
},
|
||
sortClick(data) {
|
||
this.sort = data;
|
||
this.screen = false;
|
||
},
|
||
screenClick(data) {
|
||
this.screen = data;
|
||
this.sort = false;
|
||
},
|
||
switchover(value) {
|
||
this.screenData = value;
|
||
|
||
},
|
||
// 任务
|
||
taskClick() {
|
||
this.taskShow = true;
|
||
},
|
||
// 电话
|
||
telClick(item) {
|
||
this.$refs.linkChild.init(item.id)
|
||
},
|
||
linkInfo(obj) {
|
||
// #ifdef MP-ALIPAY
|
||
dd.showCallMenu({
|
||
phoneNumber: obj.mobile,
|
||
code: '+86'
|
||
})
|
||
// #endif
|
||
// #ifndef MP-ALIPAY || APP-PLUS
|
||
uni.makePhoneCall({
|
||
phoneNumber: obj.mobile
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
plus.device.dial(obj.mobile, true);
|
||
// #endif
|
||
},
|
||
selectPhone(e) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: e.detail.phone
|
||
})
|
||
},
|
||
onCancel() {
|
||
this.taskShow = false;
|
||
this.telShow = false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.tab_list{
|
||
width:750rpx;
|
||
height:80rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
background:#fff;
|
||
margin-bottom:24rpx;
|
||
.tabli{
|
||
font-size:24rpx;
|
||
color:#333;
|
||
line-height: 75rpx;
|
||
text-align: center;
|
||
border-bottom:4rpx solid #fff;
|
||
}
|
||
.tabliactive{
|
||
border-bottom:4rpx solid $uni-text-color;
|
||
}
|
||
}
|
||
.clineInfo {
|
||
background-color: #fff;
|
||
padding: 30rpx 45rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 10rpx;
|
||
box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.info_head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
:first-child {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.info_main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.main_left {
|
||
.left_followUp {
|
||
display: flex;
|
||
padding-bottom: 30rpx;
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.left_star {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
display: flex;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.left_foot {
|
||
padding-bottom: 20rpx;
|
||
|
||
.l_box {
|
||
margin-right: 35rpx;
|
||
float: left;
|
||
|
||
span {
|
||
background: $uni-text-color-opcity;
|
||
padding: 5rpx 12rpx;
|
||
font-size: 26rpx;
|
||
color: $uni-text-color;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main_right {
|
||
text-align: center;
|
||
padding: 20rpx 15rpx 0 0;
|
||
|
||
image {
|
||
border-radius: 50%;
|
||
width: 129rpx;
|
||
height: 129rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info_footer {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding-top: 30rpx;
|
||
height: 80rpx;
|
||
border-top: 1px solid #ededed;
|
||
margin-top: 20rpx;
|
||
|
||
.footer_content {
|
||
// width: 25%;
|
||
line-height: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
.icon-iconmore-copy,
|
||
.icon-follow {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.icon-follow,
|
||
.icon-task,
|
||
.icon-tel {
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.icon-iconmore-copy {
|
||
margin-left: 5rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon_creat {
|
||
position: fixed;
|
||
z-index: 1;
|
||
bottom: 180rpx;
|
||
right: 80rpx;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style>
|