Merge remote-tracking branch 'origin/main' into zxj_dev

src/DTO/follow-records.ts

+import Mock, { Random } from 'mockjs'
+
+enum Type {
+  Video = 'video',
+  Image = 'image'
+}
+
+interface Resource {
+  type: Type,
+  href: string
+}
+
+interface Records {
+  name: string,
+  time: string,
+  content: string,
+  resource?: Array<Resource>
+}
+
+const length = Mock.mock({
+  'number|1-10': 1
+}).number
+
+let records: Array<Records> = []
+
+for (let i = 0; i <= length; i++) {
+  const obj: Records = {
+    name: Mock.mock('@cname'),
+    content: Mock.mock('@cparagraph(1, 4)'),
+    time: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")')
+  }
+  const resource = Mock.mock({
+    'array|1-10': [
+      {
+        'type': 'image',
+        'href': Random.image('300x300', Mock.mock('@color'), '#FFF', 'png', 'image')
+      }
+    ]
+  }).array
+  obj.resource = resource.length > 4 ? resource : []
+  records.push(obj)
+}
+
+// const xxx = Mock.mock({
+//   'array|1-4': [
+//     {
+//       name: Mock.mock('@cname'),
+//       content: Mock.mock('@cparagraph(1, 4)'),
+//       time: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'),
+//       resource: Mock.mock({
+//         'array|1-10': [
+//           {
+//             'type': 'image',
+//             'href': Random.image('200x100', Mock.mock('@color'), '#FFF', 'png', '!')
+//           }
+//         ]
+//       }).array
+//     }
+//   ]
+// }).array
+
+export {
+  Records,
+  Resource,
+  records
+}
+

src/components/common/Icon.vue

