ykt-wxapp/pages/work/work.vue

<template>
  <full-page :showSafeArea="false" :customScroll="true">
    <template #header>
      <view class="user-header bg-white px-15 py-15">
        <view class="flex items-center justify-between">
          <view class="flex items-center flex-grow">
            <view class="relative user-avatar mr-10" @click="editProfile()">
              <image v-if="doctorInfo && doctorInfo.avatar" class="avatar-img rounded-full overflow-hidden"
                :src="doctorInfo.avatar" mode="aspectFill" />
              <image v-else class="avatar-img rounded-full overflow-hidden" src="/static/default-avatar.png"
                mode="aspectFill" />
              <view v-if="doctorInfo" class="edit-sub flex items-center justify-center rounded-full bg-primary">
                <image class="edit-icon" src="/static/work/pen.svg" mode="aspectFill" />
              </view>
            </view>
            <view class="flex-col">
              <text v-if="doctorInfo && doctorInfo.anotherName" class="user-name text-dark text-lg font-semibold">
                {{ doctorInfo.anotherName }}
              </text>
              <text v-else class="user-name text-black text-lg font-semibold" @click="editProfile()">请完善信息</text>
              <view class="flex items-center mt-5">
                <view v-if="!doctorInfo || !doctorInfo.anotherName" class="status-tag tag-orange mr-10">
                  <text class="tag-text text-white">信息待完善</text>
                </view>
                <view v-if="certStatus" class="px-10 py-3 text-sm rounded-full" :class="certStatus.classnames"
                  @click.stop="handleCert()">
                  {{ certStatus.text }}
                </view>
              </view>
            </view>
          </view>

          <!-- 右侧：操作按钮 -->
          <view class="flex items-center">
            <view class="action-btn flex-col items-center mr-10" @click="invitePatient()">
              <image class="mb-5 qrcode-icon" src="/static/work/qrcode.svg" />
              <text class="action-text text-dark text-sm">邀请</text>
            </view>
            <view class="action-btn flex-col items-center" @click="handleMore">
              <image class="mb-5 qrcode-icon" src="/static/work/more.svg" />
              <text class="action-text text-dark text-sm">更多</text>
            </view>
          </view>
        </view>
      </view>
      <view class="mt-15 px-15 py-12 flex items-center justify-between bg-white">
        <view class="text-dark text-lg font-semibold">待办列表</view>
        <view class="flex text-base rounded-full bg-gray">
          <view class="py-5 px-15 rounded-full bg-primary text-white">个人</view>
          <view class="py-5 px-15">团队</view>
        </view>
      </view>
      <view class="py-10 px-15 flex items-center">
        <view class="flex-shrink-0 text-sm mr-10">
          <text class="text-dark">共</text>
          <text class="text-danger">23</text>
          <text class="text-dark">条</text>
        </view>
        <view class="flex">
          <view v-for="i in statusList" :key="i.value" class="mr-5 py-5 px-10 bg-white text-sm rounded-sm"
            :class="current == i.value ? 'text-primary' : 'text-dark'">
            {{ i.label }}
          </view>
        </view>
        <view class="flex-shrink-0 flex-grow flex justify-end" @click="filtered = !filtered">
          <image class="icon-filter" :src="`/static/work/icon-filter${filtered ? 'ed' : ''}.svg`" />
        </view>

      </view>
    </template>

    <scroll-view v-if="list.length" scroll-y="true" class="h-full">
      <view v-for="i in 10" :key="i" class="mb-10 shadow-lg bg-white">
        <view class="flex items-center justify-between px-15 py-10 border-b">
          <view class="text-base text-dark">计划执行: 2025-10-22</view>
          <view class="flex items-center">
            <view class="text-base text-dark">患者: 李珊珊</view>
          </view>
        </view>
        <view class="py-10 px-15 flex items-center">
          <view class="mr-5 text-lg font-semibold">患者满意度调查</view>
          <view class="bg-opacity px-10 py-3 leading-normal text-base text-success rounded overflow-hidden">
            待处理
          </view>
        </view>
        <view class="px-15 text-base leading-normal text-gray">对于门诊就诊患者的满意度做统计，以便优化…</view>
        <view class="mt-10 px-15 flex items-center">
          <view class="mr-5 w-0 flex-grow truncate text-base leading-normal text-dark">
            发送内容：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX…
          </view>
          <view class="bg-primary px-10 py-3 text-base text-white rounded-sm">发送</view>
        </view>
        <view class="mt-10 px-15 text-base leading-normal text-gray">张敏西（张敏希服务团队）</view>
        <view class="px-15 pb-10 text-base leading-normal text-gray">创建：2026-01-08 张敏西</view>
      </view>
    </scroll-view>

    <view v-else class="flex flex-col items-center justify-center h-full bg-white">
      <empty-data text="暂无记录" />
    </view>
    <template #footer>
      <view class="border-b"></view>
    </template>
  </full-page>
  <cert-popup :visible="visible" @close="visible = false" />
