团队搜索/申请团队页面

src/layout/main-page.vue

@@ -13,7 +13,7 @@
           </template>
             <slot name="left" />
         </div>
-        <div class="title w-1/2 text-center font-bold text-text-primary truncate">{{ title }}</div>
+        <div class="title w-1/2 text-center font-bold truncate" :class="titleColor">{{ title }}</div>
         <div class="h-action-wrapper absolute flex justify-center items-center right-3 top-1/2 transform -translate-y-1/2">
           <slot name="right" />
         </div>
@@ -38,6 +38,10 @@ export default Vue.extend({
     headerBg: {
       type: String,
       default: 'bg-common-bg'
+    },
+    titleColor: {
+      type: String,
+      default: 'text-text-primary'
     }
   },
   components: {

src/router/index.ts

@@ -29,6 +29,8 @@ const routes: Array<RouteConfig> = [
    * 申请管理 /request-management
    * 添加成员 /file
    * 选择部门 /select-team
+   * 搜索团队 /search-team
+   * 加入团队 /join-team
    * 
   */
   {
@@ -153,6 +155,22 @@ const routes: Array<RouteConfig> = [
       title:'选择团队'
     }
   },
+  {
+    path: '/search-team',
+    name: 'SearchTeam',
+    component: () => import('@/views/search-team.vue'),
+    meta:{
+      title:'搜索团队'
+    }
+  },
+  {
+    path: '/join-team',
+    name: 'JoinTeam',
+    component: () => import('@/views/join-team.vue'),
+    meta:{
+      title:'加入团队'
+    }
+  }
 ]
 
 const router = new VueRouter({

src/style.less

@@ -7,6 +7,17 @@ input {
   -webkit-tap-highlight-color: rgba(0,0,0,0); /*点击高亮的颜色*/
 }
 
+input[type=search] {
+  -webkit-appearance: textfield;
+  font-family: inherit;
+  font-size: 100%;
+}
+
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button {
+  display: none;
+}
+
 body {
   color: #24374E;
 }

src/views/components/c-cell.vue

@@ -5,6 +5,7 @@
   > 
     <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="icon" />
       <div class="flex items-center justify-between flex-1">
         <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div>
         <!-- 输入框 -->

src/views/components/input-cell.vue

@@ -15,14 +15,15 @@
           <input
             :type="type"
             :value="value"
-            class="w-full text-text-primary"
+            class="w-full text-text-primary flex-1"
             :placeholder="placeholder"
             @input="handleInput"
             @blur="handleChange"
           >
-          <slot name="action" />
+          <div class="flex-shrink-0">
+            <slot name="action" />
+          </div>
         </div>
-        
         <div v-if="showError" class="error text-xs text-warn-color mt-2">{{ errorMsg }}</div>
       </div>
       <!-- <app-icon
@@ -37,9 +38,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Field } from 'vant'
-
-Vue.use(Field)
 
 export default Vue.extend({
   components:{ 
@@ -83,6 +81,9 @@ export default Vue.extend({
       showError: false
     }
   },
+  created() {
+    this.length = this.value.length || 0
+  },
   methods: {
     checkIfEmpty(string: string) {
       return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''

src/views/components/search-bar.vue

+<template>
+  <div class="top-0 left-0 w-full py-1.5 flex items-center" :class="bgColor">
+    <div class="input-wrapper flex-1 relative">
+      <app-icon
+        icon-name="search-light"
+        class-name="w-6 h-6 absolute left-2 top-1/2 transform -translate-y-1/2"
+      />
+      <form action=".">
+        <input
+          type="search"
+          class="py-2 rounded-full w-full pl-9"
+          :class="clearable ? 'pr-9' : 'pr-4'"
+          :placeholder="placeholder"
+          :value="value"
+          @input="handleInput"
+          @keypress="keyPress"
+        >
+        <input type="text" style="display:none;"/>
+      </form>
+      <div
+        v-if="clearable && 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"
+      >
+        <app-icon
+          icon-name="close-small"
+          class-name="w-2.5 h-2.5"
+        />
+      </div>
+    </div>
+    <div class="right flex-shrink-0 ml-4">
+      <slot name='right'>
+        <div @click="$emit('cancel')">取消</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'SearchBar',
+  components:{ 
+    'app-icon':()=>import('@/components/common/Icon.vue')
+    // 'main-page': () => import('@/layout/main-page.vue')
+  },
+  props: {
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: 'bg-common-bg'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入..'
+    },
+    value: String
+  },
+  data() {
+    return  {
+      // value: '',
+      length: 0,
+      showError: false
+    }
+  },
+  methods: {
+    handleInput(e: InputEvent) {
+      this.$emit('input', (e.target as HTMLInputElement).value)
+    },
+    clear() {
+      console.log('xxx')
+      this.$emit('input', '')
+    },
+    keyPress(e: KeyboardEvent) {
+      if (e.key.toLowerCase() === 'enter') {
+        this.$emit('search')
+      }
+      // alert(e.key)
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/file.vue

@@ -50,7 +50,11 @@
         />
         <van-calendar  v-model="show" :round="false" @confirm="onConfirm" :show-confirm="false" :style="{ height:'100%'}" />  
         <!-- 选择部门 --> 
-        <group-cell class="mt-4" title="所属部门">
+        <group-cell
+          dot
+          class="mt-4" title="所属部门"
+          @click="$router.push('/select-team')"
+        >
           <c-cell title="产品设计部(主要部门)" />
           <c-cell title="设计部(子部门)" />
         </group-cell>

src/views/join-team.vue

+<template>
+  <!-- 加入团队 -->
+  <div class="team-frame">
+    <main-page
+      header-bg="bg-transparent"
+      title-color="text-white"
+      @click-left="$router.go(-1)"
+    >
+      <!-- 顶部左侧插槽 -->
+      <template slot="left">
+        <app-icon
+          type="png"
+          class-name="w-6.5 w-6.5"
+          :path="require('@/assets/icons/left-arrow-white.png')"
+          @click="$router.go(-1)"
+        />
+      </template>
+      <div class="relative w-full h-40 bg-gradient-to-r from-linear-t to-linear-b">
+        <!-- 背景图 -->
+        <img class="w-82 absolute top-0 right-0" src="@/assets/images/header-bg.png" alt="">
+        <!-- logo -->
+        <div class="absolute top-20 left-1/2 border transform -translate-x-1/2 z-10 w-15 h-15 bg-white rounded-full overflow-hidden flex items-center justify-center">
+          <img src="@/assets/images/33.png" alt="" class="max-w-full">
+        </div>
+        <div class="top-28 px-4 w-full absolute top-10">
+          <div class="bg-white w-full rounded pt-8 pb-4 flex flex-col items-center shadow-bg">
+            <div class="font-medium">杭州复杂美科技有限公司</div>
+            <div class="font-medium text-sm text-text-secondary mt-0.5">团队号 HZFZM0001</div>
+          </div>
+        </div>
+      </div>
+      <div class="px-4 pt-16 pb-20">
+        <input-cell
+          v-model="name"
+          required
+          :limit="20"
+          label="真实姓名"
+          placeholder="请输入真实姓名"
+          error-msg="请输入真实姓名"
+          class="mt-2"
+        />
+        <input-cell
+          v-model="phone"
+          required
+          label="手机号"
+          placeholder="请输入手机号"
+          error-msg="请输入手机号"
+          class="mt-4"
+        />
+        <input-cell
+          v-model="validateNum"
+          required
+          placeholder="请输入验证码"
+          error-msg="请输入验证码"
+        >
+          <template slot="action">
+            <c-button type="text" class="ml-4">获取验证码</c-button>
+          </template>
+        </input-cell>
+        <input-cell
+          v-model="reason"
+          label="申请理由(选填)"
+          placeholder="请填写申请理由"
+          class="mt-4"
+        />
+        <!-- 底部操作 -->
+        <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
+          <c-button round @click="submit">提交申请</c-button>
+        </div>
+      </div>
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'JoinTeam',
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-button': () => import('./components/c-button.vue'),
+    'input-cell': () => import('./components/input-cell.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+    return {
+      name: '',
+      phone: '',
+      validateNum: '',
+      reason: ''
+    }
+  },
+  methods: {
+    submit() {
+      console.log('申请')
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/search-team.vue

+<template>
+  <div class="select-team min-h-screen bg-common-bg px-4">
+    <div class="header px-4 fixed top-0 left-0 w-full z-10">
+      <search-bar
+        v-model="search"
+        placeholder="搜索团队名称、团队号"
+        @search="handleSearch"
+        @cancel="$router.go(-1)"
+      />
+    </div>
+    <div class="content pt-14">
+      <div class="mt-2.5">
+        <div
+          v-for="(item, index) in result"
+          :key="index"
+          class="bg-white p-4 rounded flex items-center mb-px"
+          @click="$router.push('/join-team')"
+        >
+          <div class="w-10 h-10 mr-6 flex-shrink-0">
+            <img src="@/assets/images/33.png" alt="" class="max-w-full">
+          </div>
+          <div class="flex-1 overflow-hidden">
+            <div class="font-medium truncate">{{ item.name }}</div>
+            <div class="text-sm text-text-secondary font-medium truncate">团队号 {{ item.number }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name:'SearchTeam',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'), 
+    // 'app-icon': () => import('@/components/common/Icon.vue'),
+    'search-bar': () => import('./components/search-bar.vue')
+    // 'c-button': () => import('./components/c-button.vue')
+  },
+  data() {
+    return {
+      search: '',
+      result: [
+        {
+          name: '杭州复杂美科技有限公司',
+          number: 'HZFZM0001'
+        },
+        {
+          name: '杭州复杂美科技有限公司',
+          number: 'HZFZM0001'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('search ' + this.search)
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/select-team.vue

@@ -7,6 +7,7 @@
           type="png"
           class-name="w-6.5 h-6.5"
           :path="require('@/assets/icons/search.png')"
+          @click="$router.push('/search-team')"
         />
       </template>
       <div class="px-4 pt-14 pb-16">

tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
         6.5: '1.625rem',
         10.5: '2.625rem',
         13: '3.125rem',
+        15: '3.75rem',
         50: '12.5rem',
         82: '20.375rem',
       },
@@ -43,6 +44,9 @@ module.exports = {
       zIndex: {
         '-1': '-1'
       },
+      boxShadow: {
+        bg: '0px 2px 24px 0px #D7E7EF'
+      }
     },
     screens: {
       sm: '640px',