lishan

src/components/common/input-cell.vue

@@ -10,8 +10,14 @@
       <div v-if="limit > 0" class="limit">{{ length }}/{{ limit }}</div>
     </div>
     <div class="py-3">
-      <div class="flex-1">
+      <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"
+          />
           <input
             v-if="type !== 'textarea'"
             :type="type"
@@ -20,7 +26,7 @@
             :placeholder="placeholder"
             @input="handleInput"
             @blur="handleChange"
-          >
+          >         
           <textarea
             v-else
             :value="value"
@@ -29,6 +35,7 @@
             @input="handleInput"
             @blur="handleChange"
           />
+          
           <div class="flex-shrink-0">
             <slot name="action" />
           </div>
@@ -50,15 +57,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
-    // },
+    add: {
+      type: Boolean,
+      default: false
+    },
     label: String,
     type: {
       type: String,

src/router/client.ts

@@ -4,4 +4,21 @@ import { RouteConfig } from 'vue-router'
  * 客户管理路由
  */
 
-export const clientRoutes: Array<RouteConfig> = []
+export const clientRoutes: Array<RouteConfig> = [
\ No newline at end of file
+    {
+        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: '选择标签'
+        }
+      },
+]
\ No newline at end of file

src/views/attendance/y-cell.vue

+<template>
+  <div
+    class="mb-px bg-white px-4 rounded"
+    @click="clickItem"
+  > 
+    <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">       
+         <app-icon
+            v-if="location"
+            type="png"
+            :path="require('@/assets/icons/y-location.png')"
+            class-name="h-4 w-3.5 mb-1"
+        />       
+        <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary pl-1.5">{{ content }}</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 ml-1.5"
+        />
+      </div>          
+    </div>
+  </div>
+</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')
+  },
+  props: {
+    title: String,
+    location: {
+      type: Boolean,
+      default: false
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'content'
+    },
+    value: String,
+    label: String,
+    content: String
+  },
+  name: 'YCell',
+  methods: {
+    clickItem() {
+      this.$emit('click')
+    },
+    checkIfEmpty(string: string) {
+      return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''
+    },
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/client/add-client.vue

+<template>
+    <div class="add-client">
+        <main-page
+        left-arrow
+        @click-left="handleClickLeft"
+        >
+            <div class="px-4 pt-14 ">
+                <input-cell
+                    v-model="name"
+                    required
+                    :limit="20"
+                    label="真实姓名"
+                    placeholder="请输入客户姓名(必填)"
+                    error-msg="姓名不能为空"
+                />
+                <c-cell 
+                    dot
+                    title="标签"   
+                    v-model="tag"      
+                    class="mt-4"
+                    @click="$router.push('/select-tag')"                  
+                />
+                <input-cell
+                    add
+                    v-model="tel"
+                    label="电话号码"
+                    placeholder="添加电话号码"
+                    class="mt-4"
+                />
+                <input-cell
+                    v-model="address"
+                    :limit="50"
+                    label="地址"
+                    placeholder="请输入客户地址"
+                    class="mt-4"
+                />
+                <y-cell
+                    location
+                    dot
+                    v-model="location"
+                    content="支持地图定位"
+                />
+                
+                <input-cell
+                    v-model="company"
+                    label="公司"
+                    placeholder="请输入客户公司"
+                    class="mt-4"
+                />
+                <input-cell
+                    v-model="position"
+                    label="职位"
+                    placeholder="请输入客户职位"
+                    class="mt-4"
+                />
+                <input-cell
+                    v-model="remarks"
+                    label="备注"
+                    placeholder="请输入备注"
+                    class="mt-4"
+                />
+                <c-cell 
+                    dot
+                    title="跟进人"   
+                    v-model="follow"      
+                    class="mt-4"                  
+                />
+            </div>
+        </main-page>
+    </div>
+  
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+    name: 'Add-client',
+    components: {
+        'main-page': () => import('@/layout/main-page.vue'),
+        'input-cell': () => import('@/components/common/input-cell.vue'),
+         'c-cell': () => import('@/components/common/c-cell.vue'),
+         'y-cell': () => import('@/views/attendance/y-cell.vue'),
+        // 'c-button': () => import('@/components/common/c-button.vue'),
+        // 'group-cell': () => import('@/components/common/group-cell.vue')
+    },
+    created(){
+        // console.log(Mock, 'mock')
+    },
+    data(){
+        return{
+            name:'',
+            tag:'',
+            tel:'',
+            address:'',
+            location:'',
+            company:'',
+            position:'',
+            remarks:'',
+            follow:'',
+        }
+    },
+    methods: {
+        handleClickLeft() {
+            this.$router.go(-1)
+        },
+    }
+})  
+  
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/client/select-tag.vue

+<template>
+  <div class="add-client">
+    <main-page
+    left-arrow
+    @click-left="handleClickLeft"
+    >
+    <div class="px-4 pt-14 ">
+        <c-button
+            round         
+            class="mt-10"
+            buttonBg="bg-color-primary"
+            @click="$router.push('/add-client')"
+        >
+          完成
+        </c-button>
+    </div>
+   
+    </main-page>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+    name: 'Select-tag',
+    components: {
+        'main-page': () => import('@/layout/main-page.vue'),
+        'c-button': () => import('@/components/common/c-button.vue'),
+    },
+    created(){
+        // console.log(Mock, 'mock')
+    },
+    data(){
+        return{
+            
+        }
+    },
+    methods: {
+        handleClickLeft() {
+            this.$router.go(-1)
+        },
+    }
+})
+    
+</script>
+
+<style>
+
+</style>
\ No newline at end of file