electripper-v2-ui/src/utils/guide.js

/**
 * 用户引导
 */

import store from "@/store";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export function startGuide(guideKey) {
  let guides = store.getters.guides;
  if (guides == null || !guides.includes(guideKey)) {
    let guide = guideSet[guideKey];
    if (guide) {
      guide.start();
    }
  }
}

const guideSet = {
  MchIndex: {
    start() {
      const driverObj = driver({
        showProgress: true,
        animate: true,
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        closeBtnText: '关闭',
        allowClose: false,
        onDestroyed: () => {
          // 导览完成后调用接口
          store.dispatch("ADD_GUIDES", "MchIndex");
        },
        steps: [
          {
            popover: {
              title: '欢迎使用小鹿骑行管理系统',
              description: '接下来我们将带您了解系统的主要功能区域',
              side: "center",
              align: 'center'
            }
          },
          {
            element: '#mch-stat',
            popover: {
              title: '运营统计',
              description: '这里显示您的运营数据统计信息，包括订单数量、金额等关键指标。',
              side: "bottom",
              align: 'start'
            }
          },
          {
            element: '#device-stat',
            popover: {
              title: '车辆统计',
              description: '这里展示设备相关的统计信息，包括设备总数、在线状态等。',
              side: "bottom",
              align: 'start'
            }
          },
          {
            element: '#order-daily-stat',
            popover: {
              title: '每日流水统计',
              description: '这里展示每日的订单流水统计图表，帮助您了解业务趋势。',
              side: "left",
              align: 'start'
            }
          },
          {
            element: '#balance-panel',
            popover: {
              title: '账户信息',
              description: '这里显示您的账户余额、待分润金额等信息，方便您随时查看收益情况。',
              side: "right",
              align: 'start'
            }
          },
          {
            popover: {
              title: '小程序管理',
              description: `
                <div>
                  <p>您还可以通过小鹿骑行小程序随时随地管理您的业务，扫码即可体验。</p>
                  <img src="https://api.ccttiot.com/gh_fe8a3740ae9a_1280-1745824336524.jpg" style="width: 100%; height: auto; margin: 10px auto;position:relative;" />
                </div>
              `,
              side: "center",
              align: 'center'
            }
          }
        ]
      });

      driverObj.drive();
    }
  },
  AreaSubEdit: {
    start() {
      const driverObj = driver({
        showProgress: true,
        animate: true,
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        closeBtnText: '关闭',
        allowClose: false,
        onDestroyed: () => {
          store.dispatch("ADD_GUIDES", "AreaSubEdit");
        },
        steps: [
          {
            popover: {
              title: '子区域管理',
              description: '欢迎使用子区域管理功能，这里您可以管理运营区下的子区域和电子围栏。',
              side: "center",
              align: 'center'
            }
          },
          {
            element: '.sub-area-list',
            popover: {
              title: '子区域列表',
              description: '左侧显示当前运营区下的所有子区域列表，您可以在这里查看和管理子区域。',
              side: "right",
              align: 'start'
            }
          },
          {
            element: '.map-container',
            popover: {
              title: '地图操作区',
              description: '地图区域是您的主要操作区域，您可以在这里进行以下操作：管理子区域、修改电子围栏、查看区域详情。',
              side: "left",
              align: 'start'
            }
          },
          {
            element: '.address-search',
            popover: {
              title: '地址搜索',
              description: '点击此处可以搜索地址，方便您找到需要绘制的区域',
              side: "left",
              align: 'start'
            }
          },
          {
            element: '#add-sub',
            popover: {
              title: '新增子区域',
              description: '点击按钮，即可开始在地图上绘制区域（停车区、禁行区、禁停区）',
              side: "left",
              align: 'start'
            }
          },
          {
            element: '#area-edit',
            popover: {
              title: '电子围栏操作',
              description: '点击此处可以编辑电子围栏',
              side: "left",
              align: 'start'
            }
          },
        ]
      });

      driverObj.drive();
    }
  }
}