Skip to content

O
OKR
Commit d4bffc3d authored by sixiaofeng's avatar sixiaofeng
Browse files
Options

客户管理/客户信息页面开发

parent f004aef0
Hide whitespace changes
Inline Side-by-side
Showing with 468 additions and 6 deletions
src/components/common/c-cell.vue
View file @ d4bffc3d
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div> <div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
<div class="flex py-3 items-center justify-between"> <div class="flex py-3 items-center justify-between">
<slot name="head" /> <slot name="head" />
<div class="flex items-center justify-between flex-1"> <div class="flex justify-between flex-1" :class="contentAlign">
<div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div> <div class="title flex-shrink-0 mr-4" :class="titleColor">{{ title }}</div>
<!-- 输入框 --> <!-- 输入框 -->
<template v-if="type === 'input'"> <template v-if="type === 'input'">
<input <input
...@@ -19,7 +19,10 @@ ...@@ -19,7 +19,10 @@
> >
</template> </template>
<template v-else> <template v-else>
<div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div> <!-- cell 中间content插槽 -->
<slot name="content" />
<!-- cell内容 -->
<div v-if="checkIfEmpty(content)" class="flex-1 flex-shrink-0 text-text-secondary text-sm text-right">{{ content }}</div>
</template> </template>
</div> </div>
<slot name="right" /> <slot name="right" />
...@@ -55,6 +58,14 @@ export default Vue.extend({ ...@@ -55,6 +58,14 @@ export default Vue.extend({
type: String, type: String,
default: '请输入...' default: '请输入...'
}, },
titleColor: {
type: String,
default: 'text-text-primary'
},
contentAlign: {
type: String,
default: 'items-center'
},
value: String, value: String,
label: String, label: String,
content: String content: String
......
src/components/common/c-tag.vue 0 → 100644
View file @ d4bffc3d
<template>
<div class="text-xs px-1 py-0.5 rounded" :class="getTagClass">
{{ label }}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'CTag',
props: {
bgColor: {
type: String,
default: 'bg-tag-blue-lighter'
},
textColor: {
type: String,
default: 'text-color-primary'
},
label: {
type: String,
default: '标签'
}
},
computed: {
getTagClass() {
return `${this.bgColor} ${this.textColor}`
}
},
methods: {
}
});
</script>
src/router/client.ts
View file @ d4bffc3d
...@@ -2,6 +2,26 @@ import { RouteConfig } from 'vue-router' ...@@ -2,6 +2,26 @@ import { RouteConfig } from 'vue-router'
/** /**
* 客户管理路由 * 客户管理路由
* 客户管理 /client-management
*/ */
export const clientRoutes: Array<RouteConfig> = [] export const clientRoutes: Array<RouteConfig> = [
\ No newline at end of file {
path: '/client-management',
component: () => import('@/views/client/client-management.vue')
},
{
path: '/client-info',
component: () => import('@/views/client/client-info.vue'),
meta: {
title: '客户信息'
}
},
{
path: '/edit-client',
component: () => import('@/views/client/edit-client.vue'),
meta: {
title: '客户信息'
}
}
]
\ No newline at end of file
src/views/client/client-info.vue 0 → 100644
View file @ d4bffc3d
<template>
<!-- 客户信息 -->
<main-page
header-bg="bg-color-primary"
title-color="text-white"
>
<template slot="left">
<app-icon
icon-name="left-arrow-white"
class-name="w-6.5 h-6.5"
@click="$router.go(-1)"
/>
</template>
<template slot="right">
<div class="h-6.5 w-6.5 flex items-center justify-end">
<app-icon
icon-name="dot-white"
class-name="w-1 h-5"
@click="$router.go(-1)"
/>
</div>
</template>
<div class="content">
<div class="pt-14 header bg-color-primary px-4 pb-16">
<div class="info flex">
<app-icon
icon-name="avator"
class-name="h-12 w-12 flex-shrink-0"
/>
<div class="text-white ml-4">
<div class="title">客户姓名什么什么什么什么什么什么什什么什</div>
<div class="text-sm mt-1">最后跟进时间：03-19 12:23</div>
<div class="text-sm mt-1">添加人：真实姓名</div>
</div>
</div>
</div>
<div class="px-4 -mt-11">
<!-- 跟进 -->
<c-cell
dot
title-color="text-text-secondary"
title="跟进"
content="2"
>
<template slot="content">
<div class="w-full flex items-center mr-4 overflow-hidden">
<app-icon
icon-name="avator"
class-name="h-6 w-6 mr-1"
/>
<app-icon
icon-name="avator"
class-name="h-6 w-6"
/>
</div>
</template>
</c-cell>
<!-- 标签 -->
<c-cell
title-color="text-text-secondary"
title="标签"
content-align="items-start"
>
<template slot="content">
<div class="w-full flex flex-wrap items-center">
<c-tag class="mr-1.5 mb-1.5" label="客户" />
<c-tag
class="mr-1.5 mb-1.5"
label="重要"
bg-color="bg-tag-orange-lighter"
text-color="text-tag-orange"
/>
<c-tag
class="mr-1.5 mb-1.5"
label="洽谈"
bg-color="bg-tag-green-lighter"
text-color="text-tag-green"
/>
<c-tag
class="mr-1.5 mb-1.5"
label="洽谈"
bg-color="bg-tag-green-lighter"
text-color="text-tag-green"
/>
<c-tag
label="这里是标签最多十个字"
bg-color="bg-tag-green-lighter"
text-color="text-tag-green"
/>
</div>
</template>
</c-cell>
<!-- 电话 -->
<c-cell
title-color="text-text-secondary"
title="电话"
content-align="items-start"
>
<template slot="content">
<div class="w-full flex">
<div class="flex-1">13112345678</div>
<div class="flex-shrink-0 grid grid-cols-2 gap-2.5">
<app-icon
icon-name="message"
class-name="w-5 h-5"
/>
<app-icon
icon-name="phone"
class-name="w-5 h-5"
/>
</div>
</div>
</template>
</c-cell>
<!-- 邮箱 -->
<c-cell
title-color="text-text-secondary"
title="邮箱"
content-align="items-start"
>
<template slot="content">
<div class="w-full break-all">
123456789@disanbo.com12
</div>
</template>
</c-cell>
</div>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'c-cell': () => import('@/components/common/c-cell.vue'),
'c-tag': () => import('@/components/common/c-tag.vue')
// 'client-card': () => import('@/views/client/components/client-card.vue')
},
name: 'ClientManagement',
data() {
return {}
}
})
</script>
<style lang="less">
</style>
src/views/client/client-management.vue 0 → 100644
View file @ d4bffc3d
<template>
<!-- 客户管理 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<template slot="header">
<div class="text-text-secondary flex items-center">
<div
class="py-1.5 px-4"
:class="currentKey === tab.key ? 'rounded-full bg-color-primary text-white' : ''"
v-for="tab in tabs"
:key="tab.key"
@click="currentKey = tab.key"
>
{{ tab.label }}
</div>
</div>
</template>
<template slot="right">
<div class="">
<app-icon
icon-name="plus-black"
class-name="h-6.5 w-6.5"
@click="addClient"
/>
</div>
</template>
<div class="pt-12 px-4">
<div class="grid grid-cols-2 text-text-secondary font-medium text-sm bg-common-bg sticky top-12">
<div class="flex items-center justify-center py-3" @click="clickTab('search')">
<app-icon
icon-name="search-blue"
class-name="w-6.5 h-6.5"
/>
<div class="ml-1.5">搜索</div>
</div>
<div class="flex items-center justify-center py-3" @click="clickTab('filter')">
<app-icon
icon-name="tag"
class-name="w-5 h-5"
/>
<div class="ml-2.5">筛选</div>
</div>
</div>
<client-card class="mt-2" @click="$router.push('client-info')" />
<client-card class="mt-4" />
<client-card class="mt-4" />
<client-card class="mt-4" />
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'client-card': () => import('@/views/client/components/client-card.vue')
},
name: 'ClientManagement',
data() {
return {
tabs: [
{
label: '我跟进的',
key: 'mine'
},
{
label: '公共资源',
key: 'public'
}
],
currentKey: 'public'
}
},
methods: {
clickTab(action: string) {
console.log(action)
},
addClient() {
console.log('add client')
}
}
})
</script>
<style lang="less">
</style>
src/views/client/components/client-card.vue 0 → 100644
View file @ d4bffc3d
<template>
<!-- 客户信息 -->
<div class="card bg-white rounded p-4" @click="$emit('click')">
<!-- 客户信息 -->
<div class="flex items-start">
<app-icon
icon-name="avator"
class-name="h-10 w-10 flex-shrink-0"
/>
<div class="ml-2.5 overflow-hidden">
<div class="truncate">客户名称客户名称客户名称客户名称客户名称客户名称</div>
<div class="text-text-secondary text-xs">最后跟进时间：03-19 12:23</div>
</div>
</div>
<!-- 跟进 -->
<div class="flex pt-3.5 pb-2.5">
<div class="text-text-secondary text-sm mr-5">跟进</div>
<div class="">
<div class="flex items-center">
<app-icon
icon-name="avator"
class-name="h-5 w-5"
/>
<div class="text-sm ml-1.5">姓名</div>
</div>
</div>
</div>
<!-- 标签 -->
<div class="tags flex">
<c-tag class="mr-1.5" label="客户" />
<c-tag
class="mr-1.5"
label="重要"
bg-color="bg-tag-orange-lighter"
text-color="text-tag-orange"
/>
<c-tag
label="洽谈"
bg-color="bg-tag-green-lighter"
text-color="text-tag-green"
/>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'ClientCard',
components: {
'app-icon': () => import('@/components/common/Icon.vue'),
'c-tag': () => import('@/components/common/c-tag.vue')
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
}
},
methods: {
}
})
</script>
<style lang="less">
</style>
src/views/client/edit-client.vue 0 → 100644
View file @ d4bffc3d
<template>
<!-- 编辑客户 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<div class="pt-12 px-4">
<div class="grid grid-cols-2 text-text-secondary font-medium text-sm bg-common-bg sticky top-12">
<div class="flex items-center justify-center py-3" @click="clickTab('search')">
<app-icon
icon-name="search-blue"
class-name="w-6.5 h-6.5"
/>
<div class="ml-1.5">搜索</div>
</div>
<div class="flex items-center justify-center py-3" @click="clickTab('filter')">
<app-icon
icon-name="tag"
class-name="w-5 h-5"
/>
<div class="ml-2.5">筛选</div>
</div>
</div>
<client-card class="mt-2" />
<client-card class="mt-4" />
<client-card class="mt-4" />
<client-card class="mt-4" />
</div>
</main-page>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue'),
'main-page': () => import('@/layout/main-page.vue'),
'c-tag': () => import('@/components/common/c-tag.vue'),
'client-card': () => import('@/views/client/components/client-card.vue')
},
name: 'ClientManagement',
data() {
return {
tabs: [
{
label: '我跟进的',
key: 'mine'
},
{
label: '公共资源',
key: 'public'
}
],
currentKey: 'public'
}
},
methods: {
clickTab(action: string) {
console.log(action)
},
addClient() {
console.log('add client')
}
}
})
</script>
<style lang="less">
</style>
tailwind.config.js
View file @ d4bffc3d
...@@ -22,7 +22,16 @@ module.exports = { ...@@ -22,7 +22,16 @@ module.exports = {
'linear-t': '#6A8FBB', 'linear-t': '#6A8FBB',
'linear-b': '#066BA2', 'linear-b': '#066BA2',
// 按钮 // 按钮
'button-disabled': '#C8D3DE' 'button-disabled': '#C8D3DE',
// 标签
'tag-blue-lighter': '#EAF6FF',
'tag-orange': '#FD8800',
'tag-orange-lighter': '#FAF2D8',
'tag-green': '#4CD15F',
'tag-green-lighter': '#E5F7F0',
'tag-yellow': '#F3B200',
'tag-red': '#EB8282',
'tag-purple': '#9F82E5',
}, },
spacing: { spacing: {
......
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