效果图

功能

移动端项目中，当用户想访问的内容层级比较深的时候，会有智能导诊模块，类似与客服聊天但并非真正的聊天（如im聊天），而是通过一些快捷选择将用户想要访问的内容迅速展示出来

项目中，需要根据项目情况看导诊的步骤具体有几步，并对样式及逻辑进行调整

实现

<template>
  <div class="intelligent-guide-page">
    <!-- 步骤条 -->
    <div class="step-wrapper fcb">
      <div v-for="(item, index) in stepList" :key="index" :class="['step-item fs24 fc', step >= item.value ? 'active' : '']" @click="skipTo(item)">
        {{ item.name }}
        <span v-if="item.value < 4">
          <img v-if="step >= item.value" src="@/assets/images/common/nav-arrow-active.png" alt="">
          <img v-else src="@/assets/images/common/nav-arrow.png" alt="">
        </span>
      </div>
    </div>
    <div ref="scrollRef" class="page-wrapper main-bg">
      <div v-for="(item, index) in chatHistory" :key="index" class="history-list">
        <div v-if="item.type === 'date'" class="time fs24 text-gray">
          {{ item.content }}
        </div>
        <!-- 客服聊天框 -->
        <div v-if="item.type === 'service'" class="service-chat flex">
          <img class="avatar" src="@/assets/images/common/chat-icon.png" alt="">
          <div class="main-info f-col">
            <span class="name fs24 c-dark">{{ item.name }}</span>
            <span class="chat-content bg-white fs28 c-dark">{{ item.content }}</span>
          </div>
        </div>
        <!-- 内容标签（筛选条件） -->
        <div v-if="item.type === 'tags'" class="search-tag">
          <p class="fs28 c-dark">{{ item.content }}</p>
          <div class="tag-list fw">
            <div v-for="(_item, _index) in item.tagList" :key="_index" class="tag-item fcc" @click="tagSelect(_item, item.tagsType)">
              {{ _item.name }}
            </div>
          </div>
        </div>
        <!-- 我的聊天框 -->
        <div v-if="item.type === 'mine'" class="mine-chat fe">   
          <div class="main-info f-col">
            <span class="name fs24 c-dark">{{ userInfo.nickName }}</span>
            <span class="chat-content bg-white fs28 c-dark">{{ item.content }}</span>
          </div>
          <img v-if="userInfo.avatar" class="avatar" :src="userInfo.avatar" alt="">
          <img v-else class="avatar" src="@/assets/images/common/avatar.png" alt="">
        </div>
        <!-- 项目列表（最终寻找的内容） -->
        <div v-if="item.type === 'project'" class="project-list">
          <ReservationItem v-for="_item in item.data" :key="_item.id" :doctor-id="doctorId" :data="_item" is-nav />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment';
import useUserInfo from '@/stores/userInfo.store';
import { 
  categoryList, 
  organizationList, 
  doctorList, 
  projectList,
} from '@/services/index.service';
import useTitle from '@/compositions/useTitle';

const title = useTitle('智能导诊');
const userInfo = ref({});
const userInfoStore = useUserInfo();
const step = ref(0);
const scrollRef = ref(null);
const stepList = ref([     // 操作步骤
  { value: 1, name: '选择项目' },
  { value: 2, name: '选择机构' },
  { value: 3, name: '选择医生' },
  { value: 4, name: '推荐项目' },
]);
const chatHistory = ref([
  { type: 'date', content: moment().format('YYYY年MM月DD日 HH:mm') },
]);

const categoryOneId = ref('');
const categoryTwoId = ref('');
const organizationId = ref('');
const doctorId = ref('');

userInfoStore.getUserInfo().then((res) => {
  userInfo.value = res;
});

// 获取一级项目列表
const getCategoryListOne = async () => {
  step.value = 1;
  chatHistory.value.push({
    name: '客服导诊',
    type: 'service',
    content: '您好，请根据指引进行选择，我们将会为您推荐合适的项目。',
  });

  const { data } = await categoryList({ categoryId: 0 });
  chatHistory.value.push({
    name: '',
    type: 'tags',
    content: '点击标签选择一级项目',
    tagsType: 'category1',
    tagList: data,
  });
};

// 获取二级项目列表
const getCategoryListTwo = async () => {
  step.value = 1;
  const { data } = await categoryList({ categoryId: categoryOneId.value });
  chatHistory.value.push({
    name: '',
    type: 'tags',
    content: '点击标签选择二级项目',
    tagsType: 'category2',
    tagList: data,
  });
};

