编辑成员/跟进成员管理

src/components/common/c-cell.vue

@@ -7,7 +7,7 @@
     <div class="flex py-3 items-center justify-between">
       <slot name="prefix" />
       <div class="flex justify-between flex-1" :class="contentAlign">
-        <div class="title flex-shrink-0 mr-4" :class="titleColor">{{ title }}</div>
+        <div v-if="checkIfEmpty(title)" class="title flex-shrink-0 mr-4" :class="titleColor">{{ title }}</div>
         <!-- 输入框 -->
         <template v-if="type === 'input'">
           <input

src/components/common/group-cell.vue

 <template>
   <div class="mb-px rounded"> 
     <div class="px-4 bg-white mb-px text-sm text-text-secondary py-2 h-9 flex items-center" @click="clickItem">
-      <div class="title">{{ title }}</div>
+      <div class="title flex items-center">
+        <slot name="prefix" />
+        <div class="">{{ title }}</div>
+      </div>
       <app-icon
         v-if="dot"
         type="png"

src/components/common/input-cell.vue

@@ -2,12 +2,18 @@
   <div
     class="mb-px bg-white px-4 rounded"
   > 
-    <div v-if="checkIfEmpty(label)" class="py-2 flex items-center justify-between text-sm text-text-secondary">
+    <div v-if="checkIfEmpty(label)" class="py-2 flex items-center justify-between text-sm text-text-secondary relative">
       <div class="">
         <span v-if="required" class="text-color-primary mr-0.5">*</span>
         <span>{{ label }}</span>
       </div>
       <div v-if="limit > 0" class="limit">{{ length }}/{{ limit }}</div>
+      <app-icon
+        v-if="dot"
+        type="png"
+        :path="require('@/assets/icons/dot.png')"
+        class-name="h-5 w-1 ml-auto absolute right-0"
+      />
     </div>
     <div class="py-3">
       <div class="flex-1">
@@ -38,12 +44,6 @@
         </div>
         <div v-if="showError" class="error text-xs text-warn-color mt-2">{{ errorMsg }}</div>
       </div>
-      <!-- <app-icon
-        v-if="dot"
-        type="png"
-        :path="require('@/assets/icons/dot.png')"
-        class-name="h-5 w-1 ml-auto flex-shrink-0"
-      /> -->
     </div>
   </div>
 </template>
