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

src/DTO/index.ts

@@ -16,6 +16,7 @@
 // })
 
 import { contacts, Person, flatContacts } from './contacts'
+import { list, info, details } from './request'
 
 interface Member {
   parentId?: number,
@@ -98,5 +99,8 @@ export {
   contacts,
   flatContacts,
   Person,
-  Member
+  Member,
+  list, 
+  info, 
+  details
 }
\ No newline at end of file

src/DTO/request.ts

+interface info{
+  path:string
+  name:string,
+  request:string,
+  reason?:string,
+  current:string,
+}
+
+interface list{
+  id:number,
+  time:string,
+  children:Array<info>
+}
+
+const details:Array<list>=[
+  {
+    id:0,
+    time:'2021/6',
+    children:[
+        {
+          path:'../../assets/icons/avator.png',
+          name:'真实姓名',
+          request:'对方通过扫一扫申请',
+          current: 'pending'
+        },
+        {
+          path:'../../assets/icons/avator.png',
+          name:'真实姓名',
+          request:'对方通过扫一扫申请',
+          current: 'confirm'
+        },
+        {
+          path:'../../assets/icons/avator.png',
+          name:'真实姓名',
+          request:'对方通过搜索申请',
+          reason:'这里是申请理由，有几行就显示几行，最多是五十字，差不多最多显示三行',
+          current: 'pending'
+        },                     
+      ]
+  },
+  {
+    id:1,
+    time:'2021/5',
+    children:[
+        {
+          path:'../../assets/icons/avator.png',
+          name:'真实姓名',
+          request:'对方申请退出团队',
+          current: 'pending'
+        }   
+      ]
+    }
+]
+
+export {
+  info,
+  list,
+  details
+}
\ No newline at end of file

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,12 +12,9 @@
     <div class="py-3">
       <div class="flex-1">       
         <div class="flex items-center">
-          <app-icon
-            v-if="add"
-            type="png"
-            :path="require('@/assets/icons/y-add.png')"
-            class-name="h-6 w-6 mr-3.5"
-          />
+          <div class="flex-shrink-0">
+            <slot name="prefix" />
+          </div>
           <input
             v-if="type !== 'textarea'"
             :type="type"
@@ -57,7 +54,7 @@ import Vue from 'vue'
 
 export default Vue.extend({
   components:{ 
-     'app-icon':()=>import('@/components/common/Icon.vue')
+    'app-icon':()=>import('@/components/common/Icon.vue')
     // 'main-page': () => import('@/layout/main-page.vue')
   },
   props: {

src/router/client.ts

@@ -2,23 +2,42 @@ import { RouteConfig } from 'vue-router'
 
 /**
  * 客户管理路由
+ * 客户管理 /client-management
  */
 
 export const clientRoutes: Array<RouteConfig> = [
-    {
-        path: '/add-client',
-        name: 'Add-client',
-        component: () => import('@/views/client/add-client.vue'),
-        meta: {
-          title: '添加客户'
-        }
-      },
-      {
-        path: '/select-tag',
-        name: 'Select-tag',
-        component: () => import('@/views/client/select-tag.vue'),
-        meta: {
-          title: '选择标签'
-        }
-      },
+  {
+    path: '/add-client',
+    name: 'Add-client',
+    component: () => import('@/views/client/add-client.vue'),
+    meta: {
+      title: '添加客户'
+    }
+  },
+  {
+    path: '/select-tag',
+    name: 'Select-tag',
+    component: () => import('@/views/client/select-tag.vue'),
+    meta: {
+      title: '选择标签'
+    }
+  },
+  {
+    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

+<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>
+        <input-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'),
+    'input-cell': () => import('@/components/common/input-cell.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

+<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) {
+      console.log(action)
+    },
+    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/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/components/request.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { info } from '@/views/team/request-managemant.vue'
+import { info } from '@/DTO'
 
 export default Vue.extend({
   name:'request',

src/views/team/request-managemant.vue

@@ -6,6 +6,7 @@
           type="png"
           class-name="w-6.5 h-6.5"
           :path="require('@/assets/icons/add-friend-group.png')"
+          @click="$router.push('/file')"
         />
       </template>
       <div class="left-border w-0.5 bg-border-lighter h-full left-8 absolute"/>
@@ -15,8 +16,8 @@
         <!-- 申请详情 -->
         <div :details="list" v-for="(item,index) in list" :key="index">
           <p class=" text-right text-xs text-text-secondary pr-4 pb-2 ">{{item.time}}</p>
-          <div v-for="(detail,i) in item.children.info" :key="i">
-            <request :detail="detail" class=" pb-4" v-on:change="changeState($event,index,i)" />
+          <div v-for="(detail,i) in item.children" :key="i">
+            <request :detail="detail" class=" pb-4" @change="changeState($event,index,i)" />
           </div>
         </div>
       </div>
@@ -26,23 +27,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
-export interface list{
-    id:number,
-    time:string,
-    children:{
-      info:Array<info>
-    }
-}
-
-export interface info{
-    path:string
-    name:string,
-    request:string,
-    reason?:string,
-    current:string,
-}
-
+import { list, info, details } from '@/DTO'
 
 export default Vue.extend({
   name:'requestmanagement',
@@ -56,8 +41,8 @@ export default Vue.extend({
       console.log('click left')
     },
     changeState(state:string,index:number,i:number){
-      this.list[index].children.info[i].current = state
-      console.log(state,index,i);   
+      this.list[index].children[i].current = state   
+      // console.log(state,index,i);   
     }
   },
   props:{
@@ -69,50 +54,7 @@ export default Vue.extend({
     }
   },
   data(){
-    let list :Array<list> = [
-      {
-        id:0,
-        time:'2021/6',
-        children:{
-          info:[
-            {
-              path:'../../assets/icons/avator.png',
-              name:'真实姓名',
-              request:'对方通过扫一扫申请',
-              current: 'pending'
-            },
-            {
-              path:'../../assets/icons/avator.png',
-              name:'真实姓名',
-              request:'对方通过扫一扫申请',
-              current: 'confirm'
-            },
-            {
-              path:'../../assets/icons/avator.png',
-              name:'真实姓名',
-              request:'对方通过搜索申请',
-              reason:'这里是申请理由，有几行就显示几行，最多是五十字，差不多最多显示三行',
-              current: 'pending'
-            },                     
-          ]
-        }
-      },
-      {
-        id:1,
-        time:'2021/5',
-        children:{
-          info:[
-            {
-              path:'../../assets/icons/avator.png',
-              name:'真实姓名',
-              request:'对方申请退出团队',
-              current: 'pending'
-            }   
-          ]
-        }
-      }
-    ]
-
+    let list :Array<list> = details
     return{
       list
     }

src/views/team/select-team.vue

@@ -80,7 +80,7 @@
               </div>
             </div>
             <div
-              v-if="checked === t.id && t.children && t.children.length > 0"
+              v-if="t.children && t.children.length > 0"
               class="flex-shrink-0 flex items-center text-color-primary py-3"
               @click="goNext(t)"
             >
@@ -152,6 +152,7 @@ export default Vue.extend({
   methods: {
     // 下一级
     goNext(team: Member) {
+      if (team.id !== this.checked) return
       this.currentTeamId = team.id
       this.setChecked()
     },

src/views/team/team-management.vue

 <template>
   <!-- 团队管理 -->
   <main-page left-arrow>
+    <!-- 右侧二维码图标 -->
+    <template slot="right">
+      <div class="h-6.5 w-6.5 flex items-center justify-end">
+        <app-icon
+          icon-name="code"
+          class-name="w-4 h-4"
+        />
+      </div>
+    </template>
     <div class="px-4 pt-14">
       <!-- 头部 -->
       <div class="flex items-start pt-1 pb-5">

tailwind.config.js

@@ -22,7 +22,16 @@ module.exports = {
         'linear-t': '#6A8FBB',
         '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: {