crm 页面
This commit is contained in:
浅念
@@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<div class="customer-form-page">
|
||||||
|
<div class="form-header">
|
||||||
|
<el-link :underline="false" @click="goBack">
|
||||||
|
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||||
|
</el-link>
|
||||||
|
<span class="border"></span><span class="form-title">新增客户资料</span>
|
||||||
|
</div>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
class="customer-form"
|
||||||
|
label-position="right"
|
||||||
|
>
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="客户渠道" prop="channel">
|
||||||
|
<el-select v-model="form.channel" placeholder="请选择客户渠道">
|
||||||
|
<el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户商机" prop="opportunity">
|
||||||
|
<el-select v-model="form.opportunity" placeholder="请选择客户商机">
|
||||||
|
<el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入客户名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户商机" prop="gender" >
|
||||||
|
<el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
|
||||||
|
<el-radio label="未知">未知</el-radio>
|
||||||
|
<el-radio label="男">男</el-radio>
|
||||||
|
<el-radio label="女">女</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系方式" prop="contact">
|
||||||
|
<el-input v-model="form.contact" placeholder="请输入联系方式" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Email" prop="email">
|
||||||
|
<el-input v-model="form.email" placeholder="请输入Email" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="WhatsApp" prop="whatsapp">
|
||||||
|
<el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户意向" prop="intention">
|
||||||
|
<el-select v-model="form.intention" placeholder="请选择客户意向">
|
||||||
|
<el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户分级" prop="level">
|
||||||
|
<el-select v-model="form.level" placeholder="请选择客户分级">
|
||||||
|
<el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="国家" prop="country">
|
||||||
|
<el-select v-model="form.country" placeholder="请选择国家">
|
||||||
|
<el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="公司" prop="company">
|
||||||
|
<el-input v-model="form.company" placeholder="请输入公司" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item class="submit-row">
|
||||||
|
<el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const formRef = ref()
|
||||||
|
const form = ref({
|
||||||
|
channel: '',
|
||||||
|
opportunity: '',
|
||||||
|
name: '',
|
||||||
|
gender: '未知',
|
||||||
|
contact: '',
|
||||||
|
email: '',
|
||||||
|
whatsapp: '',
|
||||||
|
intention: '',
|
||||||
|
level: '',
|
||||||
|
country: '',
|
||||||
|
company: '',
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
|
||||||
|
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||||
|
intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const channelOptions = [
|
||||||
|
{ label: '渠道A', value: 'A' },
|
||||||
|
{ label: '渠道B', value: 'B' }
|
||||||
|
]
|
||||||
|
const opportunityOptions = [
|
||||||
|
{ label: '商机A', value: 'A' },
|
||||||
|
{ label: '商机B', value: 'B' }
|
||||||
|
]
|
||||||
|
const intentionOptions = [
|
||||||
|
{ label: '意向A', value: 'A' },
|
||||||
|
{ label: '意向B', value: 'B' }
|
||||||
|
]
|
||||||
|
const levelOptions = [
|
||||||
|
{ label: '高', value: 'high' },
|
||||||
|
{ label: '中', value: 'mid' },
|
||||||
|
{ label: '低', value: 'low' }
|
||||||
|
]
|
||||||
|
const countryOptions = [
|
||||||
|
{ label: '中国', value: 'china' },
|
||||||
|
{ label: '美国', value: 'usa' }
|
||||||
|
]
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitForm() {
|
||||||
|
formRef.value.validate((valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
ElMessage.success('提交成功！')
|
||||||
|
// 这里可以提交表单数据到后端
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.border{
|
||||||
|
|
||||||
|
margin: 0px 10px 0px 40px;
|
||||||
|
}
|
||||||
|
.submit-row .el-form-item__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.icon-reverse {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(270deg); /* 旋转180度 */
|
||||||
|
}
|
||||||
|
.customer-form-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 18px;
|
||||||
|
}
|
||||||
|
.form-header {
|
||||||
|
width: 98%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
justify-content: flex-start; /* 新增，左对齐 */
|
||||||
|
}
|
||||||
|
.form-title{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-form {
|
||||||
|
width: 600px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 24px 16px 24px;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
color: #222;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<div class="customer-form-page">
|
||||||
|
<div class="form-header">
|
||||||
|
<el-link :underline="false" @click="goBack">
|
||||||
|
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||||
|
</el-link>
|
||||||
|
<span class="border"></span><span class="form-title">编辑客户资料</span>
|
||||||
|
</div>
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="100px"
|
||||||
|
class="customer-form"
|
||||||
|
label-position="right"
|
||||||
|
>
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="客户渠道" prop="channel">
|
||||||
|
<el-select v-model="form.channel" placeholder="请选择客户渠道">
|
||||||
|
<el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户商机" prop="opportunity">
|
||||||
|
<el-select v-model="form.opportunity" placeholder="请选择客户商机">
|
||||||
|
<el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入客户名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户商机" prop="gender" >
|
||||||
|
<el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
|
||||||
|
<el-radio label="未知">未知</el-radio>
|
||||||
|
<el-radio label="男">男</el-radio>
|
||||||
|
<el-radio label="女">女</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系方式" prop="contact">
|
||||||
|
<el-input v-model="form.contact" placeholder="请输入联系方式" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Email" prop="email">
|
||||||
|
<el-input v-model="form.email" placeholder="请输入Email" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="WhatsApp" prop="whatsapp">
|
||||||
|
<el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户意向" prop="intention">
|
||||||
|
<el-select v-model="form.intention" placeholder="请选择客户意向">
|
||||||
|
<el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户分级" prop="level">
|
||||||
|
<el-select v-model="form.level" placeholder="请选择客户分级">
|
||||||
|
<el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="国家" prop="country">
|
||||||
|
<el-select v-model="form.country" placeholder="请选择国家">
|
||||||
|
<el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="公司" prop="company">
|
||||||
|
<el-input v-model="form.company" placeholder="请输入公司" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item class="submit-row">
|
||||||
|
<el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const formRef = ref()
|
||||||
|
const form = ref({
|
||||||
|
channel: '',
|
||||||
|
opportunity: '',
|
||||||
|
name: '',
|
||||||
|
gender: '未知',
|
||||||
|
contact: '',
|
||||||
|
email: '',
|
||||||
|
whatsapp: '',
|
||||||
|
intention: '',
|
||||||
|
level: '',
|
||||||
|
country: '',
|
||||||
|
company: '',
|
||||||
|
remark: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
|
||||||
|
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
|
||||||
|
intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const channelOptions = [
|
||||||
|
{ label: '渠道A', value: 'A' },
|
||||||
|
{ label: '渠道B', value: 'B' }
|
||||||
|
]
|
||||||
|
const opportunityOptions = [
|
||||||
|
{ label: '商机A', value: 'A' },
|
||||||
|
{ label: '商机B', value: 'B' }
|
||||||
|
]
|
||||||
|
const intentionOptions = [
|
||||||
|
{ label: '意向A', value: 'A' },
|
||||||
|
{ label: '意向B', value: 'B' }
|
||||||
|
]
|
||||||
|
const levelOptions = [
|
||||||
|
{ label: '高', value: 'high' },
|
||||||
|
{ label: '中', value: 'mid' },
|
||||||
|
{ label: '低', value: 'low' }
|
||||||
|
]
|
||||||
|
const countryOptions = [
|
||||||
|
{ label: '中国', value: 'china' },
|
||||||
|
{ label: '美国', value: 'usa' }
|
||||||
|
]
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitForm() {
|
||||||
|
formRef.value.validate((valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
ElMessage.success('提交成功！')
|
||||||
|
// 这里可以提交表单数据到后端
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.border{
|
||||||
|
|
||||||
|
margin: 0px 10px 0px 40px;
|
||||||
|
}
|
||||||
|
.submit-row .el-form-item__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.icon-reverse {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(270deg); /* 旋转180度 */
|
||||||
|
}
|
||||||
|
.customer-form-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 18px;
|
||||||
|
}
|
||||||
|
.form-header {
|
||||||
|
width: 98%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 18px;
|
||||||
|
justify-content: flex-start; /* 新增，左对齐 */
|
||||||
|
}
|
||||||
|
.form-title{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-form {
|
||||||
|
width: 600px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 10px 24px 16px 24px;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.el-form-item__label {
|
||||||
|
color: #222;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,381 @@
|
|||||||
|
<template>
|
||||||
|
<div class="follow-add-page">
|
||||||
|
<div class="boxshadow pad20">
|
||||||
|
<el-link :underline="false" @click="goBack">
|
||||||
|
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||||
|
</el-link>
|
||||||
|
<span class="border"></span><span class="edit-title" style="margin-left: 12px;">添加跟进</span>
|
||||||
|
</div>
|
||||||
|
<div class="edit-header boxshadow" style="position:relative;">
|
||||||
|
<!-- 右上角三角形角标 -->
|
||||||
|
<div class="corner-tag"><span class="corner-text">跟进中</span></div>
|
||||||
|
<el-row :gutter="20" style="flex: 1;">
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户名称：{{ customerName }}</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>渠道：阿里</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="5">
|
||||||
|
<span>联系方式：16532014121</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户偏好：小轿车</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户商机：金牌商机</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="edit-title">客户分级</span>
|
||||||
|
<el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
|
||||||
|
<el-option label="A" value="A" />
|
||||||
|
<el-option label="B" value="B" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="edit-title">跟进方式</span>
|
||||||
|
<el-radio-group v-model="followType">
|
||||||
|
<el-radio label="1">在线跟进</el-radio>
|
||||||
|
<el-radio label="0">拜访</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="edit-title">跟进时间</span>
|
||||||
|
<el-date-picker v-model="followTime" type="datetime" style="width: 200px;" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card v-if="followType=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-top">
|
||||||
|
<span class="edit-title">上传跟进截图/聊天截图</span>
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
action="#"
|
||||||
|
:show-file-list="false"
|
||||||
|
>
|
||||||
|
<img :src="imageUrl" class="avatar" />
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card v-if="followType=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-top">
|
||||||
|
<span class="edit-title">跟进描述</span>
|
||||||
|
<el-input v-model="followDesc" type="textarea" placeholder="请输入跟进描述" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card v-if="followType=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-top">
|
||||||
|
<span class="edit-title">当前位置拍照上传</span>
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
action="#"
|
||||||
|
:show-file-list="false"
|
||||||
|
>
|
||||||
|
<img :src="imageUrl" class="avatar" />
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card v-if="followType=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-top">
|
||||||
|
<span class="edit-title">拜访内容</span>
|
||||||
|
<el-input v-model="followDesc" type="textarea" placeholder="请输入拜访内容" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-top">
|
||||||
|
<span class="edit-title">备注</span>
|
||||||
|
<el-input v-model="remark" type="textarea" placeholder="请输入备注" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div>
|
||||||
|
<span class="border" style="margin: 0px 10px 0px 0px;"></span><span class="edit-title">跟进记录</span>
|
||||||
|
</div>
|
||||||
|
<div class="follow-list">
|
||||||
|
<ElScrollbar >
|
||||||
|
<template v-if="followList.length > 0">
|
||||||
|
<ElTimeline>
|
||||||
|
<ElTimelineItem
|
||||||
|
v-for="item in followList"
|
||||||
|
:key="item.time"
|
||||||
|
:placement="TIMELINE_PLACEMENT"
|
||||||
|
:color="activecolor"
|
||||||
|
:center="true"
|
||||||
|
>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-content-row">
|
||||||
|
<div class="timeline-content">
|
||||||
|
<p class="timeline-text">在线跟进 <span class="timeline-mom">{{ item.time }}</span></p>
|
||||||
|
<p class="timeline-mom">跟进描述 {{ item.content }}</p>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ElTimelineItem>
|
||||||
|
</ElTimeline>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<!-- 使用 Element Plus 的空状态组件 -->
|
||||||
|
<el-empty :image="emptyimg" description="暂无跟进记录" />
|
||||||
|
<!-- <el-empty /> -->
|
||||||
|
<!-- 或者自定义图片 -->
|
||||||
|
<!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
|
||||||
|
</template>
|
||||||
|
</ElScrollbar>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-button type="primary" class="submit-btn" @click="handleSubmit">提交</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 提交成功弹出层 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="successDialogVisible"
|
||||||
|
width="400px"
|
||||||
|
align-center
|
||||||
|
:show-close="true"
|
||||||
|
class="success-dialog"
|
||||||
|
>
|
||||||
|
<div class="success-dialog-content">
|
||||||
|
<img src="@/assets/img/crm/succes.png" alt="成功" class="success-img" />
|
||||||
|
<div class="conts">
|
||||||
|
<div class="success-title">提交成功</div>
|
||||||
|
<div class="remind-title">下次跟进提醒设置</div>
|
||||||
|
<div class="remind-options">
|
||||||
|
<div
|
||||||
|
v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')"
|
||||||
|
:key="item.value"
|
||||||
|
:class="['remind-btn', { active: remindValue === item.value }]"
|
||||||
|
@click="remindValue = item.value"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="customDate"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="自定义"
|
||||||
|
style="width:100%;"
|
||||||
|
CircleClose
|
||||||
|
:disabled-date="disabledPastDate"
|
||||||
|
/>
|
||||||
|
<el-button type="primary" class="confirm-btn" @click="handleSuccessConfirm">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import emptyimg from '@/assets/img/crm/empty.png'
|
||||||
|
import imageUrl from '@/assets/img/crm/upimg.png'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
|
||||||
|
const TIMELINE_PLACEMENT = 'top'
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const customerName = route.query.name || '王先生'
|
||||||
|
const customerLevel = ref('需求沟通')
|
||||||
|
const followType = ref('1')
|
||||||
|
const followTime = ref(new Date())
|
||||||
|
const followDesc = ref('')
|
||||||
|
const remark = ref('')
|
||||||
|
const activecolor = "#3471FF"
|
||||||
|
const followList: any[] = []
|
||||||
|
const successDialogVisible = ref(true) // 控制弹窗显示
|
||||||
|
const remindValue = ref('1')
|
||||||
|
const customDate = ref('')
|
||||||
|
|
||||||
|
const remindOptions = [
|
||||||
|
{ label: '1天后', value: '1' },
|
||||||
|
{ label: '3天后', value: '3' },
|
||||||
|
{ label: '7天后', value: '7' }
|
||||||
|
]
|
||||||
|
|
||||||
|
function disabledPastDate(time: Date) {
|
||||||
|
return time.getTime() < Date.now() - 86400000
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(val: any) {
|
||||||
|
if (!val) return ''
|
||||||
|
const d = new Date(val)
|
||||||
|
const pad = (n: number) => n < 10 ? '0' + n : n
|
||||||
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSuccessConfirm() {
|
||||||
|
if (remindValue.value === 'custom') {
|
||||||
|
if (!customDate.value) {
|
||||||
|
return ElMessage.warning('请选择自定义日期时间')
|
||||||
|
}
|
||||||
|
// 处理自定义日期时间
|
||||||
|
console.log('自定义日期时间:', customDate.value)
|
||||||
|
} else {
|
||||||
|
// 处理固定天数
|
||||||
|
console.log('天数:', remindValue.value)
|
||||||
|
}
|
||||||
|
successDialogVisible.value = false
|
||||||
|
}
|
||||||
|
function goBack() {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
function handleSubmit() {
|
||||||
|
// 提交逻辑
|
||||||
|
alert('提交成功')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.border{
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between; /* 两端对齐 */
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.edit-header{
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
.follow-add-page {
|
||||||
|
background: #f7f9fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.boxshadow {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
|
||||||
|
}
|
||||||
|
.pad20 {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.edit-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.info-card {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
display: block;
|
||||||
|
width: 240px;
|
||||||
|
margin: 32px auto 0 auto;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.corner-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.corner-tag::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -9px;
|
||||||
|
right: -9px;
|
||||||
|
width: 90px;
|
||||||
|
height: 75px;
|
||||||
|
background: #3471FF;
|
||||||
|
clip-path: polygon(100% 0, 0 0, 100% 100%);
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
}
|
||||||
|
.corner-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
width: 55px;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 3;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-right: 0px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.corner-text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.info-top span{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
/* 成功弹出层 */
|
||||||
|
.success-dialog-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 0 0 0;
|
||||||
|
}
|
||||||
|
.success-img {
|
||||||
|
width:55%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.conts{
|
||||||
|
margin-top: -55px;
|
||||||
|
}
|
||||||
|
.success-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.remind-title {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.remind-options {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.remind-btn {
|
||||||
|
background: #f4f7fe;
|
||||||
|
color: #3471FF;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 15px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all 0.2s;
|
||||||
|
min-width: 64px;
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.remind-btn.active {
|
||||||
|
background: #3471FF;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #3471FF;
|
||||||
|
}
|
||||||
|
.confirm-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 18px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,924 @@
|
|||||||
|
<template>
|
||||||
|
<div class="customer-edit-page">
|
||||||
|
<div class="boxshadow pad20">
|
||||||
|
<el-link :underline="false" @click="goBack">
|
||||||
|
<i class="iconfont-sys icon-reverse"></i> 返回
|
||||||
|
</el-link>
|
||||||
|
</div>
|
||||||
|
<div class="edit-header boxshadow pad20" style="position:relative;">
|
||||||
|
<span class="border"></span><span class="edit-title">客户资料</span>
|
||||||
|
<!-- 右上角三角形角标 -->
|
||||||
|
<div class="corner-tag"><span class="corner-text">跟进中</span></div>
|
||||||
|
<div class="info-row-bar">
|
||||||
|
<el-row :gutter="20" style="flex: 1;">
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户名称：{{ customerName }}</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>渠道：阿里</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="5">
|
||||||
|
<span>联系方式：16532014121</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户偏好：小轿车</span>
|
||||||
|
</el-col>
|
||||||
|
<el-col :sm="24" :md="6" :lg="4">
|
||||||
|
<span>客户商机：金牌商机</span>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> </i> 编辑资料</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="">
|
||||||
|
<span class="border"></span><span class="edit-title">客户画像</span>
|
||||||
|
<el-button @click="tagDialogVisible = true" type="primary" size="small" style="float: right;">添加标签</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="tag-list">
|
||||||
|
<el-tag type="primary">潜在高价值</el-tag>
|
||||||
|
<el-tag type="primary">新客户</el-tag>
|
||||||
|
<el-tag type="primary">Tag 1</el-tag>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="edit-title">客户分级</span>
|
||||||
|
<el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
|
||||||
|
<el-option label="A" value="A" />
|
||||||
|
<el-option label="B" value="B" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-card class="info-card" shadow="never" style="margin-top: 16px;">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="edit-title">跟进记录</span>
|
||||||
|
<el-button type="primary" size="small" style="float: right;">+ 添加跟进</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="follow-list">
|
||||||
|
<ElScrollbar >
|
||||||
|
<template v-if="followList.length > 0">
|
||||||
|
<ElTimeline>
|
||||||
|
<ElTimelineItem
|
||||||
|
v-for="item in followList"
|
||||||
|
:key="item.time"
|
||||||
|
:placement="TIMELINE_PLACEMENT"
|
||||||
|
:color="activecolor"
|
||||||
|
:center="true"
|
||||||
|
>
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-content-row">
|
||||||
|
<div class="timeline-content">
|
||||||
|
<p class="timeline-text">在线跟进 <span class="timeline-mom">{{ item.time }}</span></p>
|
||||||
|
<p class="timeline-mom">跟进描述 {{ item.content }}</p>
|
||||||
|
</div>
|
||||||
|
<img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ElTimelineItem>
|
||||||
|
</ElTimeline>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<!-- 使用 Element Plus 的空状态组件 -->
|
||||||
|
<el-empty :image="emptyimg" description="暂无跟进记录" />
|
||||||
|
<!-- <el-empty /> -->
|
||||||
|
<!-- 或者自定义图片 -->
|
||||||
|
<!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
|
||||||
|
</template>
|
||||||
|
</ElScrollbar>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
v-model="tagDialogVisible"
|
||||||
|
title="添加标签"
|
||||||
|
width="420px"
|
||||||
|
align-center
|
||||||
|
:show-close="false"
|
||||||
|
>
|
||||||
|
<div class="tag-dialog-scroll">
|
||||||
|
<div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px;">
|
||||||
|
<div style="font-weight: bold; margin-bottom: 6px;">{{ group.name }}</div>
|
||||||
|
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||||
|
<div
|
||||||
|
class="col4 tagitem"
|
||||||
|
style="cursor: pointer;"
|
||||||
|
v-for="(item1, index1) in group.tags"
|
||||||
|
:class="{ 'tagactive': isActive(item1.group_id, item1.id) }"
|
||||||
|
@click="tagSelect(item1)"
|
||||||
|
:key="index1"
|
||||||
|
>
|
||||||
|
{{ item1.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer-center">
|
||||||
|
<el-button @click="handleCancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,reactive } from 'vue'
|
||||||
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import emptyimg from '@/assets/img/crm/empty.png'
|
||||||
|
// 常量配置
|
||||||
|
const TIMELINE_PLACEMENT = 'top'
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
const customerLevel = ref('A')
|
||||||
|
const activecolor = "#3471FF"
|
||||||
|
const followList: any[] = []
|
||||||
|
// const followList = ref([
|
||||||
|
// {
|
||||||
|
// type: '在线跟进',
|
||||||
|
// time: '2025-07-01 09:20:10',
|
||||||
|
// content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
|
||||||
|
// img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: '拜访',
|
||||||
|
// time: '2025-07-01 09:20:10',
|
||||||
|
// content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
|
||||||
|
// img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
|
||||||
|
// }
|
||||||
|
// ])
|
||||||
|
const tagDialogVisible = ref(false)
|
||||||
|
const selectedTags = ref<string[]>([])
|
||||||
|
|
||||||
|
// 标签分组数据
|
||||||
|
const tagGroups = [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "价值标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "价值标签",
|
||||||
|
"en": "Value tags",
|
||||||
|
"ru": "Значок стоимости"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"group_id": 1,
|
||||||
|
"name": "高价值",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "高价值",
|
||||||
|
"en": "High value",
|
||||||
|
"ru": "Высокая ценность"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"group_id": 1,
|
||||||
|
"name": "中价值",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "中价值",
|
||||||
|
"en": "Medium value",
|
||||||
|
"ru": "Средняя стоимость"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"group_id": 1,
|
||||||
|
"name": "低价值",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "低价值",
|
||||||
|
"en": "Low value",
|
||||||
|
"ru": "Низкая стоимость"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"group_id": 1,
|
||||||
|
"name": "潜在高价值",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "潜在高价值",
|
||||||
|
"en": "Potential high",
|
||||||
|
"ru": "Потенциально высокая стоимость"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "生命周期标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "生命周期标签",
|
||||||
|
"en": "Lifecycle tags",
|
||||||
|
"ru": "Метки жизненного цикла"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"group_id": 2,
|
||||||
|
"name": "新客户",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "新客户",
|
||||||
|
"en": "New",
|
||||||
|
"ru": "Новые клиенты"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"group_id": 2,
|
||||||
|
"name": "活跃",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "活跃",
|
||||||
|
"en": "Active",
|
||||||
|
"ru": "Активный"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"group_id": 2,
|
||||||
|
"name": "沉默",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "沉默",
|
||||||
|
"en": "Silent",
|
||||||
|
"ru": "Молчание"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"group_id": 2,
|
||||||
|
"name": "流失",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "流失",
|
||||||
|
"en": "Loss",
|
||||||
|
"ru": "Утечка"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "行为标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "行为标签",
|
||||||
|
"en": "Behavior tags",
|
||||||
|
"ru": "Поведение"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"group_id": 3,
|
||||||
|
"name": "高频购买",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "高频购买",
|
||||||
|
"en": "Buy more",
|
||||||
|
"ru": "ВЧ - покупка"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"group_id": 3,
|
||||||
|
"name": "大单",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "大单",
|
||||||
|
"en": "Big order",
|
||||||
|
"ru": "Большой список"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 11,
|
||||||
|
"group_id": 3,
|
||||||
|
"name": "促销敏感",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "促销敏感",
|
||||||
|
"en": "Promotion",
|
||||||
|
"ru": "Рекламная чувствительность"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 12,
|
||||||
|
"group_id": 3,
|
||||||
|
"name": "忠诚",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "忠诚",
|
||||||
|
"en": "Loyalty",
|
||||||
|
"ru": "Верность"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "需求标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "需求标签",
|
||||||
|
"en": "Requirement tags",
|
||||||
|
"ru": "Требования"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 13,
|
||||||
|
"group_id": 4,
|
||||||
|
"name": "价格敏感",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "价格敏感",
|
||||||
|
"en": "Price Sensitive",
|
||||||
|
"ru": "Чувствительность цен"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 14,
|
||||||
|
"group_id": 4,
|
||||||
|
"name": "品质追求",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "品质追求",
|
||||||
|
"en": "Quality pursuit",
|
||||||
|
"ru": "Стремление к качеству"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 15,
|
||||||
|
"group_id": 4,
|
||||||
|
"name": "服务",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "服务",
|
||||||
|
"en": "Service",
|
||||||
|
"ru": "Услуги"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 16,
|
||||||
|
"group_id": 4,
|
||||||
|
"name": "定制化",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "定制化",
|
||||||
|
"en": "Customize",
|
||||||
|
"ru": "Индивидуализация"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "来源标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "来源标签",
|
||||||
|
"en": "Source tags",
|
||||||
|
"ru": "Метка источника"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 17,
|
||||||
|
"group_id": 5,
|
||||||
|
"name": "线上",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "线上",
|
||||||
|
"en": "On-line",
|
||||||
|
"ru": "Линия"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18,
|
||||||
|
"group_id": 5,
|
||||||
|
"name": "线下",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "线下",
|
||||||
|
"en": "Offline",
|
||||||
|
"ru": "Под линией"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 19,
|
||||||
|
"group_id": 5,
|
||||||
|
"name": "推荐",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "推荐",
|
||||||
|
"en": "Recommend",
|
||||||
|
"ru": "Рекомендации"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 20,
|
||||||
|
"group_id": 5,
|
||||||
|
"name": "合作伙伴",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "合作伙伴",
|
||||||
|
"en": "Partnership",
|
||||||
|
"ru": "Партнеры"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"name": "风险标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "风险标签",
|
||||||
|
"en": "Risk tags",
|
||||||
|
"ru": "Маркировка рисков"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 21,
|
||||||
|
"group_id": 6,
|
||||||
|
"name": "高风险",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "高风险",
|
||||||
|
"en": "High risk",
|
||||||
|
"ru": "Высокий риск"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 22,
|
||||||
|
"group_id": 6,
|
||||||
|
"name": "中风险",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "中风险",
|
||||||
|
"en": "Medium risk",
|
||||||
|
"ru": "Риск"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 23,
|
||||||
|
"group_id": 6,
|
||||||
|
"name": "低风险",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "低风险",
|
||||||
|
"en": "Low risk",
|
||||||
|
"ru": "Низкий риск"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"name": "满意度标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "满意度标签",
|
||||||
|
"en": "Satisfaction tags",
|
||||||
|
"ru": "Метка Удовлетворенность"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 24,
|
||||||
|
"group_id": 7,
|
||||||
|
"name": "非常满意",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "非常满意",
|
||||||
|
"en": "Very satisfied",
|
||||||
|
"ru": "Очень доволен."
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 25,
|
||||||
|
"group_id": 7,
|
||||||
|
"name": "满意",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "满意",
|
||||||
|
"en": "Satisfied",
|
||||||
|
"ru": "Удовлетворительно"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 26,
|
||||||
|
"group_id": 7,
|
||||||
|
"name": "不满意",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "不满意",
|
||||||
|
"en": "Unsatisfied",
|
||||||
|
"ru": "Неудовлетворительно."
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"name": "忠诚度标签",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "忠诚度标签",
|
||||||
|
"en": "Loyalty tags",
|
||||||
|
"ru": "Маркировка лояльности"
|
||||||
|
},
|
||||||
|
"type": "radio",
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:13:46.000000Z",
|
||||||
|
"deleted_at": null,
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": 27,
|
||||||
|
"group_id": 8,
|
||||||
|
"name": "忠实客户",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "忠实客户",
|
||||||
|
"en": "Loyal",
|
||||||
|
"ru": "Верный клиент"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:19:03.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 28,
|
||||||
|
"group_id": 8,
|
||||||
|
"name": "稳定客户",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "稳定客户",
|
||||||
|
"en": "Stable",
|
||||||
|
"ru": "Стабилизация клиентов"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:19:03.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 29,
|
||||||
|
"group_id": 8,
|
||||||
|
"name": "游离客户",
|
||||||
|
"names": {
|
||||||
|
"zh_CN": "游离客户",
|
||||||
|
"en": "Floating",
|
||||||
|
"ru": "Свободные клиенты"
|
||||||
|
},
|
||||||
|
"created_at": "2025-03-27T01:49:11.000000Z",
|
||||||
|
"updated_at": "2025-03-31T08:19:03.000000Z",
|
||||||
|
"deleted_at": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
// 1. 定义类型
|
||||||
|
type ActiveMapType = { [key: string]: number }
|
||||||
|
|
||||||
|
// 2. 响应式选中映射
|
||||||
|
const activeMap = reactive({} as ActiveMapType)
|
||||||
|
|
||||||
|
// 3. 判断标签是否选中
|
||||||
|
function isActive(groupId: string | number, tagId: number) {
|
||||||
|
return activeMap[String(groupId)] === tagId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 点击标签
|
||||||
|
function tagSelect(item: { group_id: string | number; id: number }) {
|
||||||
|
const key = String(item.group_id)
|
||||||
|
if (activeMap[key] === item.id) {
|
||||||
|
delete activeMap[key] // 取消选中
|
||||||
|
} else {
|
||||||
|
activeMap[key] = item.id // 选中
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 5. 获取所有已选中的标签
|
||||||
|
function getSelectedTags() {
|
||||||
|
const selected: any[] = []
|
||||||
|
for (const group of tagGroups) {
|
||||||
|
const key = String(group.id)
|
||||||
|
const tagId = activeMap[key]
|
||||||
|
if (tagId) {
|
||||||
|
const tag = group.tags.find(t => t.id === tagId)
|
||||||
|
if (tag) selected.push(tag)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return selected
|
||||||
|
}
|
||||||
|
|
||||||
|
// 6. 示例：确定按钮
|
||||||
|
function handleConfirm() {
|
||||||
|
const selectedTags = getSelectedTags()
|
||||||
|
console.log('选中的标签：', selectedTags)
|
||||||
|
// 处理选中的标签
|
||||||
|
tagDialogVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
tagDialogVisible.value = false
|
||||||
|
}
|
||||||
|
const customerName = route.query.name || '王先生'
|
||||||
|
function goEdit() {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/customer/edit',
|
||||||
|
query: { name: customerName }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function goBack() {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tag-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px; /* 标签间距 */
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.border{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.pad20{
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.icon-reverse {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(270deg); /* 旋转180度 */
|
||||||
|
}
|
||||||
|
.customer-edit-page {
|
||||||
|
background: #f7f9fa;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.edit-header {
|
||||||
|
/* display: flex; */
|
||||||
|
/* align-items: center; */
|
||||||
|
/* gap: 12px; */
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.edit-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.edit-status {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.edit-btn {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.info-card {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between; /* 两端对齐 */
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.follow-list {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.follow-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #f7f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.follow-main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.follow-title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #222;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
.follow-type {
|
||||||
|
color: #3471FF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.follow-time {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.follow-content {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.follow-img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.info-row-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 16px 0px;
|
||||||
|
}
|
||||||
|
.corner-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.corner-tag::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: -10px;
|
||||||
|
width: 90px;
|
||||||
|
height: 80px;
|
||||||
|
background: #3471FF;
|
||||||
|
clip-path: polygon(100% 0, 0 0, 100% 100%);
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
}
|
||||||
|
.corner-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
width: 55px;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 3;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-right: 0px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.corner-text {
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.timeline-content-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.timeline-text{
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.timeline-mom{
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.timeline-img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagitem{
|
||||||
|
background: #DCE7FF;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #3471FF;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 13px;
|
||||||
|
}
|
||||||
|
.col4{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 4px 3px;
|
||||||
|
}
|
||||||
|
.tagactive{
|
||||||
|
background: #3471FF !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.tag-dialog-scroll {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.tag-dialog-scroll {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 8px;
|
||||||
|
/* 让内容不被滚动条遮挡 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 优化滚动条样式（Webkit内核浏览器） */
|
||||||
|
.tag-dialog-scroll::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.tag-dialog-scroll::-webkit-scrollbar-thumb {
|
||||||
|
background: #d4e0f7;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.tag-dialog-scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #b3c8e6;
|
||||||
|
}
|
||||||
|
.tag-dialog-scroll::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox 滚动条优化 */
|
||||||
|
.tag-dialog-scroll {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #d4e0f7 transparent;
|
||||||
|
}
|
||||||
|
.dialog-footer-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,270 @@
|
|||||||
|
<template>
|
||||||
|
<div class="customer-page">
|
||||||
|
<!-- 顶部操作栏 -->
|
||||||
|
<div class="customer-toolbar boxshadow">
|
||||||
|
<el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
|
||||||
|
<div class="customer-search-group">
|
||||||
|
<el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
|
||||||
|
<el-select v-model="searchValue">
|
||||||
|
<el-option
|
||||||
|
v-for="v in selectOptions"
|
||||||
|
:key="v.value"
|
||||||
|
:label="v.label"
|
||||||
|
:value="v.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 筛选标签 -->
|
||||||
|
<div class="customer-tags boxshadow">
|
||||||
|
<div class="filter-row">
|
||||||
|
<span class="filter-label">价值标签：</span>
|
||||||
|
<div class="filter-tags">
|
||||||
|
<span v-for="item in valueTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-row">
|
||||||
|
<span class="filter-label">生命周期标签：</span>
|
||||||
|
<div class="filter-tags">
|
||||||
|
<span v-for="item in lifeTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filter-row">
|
||||||
|
<span class="filter-label">行为标签：</span>
|
||||||
|
<div class="filter-tags">
|
||||||
|
<span v-for="item in actionTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition name="fade">
|
||||||
|
<div v-if="showMore" class="filter-row">
|
||||||
|
<span class="filter-label">更多标签：</span>
|
||||||
|
<div class="filter-tags">
|
||||||
|
<span v-for="item in moreTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<div class="filter-more-btn">
|
||||||
|
<el-link :underline="false" @click="showMore = !showMore">
|
||||||
|
{{ showMore ? '收起' : '更多' }}
|
||||||
|
<i v-if="showMore" class="iconfont-sys"> </i>
|
||||||
|
<i v-else class="iconfont-sys"></i>
|
||||||
|
</el-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxshadow">
|
||||||
|
<!-- Tab切换 -->
|
||||||
|
<el-tabs v-model="activeTab" class="customer-tabs">
|
||||||
|
<el-tab-pane label="全部" name="all"></el-tab-pane>
|
||||||
|
<el-tab-pane label="跟进中" name="following"></el-tab-pane>
|
||||||
|
<el-tab-pane label="已成交" name="dealed"></el-tab-pane>
|
||||||
|
<el-tab-pane label="已丢失" name="lost"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<ArtTable :data="tableData" class="customer-table">
|
||||||
|
<template #default>
|
||||||
|
<el-table-column prop="name" label="客户名称" align="center" />
|
||||||
|
<el-table-column prop="mobile" label="客户手机号" align="center" />
|
||||||
|
<el-table-column prop="channel" label="渠道" align="center" />
|
||||||
|
<el-table-column prop="phone" label="电话" align="center" />
|
||||||
|
<el-table-column prop="demand" label="需求" align="center" />
|
||||||
|
<el-table-column prop="status" label="状态" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<span :class="statusClass(scope.row.status)">
|
||||||
|
{{ scope.row.statusText }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="200px" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-link type="primary" :underline="false" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> </i>查看</el-link>
|
||||||
|
<el-link type="primary" :underline="false" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> </i> 添加跟进</el-link>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</ArtTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { Plus } from '@element-plus/icons-vue'
|
||||||
|
// import ArtSearchInput from '@/components/ArtSearchInput'
|
||||||
|
// import ArtSearchSelect from '@/components/ArtSearchSelect'
|
||||||
|
// import ArtTable from '@/components/ArtTable'
|
||||||
|
|
||||||
|
const searchValue = ref('')
|
||||||
|
const filterType = ref('all')
|
||||||
|
const activeTab = ref('all')
|
||||||
|
const showMore = ref(false)
|
||||||
|
|
||||||
|
const selectOptions = [
|
||||||
|
{ label: '全部', value: 'all' },
|
||||||
|
{ label: '高价值', value: 'high' },
|
||||||
|
{ label: '中价值', value: 'mid' },
|
||||||
|
{ label: '低价值', value: 'low' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const valueTags = [
|
||||||
|
{ label: '高价值', count: 10 },
|
||||||
|
{ label: '中价值', count: 10 },
|
||||||
|
{ label: '低价值', count: 10 },
|
||||||
|
{ label: '潜在高价值', count: 10 }
|
||||||
|
]
|
||||||
|
const lifeTags = [
|
||||||
|
{ label: '新客户', count: 10 },
|
||||||
|
{ label: '活跃', count: 10 },
|
||||||
|
{ label: '深度', count: 10 },
|
||||||
|
{ label: '流失', count: 10 }
|
||||||
|
]
|
||||||
|
const actionTags = [
|
||||||
|
{ label: '高频购买', count: 10 },
|
||||||
|
{ label: '大单', count: 10 },
|
||||||
|
{ label: '促销敏感', count: 10 }
|
||||||
|
]
|
||||||
|
const moreTags = [
|
||||||
|
{ label: '标签A', count: 5 },
|
||||||
|
{ label: '标签B', count: 3 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const tableData = [
|
||||||
|
{ name: '王先生', mobile: '登录手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'following', statusText: '跟进中' },
|
||||||
|
{ name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'dealed', statusText: '已成交' },
|
||||||
|
{ name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'lost', statusText: '已丢失' },
|
||||||
|
{ name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
|
||||||
|
{ name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
|
||||||
|
{ name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' }
|
||||||
|
]
|
||||||
|
|
||||||
|
function statusClass(status: string) {
|
||||||
|
if (status === 'following') return 'status-following'
|
||||||
|
if (status === 'dealed') return 'status-dealed'
|
||||||
|
if (status === 'lost') return 'status-lost'
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
function goAdd() {
|
||||||
|
router.push('/crmpc/customer/add')
|
||||||
|
}
|
||||||
|
function goEdit(row: any) {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/customer/show',
|
||||||
|
query: { name: row.name }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function goAddFollow(row: any) {
|
||||||
|
router.push({
|
||||||
|
path: '/crmpc/customer/followadd',
|
||||||
|
query: { name: row.customerName } // 可带客户名等参数
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.el-table__header th) {
|
||||||
|
background: #f7f9fa !important;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr.custom-table-row td) {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr td:last-child) {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr:last-child td) {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__header-wrapper th) {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__header-wrapper th:last-child) {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table) {
|
||||||
|
border: 1px solid #F7F9FA !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
.customer-page {
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.customer-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 20px 10px;
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
}
|
||||||
|
.customer-search-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.customer-tags {
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.filter-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.filter-label {
|
||||||
|
width: 120px;
|
||||||
|
color: #666;
|
||||||
|
margin-right: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.filter-tags {
|
||||||
|
flex: 1;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
span{
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.customer-tabs {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.status-following {
|
||||||
|
color: #00A43F;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.status-dealed {
|
||||||
|
color: #3471FF;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.status-lost {
|
||||||
|
color: #FF0000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.customer-table {
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.filter-more-btn {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
.fade-enter-active, .fade-leave-active {
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.fade-enter-from, .fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,282 @@
|
|||||||
|
<template>
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="heard">
|
||||||
|
<div class="heard-title">跟进提醒</div>
|
||||||
|
<el-select
|
||||||
|
v-model="remindRange"
|
||||||
|
placeholder="请选择"
|
||||||
|
class="heard-select"
|
||||||
|
style="min-width: 120px"
|
||||||
|
>
|
||||||
|
<el-option label="全部" value="all" />
|
||||||
|
<el-option label="近三天" value="3days" />
|
||||||
|
<el-option label="近七天" value="7days" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<ArtTable
|
||||||
|
ref="tableRef"
|
||||||
|
row-key="id"
|
||||||
|
:loading="loading"
|
||||||
|
:data="tableData"
|
||||||
|
:currentPage="pagination.currentPage"
|
||||||
|
:pageSize="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:marginTop="10"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
>
|
||||||
|
<template #default>
|
||||||
|
<el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
|
||||||
|
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
|
||||||
|
<el-table-column prop="addr" label="地址" min-width="140"></el-table-column>
|
||||||
|
<el-table-column label="状态" min-width="140">
|
||||||
|
<template #default="scope">
|
||||||
|
<span :class="getCountdownClass(scope.row.nextFollow)">
|
||||||
|
|
||||||
|
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||||
|
{{ getCountdown(scope.row.nextFollow) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="160px">
|
||||||
|
<template #default="scope">
|
||||||
|
<div class="follow-detli" @click="onDetail(scope.row)">
|
||||||
|
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||||
|
详情
|
||||||
|
</div>
|
||||||
|
<div class="follow-action" @click="onFollow(scope.row)">
|
||||||
|
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||||
|
领单
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</ArtTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="detailDialogVisible" title="详情" width="400px">
|
||||||
|
<div v-if="detailRow">
|
||||||
|
<p>客户名称1：{{ detailRow.name }}</p>
|
||||||
|
<p>电话：{{ detailRow.phone }}</p>
|
||||||
|
<p>地址：{{ detailRow.addr }}</p>
|
||||||
|
<p>下次跟进时间：{{ detailRow.nextFollow }}</p>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
const loading = ref(false)
|
||||||
|
const pagination = reactive({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
const remindRange = ref('all')
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
phone: '13800000000',
|
||||||
|
addr: '迪拜',
|
||||||
|
nextFollow: '2025-07-15 18:00:00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
phone: '13900000000',
|
||||||
|
addr: '迪拜',
|
||||||
|
nextFollow: '2025-07-16 09:30:00',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
// 选中的行数据
|
||||||
|
const selectedRows = ref<any[]>([])
|
||||||
|
// 处理表格行选择变化
|
||||||
|
const handleSelectionChange = (selection: any[]) => {
|
||||||
|
selectedRows.value = selection
|
||||||
|
}
|
||||||
|
// 处理表格分页变化
|
||||||
|
const handleSizeChange = (newPageSize: number) => {
|
||||||
|
pagination.pageSize = newPageSize
|
||||||
|
// getUserList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCurrentChange = (newCurrentPage: number) => {
|
||||||
|
pagination.currentPage = newCurrentPage
|
||||||
|
// getUserList()
|
||||||
|
}
|
||||||
|
const timer = ref(0)
|
||||||
|
const refreshKey = ref(0)
|
||||||
|
const detailDialogVisible = ref(false)
|
||||||
|
const detailRow = ref<any>(null)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
timer.value = window.setInterval(() => {
|
||||||
|
refreshKey.value++
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function getCountdown(targetDate: string) {
|
||||||
|
// 让 refreshKey 成为依赖，确保每秒刷新
|
||||||
|
refreshKey.value
|
||||||
|
const now = dayjs()
|
||||||
|
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
if (!target.isValid()) return '时间格式错误'
|
||||||
|
const diff = target.diff(now)
|
||||||
|
if (diff <= 0) return '已超时'
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||||
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
||||||
|
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
||||||
|
const seconds = Math.floor((diff / 1000) % 60)
|
||||||
|
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCountdownClass(targetDate: string) {
|
||||||
|
const now = dayjs()
|
||||||
|
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
if (!target.isValid() || target.diff(now) <= 0) {
|
||||||
|
return 'countdown-danger'
|
||||||
|
}
|
||||||
|
return 'countdown-success'
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFollow(row: any) {
|
||||||
|
ElMessageBox.confirm(
|
||||||
|
'确定要领取此客户吗？',
|
||||||
|
'提示',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}
|
||||||
|
).then(() => {
|
||||||
|
// 用户点击了确定，这里写领取逻辑
|
||||||
|
console.log('领取客户', row)
|
||||||
|
// 你可以在这里调用接口或做后续处理
|
||||||
|
}).catch(() => {
|
||||||
|
// 用户点击了取消
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDetail(row: any) {
|
||||||
|
detailRow.value = row
|
||||||
|
detailDialogVisible.value = true
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.boxshadow {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
|
||||||
|
background:var(--el-card-bg-color);
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.heard-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
border-left: 4px solid #3471FF;
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heard-date-picker {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
.heard-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
.card-list {
|
||||||
|
.art-custom-card {
|
||||||
|
.iconfont-sys {
|
||||||
|
background-color: #232323 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
:deep(.el-table__header th) {
|
||||||
|
background: #f7f9fa !important;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr.custom-table-row td) {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr td:last-child) {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__body tr:last-child td) {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__header-wrapper th) {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table__header-wrapper th:last-child) {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table) {
|
||||||
|
border: 1px solid #F7F9FA !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
:deep(.el-table th),
|
||||||
|
:deep(.el-table td) {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.countdown-danger {
|
||||||
|
color: #FF0000 !important;
|
||||||
|
}
|
||||||
|
.countdown-success {
|
||||||
|
color: #00A43F !important;
|
||||||
|
}
|
||||||
|
.follow-detli{
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #00A43F;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
&:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.follow-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #409EFF;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
&:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div class="console">
|
||||||
|
<CardList></CardList>
|
||||||
|
|
||||||
|
<!-- <AboutProject /> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CardList from './widget/CardList.vue'
|
||||||
|
import { useCommon } from '@/composables/useCommon'
|
||||||
|
|
||||||
|
defineOptions({ name: 'Console' })
|
||||||
|
|
||||||
|
useCommon().scrollToTop()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@use './style';
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
@use '@styles/variables.scss' as *;
|
||||||
|
|
||||||
|
.console {
|
||||||
|
--card-spacing: 20px;
|
||||||
|
|
||||||
|
// 卡片头部
|
||||||
|
:deep(.card-header) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 25px 5px 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--art-gray-900) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 3px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--art-gray-600) !important;
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置卡片背景色、圆角、间隙
|
||||||
|
:deep(.card-list .card),
|
||||||
|
.card {
|
||||||
|
margin-bottom: var(--card-spacing);
|
||||||
|
background: var(--art-main-bg-color);
|
||||||
|
border-radius: calc(var(--custom-radius) + 4px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $device-phone) {
|
||||||
|
--card-spacing: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,376 @@
|
|||||||
|
<template>
|
||||||
|
<div class="homeheard">
|
||||||
|
您已陪伴领客 CRM <span class="daynum"><span class="day">153</span>天</span>
|
||||||
|
</div>
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="heard">
|
||||||
|
<div class="heard-title">数据简报</div>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="selectedDate"
|
||||||
|
type="month"
|
||||||
|
format="YYYY-MM"
|
||||||
|
value-format="YYYY-MM"
|
||||||
|
placeholder="选择年月"
|
||||||
|
class="heard-date-picker"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<el-row :gutter="20" class="card-list">
|
||||||
|
<el-col v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="4" >
|
||||||
|
<div class="card art-custom-card" :style="{ backgroundImage: `url(${item.avatar})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
||||||
|
<CountTo
|
||||||
|
class="number box-title"
|
||||||
|
:endVal="item.num"
|
||||||
|
:duration="1000"
|
||||||
|
separator=""
|
||||||
|
></CountTo>
|
||||||
|
<div class="change-box">
|
||||||
|
<span class="change-text">{{item.des}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<div class="boxshadow">
|
||||||
|
<div class="heard">
|
||||||
|
<div class="heard-title">跟进提醒</div>
|
||||||
|
<el-select
|
||||||
|
v-model="remindRange"
|
||||||
|
placeholder="请选择"
|
||||||
|
class="heard-select"
|
||||||
|
style="min-width: 120px"
|
||||||
|
>
|
||||||
|
<el-option label="全部" value="all" />
|
||||||
|
<el-option label="近三天" value="3days" />
|
||||||
|
<el-option label="近七天" value="7days" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="table">
|
||||||
|
<el-table :data="tableData" style="width: 100%" header-cell-class-name="custom-table-header" row-class-name="custom-table-row">
|
||||||
|
<el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
|
||||||
|
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
|
||||||
|
<el-table-column prop="nextFollow" label="下次跟进时间" min-width="140"></el-table-column>
|
||||||
|
<el-table-column label="状态" min-width="140">
|
||||||
|
<template #default="scope">
|
||||||
|
<span :class="getCountdownClass(scope.row.nextFollow)">
|
||||||
|
|
||||||
|
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||||
|
{{ getCountdown(scope.row.nextFollow) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" min-width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<div class="follow-action" @click="onFollow(scope.row)">
|
||||||
|
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys"></i></span>
|
||||||
|
跟进
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
import { useSettingStore } from '@/store/modules/setting'
|
||||||
|
import { CountTo } from 'vue3-count-to'
|
||||||
|
import adduser from '@/assets/img/crm/adduser.png'
|
||||||
|
import addbf from '@/assets/img/crm/addbf.png'
|
||||||
|
import addgj from '@/assets/img/crm/addgj.png'
|
||||||
|
import deal from '@/assets/img/crm/deal.png'
|
||||||
|
import gjing from '@/assets/img/crm/gjing.png'
|
||||||
|
import loss from '@/assets/img/crm/loss.png'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { Clock } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const selectedDate = ref('')
|
||||||
|
const remindRange = ref('all')
|
||||||
|
|
||||||
|
const dataList = reactive([
|
||||||
|
{
|
||||||
|
des: '新增客户',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 0,
|
||||||
|
avatar: adduser
|
||||||
|
},
|
||||||
|
{
|
||||||
|
des: '新增拜访',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 182,
|
||||||
|
avatar: addbf
|
||||||
|
},
|
||||||
|
{
|
||||||
|
des: '新增跟进',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 9520,
|
||||||
|
avatar: addgj
|
||||||
|
},
|
||||||
|
{
|
||||||
|
des: '跟进中',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 156,
|
||||||
|
avatar: gjing
|
||||||
|
},
|
||||||
|
{
|
||||||
|
des: '已成交',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 156,
|
||||||
|
avatar: deal
|
||||||
|
},
|
||||||
|
{
|
||||||
|
des: '已丢失',
|
||||||
|
startVal: 0,
|
||||||
|
duration: 1000,
|
||||||
|
num: 156,
|
||||||
|
avatar: loss
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const tableData = ref([
|
||||||
|
{
|
||||||
|
name: '张三',
|
||||||
|
phone: '13800000000',
|
||||||
|
nextFollow: '2025-07-15 18:00:00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '李四',
|
||||||
|
phone: '13900000000',
|
||||||
|
nextFollow: '2025-07-16 09:30:00',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const timer = ref(0)
|
||||||
|
const refreshKey = ref(0)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
timer.value = window.setInterval(() => {
|
||||||
|
refreshKey.value++
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearInterval(timer.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function getCountdown(targetDate: string) {
|
||||||
|
// 让 refreshKey 成为依赖，确保每秒刷新
|
||||||
|
refreshKey.value
|
||||||
|
const now = dayjs()
|
||||||
|
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
if (!target.isValid()) return '时间格式错误'
|
||||||
|
const diff = target.diff(now)
|
||||||
|
if (diff <= 0) return '已超时'
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||||
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
||||||
|
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
||||||
|
const seconds = Math.floor((diff / 1000) % 60)
|
||||||
|
return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCountdownClass(targetDate: string) {
|
||||||
|
const now = dayjs()
|
||||||
|
const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
|
||||||
|
if (!target.isValid() || target.diff(now) <= 0) {
|
||||||
|
return 'countdown-danger'
|
||||||
|
}
|
||||||
|
return 'countdown-success'
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFollow(row: any) {
|
||||||
|
// 这里可以自定义点击后的逻辑
|
||||||
|
console.log('跟进', row)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.homeheard{
|
||||||
|
background:
|
||||||
|
url('@/assets/img/crm/hometop.png') no-repeat center/cover,
|
||||||
|
linear-gradient(90deg, #EDF2FF 0%, #CBE5FC 72.55%);
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* 垂直居中 */
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
}
|
||||||
|
.daynum{
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #3471FF;
|
||||||
|
}
|
||||||
|
.day{
|
||||||
|
font-size: 70px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.card-list {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
background-color: var(--el-card-bg-color) !important;
|
||||||
|
|
||||||
|
.art-custom-card {
|
||||||
|
border: none !important;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
align-items: end;
|
||||||
|
padding: 0 18px;
|
||||||
|
list-style: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
$icon-size: 52px;
|
||||||
|
|
||||||
|
.iconfont-sys {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 0;
|
||||||
|
width: $icon-size;
|
||||||
|
height: $icon-size;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: $icon-size;
|
||||||
|
color: var(--el-color-primary) !important;
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--el-color-primary-light-9);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.des {
|
||||||
|
display: block;
|
||||||
|
height: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.change-text {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
// color: var(--art-text-gray-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change {
|
||||||
|
display: block;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&.text-success {
|
||||||
|
color: var(--el-color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-danger {
|
||||||
|
color: var(--el-color-danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heard {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.heard-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
border-left: 4px solid #3471FF;
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heard-date-picker {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
.heard-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
.card-list {
|
||||||
|
.art-custom-card {
|
||||||
|
.iconfont-sys {
|
||||||
|
background-color: #232323 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
::v-deep .custom-table-header {
|
||||||
|
background: #F7F9FA !important;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
::v-deep .el-table__body tr.custom-table-row td {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-table__body tr td:last-child {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-table__body tr:last-child td {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-table__header-wrapper th {
|
||||||
|
border-bottom: 1px solid #F7F9FA !important;
|
||||||
|
border-right: 1px solid #F7F9FA !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-table__header-wrapper th:last-child {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-table {
|
||||||
|
border: 1px solid #F7F9FA !important;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.countdown-danger {
|
||||||
|
color: #FF0000 !important;
|
||||||
|
}
|
||||||
|
.countdown-success {
|
||||||
|
color: #00A43F !important;
|
||||||
|
}
|
||||||
|
.follow-action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #409EFF;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
&:hover {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recycle-page">
|
||||||
|
<el-card class="recycle-card">
|
||||||
|
<div class="recycle-title">
|
||||||
|
<span class="title-dot"></span>回收站
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" style="width: 100%">
|
||||||
|
<el-table-column prop="name" label="姓名" />
|
||||||
|
<el-table-column prop="phone" label="联系方式" />
|
||||||
|
<el-table-column label="操作" align="right" width="120">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button type="primary" size="small">恢复客户</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const tableData = ref([
|
||||||
|
{ name: '刘先生', phone: '15632012141' },
|
||||||
|
{ name: '刘先生', phone: '15632012141' },
|
||||||
|
{ name: '刘先生', phone: '15632012141' },
|
||||||
|
{ name: '刘先生', phone: '15632012141' },
|
||||||
|
{ name: '刘先生', phone: '15632012141' },
|
||||||
|
{ name: '刘先生', phone: '15632012141' }
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.recycle-page {
|
||||||
|
background: #fafbfc;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.recycle-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.recycle-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.title-dot {
|
||||||
|
display: inline-block;
|
||||||
|
width: 6px;
|
||||||
|
height: 16px;
|
||||||
|
background: #3471FF;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.el-table .hide-header th {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user