636 lines
13 KiB
Vue
636 lines
13 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 顶部导航栏 -->
|
|
<view class="select_warp">
|
|
<view class="manage_tab">
|
|
<view class="tab_array">
|
|
<image :src="BASE_IMG_URL+'ss.png'" mode="scaleToFill"></image>
|
|
<input type="text" :class="name ? 'valueactive' : '' " @confirm="doSearch" v-model="name"
|
|
placeholder="线索名称" class="li_box" />
|
|
</view>
|
|
<view class="tab_screen" @click="showSearch = true">
|
|
<image :src="BASE_IMG_URL+'shaixuan.png'" mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="tab_screen" @click="showSelect = !showSelect">分配</view>
|
|
</view>
|
|
<view class="warpbox" v-if="showSearch" @tap.stop="showSearch = false">
|
|
<scroll-view scroll-y class="scrollbox" style="height:800rpx;background:#fff;">
|
|
<!--筛选模块 -->
|
|
<view class="screen_content" @tap.stop.prevent>
|
|
<view class="fir_li">
|
|
<view class="li_label">线索创建时间</view>
|
|
<view class="li_box" style="display: flex;">
|
|
<picker @change="changeStartTime" mode="date" :end="end_time"
|
|
style="width:50%;border-right:1rpx solid #CCCCCC">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="start_time ? 'valueactive' : '' ">
|
|
{{start_time ? start_time : '开始时间'}}</view>
|
|
</view>
|
|
</picker>
|
|
<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '结束时间'}}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button_bottom">
|
|
<view @tap.stop="reset">重置</view>
|
|
<view @tap.stop="sureQuery">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 内容模块 -->
|
|
<view class="clues_content">
|
|
<view class="clues_item" v-for="(item,index) in list" :key="index">
|
|
<view class="info_main" @click="moreClick(item,index)">
|
|
<radio :value="item.id" :checked="item.isSelect" v-if="showSelect" color="#008EFF" />
|
|
<view class="main_left" >
|
|
<view class="left_followUp">
|
|
<view style="color: #333333; font-size: 34rpx;">{{item.name ? item.name : '--'}}</view>
|
|
</view>
|
|
<view class="left_followUp">
|
|
<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">
|
|
<view class="l_box">
|
|
<span>{{item.source ? item.source : '--'}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info_footer">
|
|
<view class="footer_content" @click="newFollowClick(item.id,4)">
|
|
<image :src="BASE_IMG_URL+'morebtn.png'" mode="scaleToFill"></image>
|
|
<view>跟进</view>
|
|
</view>
|
|
<view class="footer_content" @click="toReceive(item)">
|
|
<image src="/static/transfer.png" style="width:45rpx;height:45rpx;" mode="scaleToFill"></image>
|
|
<view>领取</view>
|
|
</view>
|
|
<view class="footer_content" @click="toCall(item.mobile)">
|
|
<image :src="BASE_IMG_URL+'dh.png'" mode="scaleToFill"></image>
|
|
<view>电话</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty margin-top="500rpx" v-if="list.length == 0" text="暂无更多"></u-empty>
|
|
</view>
|
|
<view style="height: 200rpx;"></view>
|
|
<!-- 全选 -->
|
|
<view class="bottomli" v-if="showSelect">
|
|
<view class="botselect">
|
|
<view class="se_text" v-if="!allSelect" @click="selectAll">全选</view>
|
|
<view class="se_text" v-else @click="removeSelect">取消全选</view>
|
|
</view>
|
|
<view class="remove btn" @click="showSelect = false">取消</view>
|
|
<view class="sure btn" @click="queding">确定</view>
|
|
</view>
|
|
|
|
<view class="btn_fix" @click="newCluesClick">
|
|
<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {netCluesPoolList, netReceiveCluesPool, netAllDistriCluesPool } from '@/api/clues.js'
|
|
import {BASE_IMG_URL} from '@/util/api.js'
|
|
export default {
|
|
components:{
|
|
},
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
limit: 10,
|
|
totalPage: 1,
|
|
list: [],
|
|
BASE_IMG_URL: BASE_IMG_URL,
|
|
showSearch: false,
|
|
name: '',
|
|
start_time: '',
|
|
end_time: '',
|
|
//是否全选
|
|
allSelect:false,
|
|
showSelect:false,
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.startTime) {
|
|
this.start_time = options.startTime
|
|
this.end_time = options.endTime
|
|
}
|
|
if(options.stime){
|
|
this.start_time = options.stime
|
|
this.end_time = options.etime
|
|
}
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
onHide() {
|
|
this.showSelect = false
|
|
this.allSelect = false
|
|
},
|
|
onReachBottom() {
|
|
if (this.page >= this.totalPage) {
|
|
return
|
|
}
|
|
this.page++
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
//全选
|
|
selectAll() {
|
|
this.allSelect = true
|
|
let arr = this.list
|
|
arr.forEach(ele=>{
|
|
ele.isSelect = true
|
|
})
|
|
this.list = arr
|
|
},
|
|
//取消全选
|
|
removeSelect() {
|
|
this.allSelect = false
|
|
let arr = this.list
|
|
arr.forEach(ele=>{
|
|
ele.isSelect = false
|
|
})
|
|
this.list = arr
|
|
},
|
|
//确定分配
|
|
queding() {
|
|
let arr = []
|
|
this.list.forEach(ele=>{
|
|
if(ele.isSelect){
|
|
arr.push(ele.id)
|
|
}
|
|
})
|
|
if(arr.length == 0) {
|
|
uni.showToast({
|
|
title:'请选择需要分配的线索',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url:'/pagesB/cluepool/transfer?ids='+arr
|
|
})
|
|
},
|
|
init() {
|
|
this.page = 1
|
|
this.totalPage = 1
|
|
this.list = []
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
},200)
|
|
},
|
|
//搜索
|
|
doSearch() {
|
|
this.showSearch = false
|
|
this.init()
|
|
},
|
|
// 跟进
|
|
newFollowClick(id, type) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/crm/customerManagement/newFllow/newFllow?id=' + id + '&type=' + type
|
|
})
|
|
},
|
|
// 查看详情
|
|
moreClick(item,index) {
|
|
if(this.showSelect){
|
|
let obj = this.list[index]
|
|
obj.isSelect = true
|
|
this.$set(this.list,index,obj)
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pagesB/cluepool/clueDetail?id=' + item.id
|
|
})
|
|
},
|
|
// 新建线索
|
|
newCluesClick() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/cluepool/addCluePool'
|
|
})
|
|
},
|
|
//线索创建 开始时间
|
|
changeStartTime(e) {
|
|
this.start_time = e.detail.value
|
|
if(!this.end_time){
|
|
this.end_time = e.detail.value
|
|
}
|
|
},
|
|
//线索 创建 结束时间
|
|
changeEndTime(e) {
|
|
this.end_time = e.detail.value
|
|
if(!this.start_time){
|
|
this.start_time = e.detail.value
|
|
}
|
|
},
|
|
//重置
|
|
reset() {
|
|
this.name = ''
|
|
this.start_time = ''
|
|
this.end_time = ''
|
|
},
|
|
//确定
|
|
sureQuery() {
|
|
this.showSearch = false
|
|
this.init()
|
|
},
|
|
//搜索
|
|
searchName(e) {
|
|
this.name = e.detail
|
|
this.init()
|
|
},
|
|
//线索 列表
|
|
getList() {
|
|
let params = {
|
|
page: this.page,
|
|
limit: this.limit,
|
|
name: this.name,
|
|
createtime: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
|
|
}
|
|
netCluesPoolList(params).then(res => {
|
|
let arr = res.data.data
|
|
arr.forEach(ele=>{
|
|
ele.isSelect = false
|
|
})
|
|
this.list = this.list.concat(arr)
|
|
this.totalPage = res.data.last_page
|
|
})
|
|
},
|
|
// 电话
|
|
toCall(phone) {
|
|
// #ifdef MP-ALIPAY
|
|
dd.showCallMenu({
|
|
phoneNumber: phone, // 期望拨打的电话号码
|
|
code: '+86', // 国家代号，中国是+86
|
|
})
|
|
// #endif
|
|
// #ifndef MP-ALIPAY || APP-PLUS
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
plus.device.dial(phone, true);
|
|
// #endif
|
|
},
|
|
//领取
|
|
toReceive(item) {
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'请确认是否领取?',
|
|
complete:(data)=>{
|
|
if(data.confirm){
|
|
netReceiveCluesPool({id:item.id}).then(res=>{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
setTimeout(()=>{
|
|
this.init()
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bottomli {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: #fff;
|
|
border-top: 1rpx solid #EAEAEA;
|
|
.botselect{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.se_text{
|
|
font-size:26rpx;
|
|
color:$uni-text-color;
|
|
}
|
|
}
|
|
.btn {
|
|
width: 240rpx;
|
|
height: 80rpx;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.sure {
|
|
background: $uni-text-color;
|
|
color: #fff;
|
|
}
|
|
|
|
.remove {
|
|
border: 1rpx solid $uni-text-color;
|
|
color: $uni-text-color;
|
|
line-height: 78rpx;
|
|
}
|
|
}
|
|
.left_foot {
|
|
padding-bottom: 20rpx;
|
|
margin: 20rpx 0;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.valueactive {
|
|
color: #333;
|
|
}
|
|
|
|
.select_warp {
|
|
z-index: 9;
|
|
position: relative;
|
|
}
|
|
|
|
.searchbox {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background-color: $uni-text-color;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 40rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
|
|
.tab_array {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 34rpx;
|
|
height: 68rpx;
|
|
width: 467rpx;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin: 8rpx 15rpx 0 28rpx;
|
|
}
|
|
|
|
input {
|
|
line-height: 68rpx;
|
|
height: 68rpx;
|
|
}
|
|
}
|
|
|
|
.searchtext {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
margin-right: 55rpx;
|
|
}
|
|
}
|
|
|
|
.manage_tab {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background-color: $uni-text-color;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.tab_array {
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 34rpx;
|
|
height: 68rpx;
|
|
width: 467rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin: 8rpx 15rpx 0 28rpx;
|
|
}
|
|
|
|
input {
|
|
line-height: 68rpx;
|
|
height: 68rpx;
|
|
}
|
|
}
|
|
|
|
.tab_screen {
|
|
display: flex;
|
|
color:#fff;
|
|
image {
|
|
width: 43rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warpbox {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 80rpx;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
|
|
.screen_content {
|
|
width: 702rpx;
|
|
z-index: 2;
|
|
border-top: 1rpx solid #CCCCCC;
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
|
|
.fir_li {
|
|
margin-bottom: 20rpx;
|
|
|
|
.li_label {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.li_box {
|
|
border-radius: 15rpx;
|
|
border: 1rpx solid #CCCCCC;
|
|
height: 60rpx;
|
|
padding: 0 35rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.form_right {
|
|
display: flex;
|
|
color: #999;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.button_bottom {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: #fff;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
|
|
:first-child {
|
|
flex: 1;
|
|
color: $uni-text-color;
|
|
border-top: 1rpx solid #CCCCCC;
|
|
}
|
|
|
|
:last-child {
|
|
flex: 1;
|
|
background-color: $uni-text-color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.clues_content {
|
|
|
|
// margin: 0 24rpx;
|
|
// margin-top: 100rpx;
|
|
.clues_item {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx 24rpx;
|
|
box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.info_head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
:first-child {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
|
|
}
|
|
|
|
.info_main {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1px solid #ededed;
|
|
|
|
.main_left {
|
|
margin-left:24rpx;
|
|
.left_followUp {
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.left_star {
|
|
display: flex;
|
|
padding-bottom: 20rpx;
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.main_right {
|
|
text-align: center;
|
|
padding: 20rpx 20rpx 0 0;
|
|
|
|
image {
|
|
width: 129rpx;
|
|
height: 129rpx;
|
|
margin-bottom: 5rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info_footer {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding-top: 30rpx;
|
|
height: 80rpx;
|
|
|
|
.footer_content {
|
|
line-height: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn_fix {
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
right: 80rpx;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
</style>
|