ykt-wxapp/pages/work/team/list/team-list.vue

<template>
  <full-page :customScroll="list.length === 0">
    <view v-if="list.length === 0" class="w-full h-full flex flex-col justify-center items-center">
      <empty-data text="暂无团队" />
    </view>
    <view v-for="(i, idx) in list" :key="idx" class="p-15 mb-10 flex items-center bg-white shadow-lg">
      <view class="mr-10 w-0 flex-grow" @click="toDetail(i)">
        <view class="flex items-center">
          <view class="team-name text-lg font-semibold truncate mr-5">
            {{ i.name }}
          </view>
          <view v-if="doctorInfo && i.creator === doctorInfo.userid"
            class="px-10 leading-normal text-sm border-auto text-primary rounded-full">创建</view>
          <view v-else class="px-10 leading-normal text-sm border-auto text-warning rounded-full">加入</view>
        </view>
        <view class="mt-10 flex">
          <view class="min-w-120 text-base text-dark">
            成员: {{ i.memberList && i.memberList.length ? i.memberList.length : 0 }}
          </view>
          <view class="min-w-120 text-base text-dark">
            患者: 200
          </view>
        </view>
      </view>
      <view class="flex-shrink-0 flex flex-col items-center justify-center" @click.stop="invite(i)">
        <image class="mb-5 qrcode" src="/static/work/qrcode.svg" />
        <view class="w-full text-sm text-dark text-center">邀请成员</view>
      </view>
    </view>
    <template #footer>
      <button-footer confirmText="创建团队" :showCancel="false" @confirm="toCreate()" />
    </template>
  </full-page>
</template>
<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useAccountStore from "@/store/account.js";
import api from "@/utils/api.js";

import buttonFooter from '@/components/button-footer.vue';
import emptyData from "@/components/empty-data.vue";
import fullPage from '@/components/full-page.vue';

const { useShow } = useGuard();
const { doctorInfo, account } = storeToRefs(useAccountStore());
const list = ref([]);

function invite(team) {
  uni.navigateTo({ url: `/pages/work/team/invite/invite-teammate?teamId=${team.teamId || ''}` })
  // uni.navigateTo({ url: `/pages/work/team/invite/invite-patient?teamId=${team.teamId || ''}` })
}

function toCreate() {
  uni.navigateTo({ url: '/pages/work/team/edit/team-edit' })
}

function toDetail(team) {
  uni.navigateTo({ url: `/pages/work/team/detail/team-detail?teamId=${team.teamId || ''}` })
}

async function getTeams() {
  const res = await api('getJoinedTeams', { corpId: account.value?.corpId, mateId: doctorInfo.value?.userid });
  const arr = res && Array.isArray(res.data) ? res.data.map(i => ({
    id: i._id,
    teamId: i.teamId,
    name: i.name,
    memberList: i.memberList,
    creator: i.creator
  })) : [];
  list.value = arr;
}


useShow(() => {
  getTeams();
})

</script>
<style>
.min-w-120 {
  min-width: 240rpx;
}

.team-name {
  max-width: 60%;
}

.qrcode {
  width: 60rpx;
  height: 60rpx;
}
</style>