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" @click="editProfile()">
          <view class="flex items-center flex-grow">
            <view class="relative user-avatar mr-10">
              <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">请完善信息</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="handleInvitePatient">
              <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 text-dark text-lg font-semibold bg-white border-b">
        待办列表11
      </view>
    </template>

    <scroll-view v-if="list.length" scroll-y="true" class="h-full bg-white">
      <view class="p-15">
        <view v-for="i in 10" class="p-15 bg-primary mb-10"></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 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 { useLoad, useShow } = useGuard();
const { getDoctorInfo } = useAccountStore();
const { account, doctorInfo } = storeToRefs(useAccountStore());
const list = ref([1]);
const visible = ref(false);

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

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

// 邀请患者
const handleInvitePatient = () => {
  uni.showToast({
    title: "邀请患者",
    icon: "none",
  });
};

// 更多操作
const handleMore = () => {
  uni.showActionSheet({
    itemList: ["设置", "关于"],
    success: (res) => {
      console.log("选择了第" + (res.tapIndex + 1) + "个按钮");
    },
  });
};

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;
  }
}

// .empty-state {
//   min-height: 600rpx;
//   padding: 100rpx 0;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
// }</style>