</template>

<script setup>
import { computed, ref } from 'vue';
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useInfoCheck from '@/hooks/useInfoCheck';
import useAccountStore from "@/store/account.js";

import certPopup from "./components/cert-popup.vue";
import EmptyData from "@/components/empty-data.vue";
import fullPage from '@/components/full-page.vue';
import { toast } from '@/utils/widget';

const certConfig = {
  failed: { text: '认证失败', classnames: 'bg-danger text-white' },
  verified: { text: '已认证', classnames: 'bg-success text-white' },
  verifying: { text: '认证中', classnames: 'bg-warning text-white' },
  unverified: { text: '未认证', classnames: 'bg-gray text-dark' },
};
const statusList = [{ label: '全部', value: 'all' }, { label: '待处理', value: 'pending' }, { label: '已处理', value: 'processed' }]

const { useLoad, useShow } = useGuard();
const { getDoctorInfo } = useAccountStore();
const { doctorInfo } = storeToRefs(useAccountStore());
const { withInfo } = useInfoCheck();
const list = ref([1]);
const visible = ref(false);
const current = ref('all');
const filtered = ref(false)

const certStatus = computed(() => doctorInfo.value?.verifyStatus ? certConfig[doctorInfo.value.verifyStatus] : null)

// 认证
const handleVerify = () => {
  uni.showToast({
    title: "跳转到认证页面",
    icon: "none",
  });
};

// 邀请患者
const invitePatient = withInfo(() => uni.navigateTo({ url: '/pages/work/team/invite/invite-patient' }));

const handleMore = withInfo(() => {
  uni.showActionSheet({
    itemList: ["我的团队", "联系客服"], //, "关于"
    success: (res) => {
      const url = res.tapIndex === 0 ? '/pages/work/team/list/team-list' : '/pages/work/service/contact-service';
      uni.navigateTo({ url });
    },
  });
})

function editProfile() {
  uni.navigateTo({
    url: "/pages/work/profile",
  });
}

function handleCert() {
  if (doctorInfo.value.verifyStatus === 'verifying') {
    toast('信息认证中，请耐心等待！')
  } else {
    visible.value = true
  }
}

useLoad(() => {
  console.log("工作台页面加载");
});

useShow(() => {
  getDoctorInfo();
})
</script>

<style lang="scss" scoped>
.edit-sub {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  right: 0;
  bottom: 0;
}

.edit-icon {
  width: 24rpx;
  height: 24rpx;
}

.user-header {
  border-bottom: 1px solid #eee;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;

  .avatar-img {
    width: 100%;
    height: 100%;
  }
}

.user-name {
  line-height: 1.5;
}

.py-3 {
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}

.status-tag {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  display: inline-flex;
  align-items: center;

  &.tag-orange {
    background: #ff6b35;
    border: 1px solid #fff;
  }

  &.tag-gray {
    background: #f5f5f5;
    border: 1px solid #ddd;
  }

  .tag-text {
    font-size: 22rpx;
    line-height: 1;
  }
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .qrcode-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .action-text {
    line-height: 1.2;
  }
}

.more-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .more-icon {
    font-size: 48rpx;
    color: #333;
    line-height: 1;
    font-weight: bold;
  }
}

.todo-section {
  .section-title {
    padding-top: 20rpx;
  }
}

.icon-filter {
  width: 42rpx;
  height: 42rpx;
}

.bg-opacity {
  position: relative;
}

.bg-opacity::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: currentColor;
}

.py-3 {
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}
</style>