ykt-wxapp/pages/work/work.vue

<template>
  <view class="work-page">
    <!-- 顶部用户信息区域 -->
    <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="user-avatar mr-10">
            <image
              class="avatar-img"
              src="/static/default-avatar.png"
              mode="aspectFill"
            />
          </view>
          <view class="flex-col">
            <text class="user-name text-black text-lg font-semibold"
              >请完善信息</text
            >
            <view class="flex items-center mt-5">
              <view
                class="status-tag tag-orange mr-10"
                @click="handleCompleteInfo"
              >
                <text class="tag-text text-white">信息待完善</text>
              </view>
              <view class="status-tag tag-gray" @click="handleVerify">
                <text class="tag-text text-dark">未认证</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 右侧：操作按钮 -->
        <view class="flex items-center">
          <view
            class="action-btn flex-col items-center mr-15"
            @click="handleInvitePatient"
          >
            <view class="qrcode-icon">
              <text class="qrcode-text">▦</text>
            </view>
            <text class="action-text text-black text-sm mt-5">邀请患者</text>
          </view>
          <view class="more-btn" @click="handleMore">
            <text class="more-icon">⋯</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 待办列表区域 -->
    <view class="todo-section px-15 mt-15">
      <view class="section-title mb-15">
        <text class="text-black text-lg font-semibold">待办列表11</text>
      </view>

      <!-- 空状态 -->
      <view class="empty-state">
        <empty-data text="暂无记录" />
      </view>
    </view>
  </view>
</template>

<script setup>
import useGuard from "@/hooks/useGuard.js";
import EmptyData from "@/components/empty-data.vue";

const { useLoad } = useGuard();

// 完善信息
const handleCompleteInfo = () => {
  uni.navigateTo({
    url: "/pages/work/profile",
  });
};

// 认证
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) + "个按钮");
    },
  });
};

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

<style lang="scss" scoped>
.work-page {
  min-height: 100vh;
  background: #f5f5f5;
}

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

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e5e5;

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

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

.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: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .qrcode-text {
      font-size: 40rpx;
      color: #333;
      line-height: 1;
    }
  }

  .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>