智慧教务系统UniApp前端项目(使用中2025-0517)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

831 lines
23 KiB

<!--添加客户-->
<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="" 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(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="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="年龄" labelSize='26' asterisk asteriskPosition="right" prop="age" 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="性别" labelSize='26' asterisk asteriskPosition="right" prop="age" background='#434544'
labelColor='#fff' :bottomBorder='false'>
<view class="input-title" style="margin-right:14rpx;">
<fui-radio-group name="radio" v-model="formData.sex" @change="changeSex">
<view class="fui-list__item" style="display: flex;justify-content: flex-end;">
<fui-label>
<view class="fui-align__center">
<fui-radio value="1" checked></fui-radio>
<text class="fui-text">男</text>
</view>
</fui-label>
<fui-label :margin="['0','0','0','40rpx']">
<view class="fui-align__center">
<fui-radio value="2"></fui-radio>
<text class="fui-text">女</text>
</view>
</fui-label>
</view>
</fui-radio-group>
</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>
</view>
<view class="title" style="margin-top: 20rpx;">跟进任务</view>
<view class="input-style">
<fui-form-item
label="转交跟进任务"
labelSize='26'
asterisk
asteriskPosition="right"
prop="mobile"
background='#434544'
labelColor='#fff'
:bottomBorder='false'>
<fui-switch
:checked="is_follow"
@change="changeIsFollow"
></fui-switch>
</fui-form-item>
<view v-if="is_follow">
<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="跟进人员" 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('staff_id')" v-else>{{
result_add_staff_id
}}
</view>
</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.follow_up_time"
backgroundColor="#434544" size="26" color="#fff" @click="selectCon(6)"></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.community_name"
backgroundColor="#434544" size="26" color="#fff"></fui-input>
</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>
<!-- 年月日-选择时间 -->
<fui-date-picker :show="show_date" type="3" @change="change_date" @cancel="cancel_date"></fui-date-picker>
<!-- 选择器 -->
<fui-picker :linkage='linkage' :options="options" :layer="1" :show="show" @change="change"
@cancel="cancel"></fui-picker>
</view>
</template>
<script>
import commonApi from '@/api/common.js';
import marketApi from '@/api/market.js';
import memberApi from '@/api/member.js';
const rules = [
{
name: "student_name",
rule: ["required"],
msg: ["请输入学员姓名"]
},
{
name: "student_phone",
rule: ["required", "isMobile"],
msg: ["请输入电话", "请输入正确的手机号"]
},
{
name: "age",
rule: ["required", "isNumber"],
msg: ["请输入年龄", "请输入正确的数字"]
},
{
name: "school_name",
rule: ["required"],
msg: ["请输入学校"]
},
{
name: "grade",
rule: ["required"],
msg: ["请输入年级"]
},
{
name: "class_name",
rule: ["required"],
msg: ["请输入班级"]
},
{
name: "customer_source",
rule: ["required"],
msg: ["请选择客户来源"]
},
{
name: "add_staff_id",
rule: ["required"],
msg: ["请选择顾问"]
},
{
name: "contact_name",
rule: ["required"],
msg: ["请输入联系人"]
},
{
name: "full_address",
rule: ["required"],
msg: ["请选择所在地区"]
},
{
name: "community_name",
rule: ["required"],
msg: ["请输入小区"]
},
{
name: "customer_tags_name",
rule: ["required"],
msg: ["请选择客户标签"]
}
];
export default {
data() {
return {
switchChange_type: 1,
rules,
is_submit: true,//是否提交(防止重复提交)|true=可提交,false=不可提交
//表单
formData: {
sex:'1',//性别|0=保密,1=男,2=女
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'],//客户标签
is_follow:'1',//是否创建跟进任务 1跟进 2不跟进
follow_up_time:'',//跟进时间*
follow_up_content:'',//跟进内容
staff_id:'',//跟进人员id*
is_warn:'2',//是否提醒 1提醒 2不提醒
reminder_method:'',//1=短信,2=邮箱,3=微信模板消息
},
is_follow:true,//是否创建跟进任务
show_date: false,
result_date: '',
result_leixing: '',
result_student: '',
result_status: '',
result_intention: '',
result_dates: '',
result_renwu: '',
result_fangshi: '',
show: false,
options: [],
linkage: true,
options_type: undefined,
options_leixing: [{
'value': 1,
'text': '类型1'
}, {
'value': 2,
'text': '类型2'
}, {
'value': 3,
'text': '类型3'
}],
options_student: [{
'value': 1,
'text': '张三'
}, {
'value': 2,
'text': '李四'
}, {
'value': 3,
'text': '王五'
}],
options_status: [{
'value': 1,
'text': '状态1'
}, {
'value': 2,
'text': '状态2'
}, {
'value': 3,
'text': '状态3'
}],
options_intention: [{
'value': 1,
'text': '张三1'
}, {
'value': 2,
'text': '李四2'
}, {
'value': 3,
'text': '王五3'
}],
options_kehu: [{
'value': 1,
'text': '张三'
}, {
'value': 2,
'text': '李四'
}, {
'value': 3,
'text': '王五'
}],
options_renwu: [{
'value': 1,
'text': '是'
}, {
'value': 2,
'text': '否'
}],
options_fangshi: [{
'value': 1,
'text': '短信'
}, {
'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: '',//选中项的中文名称
staff_id_name:'',//跟进人员的名字
options_add_staff_id: [
// {
// 'value': 1,
// 'text': '张三'
// },
],//顾问来源可选值
//客户标签
show_customer_tags: false,
options_customer_tags: [
// {
// text: '标签3',
// value: '3',
// checked: false,//是否选中
// }
],//客户标签可选值
//地区三级联动
show_area: false,
options_area: [],
//登录用户信息
userInfo:{}
}
},
onShow() {
this.init()
},
methods: {
//初始化
async init() {
//获取登录用户信息
this.getUserInfo()
this.getDict_customer_source()//获取字典-客户来源
this.getDict_customer_tags()//获取字典-客户标签
this.getStaffList()//获取人员列表
this.getAreaTree()//获取地区树形结构
},
async getUserInfo(){
let res = await marketApi.member({})
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.userInfo = res.data
this.formData.staff_id = res.data.staff_id
this.result_add_staff_id = res.data.name
},
//获取人员列表
async getStaffList() {
let res = await memberApi.staffList({type: 2})
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
res.data.forEach((v,k)=>{
this.options_add_staff_id.push({
text: v.name,
value: v.id,
})
})
},
//获取地区树形结构
async getAreaTree() {
let res = await commonApi.getAreaTree()
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.options_area = res.data
},
//获取字典-客户来源
async getDict_customer_source(){
let res = await commonApi.getDictionary('customer_source')
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
let dictionary = res.data.dictionary
let arr = []
dictionary.forEach((v,k)=>{
arr.push({
text: v.name,
value: v.value,
})
})
this.options_customer_source = arr
},
//获取字典-客户标签
async getDict_customer_tags(){
let res = await commonApi.getDictionary('customer_tags')
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
let dictionary = res.data.dictionary
let arr = []
dictionary.forEach((v,k)=>{
arr.push({
text: v.name,
value: String(v.value),
checked: false,
})
})
this.options_customer_tags = arr
},
//表单验证
async validatorForm(data) {
if(!data.student_name){
uni.showToast({
title: '学员姓名必填',
icon: 'none'
})
return false
}
if(!data.student_phone){
uni.showToast({
title: '电话必填',
icon: 'none'
})
return false
}
if(!data.age){
uni.showToast({
title: '年龄必填',
icon: 'none'
})
return false
}
if(!data.customer_source){
uni.showToast({
title: '客户来源必填',
icon: 'none'
})
return false
}
if(!data.staff_id){
uni.showToast({
title: '顾问必填',
icon: 'none'
})
return false
}
if(!data.contact_name){
uni.showToast({
title: '联系人必填',
icon: 'none'
})
return false
}
return true
},
//提交
async submit() {
console.log('提交',this.formData)
let data = {...this.formData}
//表单验证
let validatorForm = await this.validatorForm(data)
console.log(123123,validatorForm)
if(!validatorForm){
return
}
//防止重复提交
if (!this.is_submit) {
return
}
this.is_submit = false
let res = await marketApi.setSales(data)
this.is_submit = true
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
uni.showToast({
title: res.msg,
icon: 'success'
})
//延迟1s执行
setTimeout(() => {
//跳转页面-线索列表
uni.navigateTo({
url: `/pages/market/clue/index`
})
}, 1000)
},
//选择弹窗
selectCon(type) {
if (type == 1) {
//客户来源
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_add_staff_id
this.show = true
this.linkage = true
} else if (type == 3) {
this.options_type = 3
this.options = this.options_student
this.show = true
this.linkage = true
} else if (type == 4) {
this.options_type = 4
this.options = this.options_status
this.show = true
this.linkage = true
} else if (type == 5) {
this.options_type = 5
this.options = this.options_intention
this.show = true
this.linkage = true
} else if (type == 6) {
//选择跟进时间
this.options_date_type = 6
this.show_date = true
} else if (type == 7) {
//选择任务提醒
this.options_type = 7
this.options = this.options_renwu
this.show = true
this.linkage = true
} else if (type == 8) {
//选择提醒方式
this.options_type = 8
this.options = this.options_fangshi
this.show = true
this.linkage = true
}else if (type == 'staff_id') {
//跟进人员
this.options_type = 2
this.options = this.options_add_staff_id
this.show = true
this.linkage = true
}
},
//选择跟进时间
change_date(e) {
if (this.options_date_type == 1) {
this.show_date = false
this.result_date = e.result ?? ''
} else if (this.options_date_type == 6) {
//跟进时间
this.show_date = false
this.result_dates = e.result ?? ''
this.formData.follow_up_time = e.result ?? ''
}
},
//关闭选择跟进时间
cancel_date() {
this.show_date = false
},
//监听选择框
change(e) {
this.show = false
console.log(e)
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) {
this.result_status = e.result
} else if (this.options_type == 5) {
this.result_intention = e.result
} else if (this.options_type == 7) {
this.result_renwu = e.result
} else if (this.options_type == 8) {
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
},
//开关选择
switchChange(e) {
if (e.detail.value) {
this.switchChange_type = 1
} else {
this.switchChange_type = 2
}
},
//性别选择器
changeSex(e){
this.formData.sex = e.detail.value
},
//监听-是否创建跟进任务
changeIsFollow(e) {
console.log(111, e.detail.value)
this.is_follow = e.detail.value
//是否创建跟进任务 1跟进
if (this.is_follow) {
this.formData.is_follow = '1'
} else {
//2不跟进
this.formData.is_follow = '2'
// this.formData. = ''//跟进类型
this.formData.staff_id = ''//跟进人员
this.formData.follow_up_time = ''//跟进时间
// this.formData. = ''//备注
}
},
}
}
</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;
background: #292929;
overflow: auto;
}
.title {
font-size: 26rpx;
color: #fff;
padding: 26rpx 0 26rpx 32rpx;
}
.input-title {
font-size: 26rpx;
color: #fff;
}
.form-style {
width: 100%;
// background: #434544;
}
.form-style-vid {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
}
.input-style {
text-align: right !important;
}
.fui-btn__box {
margin: 50rpx auto 120rpx;
width: 92%;
}
</style>