rtim/pages/user/index1.vue

<template>
  <view class="friend-page">
    <!-- 顶部导航 -->
    <u-navbar title="好友信息" :back-icon="true" bg-color="#fff"></u-navbar>

    <!-- 用户信息头部 -->
    <view class="user-box">
      <view class="avatar">
        <image src="https://via.placeholder.com/120" mode="widthFix"></image>
      </view>
      <view class="info">
        <view class="name">
          <text>王小明</text>
          <u-tag text="AI在线" type="primary" size="mini" plain></u-tag>
        </view>
        <view class="uid">U405430201</view>
        <view class="hospital">
          <u-icon name="location" color="#FF6A00" size="28"></u-icon>
          <text>御君方互联网医院(张三)</text>
        </view>
      </view>
    </view>

    <!-- 功能按钮区 -->
    <view class="action-grid">
      <view class="action-item" @click="createGroup">
        <u-icon name="add" color="#FF9A76" size="36"></u-icon>
        <text>创建群聊</text>
      </view>
      <view class="action-item" @click="setRemark">
        <u-icon name="edit" color="#FF9A76" size="36"></u-icon>
        <text>设置备注</text>
      </view>
      <view class="action-item" @click="extendChat">
        <u-icon name="chat" color="#FF9A76" size="36"></u-icon>
        <text>延长人工对话</text>
      </view>
      <view class="action-item" @click="pinUser">
        <u-icon name="top" color="#FF9A76" size="36"></u-icon>
        <text>置顶联系人</text>
      </view>
    </view>

    <!-- 近7天看课记录 -->
    <view class="card">
      <view class="card-header">
        <text class="title">近7天看课记录</text>
        <view class="right">
          <u-switch v-model="colorBlind" size="mini"></u-switch>
          <text class="tips">色盲模式</text>
          <text class="more" @click="goMore">更多详情 ></text>
        </view>
      </view>

      <!-- 图例 -->
      <view class="legend">
        <view class="item"><view class="dot gray"></view><text>未看课</text></view>
        <view class="item"><view class="dot blue"></view><text>看课中</text></view>
        <view class="item"><view class="dot green"></view><text>完课</text></view>
        <view class="item"><view class="dot red"></view><text>待看课</text></view>
        <view class="item"><view class="dot yellow"></view><text>看课中断</text></view>
      </view>

      <!-- 日期状态 -->
      <view class="date-list">
        <view class="date-item" v-for="(item, idx) in 7" :key="idx">
          <text>{{ 15 + idx }}</text>
          <view class="circle" :class="recordList[idx]"></view>
        </view>
      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">用户信息</text>
        <text class="edit" @click="editInfo">
          <u-icon name="edit" size="24" color="#999"></u-icon>
          修改用户信息
        </text>
      </view>

      <view class="info-list">
        <view class="info-item" v-for="(item, idx) in infoData" :key="idx">
          <text class="label">{{ item.label }}</text>
          <text class="value">{{ item.value }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      colorBlind: false,
      // 状态：gray未看 blue看课中 green完课 red待看 yellow中断
      recordList: ['gray', 'gray', 'blue', 'green', 'gray', 'red', 'yellow'],
      infoData: [
        { label: '姓名', value: '未知' },
        { label: '性别', value: '男' },
        { label: '年龄', value: '58' },
        { label: '行为习惯', value: '无' },
        { label: '患病时间', value: '无' },
        { label: '疾病', value: '气血不足、失眠健忘' },
        { label: '家人的疾病', value: '无' },
        { label: '是否线下就诊', value: '否' },
        { label: '体质', value: '阴虚体' },
        { label: '使用药物', value: '无' },
        { label: '咨询产品', value: '无' },
        { label: '是否已经购买产品', value: '否' },
      ]
    }
  },
  methods: {
    createGroup() {},
    setRemark() {},
    extendChat() {},
    pinUser() {},
    goMore() {},
    editInfo() {}
  }
}
</script>

<style scoped>
.friend-page {
  background: #f5f6f7;
  min-height: 100vh;
}

/* 用户头部 */
.user-box {
  display: flex;
  padding: 30rpx;
  background: #fff;
  align-items: center;
  margin-bottom: 20rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 24rpx;
}
.avatar image {
  width: 100%;
  height: 100%;
}
.info {
  flex: 1;
}
.name {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
}
.name text {
  margin-right: 16rpx;
}
.uid {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 12rpx;
}
.hospital {
  display: flex;
  align-items: center;
  color: #ff6a00;
  font-size: 28rpx;
}

/* 功能按钮 */
.action-grid {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}
.action-item text {
  margin-top: 12rpx;
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
}
.right {
  display: flex;
  align-items: center;
}
.tips {
  font-size: 24rpx;
  color: #999;
  margin: 0 16rpx;
}
.more {
  font-size: 26rpx;
  color: #999;
}
.edit {
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
}

/* 图例 */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}
.item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}
.dot {
  width: 28rpx;
  height: 28rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
}
.gray { background: #8c8c8c; }
.blue { background: #1890ff; }
.green { background: #52c41a; }
.red { background: #ff4d4f; }
.yellow { background: #ffc107; }

/* 日期状态 */
.date-list {
  display: flex;
  justify-content: space-between;
}
.date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
  color: #666;
}
.circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-top: 16rpx;
}

/* 用户信息列表 */
.info-list {
  border-top: 1rpx solid #f0f0f0;
}
.info-item {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 28rpx;
}
.label {
  color: #666;
}
.value {
  color: #333;
}
</style>