|
|
@@ -6,6 +6,7 @@ import { getImage } from "./images";
|
|
|
import { getQuery } from "/src/utils/queryString";
|
|
|
|
|
|
export default defineComponent({
|
|
|
+<<<<<<< Updated upstream
|
|
|
name: "aiTeacher-guide",
|
|
|
emits: ["close"],
|
|
|
setup(props, { emit }) {
|
|
|
@@ -196,4 +197,215 @@ export default defineComponent({
|
|
|
</Popup>
|
|
|
);
|
|
|
},
|
|
|
+=======
|
|
|
+ name: "aiTeacher-guide",
|
|
|
+ emits: ["close"],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const data = reactive({
|
|
|
+ box: {},
|
|
|
+ show: false,
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ eleRect: {
|
|
|
+ left: '5rem',
|
|
|
+ top: '-3rem'
|
|
|
+ },
|
|
|
+ img: getImage("aiTeacher1.png"),
|
|
|
+ imgStyle: {
|
|
|
+ width: "6.48rem",
|
|
|
+ height: "3rem",
|
|
|
+ },
|
|
|
+ btnsStyle: {
|
|
|
+ bottom: ".9rem",
|
|
|
+ left: "1.7rem",
|
|
|
+ },
|
|
|
+ boxStyle:{
|
|
|
+ borderRadius: '40px',
|
|
|
+ transform: 'scale(1)'
|
|
|
+
|
|
|
+ },
|
|
|
+ eleRectPadding: {
|
|
|
+ left: 14,
|
|
|
+ top: 14,
|
|
|
+ width: 28,
|
|
|
+ height: 28
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: getImage("aiTeacher2.png"),
|
|
|
+ eleRect: {
|
|
|
+ top: '-3rem'
|
|
|
+ },
|
|
|
+ imgStyle: {
|
|
|
+ left:'-0.7rem',
|
|
|
+ width: "6.48rem",
|
|
|
+ height: "3.01rem",
|
|
|
+ },
|
|
|
+ btnsStyle: {
|
|
|
+ bottom: ".9rem",
|
|
|
+ left: "1rem",
|
|
|
+ },
|
|
|
+ boxStyle:{
|
|
|
+ borderRadius: '40px',
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: getImage("aiTeacher3.png"),
|
|
|
+ eleRect: {
|
|
|
+ top: '-3rem'
|
|
|
+ },
|
|
|
+ imgStyle: {
|
|
|
+ left:'-0.7rem',
|
|
|
+ width: "6.48rem",
|
|
|
+ height: "3rem",
|
|
|
+ },
|
|
|
+ btnsStyle: {
|
|
|
+ bottom: ".9rem",
|
|
|
+ left: "1rem",
|
|
|
+ },
|
|
|
+ boxStyle:{
|
|
|
+ borderRadius: '40px',
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: getImage("aiTeacher4.png"),
|
|
|
+ eleRect: {
|
|
|
+ top: '-3rem',
|
|
|
+ left: '-1rem'
|
|
|
+ },
|
|
|
+ imgStyle: {
|
|
|
+ width: "6.48rem",
|
|
|
+ height: "3.01rem",
|
|
|
+ },
|
|
|
+ btnsStyle: {
|
|
|
+ bottom: ".9rem",
|
|
|
+ left: "1.7rem",
|
|
|
+ "justify-content": "center",
|
|
|
+ padding: 0,
|
|
|
+ },
|
|
|
+ boxStyle:{
|
|
|
+ borderRadius: '40px',
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ step: 0,
|
|
|
+ });
|
|
|
+
|
|
|
+ const tipShow = ref(false);
|
|
|
+ const guideInfo = localStorage.getItem("guideInfo");
|
|
|
+ const query: any = getQuery();
|
|
|
+ if ((guideInfo && JSON.parse(guideInfo).teacherBottom) || !query.showGuide) {
|
|
|
+ tipShow.value = false;
|
|
|
+ } else {
|
|
|
+ tipShow.value = true;
|
|
|
+ }
|
|
|
+ const steps = ['modeType-box', 'modeType-0', 'modeType-1', 'modeType-2']
|
|
|
+ const getStepELe = () => {
|
|
|
+ console.log(steps[data.step]);
|
|
|
+ const ele: HTMLElement = document.getElementById(steps[data.step])!;
|
|
|
+ if (ele) {
|
|
|
+ const eleRect = ele.getBoundingClientRect();
|
|
|
+
|
|
|
+ const left = data.steps[data.step].eleRectPadding?.left || 0;
|
|
|
+ const top = data.steps[data.step].eleRectPadding?.top || 0;
|
|
|
+ const width = data.steps[data.step].eleRectPadding?.width || 0;
|
|
|
+ const height = data.steps[data.step].eleRectPadding?.height || 0;
|
|
|
+ data.box = {
|
|
|
+ left: eleRect.x - left + 'px',
|
|
|
+ top: eleRect.y - top + 'px',
|
|
|
+ width: eleRect.width + width + 'px',
|
|
|
+ height: eleRect.height + height + 'px'
|
|
|
+ };
|
|
|
+ console.log(`coai-${data.step}`, data.box);
|
|
|
+ }else{
|
|
|
+ handleNext()
|
|
|
+ }
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ getStepELe();
|
|
|
+ });
|
|
|
+ const handleNext = () => {
|
|
|
+ if (data.step >= 3) {
|
|
|
+ endGuide();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ data.step = data.step + 1;
|
|
|
+ getStepELe();
|
|
|
+ };
|
|
|
+
|
|
|
+ const endGuide = () => {
|
|
|
+ let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
|
|
|
+ if (!guideInfo) {
|
|
|
+ guideInfo = { teacherBottom: true };
|
|
|
+ } else {
|
|
|
+ guideInfo.teacherBottom = true;
|
|
|
+ }
|
|
|
+ localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
|
|
|
+ tipShow.value = false;
|
|
|
+ // localStorage.setItem('endC')
|
|
|
+ };
|
|
|
+ return () => (
|
|
|
+ <Popup
|
|
|
+ teleport="body"
|
|
|
+ overlay={false}
|
|
|
+ closeOnClickOverlay={false}
|
|
|
+ class={["popup-custom", styles.guidePopup]}
|
|
|
+ v-model:show={tipShow.value}
|
|
|
+ >
|
|
|
+ <div class={styles.content} onClick={() => handleNext()}>
|
|
|
+ <div
|
|
|
+ class={styles.backBtn}
|
|
|
+ onClick={(e: Event) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ endGuide();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 跳过
|
|
|
+ </div>
|
|
|
+ <div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}} id={`modeType-${data.step}`}>
|
|
|
+ {data.steps.map((item: any, index) => (
|
|
|
+ <div
|
|
|
+ onClick={(e: Event) => e.stopPropagation()}
|
|
|
+ class={styles.item}
|
|
|
+ style={{
|
|
|
+ display: index === data.step ? "" : "none",
|
|
|
+ left: `${item.eleRect?.left}`,
|
|
|
+ top: `${item.eleRect?.top}`,
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img class={styles.img} style={item.imgStyle} src={item.img} />
|
|
|
+ <div class={styles.btns} style={item.btnsStyle}>
|
|
|
+ {data.step + 1 == data.steps.length ? (
|
|
|
+ <>
|
|
|
+ <div class={[styles.endBtn]} onClick={() => endGuide()}>
|
|
|
+ 完成
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={[styles.nextBtn]}
|
|
|
+ style={{ "border-color": "#fff" }}
|
|
|
+ onClick={() => {
|
|
|
+ data.step = 0;
|
|
|
+ getStepELe();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 再看一遍
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <Button class={styles.teacherBtn} round type="primary" onClick={() => handleNext()}>
|
|
|
+ 下一步 ({data.step + 1}/{data.steps.length})
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ },
|
|
|
+>>>>>>> Stashed changes
|
|
|
});
|
mo