MedSmartApp/pages/mine/index.vue

<template>
  <view class="container">
    <!-- 顶部背景和用户信息 -->
    <view class="header-container">
      <view class="bg-gradient"></view>
      <view class="user-info">
        <view class="avatar">
          <image src="https://ts1.tc.mm.bing.net/th/id/OIP-C.OSFH3hIukHqh-qrOvIfUWgAAAA?w=166&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" mode="aspectFill"></image>
        </view>
        <view class="user-details">
          <view class="user-name">张三</view>
          <view class="user-id">ID: 123456789</view>
        </view>
        <navigator url="/pages/mine/profile/profile" class="edit-btn">
          <text class="iconfont icon-bianji"></text>
        </navigator>
      </view>
    </view>
    
    <!-- 功能导航 -->
    <view class="function-list">
      <navigator url="/pages/mine/medical-record/medical-record" class="function-item">
        <view class="item-icon">
          <text class="iconfont icon-a-1-24"></text>
        </view>
        <view class="item-text">我的病历</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <navigator url="/pages/mine/appointment/appointment" class="function-item">
        <view class="item-icon">
          <text class="iconfont icon-wodeyuyue"></text>
        </view>
        <view class="item-text">我的预约</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <navigator url="/pages/mine/prescription/prescription" class="function-item">
        <view class="item-icon">
          <text class="iconfont icon-dianzichufang"></text>
        </view>
        <view class="item-text">电子处方</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <navigator url="/pages/mine/health-report/health-report" class="function-item">
        <view class="item-icon">
          <text class="iconfont icon-Heath-Report"></text>
        </view>
        <view class="item-text">健康报告</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <navigator url="/pages/mine/medication/medication" class="function-item">
        <view class="item-icon">
          <text class="iconfont icon-yongyaotixing"></text>
        </view>
        <view class="item-text">用药提醒</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
    </view>
   
      
      <!-- <button class="logout-btn" @click="logout">退出登录</button> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        id: '123456789',
        avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.OSFH3hIukHqh-qrOvIfUWgAAAA?w=166&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
      },
      healthStats: {
        heartRate: 72,
        bloodPressure: '120/80',
        weight: '65kg'
      },
    }
  },
  methods: {
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储的用户信息
            uni.removeStorageSync('userInfo');
            // 跳转到登录页面
            uni.navigateTo({
              url: '/pages/login/index'
            });
          }
        }
      });
    }
  },
  onLoad() {
    // 页面加载时获取用户信息
    this.getUserInfo();
  },
  onShow() {
    // 页面显示时更新用户信息
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      // 从本地存储获取用户信息
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
    }
  }
}
</script>

<style lang="scss">
	@import '@/static/font/iconfont.css';
/* 基础样式 */
page {
  background-color: #f5f7fa;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

.container {
  padding-bottom: 100rpx;
}

/* 顶部背景和用户信息 */
.header-container {
  position: relative;
  height: 350rpx;
  overflow: hidden;
  
  .bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3498db, #2980b9);
  }
  
  .user-info {
    position: relative;
    z-index: 1;
    padding: 60rpx 40rpx;
    display: flex;
    align-items: center;
    
    .avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      overflow: hidden;
      border: 4rpx solid rgba(255, 255, 255, 0.5);
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .user-details {
      margin-left: 30rpx;
      
      .user-name {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
      }
      
      .user-id {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 10rpx;
      }
    }
    
    .edit-btn {
      margin-left: auto;
      color: #fff;
      font-size: 32rpx;
    }
  }
}

/* 健康数据卡片 */
.health-stats {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  background-color: #fff;
  margin-top: -60rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .stats-card {
    flex: 1;
    text-align: center;
    
    .stats-icon {
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      margin: 0 auto 15rpx;
      border-radius: 50%;
      color: #fff;
      font-size: 32rpx;
    }
    
    .stats-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .stats-label {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
  
  .stats-card:nth-child(1) .stats-icon {
    background-color: #ff6b6b;
  }
  
  .stats-card:nth-child(2) .stats-icon {
    background-color: #4ecdc4;
  }
  
  .stats-card:nth-child(3) .stats-icon {
    background-color: #1a535c;
  }
}

/* 功能导航 */
.function-list {
  margin-top: 30rpx;
  background-color: #fff;
  
  .function-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .item-icon {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #fff;
      font-size: 28rpx;
    }
    
    .item-text {
      margin-left: 30rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .item-arrow {
      margin-left: auto;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .function-item:nth-child(1) .item-icon {
    background-color: #4a90e2;
  }
  
  .function-item:nth-child(2) .item-icon {
    background-color: #50e3c2;
  }
  
  .function-item:nth-child(3) .item-icon {
    background-color: #f5a623;
  }
  
  .function-item:nth-child(4) .item-icon {
    background-color: #d0021b;
  }
  
  .function-item:nth-child(5) .item-icon {
    background-color: #7ed321;
  }
}

/* 问诊历史 */
.consultation-history {
  margin-top: 30rpx;
  background-color: #fff;
  padding-bottom: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f5f5f5;
  }
  
  .history-list {
    padding: 0 40rpx;
  }
  
  .history-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
    
    .item-left {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .item-middle {
      flex: 1;
      margin-left: 30rpx;
      
      .doctor-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
      
      .department {
        font-size: 24rpx;
        color: #666;
        margin-top: 8rpx;
      }
      
      .consultation-time {
        font-size: 22rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }
    
    .item-right {
      .consultation-status {
        padding: 8rpx 20rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
      
      .completed {
        color: #4cd964;
        background-color: rgba(76, 217, 100, 0.1);
      }
      
      .pending {
        color: #ff9500;
        background-color: rgba(255, 149, 0, 0.1);
      }
      
      .cancelled {
        color: #ff3b30;
        background-color: rgba(255, 59, 48, 0.1);
      }
    }
  }
  
  .view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #4a90e2;
    
    .icon-arrow-right {
      margin-left: 10rpx;
    }
  }
}

/* 账户设置 */
.account-settings {
  margin-top: 30rpx;
  background-color: #fff;
  
  .setting-item {
    display: flex;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 2rpx solid #f5f5f5;
    
    .item-icon {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #fff;
      font-size: 28rpx;
    }
    
    .item-text {
      margin-left: 30rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .item-arrow {
      margin-left: auto;
      color: #999;
      font-size: 24rpx;
    }
  }
  
  .setting-item:nth-child(1) .item-icon {
    background-color: #7986cb;
  }
  
  .setting-item:nth-child(2) .item-icon {
    background-color: #4fc3f7;
  }
  
  .logout-btn {
    margin: 40rpx;
    background-color: #ff3b30;
    color: #fff;
    font-size: 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
  }
}

/* 图标样式 */
@font-face {
  font-family: 'iconfont';
  src: url('https://at.alicdn.com/t/font_1797472_r754c57n48d.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
  content: "\e601";
}

.icon-heartbeat:before {
  content: "\e602";
}

.icon-blood-pressure:before {
  content: "\e603";
}

.icon-weight:before {
  content: "\e604";
}

.icon-medical-record:before {
  content: "\e605";
}

.icon-appointment:before {
  content: "\e606";
}

.icon-prescription:before {
  content: "\e607";
}

.icon-health-report:before {
  content: "\e608";
}

.icon-medication:before {
  content: "\e609";
}

.icon-settings:before {
  content: "\e60a";
}

.icon-help:before {
  content: "\e60b";
}

.icon-arrow-right:before {
  content: "\e60c";
}
</style>