Skip to content

H
horse
Commit 20c890a6 authored by Mac's avatar Mac
Browse files
Options

新增拉群分配客户列表

parent 555dc572
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 0 deletions
src/pages/customerManage/customerSet/components/laqundistribution.vue 0 → 100644
View file @ 20c890a6
<template>
<div class="customerPhase page-body">
<div style="display: flex;align-items: center;justify-content: space-between;">
<div style="display: flex;align-items: center;">
<q-btn
color="accent"
style="margin-bottom: 10px;"
class="q-mr-md"
label="新增分配规则 "
@click="Addallocation('/editor/editlaqun')"
size="sm"
></q-btn>
<span style="margin-left: 10px;color: #3470ff;cursor: pointer;" @click="icon = true">查看拉群分配流程</span>
</div>
<div style="display: flex;align-items: center;">
<span
style="font-size: 14px; color: #858598;margin-right: 10px;"
>若客户满足多条规则，会优先按照编号顺序执行规则</span>
<q-btn
color="accent"
style="margin-bottom: 10px;"
class="q-mr-md"
label="新增分配规则 "
@click="Addallocation('/editor/editlaqun')"
size="sm"
></q-btn>
</div>
</div>
<q-dialog v-model="icon">
<q-card style="max-width: 1300px;">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">拉群分配客户流程 <span style="color: #858598;font-size: 14px;">（销售分配更公平，客服拉群更便捷）</span></div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<div style="display: flex;align-items: flex-start;justify-content: space-around;padding: 0 40px">
<div class="text-wrapper" v-for="(x,y) in textList " :key='y'>{{x.Name}}</div>
</div>
<div class="flow-line">
<div class="flow-line-slide1" style="width: 110px;"></div>
<div class="flow-line-center" style="width: 220px;"></div>
<div class="flow-line-center" style="width: 220px;"></div>
<div class="flow-line-center" style="width: 220px;"></div>
<div class="flow-line-center" style="width: 220px;"></div>
<div class="flow-line-slide2" style="width: 110px;">
<div class="right-arrow"></div>
</div>
</div>
<div class="flow-content-wrapper" style="padding: 0 40px">
<div class="flow-content">
<div class="arrow"></div>
<div>
<li class='setting-text'> 选择可拉群的SDR </li>
<li class='setting-text'> 选择适用的客户 </li>
<li class='setting-text'> 选择可分配的销售 </li>
<li class='setting-text'> 顺序分配或随机分配 </li>
</div>
</div>
<div class="flow-content">
<div class="arrow"></div>
<img class="flow-image" src="../../../../assets/images/customer/flow1.a3a1048d.png" alt="">
</div>
<div class="flow-content">
<div class="arrow"></div>
<img class="flow-image" src="../../../../assets/images/customer/flow2.61729a6c.png" alt="">
</div>
<div class="flow-content">
<div class="arrow"></div>
<img class="flow-image" src="../../../../assets/images/customer/flow3.85769e1f.png" alt="">
</div>
<div class="flow-content">
<div class="arrow"></div>
<div class="setting-text">自定义销售身份</div>
<div class="setting-text">负责人 or 协作人</div>
</div>
</div>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
// onMounted
} from 'vue'
// import { useQuasar } from 'quasar'
import router from '@/router/index'
export default defineComponent({
setup() {
const textList = ref < Array < {Name:string} >> ([
{Name:' 设置分配规则 '},
{Name:' SDR（售前客服) 在客户详情点击“更多” '},
{Name:' 点击“拉群分配客户” '},
{Name:' 建群成功，系统自动分配销售 '},
{Name:' 根据设置自动指定负责人 '},
])
const Addallocation = (url: string) => {//新增分配规则
console.log('新增匹配规则')
router.push({
path: url,
query: {
}
})
}
// onMounted(() => {
// })
return {
Addallocation,
icon:ref(false),
textList
}
}
})
</script>
<style lang="scss">
.text-wrapper{
width: 200px;
font-size: 14px;
color: #333;
font-weight: 500;
line-height: 20px;
text-align: center;
margin: 20px 6px 0;
}
.flow-line{
margin-top: 20px;
display: flex;
justify-content: center;
.flow-line-slide1{
height: 30px;
border-top: 1px dashed #3470ff;
border-right: 1px dashed #3470ff;
}
.flow-line-center{
border-top: 1px dashed #3470ff;
border-right: 1px dashed #3470ff;
height: 30px;
}
.flow-line-slide2{
position: relative;
height: 30px;
border-top: 1px dashed #3470ff;
.right-arrow{
position: absolute;
top: -7px;
right: -9px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 9px solid #3470ff;
}
}
}
.flow-content-wrapper{
height: 430px;
display: flex;
justify-content: space-around;
.flow-content{
position: relative;
width: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.arrow{
position: absolute;
top: 0;
margin: 0 auto;
height: 0;
width: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid #3470ff;
}
.setting-text{
color: #333;
border-radius: 20px;
height: 40px;
line-height: 40px;
background: #f9f9f9;
padding: 0 10px;
margin: 10px 0;
text-align: center;
list-style: none outside none;
}
.flow-image{
width: 190px;
height: 400px;
}
}
}
</style>
\ No newline at end of file
src/pages/customerManage/customerSet/customerSetup.vue
View file @ 20c890a6
......@@ -14,6 +14,7 @@
<q-tab name="field" label="客户字段" />
<q-tab name="label" label="标签" />
<q-tab name="clue" label="线索分配规则" />
<q-tab name="laqun" label="拉群分配客人" />
<q-tab name="phase" label="客户阶段" />
<q-tab name="operation" label="客户操作" />
<q-tab name="lib" label="客户库-公海" />
......@@ -22,6 +23,7 @@
<businessModel v-if="tab == 'model'"></businessModel>
<customer-Field v-if="tab == 'field'"></customer-Field>
<clue-rule v-if="tab == 'clue'"></clue-rule>
<laqundistribution v-if="tab == 'laqun'"></laqundistribution>
<customer-phase v-if="tab == 'phase'"></customer-phase>
<customerlabel v-if="tab == 'label'"></customerlabel>
<CustomerOperation v-if="tab == 'operation'"></CustomerOperation>
......@@ -35,7 +37,9 @@
import businessModel from './components/businessModel.vue'
import customerField from './components/customerField.vue'
import clueRule from './components/clueRule.vue'
import laqundistribution from './components/laqundistribution.vue'//拉群分配客人
import customerPhase from './components/customerPhase.vue'
import customerlabel from './components/customerlabel.vue'
import CustomerOperation from "./components/CustomerOperation.vue"
import CustomerLibrary from "./components/CustomerLibrary.vue"
......@@ -56,6 +60,7 @@ export default defineComponent({
customerlabel,
CustomerOperation,
CustomerLibrary,
laqundistribution
},
setup() {
useMeta({title: '客户设置'})
......
src/router/routes.ts
View file @ 20c890a6
......@@ -54,6 +54,12 @@ const routes: RouteRecordRaw[] = [
path: '/editor/editCustomerLib',
component: () => import('@/pages/customerManage/editor/editCustomerLib.vue')
},
// 编辑拉群分配客户
{
path: '/editor/editlaqun',
component: () => import('@/pages/customerManage/editor/editlaqun.vue')
},
{
path: '/auth/login',
component: () => import('@/pages/auth/login.vue')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment