aida_front/src/tool/guide.js

import { nextTick} from "vue";
import { driver } from "driver.js";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import "driver.js/dist/driver.css";
import store  from "../store/index";
import { Https } from "@/tool/https";
//版本一
import ENGLISH from '../lang/en'
import CHINESE_SIMPLIFIED from '../lang/cn'
import KOREAN from '../lang/kr'
import JAPANESE from '../lang/ja'
import RUSSIAN from '../lang/ru'
import FRENCH from '../lang/fr'
import THAI from '../lang/th'
import VIETNAMESE from '../lang/vn'
import ITALIAN from '../lang/it'
let longList = [
	{
		value:ENGLISH,
		name:'ENGLISH',
	},{
		value:CHINESE_SIMPLIFIED,
		name:'CHINESE_SIMPLIFIED',
	},{
		value:KOREAN,
		name:'KOREAN',
	},{
		value:JAPANESE,
		name:'JAPANESE',
	},{
		value:RUSSIAN,
		name:'RUSSIAN',
	},{
		value:FRENCH,
		name:'FRENCH',
	},{
		value:THAI,
		name:'THAI',
	},{
		value:VIETNAMESE,
		name:'VIETNAMESE',
	},{
		value:ITALIAN,
		name:'ITALIAN',
	},
]
let i18n = ENGLISH.guide
let driverIndex__ = 0
// let store = store
let element
let stepsLenth = 99
let data = {
	index:driverIndex__,
	driver:true,
	stepsLenth:stepsLenth
}
let driverObj__ = createDriver()
function createDriver(){
	return driver({
		steps: [
			{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
			{ element: '.Guide_1_27', popover: { title: '', description: i18n.guide1 } },
			{ element: '.Guide_1_28', popover: { title: '', description: i18n.guide2, side: "right", } },
			{ element: '.Guide_1_28', popover: { title: '', description: i18n.guide3, side: "right",align: 'end' } },
			{ element: '.Guide_1_29', popover: { title: '', description: i18n.guide4 } },
			{ element: '.Guide_1_1', popover: { title: '', description: i18n.guide5 } },
			{ element: '.Guide_1_1_2', popover: { title: '', description: i18n.guide6, side: "left",align: 'start' } },
			{ element: '.Guide_1_1_2', popover: { title: '', description: i18n.guide7 } },
			{ element: '.Guide_1_4', popover: { title: '', description: i18n.guide8 } },
			{ element: '.Guide_1_5', popover: { title: '', description: i18n.guide9 } },
			{ element: '.Guide_1_6', popover: { title: '', description: i18n.guide10 } },
	
			{ element: '.Guide_1_7', popover: { title: '', description: i18n.guide11 } },
			{ element: '.Guide_1_8', popover: { title: '', description: i18n.guide12 } },
			//以上moodboard
			{ element: '.Guide_1_2_1', popover: { title: '', description: i18n.guide13 } },
			{ element: '.Guide_1_2_2', popover: { title: '', description: i18n.guide14 } },
			{ element: '.Guide_1_2_3', popover: { title: '', description: i18n.guide15 } },
			{ element: '.Guide_1_2_4', popover: { title: '', description: i18n.guide16 } },
			{ element: '.Guide_1_2_5', popover: { title: '', description: i18n.guide17 } },
			{ element: '.Guide_1_2_6', popover: { title: '', description: i18n.guide18 } },
			{ element: '.Guide_1_2_7', popover: { title: '', description: i18n.guide19 } },
			{ element: '.Guide_1_2_8', popover: { title: '', description: i18n.guide20 } },
			{ element: '.Guide_1_2_9', popover: { title: '', description: i18n.guide21 } },
			{ element: '.Guide_1_8', popover: { title: '', description: i18n.guide22 } },
			{ element: '.Guide_1_10', popover: { title: '', description: i18n.guide23 } },
			{ element: '.Guide_1_11', popover: { title: '', description: i18n.guide24 } },
			{ element: '.Guide_1_11_1', popover: { title: '', description: i18n.guide25 } },
			{ element: '.Guide_1_11_2', popover: { title: '', description: i18n.guide26 } },
			{ element: '.Guide_1_8', popover: { title: '', description: i18n.guide27 } },
			{ element: '.Guide_1_9', popover: { title: '', description: i18n.guide28 } },
			{ element: '.Guide_1_9_1', popover: { title: '', description: i18n.guide29 } },
			{ element: '.Guide_1_9_2', popover: { title: '', description: i18n.guide30 } },
			{ element: '.Guide_1_13', popover: { title: '', description: i18n.guide31 } },
			{ element: '.Guide_1_13_1', popover: { title: '', description: i18n.guide32 } },
			{ element: '.Guide_1_13_2', popover: { title: '', description: i18n.guide33 } },
			{ element: '.Guide_1_14', popover: { title: '', description: i18n.guide34 } },
			//开始design
			{ element: '.Guide_1_15', popover: { title: '', description: i18n.guide35 } },
			{ element: '.Guide_1_16', popover: { title: '', description: i18n.guide36 } },
			{ element: '.Guide_1_17', popover: { title: '', description: i18n.guide37 } },
			{ element: '.Guide_1_30', popover: { title: '', description: i18n.guide38 } },
			{ element: '.Guide_1_16_1', popover: { title: '', description: i18n.guide39 } },
			{ element: '.Guide_1_17', popover: { title: '', description: i18n.guide40 } },
			{ element: '.Guide_1_19', popover: { title: '', description: i18n.guide41 } },
			{ element: '.Guide_1_20', popover: { title: '', description: i18n.guide42 } },
			{ element: '.Guide_1_21', popover: { title: '', description: i18n.guide43 } },
			{ element: '.Guide_1_22', popover: { title: '', description: i18n.guide44 } },
			{ element: '.Guide_1_23', popover: { title: '', description: i18n.guide45 } },
			{ element: '.Guide_1_25', popover: { title: '', description: i18n.guide46 ,side: "right",align: 'end' } },
			{ element: '.Guide_1_25_1', popover: { title: '', description: i18n.guide47 ,side: "right",align: 'end' } },
			{ element: '.Guide_1_26', popover: { title: '', description: i18n.guide48 } },
			{ element: '.Guide_1_31', popover: { title: '', description: i18n.guide49 } },
			{ element: '.Guide_1_32', popover: { title: '', description: i18n.guide50 } },
			{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: i18n.guide51 } },
		  ],
		//   showProgress: true,//控制总页数和当前页数是否显示
		allowClose:false,
		showButtons:false,
		stagePadding:10,//切口到元素的距离
		stageRadius:5,//切口圆弧度
		allowKeyboardControl:false,//控制是否可以键盘控制下一步
		disableActiveInteraction:false,//是否禁用显示元素的交互
		overlayOpacity:.4,
		overlay: true,
		// nextBtnText: '—›',
		// prevBtnText: '‹—',
		doneBtnText: '✕',
		onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
			// console.log(popover,options);
			stepsLenth = options.config.steps.length
			addClose()
			popover.previousButton.style.display = 'none'
			driverIndex__ = driverObj__.getState().activeIndex
			data = {
				index : driverIndex__,
				driver : true,
				stepsLenth:stepsLenth,
			}
			store?.commit("setGuide", data);
			if(options.state.activeIndex ==  0 ||
				options.state.activeIndex ==  39
			){
				popover.wrapper.style.display = 'none'
			}else{
				popover.wrapper.style.display = 'block'
			}
			if(options.state.activeIndex == 2){
				popover.wrapper.style.transform = 'translateY(11rem)'
				// options.config.stagePadding = 10
			}else if(options.state.activeIndex == 6 || options.state.activeIndex == 7){
				popover.wrapper.style.transform = 'translateY(4rem)'
			}else if(options.state.activeIndex == 46){
				popover.wrapper.style.transform = 'translateY(-6rem)'
			}else{
				popover.wrapper.style.transform = 'initial'
			}
			if(
				options.state.activeIndex >=  6 && options.state.activeIndex < 9 || 
				options.state.activeIndex >= 14 && options.state.activeIndex < 15 || 
				driverObj__.isLastStep()
			){
				popover.footer.style.display = 'block'
				popover.footerButtons.style.pointerEvents = 'auto';
			}else{
				popover.footer.style.display = 'none'
				popover.footerButtons.style.pointerEvents = 'none';
			}
			nextTick().then(()=>{
				if(element){
					element.classList.remove('Guide_')
				}
				element = options.state.activeElement
				element.classList.add('Guide_')
			})
		},
		//销毁前
		onDestroyStarted:()=>{
			setDestroy()
		},
		//销毁前
		onDestroyed:()=>{
		},
	});
} 
function addDiv(element){
	element.style.posiiton = 'relative'
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
	}else{
		const mask = document.createElement('div');
		mask.style.position = 'absolute';
		mask.style.top = '0';
		mask.style.left = '0';
		mask.style.width = '100%';
		mask.style.height = '100%';
		mask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		mask.style.zIndex = '9999';
		mask.classList.add('driver-mask__')
		element.appendChild(mask);
	}
}
function addClose(){
	const body = document.querySelector('body')
	const div = document.createElement('div');
	if(document.getElementsByClassName('driver-close__').length == 0){
		div.classList.add('driver-close__')
		div.innerText = '×'
		div.addEventListener('click',()=>{
			setDestroy()
		})
		body.appendChild(div)
	}
}
function removeClose(){
	const body = document.querySelector('body')
	if(document.getElementsByClassName('driver-close__').length > 0){
		let div = document.getElementsByClassName('driver-close__')[0]
		body.removeChild(div)
	}
}
function removeDiv(element){
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
		// element.removeChild(mask);
		mask.remove()
	}
}