// 获取机构列表
const getOrganList = async () => {
  step.value = 2;
  const { data } = await organizationList({ categoryId: categoryTwoId.value });
  chatHistory.value.push({
    name: '',
    type: 'tags',
    content: '点击标签选择机构',
    tagsType: 'organization',
    tagList: data,
  });
};

// 获取选择医生列表
const getDoctorList = async () => {
  step.value = 4;
  const { data } = await doctorList({ categoryId: categoryTwoId.value, organizationId: organizationId.value });
  chatHistory.value.push({
    name: '',
    type: 'tags',
    content: '点击标签选择医生',
    tagsType: 'doctor',
    tagList: data,
  });
};

// 获取项目列表
const getProjectList = async () => {
  step.value = 5;
  const { data } = await projectList({ categoryId: categoryTwoId.value, organizationId: organizationId.value, doctorId: doctorId.value });
  chatHistory.value.push({
    name: '客服导诊',
    type: 'service',
    content: '根据您的需求路径，为您推荐以下项目：',
  });

  setTimeout(() => {
    chatHistory.value.push({
      name: '',
      type: 'project',
      data,
    });
  }, 1000);
};

// 标签选择
const tagSelect = (tag, tagsType) => {
  chatHistory.value.pop();
  chatHistory.value.push({
    type: 'mine',
    content: tag.name,
  });

  switch (tagsType) {
  case 'category1':
    categoryOneId.value = tag.id;
    getCategoryListTwo();
    break;
  case 'category2':
    categoryTwoId.value = tag.id;
    getOrganList();
    break;
  case 'organization':
    organizationId.value = tag.id;
    getDoctorList();
    break;
  case 'doctor':
    doctorId.value = tag.id;
    getProjectList();
    break;
  default:
    break;
  }
};

const scrollToBottom = () => {   // 点击步骤条滚动到页面最下方位置
  setTimeout(() => {
    const scrollElem = scrollRef.value;
    scrollElem.scrollIntoView({
      behavior: 'smooth',
      block: 'end', 
      inline: 'nearest',
    });
  }, 500);
};

// 点击步骤条
const skipTo = (item) => {
  console.log(item.value >= step.value, step.value);
  if (item.value >= step.value) {
    return;
  }
  if (chatHistory.value[chatHistory.value.length - 1].type === 'tags') {
    chatHistory.value.pop();
  }
  switch (item.value) {
  case 1:
    getCategoryListOne();
    break;
  case 2:
    getOrganList();
    break;
  case 3:
    getDoctorList();
    break;
  case 4:
    getProjectList();
    break;
  default:
    break;
  }

  scrollToBottom();
};

onMounted(() => {
  getCategoryListOne();
});
</script>

<style lang="scss" scoped>
.intelligent-guide-page {
  .step-wrapper {
    padding: 10px 114px 20px;
    .step-item {
      color: rgba(#fff, 0.5);
      img {
        width: 18px;
        height: 20px;
        margin: 0 14px;
      }
      &.active {
        color: #fff;
      }
    }
  }
  .page-wrapper {
    min-height: calc(100vh - 235px);
    overflow-y: auto;
    .history-list {
      .time {
        text-align: center;
      }
      .avatar {
        width: 66px;
        height: 66px;
        flex-shrink: 0;
      } 
      .chat-content {
        padding: 18px 15px;
        margin-top: 14px;
        max-width: 536px;
        line-height: 38px;
      }
      .service-chat {
        margin-top: 34px;
        padding-left: 30px;
        img {
          margin-right: 20px;
        }
      }
      .mine-chat {
        padding-right: 30px;
        margin-top: 60px;
        .name {
          text-align: right;
        }
        img {
          margin-left: 20px;
        }
      }
    }
    .search-tag {
      margin-top: 80px;
      .tag-list {
        margin-top: 20px;
        .tag-item {
          min-width: 210px;
          padding: 0 30px;
          height: 60px;
          border-radius: 34px;
          font-size: 28px;
          color: #838B9A;
          border: 2px solid #CBCBCB;
          margin-bottom: 30px;
          margin-right: 19px;
          &.button-hover {
            background: linear-gradient(180deg, #2A83FE 0%, rgba(42,131,254,0.7) 100%);
            color: #fff;
            border: none;
          }
        }
      }
    }
    .project-list {
      .reservation-item {
        padding: 34px;
        background: #fff;
        border-radius: 16px;
        margin-top: 20px;
      }
    }
  }
}
</style>