|
|
|
@ -1,53 +1,85 @@ |
|
|
|
<template> |
|
|
|
<view class="assemble"> |
|
|
|
<view class="search_box"> |
|
|
|
<view class="input_box"> |
|
|
|
<input type="text" v-model="keyword" placeholder="请输入客户名称"> |
|
|
|
</view> |
|
|
|
<view class="btn">查重</view> |
|
|
|
</view> |
|
|
|
<view class="form-style"> |
|
|
|
<fui-form ref="form" top="0" :model="formData" :show="false"> |
|
|
|
|
|
|
|
<view class="title" style="margin-top: 20rpx;">基础信息</view> |
|
|
|
<view class="input-style"> |
|
|
|
<fui-form-item label="跟进类型" asterisk asteriskPosition="right" labelSize='26' prop="name" background='#434544' labelColor='#fff' |
|
|
|
:bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" v-if="result_leixing == ''" |
|
|
|
@click="selectCon(2)">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" v-else @click="selectCon(2)">{{ result_leixing }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" |
|
|
|
v-if="result_date == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_date }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="上传录音" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' |
|
|
|
:bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile" |
|
|
|
backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="学员名称" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" |
|
|
|
v-if="result_student == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(3)" v-else>{{ result_student }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" |
|
|
|
v-if="result_status == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(4)" v-else>{{ result_status }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="签单意向联系人" labelWidth="230" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" |
|
|
|
v-if="result_intention == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(5)" v-else>{{ result_intention }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
</view> |
|
|
|
<view class="input-style"> |
|
|
|
<fui-form-item label="学员姓名" asterisk asteriskPosition="right" labelSize='26' prop="student_name" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.student_name" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="学员手机号" asterisk asteriskPosition="right" labelSize='26' prop="student_phone" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.student_phone" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<fui-form-item label="年龄" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input-number signColor="#FFF" :min="1" :max="100" v-model="formData.age"></fui-input-number> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="学校" asteriskPosition="right" labelSize='26' prop="" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.school_name" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="年级" asteriskPosition="right" labelSize='26' prop="" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.grade" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="班级" asteriskPosition="right" labelSize='26' prop="" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.class_name" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="客户来源" asterisk asteriskPosition="right" labelSize='26' prop="" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
|
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" |
|
|
|
v-if="result_customer_source == ''">点击选择 |
|
|
|
</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(1)" v-else>{{ result_customer_source }} |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="归属人员" asterisk asteriskPosition="right" labelSize='26' prop="" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
|
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(2)" |
|
|
|
v-if="result_add_staff_id == ''">点击选择 |
|
|
|
</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(2)" v-else>{{ result_add_staff_id }} |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="联系人" asterisk asteriskPosition="right" labelSize='26' prop="name" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" > |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.contact_name" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- |
|
|
|
<view class="input-style" style="margin-top: 50rpx;"> |
|
|
|
<view class="input-style"> |
|
|
|
<fui-form-item label="客户状态" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
@ -77,52 +109,42 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
--> |
|
|
|
|
|
|
|
<view class="title" style="margin-top: 20rpx;">跟进任务</view> |
|
|
|
<view class="title" style="margin-top: 20rpx;">附加信息</view> |
|
|
|
<view class="input-style"> |
|
|
|
<fui-form-item label="创建下次跟进任务" labelWidth="250" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<fui-switch @change="switchChange" checked></fui-switch> |
|
|
|
</fui-form-item> |
|
|
|
<view v-if="switchChange_type == 1"> |
|
|
|
|
|
|
|
<fui-form-item label="跟进时间" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)" |
|
|
|
v-if="result_dates == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(6)" v-else>{{ result_dates }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="跟进内容" labelSize='26' prop="mobile" background='#434544' labelColor='#fff' |
|
|
|
:bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile" |
|
|
|
backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="跟进人员" labelSize='26' asterisk asteriskPosition="right" prop="mobile" |
|
|
|
background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.mobile" |
|
|
|
backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="任务提醒" labelSize='26' prop="mobile" background='#434544' labelColor='#fff' |
|
|
|
:bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)" |
|
|
|
v-if="result_renwu == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(7)" v-else>{{ result_renwu }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
<fui-form-item label="提醒方式" labelSize='26' prop="mobile" background='#434544' labelColor='#fff' |
|
|
|
:bottomBorder='false'> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)" |
|
|
|
v-if="result_fangshi == ''">点击选择</view> |
|
|
|
<view class="input-title" style="margin-right:14rpx;" @click="selectCon(8)" v-else>{{ result_fangshi }} |
|
|
|
</view> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
|
|
|
|
<view > |
|
|
|
<fui-form-item label="所在地区" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击选择" backgroundColor="#434544" size="26" color="#fff" @click="show_area=true" v-model="formData.full_address"></fui-input> |
|
|
|
|
|
|
|
<!--地区三级联动--> |
|
|
|
<fui-picker |
|
|
|
linkage :layer="3" |
|
|
|
:options="options_area" |
|
|
|
:show="show_area" |
|
|
|
@change="changeArea" |
|
|
|
@cancel="show_area=false" |
|
|
|
></fui-picker> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="小区" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击填写" v-model="formData.community_name" backgroundColor="#434544" size="26" color="#fff"></fui-input> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
<fui-form-item label="客户标签" labelSize='26' asterisk asteriskPosition="right" prop="mobile" background='#434544' labelColor='#fff' :bottomBorder='false'> |
|
|
|
<fui-input :borderBottom="false" :padding="[0]" placeholder="点击选择" v-model="formData.customer_tags_name" backgroundColor="#434544" size="26" color="#fff" @click="show_customer_tags=true"></fui-input> |
|
|
|
|
|
|
|
<!--下拉多选--> |
|
|
|
<fui-select :show="show_customer_tags" :options="options_customer_tags" title="请选择银行" multiple isReverse checkboxColor="#FFC529" btnBackground="#FFC529" btnColor="#1A1D26" closeColor="#6D758A" @confirm="onConfirmCustomerTags" @close="show_customer_tags=false"></fui-select> |
|
|
|
</fui-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</fui-form> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="fui-btn__box"> |
|
|
|
<fui-button background="#434544" color="#24BA9F" borderColor="#24BA9F" @click="submit">保存</fui-button> |
|
|
|
</view> |
|
|
|
@ -137,6 +159,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import commonApi from '@/api/common.js'; |
|
|
|
|
|
|
|
|
|
|
|
const rules = [{ |
|
|
|
name: "mobile", |
|
|
|
rule: ["required", "isMobile"], |
|
|
|
@ -147,7 +172,25 @@ |
|
|
|
return { |
|
|
|
switchChange_type: 1, |
|
|
|
rules, |
|
|
|
formData: {}, |
|
|
|
formData: { |
|
|
|
|
|
|
|
student_name:'',//学员姓名* |
|
|
|
student_phone:'',//学员手机号* |
|
|
|
age:'',//年龄* |
|
|
|
school_name:'',//学校 |
|
|
|
grade:'',//年级 |
|
|
|
class_name:'',//班级 |
|
|
|
customer_source:'',//客户来源* |
|
|
|
add_staff_id:'',//归属人员id* |
|
|
|
contact_name:'',//联系人* |
|
|
|
province_id:'',//所在地区-省 |
|
|
|
city_id:'',//所在地区-市 |
|
|
|
district_id:'',//所在地区-区 |
|
|
|
full_address:'',//所在地区中文名 |
|
|
|
community_name:'',//小区 |
|
|
|
customer_tags_name:'',//选中的标签名称,多个用,号分割 |
|
|
|
customer_tags:['2','3'],//客户标签 |
|
|
|
}, |
|
|
|
show_date: false, |
|
|
|
result_date: '', |
|
|
|
result_leixing: '', |
|
|
|
@ -226,10 +269,85 @@ |
|
|
|
}, { |
|
|
|
'value': 2, |
|
|
|
'text': '微信' |
|
|
|
}] |
|
|
|
}], |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
keyword:'',//关键词 |
|
|
|
//客户来源 |
|
|
|
result_customer_source:'',//选中项的中文名称 |
|
|
|
options_customer_source: [ |
|
|
|
{ |
|
|
|
'value': 1, |
|
|
|
'text': '渠道1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
'value': 2, |
|
|
|
'text': '渠道2' |
|
|
|
} |
|
|
|
],//客户来源可选值 |
|
|
|
//归属人员(add_staff_id,添加这条数据的工作人员id) |
|
|
|
result_add_staff_id:'',//选中项的中文名称 |
|
|
|
options_add_staff_id: [ |
|
|
|
{ |
|
|
|
'value': 1, |
|
|
|
'text': '张三' |
|
|
|
}, |
|
|
|
{ |
|
|
|
'value': 2, |
|
|
|
'text': '李四' |
|
|
|
} |
|
|
|
],//客户来源可选值 |
|
|
|
|
|
|
|
//客户标签 |
|
|
|
show_customer_tags:false, |
|
|
|
options_customer_tags:[ |
|
|
|
{ |
|
|
|
text: '标签1', |
|
|
|
value: '1', |
|
|
|
checked:false,//是否选中"true=是,false=否 |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '标签2', |
|
|
|
value: '2', |
|
|
|
checked:false,//是否选中 |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '标签3', |
|
|
|
value: '3', |
|
|
|
checked:false,//是否选中 |
|
|
|
} |
|
|
|
],//客户标签可选值 |
|
|
|
|
|
|
|
//地区三级联动 |
|
|
|
show_area:false, |
|
|
|
options_area:[], |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow(){ |
|
|
|
this.init() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//初始化 |
|
|
|
async init(){ |
|
|
|
this.getAreaTree()//获取地区树形结构 |
|
|
|
}, |
|
|
|
|
|
|
|
//获取地区树形结构 |
|
|
|
async getAreaTree(){ |
|
|
|
let res = await commonApi.getAreaTree() |
|
|
|
if(res.code != 1){ |
|
|
|
uni.showToast({ |
|
|
|
title: res.msg, |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
this.options_area = res.data |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
//提交 |
|
|
|
submit() { |
|
|
|
console.log(this.formData) |
|
|
|
this.$refs.form.validator(null, null, true).then(res => { |
|
|
|
@ -246,12 +364,15 @@ |
|
|
|
//选择弹窗 |
|
|
|
selectCon(type) { |
|
|
|
if (type == 1) { |
|
|
|
//选择跟进时间 |
|
|
|
this.options_date_type = 1 |
|
|
|
this.show_date = true |
|
|
|
//客户来源 |
|
|
|
this.options_type = 1 |
|
|
|
this.options = this.options_customer_source |
|
|
|
this.show = true |
|
|
|
this.linkage = true |
|
|
|
} else if (type == 2) { |
|
|
|
//添加这条数据的工作人员id |
|
|
|
this.options_type = 2 |
|
|
|
this.options = this.options_leixing |
|
|
|
this.options = this.options_add_staff_id |
|
|
|
this.show = true |
|
|
|
this.linkage = true |
|
|
|
} else if (type == 3) { |
|
|
|
@ -301,12 +422,19 @@ |
|
|
|
cancel_date() { |
|
|
|
this.show_date = false |
|
|
|
}, |
|
|
|
//选择框 |
|
|
|
//监听选择框 |
|
|
|
change(e) { |
|
|
|
this.show = false |
|
|
|
console.log(e) |
|
|
|
if(this.options_type == 2){ |
|
|
|
this.result_leixing = e.result |
|
|
|
if(this.options_type == 1){ |
|
|
|
//客户来源 |
|
|
|
this.result_customer_source = e.result |
|
|
|
this.formData.customer_source = e.value |
|
|
|
} |
|
|
|
else if(this.options_type == 2){ |
|
|
|
//归属人员(添加这条数据的工作人员id) |
|
|
|
this.result_add_staff_id = e.result |
|
|
|
this.formData.add_staff_id = e.value |
|
|
|
} else if (this.options_type == 3) { |
|
|
|
this.result_student = e.result |
|
|
|
} else if (this.options_type == 4) { |
|
|
|
@ -319,6 +447,38 @@ |
|
|
|
this.result_fangshi = e.result |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//多选客户标签-选中后回调 |
|
|
|
onConfirmCustomerTags(e){ |
|
|
|
console.log('多选客户标签',e) |
|
|
|
this.show_customer_tags = false |
|
|
|
let customer_tags_name_arr = [] |
|
|
|
let customer_tags_arr = [] |
|
|
|
e.options.forEach((v,k)=>{ |
|
|
|
customer_tags_arr.push(v.value) |
|
|
|
customer_tags_name_arr.push(v.text) |
|
|
|
//根据v.value 设置this.options_customer_tags中对应元素的checked属性为true |
|
|
|
this.options_customer_tags.forEach((v,k)=>{ |
|
|
|
if(v.value == v.value){ |
|
|
|
v.checked = true |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
this.formData.customer_tags_name = customer_tags_name_arr.join(',')//数组转字符串 |
|
|
|
this.formData.customer_tags = customer_tags_arr//数组转字符串 |
|
|
|
}, |
|
|
|
|
|
|
|
//地区选择相关 |
|
|
|
changeArea(e){ |
|
|
|
this.show_area = false |
|
|
|
console.log('地区选择',e) |
|
|
|
this.formData.province_id = e.value[0] |
|
|
|
this.formData.city_id = e.value[1] |
|
|
|
this.formData.district_id = e.value[2] |
|
|
|
this.formData.full_address = `${e.text[0]}-${e.text[1]}-${e.text[2]}` |
|
|
|
}, |
|
|
|
|
|
|
|
//关闭选择框 |
|
|
|
cancel() { |
|
|
|
this.show = false |
|
|
|
@ -336,6 +496,27 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.search_box{ |
|
|
|
padding: 20rpx 40rpx; |
|
|
|
border-bottom: 1px solid #333333; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
.input_box{ |
|
|
|
width: 70%; |
|
|
|
input{ |
|
|
|
width: 100%; |
|
|
|
height: 60rpx; |
|
|
|
color: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.btn{ |
|
|
|
font-size: 28rpx; |
|
|
|
color: #24BA9F; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.assemble { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
|