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://picsum.photos/id/64/200/200" 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>
    
    <!-- 问诊历史 -->
    <view class="consultation-history">
      <view class="section-title">问诊历史</view>
      <view class="history-list">
        <navigator url="/pages/mine/consultation-detail/consultation-detail?id=1" class="history-item">
          <view class="item-left">
            <image src="https://picsum.photos/id/91/200/200" mode="aspectFill"></image>
          </view>
          <view class="item-middle">
            <view class="doctor-name">李医生</view>
            <view class="department">内科 | 主任医师</view>
            <view class="consultation-time">2023-05-15 10:30</view>
          </view>
          <view class="item-right">
            <view class="consultation-status completed">已完成</view>
          </view>
        </navigator>
        
        <navigator url="/pages/mine/consultation-detail/consultation-detail?id=2" class="history-item">
          <view class="item-left">
            <image src="https://picsum.photos/id/65/200/200" mode="aspectFill"></image>
          </view>
          <view class="item-middle">
            <view class="doctor-name">王医生</view>
            <view class="department">儿科 | 副主任医师</view>
            <view class="consultation-time">2023-05-10 14:45</view>
          </view>
          <view class="item-right">
            <view class="consultation-status completed">已完成</view>
          </view>
        </navigator>
        
        <navigator url="/pages/mine/consultation-detail/consultation-detail?id=3" class="history-item">
          <view class="item-left">
            <image src="https://picsum.photos/id/62/200/200" mode="aspectFill"></image>
          </view>
          <view class="item-middle">
            <view class="doctor-name">张医生</view>
            <view class="department">骨科 | 主治医师</view>
            <view class="consultation-time">2023-05-05 09:15</view>
          </view>
          <view class="item-right">
            <view class="consultation-status completed">已完成</view>
          </view>
        </navigator>
      </view>
      <navigator url="/pages/mine/all-history/all-history" class="view-all">
        查看全部
        <text class="iconfont icon-arrow-right"></text>
      </navigator>
    </view>
    
    <!-- 账户设置 -->
    <view class="account-settings">
      <navigator url="/pages/mine/settings/settings" class="setting-item">
        <view class="item-icon">
          <text class="iconfont icon-settings"></text>
        </view>
        <view class="item-text">账户设置</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <navigator url="/pages/mine/help/help" class="setting-item">
        <view class="item-icon">
          <text class="iconfont icon-help"></text>
        </view>
        <view class="item-text">帮助与反馈</view>
        <view class="item-arrow">
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </navigator>
      
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        id: '123456789',
        avatar: 'https://picsum.photos/id/64/200/200'
      },
      healthStats: {
        heartRate: 72,
        bloodPressure: '120/80',
        weight: '65kg'
      },
      consultationHistory: [
        {
          id: 1,
          doctorName: '李医生',
          department: '内科 | 主任医师',
          time: '2023-05-15 10:30',
          status: 'completed',
          avatar: 'https://picsum.photos/id/91/200/200'
        },
        {
          id: 2,
          doctorName: '王医生',
          department: '儿科 | 副主任医师',
          time: '2023-05-10 14:45',
          status: 'completed',
          avatar: 'https://picsum.photos/id/65/200/200'
        },
        {
          id: 3,
          doctorName: '张医生',
          department: '骨科 | 主治医师',
          time: '2023-05-05 09:15',
          status: 'completed',
          avatar: 'https://picsum.photos/id/62/200/200'
        }
      ]
    }
  },
  methods: {
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储的用户信息
            uni.removeStorageSync('userInfo');
            // 跳转到登录页面
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  },
  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>