@@ -33,7 +33,10 @@ export default Vue.extend({
     },
     path: String,
     iconName: String,
-    className: String,
+    className: {
+      type: String,
+      default: 'w-6.5 h-6.5'
+    }
   },
   computed: {
     getImagePath() {

src/components/common/c-cell.vue

@@ -5,9 +5,9 @@
   > 
     <div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
     <div class="flex py-3 items-center justify-between">
-      <slot name="head" />
-      <div class="flex items-center justify-between flex-1">
-        <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div>
+      <slot name="prefix" />
+      <div class="flex justify-between flex-1" :class="contentAlign">
+        <div class="title flex-shrink-0 mr-4" :class="titleColor">{{ title }}</div>
         <!-- 输入框 -->
         <template v-if="type === 'input'">
           <input
@@ -19,7 +19,10 @@
           >
         </template>
         <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>
       </div>
       <slot name="right" />
@@ -55,6 +58,14 @@ export default Vue.extend({
       type: String,
       default: '请输入...'
     },
+    titleColor: {
+      type: String,
+      default: 'text-text-primary'
+    },
+    contentAlign: {
+      type: String,
+      default: 'items-center'
+    },
     value: String,
     label: String,
     content: String

src/components/common/c-tag.vue

+<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/components/common/input-cell.vue

@@ -12,6 +12,9 @@
     <div class="py-3">
       <div class="flex-1">
         <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <slot name="prefix" />
+          </div>
           <input
             v-if="type !== 'textarea'"
             :type="type"

src/components/common/search-bar.vue

@@ -7,6 +7,7 @@
       />
       <form action=".">
         <input
+          ref="c-search-input"
           type="search"
           class="py-2 rounded-full w-full pl-9"
           :class="clearable ? 'pr-9' : 'pr-4'"
@@ -18,7 +19,7 @@
         <input type="text" style="display:none;"/>
       </form>
       <div
-        v-if="clearable && value.length > 0"
+        v-if="clearable && value && value.length > 0"
         class="clear absolute right-0 top-1/2 transform -translate-y-1/2 px-3.5 py-3.5 flex items-center justify-center"
         @click="clear"
       >
@@ -29,7 +30,7 @@
       </div>
     </div>
     <div class="right flex-shrink-0 ml-4">
-      <slot name='right'>
+      <slot name='action'>
         <div @click="$emit('cancel')">取消</div>
       </slot>
     </div>
@@ -67,13 +68,17 @@ export default Vue.extend({
       showError: false
     }
   },
+  mounted() {
+    (this.$refs['c-search-input'] as HTMLInputElement).focus()
+  },
   methods: {
     handleInput(e: InputEvent) {
       this.$emit('input', (e.target as HTMLInputElement).value)
     },
     clear() {
-      console.log('xxx')
+      (this.$refs['c-search-input'] as HTMLInputElement).focus()
       this.$emit('input', '')
+      
     },
     keyPress(e: KeyboardEvent) {
       if (e.key.toLowerCase() === 'enter') {

src/router/client.ts

@@ -2,6 +2,36 @@ import { RouteConfig } from 'vue-router'
 
 /**
  * 客户管理路由
+ * 客户管理 /client-management
+ * 客户信息 /client-info
+ * 搜索 /client-search
  */
 
-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: '客户信息'
+    }
+  },
+  {
+    path: '/search-client',
+    component: () => import('@/views/client/search.vue')
+  },
+  {
+    path: '/search-result',
+    component: () => import('@/views/client/search-result.vue')
+  }
+]
\ No newline at end of file

src/views/client/client-info.vue

+<template>
+  <!-- 客户信息 -->
+  <main-page
+    header-bg="bg-color-primary"
+    title-color="text-white"
+  >
+    <app-icon
+      slot="left"
+      icon-name="left-arrow-white"
+      class-name="w-6.5 h-6.5"
+      @click="$router.go(-1)"
+    />
+    <div slot="right" 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="show = true"
+      />
+    </div>
+    <van-action-sheet
+      v-model="show"
+      :actions="actions"
+      @select="onSelect"
+    />
+    <!-- 头像名称 -->
+    <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 pb-20">
+        <!-- 跟进 -->
+        <c-cell
+          dot
+          title-color="text-text-secondary"
+          title="跟进"
+          content="2"
+        >
+          <div slot="content" 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>
+        </c-cell>
+        <!-- 标签 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="标签"
+          content-align="items-start"
+        >
+          <div slot="content" 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>
+        </c-cell>
+        <!-- 电话 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="电话"
+          content-align="items-start"
+        >
+          <div slot="content" 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>
+        </c-cell>
+        <!-- 邮箱 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="邮箱"
+          content-align="items-start"
+        >
+          <div slot="content" class="w-full break-all">
+            123456789@disanbo.com12
+          </div>
+        </c-cell>
+        <!-- 地址 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="地址"
+          content-align="items-start"
+        >
+          <div slot="content" class="w-full break-all">
+            单行高度100，这里是输入的客户地址，没有地址不用显示
+          </div>
+        </c-cell>
+        <!-- 定位 -->
+        <c-cell dot>
+          <div slot="prefix" class="px-2">
+            <app-icon
+              icon-name="location"
+              class-name="w-4 h-4.5"
+            />
+          </div>
+          <div slot="content" class="w-full text-text-secondary">
+            显示定位
+          </div>
+        </c-cell>
+        <!-- 公司 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="地址"
+          content-align="items-start"
+        >
+          <div slot="content" class="w-full break-all">
+            杭州复杂美科技有限公司
+          </div>
+        </c-cell>
+        <!-- 职位 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="职位"
+          content-align="items-start"
+        >
+          <div slot="content" class="w-full break-all">
+            市场经理
+          </div>
+        </c-cell>
+        <!-- 备注 -->
+        <c-cell
+          title-color="text-text-secondary"
+          title="备注"
+          content-align="items-start"
+        >
+          <div slot="content" class="w-full break-all">
+            这里是备注备注
+          </div>
+        </c-cell>
+        <!-- 跟进信息 -->
+        <div class="grid grid-cols-1 gap-y-4 mt-6">
+          <template v-for="(record, index) in records">
+            <follow-record
+              :key="index"
+              :record="record"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="fixed bottom-0 left-0 w-full px-4 py-2 bg-common-bg">
+      <c-button round>添加跟进记录</c-button>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import * as Records from '@/DTO/follow-records'
+import { ActionSheet } from 'vant'
+Vue.use(ActionSheet)
+
+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'),
+    'follow-record': () => import('@/views/client/components/follow-record.vue'),
+    'c-button': () => import('@/components/common/c-button.vue')
+  },
+  name: 'ClientManagement',
+  data() {
+    return {
+      records: Records.records,
+      show: false,
+      actions: [
+        { name: '编辑', type: 'edit' },
+        { name: '删除', type: 'delete'},
+        { name: '退回公共资源', type: 'back'},
+      ]
+    }
+  },
+  methods: {
+    onSelect(item: {name: string, type: string}) {
+      this.show = false
+      console.log(item.type, 'item')
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/client/client-management.vue

+<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 pb-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) {
+      if (action === 'search') {
+        this.$router.push('/search-client')
+      }
+    },
+    addClient() {
+      console.log('add client')
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/client/components/client-card.vue

+<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/components/follow-record.vue

+<template>
+  <div class="flex items-start">
+    <app-icon
+      icon-name="avator"
+      class-name="w-8 h-8 flex-shrink-0"
+    />
+    <div class="info ml-1.5">
+      <div class="text-sm text-text-primary-dark">{{ record.name }}</div>
+      <div class="mt-1">{{ record.content }}</div>
+      <div v-if="record.resource.length > 0" class="mt-1.5 flex-1 grid grid-cols-4 gap-1">
+        <template v-if="record.resource.length > 4 && !showAll">
+          <div
+            v-for="(img, index) in preRecords"
+            :key="index"
+            class="rounded overflow-hidden"
+            @click="previewImages"
+          >
+            <img :src="img.href" alt="" class="max-w-full">
+          </div>
+          <div class="border flex items-center justify-center rounded bg-black bg-opacity-30 text-white" @click="showAll = true">
+            +{{ record.resource.length - 3 }}
+          </div>
+        </template>
+        <template v-else>
+          <div
+            v-for="(img, index) in record.resource"
+            :key="index"
+            class="rounded overflow-hidden"
+            @click="previewImages"
+          >
+            <img :src="img.href" alt="" class="max-w-full">
+          </div>
+        </template>
+      </div>
+      <div class="text-xs text-text-secondary mt-1">{{ record.time }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import { ImagePreview } from 'vant'
+import * as Records from '@/DTO/follow-records'
+
+Vue.use(ImagePreview)
+
+export default Vue.extend({
+  name: "FollowRecord",
+  props: {
+    record: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  components: {
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+  },
+  data() {
+    return {
+      showAll: false
+    }
+  },
+  computed: {
+    preRecords(): Array<Records.Records> {
+      if (this.record.resource.length > 4) {
+        return this.record.resource.slice(0, 3)
+      } else {
+        return this.record.resource
+      }
+    },
+    images() {
+      let arr: Array<string> = []
+      if (this.record.resource.length > 0) {
+        this.record.resource.forEach((item: Records.Resource) => {
+          arr.push(item.href)
+        })
+      }
+      return arr
+    }
+  },
+  methods: {
+    previewImages() {
+      ImagePreview({
+        images: this.images,
+        closeable: true
+      })
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/client/components/search-history.vue

+<template>
+  <!-- 搜索历史 -->
+  <div class="history mt-3">
+    <div class="text-sm text-text-secondary">搜索历史</div>
+    <template v-if="history.length > 0">
+      <div class="list mt-1">
+        <div
+          v-for="(item, index) in history"
+          :key="index"
+          class="flex items-center border-b border-border-lighter"
+        >
+          <app-icon
+            icon-name="history"
+            class-name="h-2.5 w-2.5 flex-shrink-0"
+          />
+          <div class="pl-2.5 py-3.5 text-sm flex-1 truncate" @click="search(item)">{{ item }}</div>
+          <div class="h-11 w-11 flex items-center justify-end" @click="deleteHistory(item)">
+            <app-icon
+              icon-name="close-history"
+              class-name="h-5 w-5 flex-shrink-0"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="text-sm py-3.5 mt-1 text-center text-text-secondary" @click="clearHistory">
+        清空历史
+      </div>
+    </template>
+    <template v-else>
+      <div class="text-sm text-text-secondary text-center py-8">暂无搜索历史</div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    'app-icon':()=>import('@/components/common/Icon.vue')
+  },
+  name: 'SearchHistory',
+  props: {
+    history: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    historyCopy() {
+      return this.history
+    }
+  },
+  methods: {
+    deleteHistory(keyword: string) {
+      const index = this.historyCopy.findIndex(item => item === keyword)
+      this.historyCopy.splice(index, 1)
+      this.$emit('update:history', this.historyCopy)
+    },
+    clearHistory() {
+      this.historyCopy = []
+      this.$emit('update:history', this.historyCopy)
+    },
+    search(keyword: string) {
+      this.$emit('search', keyword)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/client/edit-client.vue

+<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>

src/views/client/search-result.vue

+<template>
+  <!-- 搜索结果 -->
+  <main-page
+    left-arrow
+    @click-left="goBack"
+  >
+    <div slot="header" 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>
+    <div class="pt-12 px-4 pb-4">
+      <search-bar
+        v-model="search"
+        placeholder="客户姓名、公司名称"
+        class="sticky top-12"
+        @search="handleSearch"
+      >
+        <div
+          slot="action"
+          class="text-color-primary font-medium"
+          @click="$router.go(-1)"
+        >
+          取消
+        </div>
+      </search-bar>
+      <div class="mt-2">
+        <div class="result">
+          <div class="text-sm text-text-secondary py-1.5">客户姓名</div>
+        </div>
+        <div class="list">
+          <div
+            v-for="(client, index) in result.client"
+            :key="index"
+            class="flex items-center py-2">
+            <app-icon
+              icon-name="avator"
+              class-name="h-9 w-9"
+            />
+            <div class="ml-2.5 flex-1 truncate">{{ client.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    'search-bar':()=>import('@/components/common/search-bar.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'search-history': () => import('@/views/client/components/search-history.vue')
+    // 'client-card': () => import('@/views/client/components/client-card.vue')
+  },
+  name: 'SearchResult',
+  data() {
+    return {
+      tabs: [
+        {
+          label: '我跟进的',
+          key: 'mine'
+        },
+        {
+          label: '公共资源',
+          key: 'public'
+        }
+      ],
+      currentKey: 'public',
+      result: {
+        client: [
+          { name: '客户姓名' },
+          { name: '刘强' },
+          { name: '刘一只鱼' }
+        ],
+        company: [
+          { name: '刘大强信息咨询公司' },
+          { name: '刘阿姨煎饼摊' }
+        ]
+      },
+      search: ''
+    }
+  },
+  mounted() {
+    this.search = this.$route.query.keyword as string
+  },
+  methods: {
+    handleSearch() {
+      console.log(this.search, 'val')
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/client/search.vue

+<template>
+  <!-- 搜索 -->
+  <main-page
+    left-arrow
+    @click-left="goBack"
+  >
+    <div slot="header" 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>
+    <div class="pt-12 px-4 pb-4">
+      <search-bar
+        v-model="search"
+        placeholder="客户姓名、公司名称"
+        class="sticky top-12"
+        @search="handleSearch"
+      >
+        <div
+          slot="action"
+          class="text-color-primary font-medium"
+          @click="$router.go(-1)"
+        >
+          取消
+        </div>
+      </search-bar>
+      <search-history
+        :history.sync="history"
+        @search="searchHistory"
+      />
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Mock from 'mockjs'
+
+const length = Mock.mock({
+  'number|1-10': 2
+}).number
+let history: Array<string> = []
+for (let i=0; i<=length; i++) {
+  history.push(Mock.mock('@ctitle'))
+}
+
+export default Vue.extend({
+  components:{ 
+    'search-bar':()=>import('@/components/common/search-bar.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'search-history': () => import('@/views/client/components/search-history.vue')
+    // 'client-card': () => import('@/views/client/components/client-card.vue')
+  },
+  name: 'Search',
+  data() {
+    return {
+      history,
+      tabs: [
+        {
+          label: '我跟进的',
+          key: 'mine'
+        },
+        {
+          label: '公共资源',
+          key: 'public'
+        }
+      ],
+      currentKey: 'public',
+      search: ''
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log(this.search, 'val')
+      this.$router.push({
+        path: '/search-result',
+        query: {
+          keyword: this.search
+        }
+      })
+    },
+    searchHistory(keyword: string) {
+      this.search = keyword
+      this.$router.push({
+        path: '/search-result',
+        query: {
+          keyword: this.search
+        }
+      })
+    },
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
         'color-primary': '#32B2F7',
         'color-primary-lighter': '#61C7FF',
         'text-primary': '#24374E',
+        'text-primary-dark': '#0D73AD',
         'text-secondary': '#8A97A5',
         'text-light': '#E6E6E6',
         'border-lighter': '#E3EEF4',