633 lines
15 KiB
Vue
633 lines
15 KiB
Vue
<template>
|
||
<uni-nav-bar title="我的" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
|
||
<view class="page">
|
||
|
||
|
||
<!-- 用户信息卡片 -->
|
||
<view class="user-card">
|
||
<view class="user-info">
|
||
<image class="avatar" src="/static/avatar_default.png" mode="aspectFill"></image>
|
||
<text class="username">邹建东</text>
|
||
</view>
|
||
|
||
<!-- 统计数据 -->
|
||
<view class="stats-section">
|
||
<view class="stats-item">
|
||
<text class="stats-number">5</text>
|
||
<text class="stats-label">随访患者数</text>
|
||
</view>
|
||
<view class="stats-item">
|
||
<text class="stats-number">0</text>
|
||
<text class="stats-label">公益咨询数</text>
|
||
</view>
|
||
<view class="stats-item">
|
||
<text class="stats-number">0</text>
|
||
<text class="stats-label">患者送花数</text>
|
||
</view>
|
||
<view class="divder"></view>
|
||
<view class="signbox">
|
||
<view class="sign">签到</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 随访服务 -->
|
||
<view class="section">
|
||
<view class="section-title">随访服务</view>
|
||
<up-scroll-list indicatorActiveColor="#8B2316" indicatorWidth="40rpx" indicatorBarWidth="20rpx" class="service-grid">
|
||
<view class="service-item" @click="goToPage('patientAudit')">
|
||
<up-image :src="hzshImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>患者审核</text>
|
||
</view>
|
||
<view class="service-item" @click="goToPage('patientGroup')">
|
||
<up-image :src="hzfzImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>患者分组</text>
|
||
</view>
|
||
<view class="service-item" @click="goToPage('groupMessage')">
|
||
<up-image :src="qfxxImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>群发消息</text>
|
||
</view>
|
||
<view class="service-item" @click="goToPage('qrcode')">
|
||
<up-image :src="sfImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>随访二维码</text>
|
||
</view>
|
||
<view class="service-item" @click="goToPage('qrcode')">
|
||
<up-image :src="czjhImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>出诊计划</text>
|
||
</view>
|
||
</up-scroll-list>
|
||
|
||
</view>
|
||
|
||
<!-- 学习进步 -->
|
||
<view class="section">
|
||
<view class="section-title">学习进步</view>
|
||
<view class="learning-grid">
|
||
<view class="learning-item" @click="goToPage('myVideos')">
|
||
<up-image :src="wdspImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的视频</text>
|
||
</view>
|
||
<view class="learning-item" @click="goToPage('myCourses')">
|
||
<up-image :src="wdkcImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的课程</text>
|
||
</view>
|
||
<view class="learning-item" @click="goToPage('myDownloads')">
|
||
<up-image :src="wdxzImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的下载</text>
|
||
</view>
|
||
<view class="learning-item" @click="goToPage('myFavorites')">
|
||
<up-image :src="wdscImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的收藏</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账户明细 -->
|
||
<view class="section">
|
||
<view class="section-title">账户明细</view>
|
||
<up-scroll-list indicatorActiveColor="#8B2316" indicatorWidth="40rpx" indicatorBarWidth="20rpx" class="account-grid">
|
||
<view class="account-item" @click="goToPage('myAccount')">
|
||
<up-image :src="wdzzImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的账户</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myPoints')">
|
||
<up-image :src="wdjfImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的积分</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myBenefits')">
|
||
<up-image :src="wdflImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的福利</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myReviews')">
|
||
<up-image :src="wdxhImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>我的鲜花</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myReviews')">
|
||
<up-image :src="kjmxImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>课件明细</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myReviews')">
|
||
<up-image :src="kcmxImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>课程明细</text>
|
||
</view>
|
||
<view class="account-item" @click="goToPage('myReviews')">
|
||
<up-image :src="sxyImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>送心意</text>
|
||
</view>
|
||
</up-scroll-list>
|
||
</view>
|
||
|
||
<!-- 常用操作 -->
|
||
<view class="section">
|
||
<view class="section-title">常用操作</view>
|
||
<view class="operation-grid">
|
||
<view class="operation-item" @click="goToPage('wechatUnbind')">
|
||
<up-image :src="wxjbImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>微信解绑</text>
|
||
</view>
|
||
<view class="operation-item" @click="goToPage('changePhone')">
|
||
<up-image :src="ghsjhImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>更换手机号</text>
|
||
</view>
|
||
<view class="operation-item" @click="goToPage('notifications')">
|
||
<up-image :src="tzykImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>通知已开</text>
|
||
</view>
|
||
<view class="operation-item" @click="showVersion">
|
||
<up-image :src="versionImg" width="48rpx" height="48rpx" ></up-image>
|
||
<text>V4.1.4</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="setbox">
|
||
<!-- 福利卡兑换 -->
|
||
<view class="sectioncell benefit-section">
|
||
<view class="benefit-item" @click="goToPage('benefitExchange')">
|
||
<view class="benefit-icon">
|
||
<up-image :src="fulicard" width="48rpx" height="48rpx"></up-image>
|
||
</view>
|
||
<view class="benefit-content">
|
||
<text class="benefit-title">福利卡兑换</text>
|
||
</view>
|
||
<view class="benefit-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 发票管理 -->
|
||
<view class="sectioncell invoice-section">
|
||
<view class="invoice-item" @click="goToPage('invoiceManage')">
|
||
<view class="invoice-icon">
|
||
<up-image :src="fpgl" width="48rpx" height="48rpx"></up-image>
|
||
</view>
|
||
<view class="invoice-content">
|
||
<text class="invoice-title">发票管理</text>
|
||
</view>
|
||
<view class="invoice-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 常用银行卡 -->
|
||
<view class="sectioncell bank-section">
|
||
<view class="bank-item" @click="goToPage('bankCard')">
|
||
<view class="bank-icon">
|
||
<up-image :src="cyyhk" width="48rpx" height="48rpx"></up-image>
|
||
</view>
|
||
<view class="bank-content">
|
||
<text class="bank-title">常用银行卡</text>
|
||
</view>
|
||
<view class="bank-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设置与帮助 -->
|
||
<view class="sectioncell settings-section">
|
||
<view class="settings-item" @click="goToPage('settings')">
|
||
<view class="settings-icon">
|
||
<up-image :src="settingImg" width="48rpx" height="48rpx"></up-image>
|
||
</view>
|
||
<view class="settings-content">
|
||
<text class="settings-title">设置与帮助</text>
|
||
</view>
|
||
<view class="settings-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 年度总结悬浮按钮 -->
|
||
<view class="year-summary-btn" @click="showYearSummary">
|
||
<view class="year-text">2024</view>
|
||
<view class="summary-text">年度总结</view>
|
||
</view>
|
||
|
||
<!-- 底部导航栏 -->
|
||
<CustomTabbar></CustomTabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
|
||
import { ref } from 'vue';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import hzshImg from "@/static/hzsh.png"
|
||
import hzfzImg from "@/static/hzfz.png"
|
||
import qfxxImg from "@/static/qfxz.png"
|
||
import sfImg from "@/static/sfewm.png"
|
||
import czjhImg from "@/static/czjh.png"
|
||
import wdspImg from "@/static/wdsp.png"
|
||
import wdkcImg from "@/static/wdkc.png"
|
||
import wdxzImg from "@/static/wdxz.png"
|
||
import wdscImg from "@/static/wdsc.png"
|
||
import wdzzImg from "@/static/wdzh.png"
|
||
import wdjfImg from "@/static/wdjf.png"
|
||
import wdflImg from "@/static/wdfl.png"
|
||
import wdxhImg from "@/static/wdxh.png"
|
||
import kjmxImg from "@/static/kjmx.png"
|
||
import kcmxImg from "@/static/kcmx.png"
|
||
import sxyImg from "@/static/sxy.png"
|
||
import wxjbImg from "@/static/wxjb.png"
|
||
import ghsjhImg from "@/static/ghsjh.png"
|
||
import tzykImg from "@/static/xxtx.png"
|
||
import versionImg from "@/static/fxxbb.png"
|
||
|
||
|
||
import fulicard from "@/static/fulicard.png"
|
||
import fpgl from "@/static/fpgl.png"
|
||
import cyyhk from "@/static/cyhhk.png"
|
||
import settingImg from "@/static/setting.png"
|
||
// 响应式数据
|
||
const isLargeFont = ref(false);
|
||
|
||
// 方法
|
||
const toggleFontSize = () => {
|
||
isLargeFont.value = !isLargeFont.value;
|
||
console.log('切换字体大小:', isLargeFont.value ? '大字版' : '普通版');
|
||
};
|
||
|
||
const checkin = () => {
|
||
console.log('签到');
|
||
uni.showToast({
|
||
title: '签到成功',
|
||
icon: 'success'
|
||
});
|
||
};
|
||
|
||
const goToPage = (page) => {
|
||
console.log('跳转到页面:', page);
|
||
// 根据页面名称进行跳转
|
||
switch(page) {
|
||
case 'index':
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
break;
|
||
case 'patientClass':
|
||
uni.switchTab({
|
||
url: '/pages_app/patientClass/patientClass'
|
||
});
|
||
break;
|
||
case 'benefitExchange':
|
||
uni.showToast({
|
||
title: '福利卡兑换功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'invoiceManage':
|
||
uni.showToast({
|
||
title: '发票管理功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'bankCard':
|
||
uni.showToast({
|
||
title: '常用银行卡功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'settings':
|
||
uni.showToast({
|
||
title: '设置与帮助功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
default:
|
||
uni.showToast({
|
||
title: '功能开发中',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
const showYearSummary = () => {
|
||
console.log('显示年度总结');
|
||
uni.showToast({
|
||
title: '年度总结功能开发中',
|
||
icon: 'none'
|
||
});
|
||
};
|
||
|
||
const showVersion = () => {
|
||
uni.showModal({
|
||
title: '版本信息',
|
||
content: '当前版本：V4.1.4',
|
||
showCancel: false
|
||
});
|
||
};
|
||
|
||
onShow(() => {
|
||
console.log('我的页面显示');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 颜色变量
|
||
$primary-color: #ff6b6b;
|
||
$theme-color: #8B2316;
|
||
$cyan-color: #00CED1;
|
||
$white: #fff;
|
||
$gray-bg: #f5f5f5;
|
||
$gray-light: #eee;
|
||
$gray-medium: #999;
|
||
$gray-dark: #666;
|
||
$text-color: #333;
|
||
|
||
// 尺寸变量
|
||
$border-radius: 8px;
|
||
$border-radius-small: 6px;
|
||
$padding: 15px;
|
||
$padding-small: 10px;
|
||
|
||
.page {
|
||
background-color: $gray-bg;
|
||
height: calc(100vh - 140rpx);
|
||
overflow-y: scroll;
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
|
||
// 用户信息卡片
|
||
.user-card {
|
||
|
||
background: url('@/static/big_background_my.png') no-repeat 0 0;
|
||
height:310rpx;
|
||
padding:0 30rpx;
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-bottom: 67rpx;
|
||
|
||
.user-info {
|
||
padding-top: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 10rpx;
|
||
|
||
}
|
||
|
||
.username {
|
||
color: $white;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.stats-section {
|
||
position: relative;
|
||
background-color: $white;
|
||
border-radius: $border-radius;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 20rpx;
|
||
.divder{
|
||
width:2rpx;
|
||
height:50rpx;
|
||
margin-top: 32rpx;
|
||
margin-left:10rpx;
|
||
margin-right: 150rpx;
|
||
background-color: #999;
|
||
}
|
||
.signbox{
|
||
position:absolute;
|
||
right:0;
|
||
top:54rpx;
|
||
width:160rpx;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
|
||
border-radius:30rpx 0 0 30rpx;
|
||
background:#fc564a url("@/static/qd1_bg.9.png")no-repeat 0 0;
|
||
background-size:57rpx 56rpx;
|
||
.sign{
|
||
margin-left: 60rpx;
|
||
font-size: 28rpx;
|
||
color:#fff;
|
||
}
|
||
}
|
||
.stats-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
|
||
.stats-number {
|
||
font-size: 48rpx;
|
||
|
||
color: $text-color;
|
||
}
|
||
|
||
.stats-label {
|
||
font-size: 24rpx;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.checkin-btn {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 30rpx;
|
||
background-color: $theme-color;
|
||
color: $white;
|
||
padding: 16rpx 24rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
// 通用section样式
|
||
.section {
|
||
background-color: $white;
|
||
margin: $padding-small;
|
||
border-radius: $border-radius;
|
||
padding: 26rpx;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
// 服务网格
|
||
.learning-grid,.operation-grid{
|
||
display: flex;
|
||
}
|
||
|
||
.service-item,
|
||
.learning-item,
|
||
.account-item,
|
||
.operation-item {
|
||
width: 130rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
padding: 20rpx;
|
||
|
||
text{
|
||
white-space: nowrap;
|
||
font-size: 26rpx;
|
||
color: $text-color;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.setbox{
|
||
margin:0 26rpx;
|
||
border-radius:20rpx;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
// 新增模块样式
|
||
.benefit-section,
|
||
.invoice-section,
|
||
.bank-section,
|
||
.settings-section {
|
||
|
||
border-radius: $border-radius;
|
||
margin-bottom: 0;
|
||
padding: 0;
|
||
|
||
.benefit-item,
|
||
.invoice-item,
|
||
.bank-item,
|
||
.settings-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 14rpx;
|
||
background-color: $white;
|
||
|
||
border-bottom:2rpx solid #efefef;
|
||
|
||
.benefit-icon,
|
||
.invoice-icon,
|
||
.bank-icon,
|
||
.settings-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.benefit-content,
|
||
.invoice-content,
|
||
.bank-content,
|
||
.settings-content {
|
||
flex: 1;
|
||
|
||
.benefit-title,
|
||
.invoice-title,
|
||
.bank-title,
|
||
.settings-title {
|
||
font-size: 26rpx;
|
||
color: $text-color;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.benefit-arrow,
|
||
.invoice-arrow,
|
||
.bank-arrow,
|
||
.settings-arrow {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 年度总结悬浮按钮
|
||
.year-summary-btn {
|
||
position: fixed;
|
||
bottom: 200rpx;
|
||
right: 0rpx;
|
||
width: 150rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(135deg, $cyan-color 0%, #20B2AA 100%);
|
||
border-radius: 60rpx 0 0 60rpx;
|
||
|
||
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
color: $white;
|
||
display: flex;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 206, 209, 0.3);
|
||
z-index: 999;
|
||
|
||
.year-text {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
width:70rpx;
|
||
height:70rpx;
|
||
display: flex;
|
||
margin-left: 5rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color:#3cc7c0;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.summary-text {
|
||
font-weight: bold;
|
||
width:50rpx;
|
||
margin-left: 10rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
// 底部导航栏
|
||
.bottom-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: $white;
|
||
display: flex;
|
||
border-top: 1px solid $gray-light;
|
||
padding: 16rpx 0;
|
||
z-index: 1000;
|
||
|
||
.nav-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 20rpx;
|
||
color: $gray-medium;
|
||
|
||
&.active {
|
||
color: $theme-color;
|
||
}
|
||
}
|
||
}
|
||
</style>
|