feat: 完成团队通讯录页面和成员详情布局

src/components/footer-button-card.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="footer-button-card-wrap">
+    <view
+      class="footer-button-card"
+      :style="{ justifyContent: displayPosition, backgroundColor: bgColor }"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface IProps {
+  position?: 'left' | 'right' | 'center'
+  bgColor?: string
+}
+const props = withDefaults(defineProps<IProps>(), {
+  postion: 'right',
+  bgColor: '#fff',
+})
+
+const displayPosition = computed(() => {
+  switch (props.position) {
+    case 'left':
+      return 'flex-start'
+    case 'right':
+      return 'flex-end'
+    case 'center':
+      return 'center'
+    default:
+      return ''
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.footer-button-card-wrap {
+  height: 116rpx;
+}
+
+.footer-button-card {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 116rpx;
+  padding: 0 32rpx;
+}
+</style>

src/components/group/group.vue

@@ -14,8 +14,11 @@ function changeIsCollapsed() {
 
 <template>
   <view class="group">
-    <view class="group-head flex justify-between" @click="changeIsCollapsed">
-      <view class="head-left flex items-center px-[24rpx] py-1 bg-white">
+    <view
+      class="group-head px-[24rpx] flex justify-between items-center"
+      @click="changeIsCollapsed"
+    >
+      <view class="head-left flex items-center py-1 bg-white">
         <wd-icon name="caret-right-small" size="30px" color="#888" v-if="isCollapsed"></wd-icon>
         <wd-icon name="caret-down-small" size="30px" color="#888" v-else></wd-icon>
         <view class="group-name">{{ name }}</view>

src/components/members.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { IMember } from '@/types/types'
+const emit = defineEmits(['memberClick'])
+interface IProps {
+  list?: IMember[]
+}
+
+withDefaults(defineProps<IProps>(), {
+  list: () => [],
+})
+
+function memberClick(item: IMember) {
+  emit('memberClick', item)
+}
+</script>
+
+<template>
+  <view class="members border-t-[1px] border-t-solid border-t-[#ccc]">
+    <view
+      class="member flex items-center px-2 py-2"
+      border-b-1px
+      border-b-solid
+      border-b="[#ccc]"
+      v-for="item in list"
+      :key="item.id"
+      @click="memberClick(item)"
+    >
+      <uv-avatar :src="item.avatar" class="mr-2" v-if="item.avatar"></uv-avatar>
+      <view class="name">{{ item.name }}</view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/patient-detail/index.vue

@@ -11,9 +11,7 @@
   <view class="patient-detail">
     <view class="main">
       <view class="basic-info flex items-center">
-        <view class="avatar bg-amber mr-2 w-120rpx h-120rpx flex overflow-hidden items-center">
-          <image src="" class="w-full h-full" mode="widthFix" />
-        </view>
+        <uv-avatar src="https://img.yzcdn.cn/vant/cat.jpeg" class="mr-2" size="80px"></uv-avatar>
         <view class="name">张三</view>
       </view>
       <view class="info-list flex">

src/pages/team-managent/directory/components/group-list.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { IGroup, IMember } from '@/types/types'
+
+interface IProps {
+  list: IGroup[]
+}
+
+withDefaults(defineProps<IProps>(), {
+  list: () => [],
+})
+
+function memberClick(item: IMember) {
+  const id = item.id
+  uni.navigateTo({
+    url: `/pages/team-managent/directory/people-detail?id=${id}`,
+  })
+}
+</script>
+
+<template>
+  <view class="group-list">
+    <template v-for="item in list" :key="item.id">
+      <group :name="item.groupName">
+        <template #head-right>
+          <wd-icon name="add-circle" size="22px"></wd-icon>
+        </template>
+        <Members :list="item.members" @memberClick="memberClick" />
+      </group>
+    </template>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/team-managent/directory/add-group.vue → src/pages/team-managent/directory/group-manage.vue

@@ -2,13 +2,13 @@
 {
   layout: 'default',
   style: {
-    navigationBarTitleText: '新增分组',
+    navigationBarTitleText: '分组管理',
   },
 }
 </route>
 
 <template>
-  <view class="add-group">新增分组</view>
+  <view class="group-manage">分组管理</view>
 </template>
 
 <script lang="ts" setup>

src/pages/team-managent/directory/index.vue

@@ -9,12 +9,56 @@
 
 <template>
   <view class="management-directory">
-    <group name="分组一组">测试分组组件</group>
+    <GroupList :list="groupList" />
+    <footer-button-card position="center">
+      <uv-button class="w-full" type="primary" @click="toGroupManage" text="分组管理"></uv-button>
+    </footer-button-card>
   </view>
 </template>
 
 <script lang="ts" setup>
+import type { IGroup } from '@/types/types'
+import GroupList from './components/group-list.vue'
 //
+const groupList = ref<IGroup[]>([
+  {
+    groupName: '我的团队',
+    id: 1,
+    members: [
+      {
+        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+        id: 1,
+        name: '张三',
+      },
+      {
+        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+        id: 2,
+        name: '李四',
+      },
+    ],
+  },
+  {
+    groupName: '我的组员',
+    id: 1,
+    members: [
+      {
+        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+        id: 3,
+        name: '王二',
+      },
+      {
+        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
+        id: 4,
+        name: '麻子',
+      },
+    ],
+  },
+])
+const toGroupManage = () => {
+  uni.navigateTo({
+    url: '/pages/team-managent/directory/group-manage',
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/team-managent/directory/people-detail.vue

@@ -8,9 +8,34 @@
 </route>
 
 <template>
-  <view class="people-detail">成员详情</view>
+  <view class="people-detail px-24rpx">
+    <view class="basic-info flex items-center">
+      <uv-avatar src="https://img.yzcdn.cn/vant/cat.jpeg" class="mr-2" size="80px"></uv-avatar>
+      <view class="info-item mr-3">张三</view>
+      <view class="info-item mr-3">主任医师</view>
+    </view>
+    <view class="main-item">科室：外科</view>
+    <view class="main-item">医院：中央民族医院</view>
+    <view class="section">
+      <view class="section-title mt-[20px]">医院简介</view>
+      <view class="section-content">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, officia. Neque sapiente
+        quo perferendis? Iste, nemo? Magni recusandae ipsum quia! Vel earum iure ullam molestiae aut
+        voluptatibus assumenda officia nisi?
+      </view>
+    </view>
+  </view>
 </template>
 
 <script lang="ts" setup>
 //
 </script>
+<style lang="scss" scoped>
+.main-item {
+  margin-top: 20rpx;
+}
+.section-content {
+  margin-top: 32rpx;
+  line-height: 1.6;
+}
+</style>

src/types/types.ts

@@ -0,0 +1,11 @@
+export interface IMember {
+  name: string
+  avatar?: string
+  id?: string | number
+}
+
+export interface IGroup {
+  id: number
+  groupName: string
+  members: IMember[]
+}