const openGuide = () =>{
	let isTest = JSON.parse(getCookie('isTest'))
	let isBeginner = JSON.parse(getCookie('isBeginner'))
	// console.log(isBeginner);
	let isBeginnerNum = JSON.parse(getCookie('isBeginnerNum')?getCookie('isBeginnerNum'):'0')
	// console.log(isBeginner);
	if(isBeginner){
	// if(isBeginner && !isTest){
		if(isBeginnerNum){
			driverObj__.drive(isBeginnerNum);
		}else{
			driverObj__.drive(0);
		}
	}else{
		driverObj__.destroy();
		return
	}
	data = {
		index:driverIndex__,
		driver:true,
		stepsLenth:stepsLenth
	}
	// if(!store){
	// 	store = useStore()
	// }
	// driverObj__.moveTo(18);
	store?.commit("setGuide", data);
	// driverObj__.moveNext();
	// driverObj__.movePrevious();
}	
function setDestroy(){
	data = {
		index : driverIndex__,
		driver : false,
		stepsLenth:stepsLenth,
	}
	removeClose()

	store?.commit("setGuide", data);
	setCookie("isBeginner", false);
	driverObj__.destroy();//销毁方法
	let data_ = {}
	Https.axiosPost(Https.httpUrls.completeGuidancet, data_).then(
	).catch(res=>{
	});
}

function setLang(text){
	for (const item in longList) {
		if(longList[item].name == text){
			i18n = longList[item].value.guide
			createDriver()
		}
	}
}
export{
    openGuide,
	driverObj__,
	driverIndex__,
	setDestroy,
	setLang,
}