433 lines
9.6 KiB
Vue
433 lines
9.6 KiB
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>
|