hn-hlw-app/pages/home/home.vue

<template>
  <full-page pageStyle="background:#fff">
    <view class="home-page">
      <image class="page-background" src="/static/_home/bg.png" mode="widthFix" />

      <view class="hero">
        <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
          <view class="nav-content">
            <text class="hospital-name">海宁康华医院互联网医院</text>
          </view>
        </view>

        <view class="user-bar">
          <image class="avatar" src="/static/_home/avatar.png" mode="aspectFill" />
          <template v-if="logined">
            <text class="user-name">{{ userInfo.maskName || userInfo.userName || '已登录' }}</text>
            <view class="login-button logout-button" @click="loginout">退出</view>
          </template>
          <view v-else class="login-button" @click="login">登录</view>
        </view>
      </view>

      <view class="page-content">
        <view class="prescription-list">
          <view v-for="item in mainMenuList" :key="item.key" class="prescription-card" :class="item.cardClass"
            @click="handleMainMenuClick(item)">
            <view class="card-copy">
              <text class="card-title">{{ item.title }}</text>
              <text class="card-description">{{ item.desc }}</text>
            </view>
            <text class="card-arrow">›</text>
            <image class="card-watermark" :src="item.watermark" mode="aspectFit" />
          </view>
        </view>

        <view class="service-section">
          <text class="section-title">院内服务</text>
          <view class="service-list">
            <view v-for="item in menuList" :key="item.title" class="service-item" @click="gotoPage(item)">
              <view class="service-icon-wrap">
                <uni-badge :text="count[item.badgeKey]" absolute="rightTop" size="small"
                  :custom-style="item.badgeKey && count[item.badgeKey] > 0 ? {} : { display: 'none' }">
                  <image class="service-icon" :src="item.icon" mode="aspectFit" />
                </uni-badge>
              </view>
              <text class="service-title">{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </full-page>

  <store-popup :drugStore="drugStore" :visible="visible" @confirm="confirmStoreInfo()" @close="visible = false" />
  <confirm-popup title="提示" content="您是否半年内在医院就诊过？" cancelText="否" confirmText="是" :visible="confirmVisible"
    @confirm="handleConfirmYes" @cancel="handleConfirmNo" @close="confirmVisible = false" />
</template>

<script setup>
import { ref, onUnmounted } from "vue";
import { onLoad, onHide } from "@dcloudio/uni-app";
import useUser from "@/hooks/useUser";
import { autoAddHlwPatient, isDoctorOnline } from '@/utils/api'
import { toast } from "@/utils/widget";
import fullPage from "@/components/full-page.vue";
import confirmPopup from "./confirm-popup.vue";
import storePopup from "./store-popup.vue";

const mainMenuList = [
  {
    title: "医保处方",
    desc: "医保结算，到店取药",
    key: "YB",
    cardClass: "insurance-card",
    watermark: "/static/_home/watermark-insurance.png",
  },
  {
    title: "自费处方",
    desc: "全额自费，到店取药",
    key: "ZF",
    cardClass: "selfpay-card",
    watermark: "/static/_home/watermark-selfpay.png",
  },
];

const menuList = [
  {
    title: "处方记录",
    icon: "/static/_home/rx-record.png",
    url: "/pages/record/prescription-record",
    badgeKey: "rxUnpay",
  },
  {
    title: "诊疗记录",
    icon: "/static/_home/cure-record.png",
    url: "/pages/record/consult-record",
  },
  {
    title: "就诊人管理",
    icon: "/static/_home/patient-management.png",
    url: "/pages/member/list",
  },
];

const { userInfo, logined, login, loginout, drugStore, getStore, storeId } = useUser();
const statusBarHeight = ref(20);
const count = ref({ rxUnpay: 0 });
const confirmVisible = ref(false);
const confirmResolve = ref(null);
const confirmReject = ref(null);
const feeType = ref("");
const visible = ref(false)

function goBack() {
  uni.navigateBack();
}

function confirmAuth() {
  uni.navigateTo({
    url: `/pages/consult/index?feeType=${feeType.value}`,
  });
}

async function checkLogin() {
  if (logined.value) return true;
  await login();
  return logined.value ? true : Promise.reject("login fail");
}

async function handleMainMenuClick(item) {
  await checkLogin();
  await checkCanBuy()
  await autoAddPatient();
  feeType.value = item.key;
  confirmVisible.value = true;
}

async function handleConfirmYes() {
  confirmVisible.value = false;
  await getStore();
  visible.value = true
  if (confirmResolve.value) {
    confirmResolve.value();
    cleanupConfirmPromise();
  }
}

function confirmStoreInfo() {
  visible.value = false
  confirmAuth();
}

function handleConfirmNo() {
  confirmVisible.value = false;
  if (confirmReject.value) {
    confirmReject.value();
    cleanupConfirmPromise();
  }
}

function cleanupConfirmPromise() {
  confirmResolve.value = null;
  confirmReject.value = null;
}
async function checkCanBuy() {
  const res = await isDoctorOnline()
  if (res.data === true) {
    return
  }
  toast('很抱歉！互联网问诊医生因线下门诊等原因暂时不在线！请稍后再试！')
  return Promise.reject('no online doctor')
}

async function gotoPage(item) {
  await checkLogin();
  if (item.title === "就诊人管理") {
    await autoAddPatient()
  }
  uni.navigateTo({ url: item.url });
}

async function autoAddPatient() {
  await autoAddHlwPatient({
    name: userInfo.value.userName,
    certNo: userInfo.value.certNo,
    mobile: userInfo.value.mobile,
    accountId: userInfo.value.userId,
  })
}

onLoad((opts) => {
  if (opts.storeId) {
    storeId.value = opts.storeId
  }
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 20;
});

onHide(() => {
  if (confirmReject.value) confirmReject.value();
  cleanupConfirmPromise();
  confirmVisible.value = false;
});

onUnmounted(() => {
  cleanupConfirmPromise();
});
</script>

<style lang="scss" scoped>
.home-page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #fff;
  color: #132d59;
  box-sizing: border-box;
}

