upd 个人中心页面
This commit is contained in:
zhuwanli
@@ -1,52 +1,318 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
<view class="container">
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="swiper-container" autoplay circular indicator-dots>
|
||||
<swiper-item v-for="(item, index) in swiperList" :key="index">
|
||||
<image :src="item.image" mode="aspectFill" class="swiper-image"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- 用户信息栏 -->
|
||||
<!-- <view class="user-card">
|
||||
<view class="user-info">
|
||||
<view class="user-info-left">
|
||||
<image class="avatar" src="/static/images/user.png"></image>
|
||||
</view>
|
||||
<text class="name">{{ currentPatient.name }}</text>
|
||||
<text class="switch" @click="switchPatient">切换就诊人 ></text>
|
||||
</view>
|
||||
<text class="patient-id">就诊号：{{ currentPatient.id }}</text>
|
||||
</view> -->
|
||||
<view class="user-card">
|
||||
<view class="user-info-left">
|
||||
<image class="avatar" src="/static/images/user.png"></image>
|
||||
<text class="name">{{ currentPatient.name }}</text>
|
||||
<text class="switch-patient" @click="switchPatient">切换就诊人 ></text>
|
||||
</view>
|
||||
<text class="patient-id">就诊号：{{ currentPatient.id }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 功能宫格区域 -->
|
||||
<scroll-view scroll-y class="main-content">
|
||||
<view class="grid-container">
|
||||
<view class="section-title">医院服务</view>
|
||||
<view class="grid-row">
|
||||
<view v-for="(item, index) in firstRow" :key="index" class="grid-item"
|
||||
@click="handleFunction(item)">
|
||||
<image class="icon" :src="item.icon" mode="aspectFit" />
|
||||
<text class="label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-row">
|
||||
<view v-for="(item, index) in secondRow" :key="index" class="grid-item"
|
||||
@click="handleFunction(item)">
|
||||
<image class="icon" :src="item.icon" mode="aspectFit" />
|
||||
<text class="label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="service-grid">
|
||||
<view v-for="(item, index) in hospitalServices" :key="index" class="service-item">
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive
|
||||
} from 'vue';
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello666'
|
||||
}
|
||||
// 轮播图数据
|
||||
const swiperList = ref([{
|
||||
image: '/static/shouye/lunbotu1.png'
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
{
|
||||
image: '/static/shouye/lunbotu2.png'
|
||||
},
|
||||
methods: {
|
||||
|
||||
{
|
||||
image: '/static/shouye/lunbotu1.png'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
]);
|
||||
// 当前就诊人信息
|
||||
const currentPatient = reactive({
|
||||
name: '张三',
|
||||
id: '123456'
|
||||
});
|
||||
|
||||
<style>
|
||||
.content {
|
||||
|
||||
// 功能配置（示例数据）
|
||||
const firstRow = ref([{
|
||||
label: '健康码',
|
||||
icon: '/static/icons/health-code.png',
|
||||
path: '/pages/health-code'
|
||||
},
|
||||
{
|
||||
label: '预约挂号',
|
||||
icon: '/static/icons/appointment.png',
|
||||
path: '/pages/appointment'
|
||||
},
|
||||
{
|
||||
label: '当日挂号',
|
||||
icon: '/static/icons/today-reg.png',
|
||||
path: '/pages/today-reg'
|
||||
},
|
||||
{
|
||||
label: '门诊缴费',
|
||||
icon: '/static/icons/payment.png',
|
||||
path: '/pages/payment'
|
||||
}
|
||||
]);
|
||||
|
||||
const secondRow = ref([{
|
||||
label: '查看报告',
|
||||
icon: '/static/icons/report.png',
|
||||
path: '/pages/report'
|
||||
},
|
||||
{
|
||||
label: '就诊记录',
|
||||
icon: '/static/icons/record.png',
|
||||
path: '/pages/records'
|
||||
},
|
||||
{
|
||||
label: '科室查询',
|
||||
icon: '/static/icons/department.png',
|
||||
path: '/pages/department'
|
||||
},
|
||||
{
|
||||
label: '医生查询',
|
||||
icon: '/static/icons/doctor.png',
|
||||
path: '/pages/doctor'
|
||||
}
|
||||
]);
|
||||
|
||||
// 医院服务
|
||||
const hospitalServices = ref([
|
||||
'医院介绍',
|
||||
'国粹中医',
|
||||
'惠民政策',
|
||||
'特色疗法'
|
||||
]);
|
||||
|
||||
// 底部导航
|
||||
const tabItems = ref([{
|
||||
text: '首页',
|
||||
icon: '/static/tabs/home.png',
|
||||
selectedIcon: '/static/tabs/home-active.png'
|
||||
},
|
||||
{
|
||||
text: '健康卡',
|
||||
icon: '/static/tabs/health-card.png',
|
||||
selectedIcon: '/static/tabs/health-card-active.png'
|
||||
},
|
||||
{
|
||||
text: '个人中心',
|
||||
icon: '/static/tabs/profile.png',
|
||||
selectedIcon: '/static/tabs/profile-active.png'
|
||||
}
|
||||
]);
|
||||
|
||||
const activeTab = ref(0);
|
||||
|
||||
// 切换就诊人
|
||||
const switchPatient = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/patient/switch'
|
||||
});
|
||||
};
|
||||
|
||||
// 处理功能点击
|
||||
const handleFunction = (item) => {
|
||||
if (item.path) {
|
||||
uni.navigateTo({
|
||||
url: item.path
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 切换底部导航
|
||||
const switchTab = (index) => {
|
||||
activeTab.value = index;
|
||||
// 实际项目应使用路由跳转
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
/* background: linear-gradient(135deg, #6eb4ff, #007aff); */
|
||||
padding: 30rpx;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.switch {
|
||||
padding-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
/* text-decoration: underline; */
|
||||
}
|
||||
|
||||
.patient-id {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
padding-top: 1vh;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 23%;
|
||||
background: white;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
background: #f8f8f8;
|
||||
padding: 30rpx;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
height: 100rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
.tab-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.active {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user