289 lines
10 KiB
JavaScript
289 lines
10 KiB
JavaScript
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_99', popover: { title: 'Begin Your Design', description: i18n.guide50 } },
|
||
],
|
||
// 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 && !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,
|
||
} |