@@ -53,15 +53,15 @@ 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: {
     // title: String,
-    // dot: {
-    //   type: Boolean,
-    //   default: false
-    // },
+    dot: {
+      type: Boolean,
+      default: false
+    },
     label: String,
     type: {
       type: String,

src/router/client.ts

@@ -23,7 +23,7 @@ export const clientRoutes: Array<RouteConfig> = [
     path: '/edit-client',
     component: () => import('@/views/client/edit-client.vue'),
     meta: {
-      title: '客户信息'
+      title: '编辑客户信息'
     }
   },
   {
@@ -61,5 +61,12 @@ export const clientRoutes: Array<RouteConfig> = [
     meta: {
       title: '筛选'
     }
+  },
+  {
+    path: '/follows',
+    component: () => import('@/views/client/follows.vue'),
+    meta: {
+      title: '跟进成员'
+    }
   }
 ]
\ No newline at end of file

src/views/client/client-info.vue

@@ -45,6 +45,7 @@
           title-color="text-text-secondary"
           title="跟进"
           content="2"
+          @click="$router.push('/follows')"
         >
           <div slot="content" class="w-full flex items-center mr-4 overflow-hidden">
             <app-icon
@@ -216,6 +217,9 @@ export default Vue.extend({
     onSelect(item: {name: string, type: string}) {
       this.show = false
       console.log(item.type, 'item')
+      if (item.type === 'edit') {
+        this.$router.push('/edit-client')
+      }
     }
   }
 })

src/views/client/edit-client.vue

@@ -4,27 +4,113 @@
     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 class="pt-14 px-4 pb-16">
+      <input-cell
+        v-model="name"
+        required
+        label="姓名"
+        placeholder="请输入姓名(必填)"
+        :limit="20"
+      />
+      <group-cell
+        dot
+        title="标签"
+        class="mt-4"
+        @click="$router.push('/filter')"
+      >
+        <span slot="prefix" class="text-color-primary mr-0.5">*</span>
+        <div class="bg-white px-4 py-2">
+          <div v-if="tags.length > 0" class="">
+            <c-tag
+              v-for="(tag, index) in tags"
+              :key="index"
+              :label="tag.label"
+              :color="tag.color"
+              class="mr-1.5 mb-1"
+            />
+          </div>
+          <div v-else class="text-sm text-red-400">请选择标签</div>
         </div>
-        <div class="flex items-center justify-center py-3"  @click="clickTab('filter')">
+      </group-cell>
+      <input-cell
+        v-model="phone"
+        label="电话"
+        placeholder="请输入电话号码"
+      >
+        <app-icon
+          slot="prefix"
+          icon-name="plus-round"
+          class-name="w-6.5 h-6.5 mr-4"
+        />
+      </input-cell>
+      <input-cell
+        v-model="address"
+        label="地址"
+        type="textarea"
+        class="mt-4"
+        :limit="50"
+      />
+      <c-cell dot>
+        <div
+          slot="content"
+          class="w-full flex items-center"
+        >
           <app-icon
-            icon-name="tag"
-            class-name="w-5 h-5"
+            icon-name="location"
+            class-name="w-4"
           />
-          <div class="ml-2.5">筛选</div>
+          <span class="ml-2 text-sm text-text-secondary">显示定位</span>
+        </div>
+      </c-cell>
+      <input-cell
+        v-model="company"
+        label="公司"
+        class="mt-4"
+      />
+       <input-cell
+        v-model="position"
+        label="职位"
+        class="mt-4"
+      />
+      <div class="mt-4">
+        <div
+          class="px-4 py-2 bg-white mb-px rounded flex items-center justify-between"
+          @click="$router.push({
+            path: '/team-frame',
+            query: {
+              transfer: 1
+            }
+          })"
+        >
+          <div class="title">跟进人</div>
+          <div class="flex items-center">
+            <div class="text-sm text-text-secondary mr-1.5">共{{ follows.length }}人</div>
+            <app-icon
+              icon-name="dot"
+              class-name="w-1 h-5"
+            />
+          </div>
+        </div>
+        <div class="bg-white rounded px-4 py-2.5">
+          <div v-if="follows.length < 1" class="text-sm text-text-secondary">暂无跟进人</div>
+          <div v-else class="flex">
+            <div
+              v-for="follow in follows"
+              :key="follow.id"
+              class="flex flex-col items-center mt-2 mr-4"
+            >
+              <app-icon
+                icon-name="avator"
+                class-name="h-12 w-12"
+              />
+              <div class="text-xs text-text-secondary mt-1">{{ follow.name }}</div>
+            </div>
+          </div>
         </div>
       </div>
-      <client-card class="mt-2" />
-      <client-card class="mt-4" />
-      <client-card class="mt-4" />
-      <client-card class="mt-4" />
+    </div>
+    <div class="fixed bottom-0 left-0 bg-common-bg w-full px-4 py-1.5">
+      <c-button>完成</c-button>
     </div>
   </main-page>
 </template>