.page-background {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.hero {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 76% 20%, rgba(43, 202, 202, 0.08) 0, rgba(43, 202, 202, 0.08) 28rpx, transparent 29rpx),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 86rpx, transparent 87rpx),
    linear-gradient(135deg, #effafb 0%, #f5fbfc 60%, #edf7f8 100%);
}

.nav-bar {
  box-sizing: border-box;
}

.nav-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx 0 60rpx;
  box-sizing: border-box;
}

.back-button {
  width: 44rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
}

.back-arrow {
  width: 20rpx;
  height: 20rpx;
  border-left: 4rpx solid #17386b;
  border-bottom: 4rpx solid #17386b;
  transform: rotate(45deg);
}

.hospital-name {
  margin-left: 12rpx;
  font-size: 34rpx;
  line-height: 48rpx;
  color: #143466;
  font-weight: 600;
  white-space: nowrap;
}

.user-bar {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx 20rpx;
}

.avatar {
  width: 54rpx;
  height: 54rpx;
  margin-right: 18rpx;
  border-radius: 50%;
}

.user-name {
  max-width: 240rpx;
  margin-right: 18rpx;
  overflow: hidden;
  color: #17345f;
  font-size: 26rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-button {
  min-width: 94rpx;
  height: 46rpx;
  padding: 0 20rpx;
  border: 2rpx solid #23c7b0;
  border-radius: 25rpx;
  box-sizing: border-box;
  color: #13bba5;
  font-size: 25rpx;
  line-height: 42rpx;
  text-align: center;
  margin-top: 0;
  transform: translateY(1px);
}

.logout-button {
  margin-left: auto;
}

.page-content {
  position: relative;
  z-index: 1;
  padding: 36rpx 30rpx 450rpx;
}

.prescription-list {
  display: flex;
  justify-content: space-between;
}

.prescription-card {
  position: relative;
  width: 328rpx;
  height: 196rpx;
  overflow: hidden;
  border-radius: 12rpx;
  box-sizing: border-box;
  color: #fff;
}

.insurance-card {
  background: linear-gradient(135deg, #27d0b3 0%, #0bbda9 100%);
}

.selfpay-card {
  background: linear-gradient(135deg, #28b6f4 0%, #129cf0 100%);
}

.card-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 30rpx 26rpx;
}

.card-title {
  font-size: 40rpx;
  line-height: 44rpx;
  font-weight: bold;
}

.card-description {
  margin-top: 20rpx;
  font-size: 28rpx;
  line-height: 32rpx;
  white-space: nowrap;
}

.card-arrow {
  position: absolute;
  z-index: 2;
  top: 28rpx;
  right: 24rpx;
  font-family: Arial, sans-serif;
  font-size: 48rpx;
  font-weight: 300;
  line-height: 38rpx;
}

.card-watermark {
  position: absolute;
  right: 22rpx;
  bottom: 16rpx;
  width: 48rpx;
  height: 54rpx;
  opacity: 0.9;
}

.service-section {
  margin-top: 36rpx;
}

.section-title {
  display: block;
  font-size: 34rpx;
  line-height: 48rpx;
  font-weight: 600;
  color: #183663;
}

.service-list {
  display: flex;
  justify-content: space-between;
  margin-top: 24rpx;
}

.service-item {
  width: 190rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon-wrap {
  height: 104rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon {
  width: 92rpx;
  height: 104rpx;
}

.service-title {
  margin-top: 24rpx;
  color: #183663;
  font-size: 28rpx;
  line-height: 1em;
  font-weight: 500;
  white-space: nowrap;
}
</style>