@@ -36,23 +122,42 @@ 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')
+    'input-cell': () => import('@/components/common/input-cell.vue'),
+    'c-button': () => import('@/components/common/c-button.vue'),
+    'group-cell': () => import('@/components/common/group-cell.vue'),
+    'c-tag': () => import('@/components/common/c-tag.vue'),
+    'c-cell': () => import('@/components/common/c-cell.vue')
   },
   name: 'EditClient',
   data() {
     return {
-      tabs: [
+      name: '刘强',
+      phone: '13112345678',
+      address: '单行高度100，这里是输入的客户地址，没有地址不用显示',
+      company: '杭州复杂美科技有限公司',
+      position: '市场经理',
+      tags: [
+        {
+          color: 'primary',
+          label: '合作伙伴'
+        },
+        {
+          color: 'orange',
+          label: '核心'
+        },
         {
-          label: '我跟进的',
-          key: 'mine'
+          color: 'green',
+          label: '洽谈'
         },
         {
-          label: '公共资源',
-          key: 'public'
+          color: 'primary',
+          label: '这里是标签最多十个字'
         }
       ],
-      currentKey: 'public'
+      follows: [
+        { name: '跟进人', id: 1 },
+        { name: '真实姓名', id: 2 },
+      ]
     }
   },
   methods: {

src/views/client/follows.vue

+<template>
+  <!-- 跟进成员 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
+    <app-icon
+      slot="right"
+      icon-name="plus-black"
+      class-name="w-6.5 h-6.5"
+      @click="show=true"
+    />
+    <van-action-sheet
+      v-model="show"
+      :actions="actions"
+      cancel-text="取消"
+      close-on-click-action
+      @select="onSelect"
+      />
+    <div class="pt-12 px-4 pb-4">
+      <div v-if="follows.length < 1" class="text-center text-sm text-text-secondary mt-20">暂无跟进人员</div>
+      <div
+        v-else
+        v-for="follow in follows"
+        :key="follow.id"
+        @click="selectFollow(follow)"
+      >
+        <div class="flex items-center">
+          <div v-if="showRadio" class="h-6 w-6 flex items-center justify-center flex-shrink-0 mr-3">
+            <app-icon
+              v-if="selected.indexOf(follow.id) < 0"
+              icon-name="radio"
+              class-name="w-4 h-4"
+            />
+            <app-icon
+              v-else
+              icon-name="radio-checked"
+              class-name="w-4 h-4"
+            />
+          </div>
+          <div class="title flex-1 py-2 flex items-center overflow-hidden">
+            <app-icon
+              icon-name="avator"
+              class-name="w-9 h-9 flex-shrink-0"
+            />
+            <div class="ml-2 flex-1 truncate">{{ follow.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showRadio && follows.length > 0" class="fixed bg-common-bg w-full bottom-0 left-0 px-4 py-1.5">
+      <c-button type="secondary" @click="deleteFollow">删除</c-button>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ActionSheet, Toast } from 'vant'
+Vue.use(ActionSheet).use(Toast)
+
+interface Follow {
+  name: string,
+  id: string
+}
+
+export default Vue.extend({
+  name: 'Follows',
+  components:{ 
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-button': () => import('@/components/common/c-button.vue')
+  },
+  created() {
+    const arr: Array<Follow> = []
+    for(let i = 0; i <= 6; i++) {
+      const name = i === 3 ? '有一只鱼名字很长很长很长很长很长的话后面就省略' : '真实姓名'
+      arr.push({
+        name,
+        id: i+name
+      })
+    }
+    this.follows = arr
+  },
+  data() {
+    const selected: Array<string> = []
+    const follows: Array<Follow> = []
+    return {
+      follows,
+      show: false,
+      showRadio: false,
+      selected,
+      actions: [
+        { name: '添加新成员', type: 'add' },
+        { name: '删除成员', type: 'delete'}
+      ]
+    }
+  },
+  methods: {
+    onSelect(item: {name: string, type: string}) {
+      console.log(item.type, 'type')
+      if (item.type === 'add') {
+        this.$router.push({
+          path: '/team-frame',
+          query: {
+            transfer: '1'
+          }
+        })
+      } else if (item.type === 'delete') {
+        this.showRadio = true
+      }
+    },
+    selectFollow(follow: Follow) {
+      const index = this.selected.findIndex(i => i === follow.id)
+      if (index < 0) {
+        this.selected.push(follow.id)
+      } else {
+        this.selected.splice(index, 1)
+      }
+    },
+    deleteFollow() {
+      if (this.selected.length < 1) {
+        Toast('请选择需要删除的成员')
+        return
+      }
+      this.$dialog.confirm({
+        title: '提示',
+        message: '确定要删除选中的成员吗？',
+        // confirmButtonText: '解散'
+      }).then(() => {
+        this.selected.forEach(id => {
+          const index = this.follows.findIndex(follow => follow.id === id)
+          this.follows.splice(index, 1)
+        })
+        this.selected = []
+      }).catch(() => {
+        console.log('取消解散')
+      })
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>