首页热门曲目-未判断学生是否是会员

src/page-instrument/component/mode-type-mode/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch } from "vue";
+import { defineComponent, reactive, watch } from "vue";
 import styles from "./index.module.less";
 import icons from "./icon/index.json";
 import { headTopData } from "../../header-top";
@@ -7,30 +7,59 @@ import TeacherBootom from "../../custom-plugins/guide-page/teacher-bootom";
 import StudentBottom from "../../custom-plugins/guide-page/student-bottom";
 import TheVip from "../../custom-plugins/the-vip";
 import { storeData } from "/src/store";
+import { studentQueryUserInfo } from "../../api";
+import { usePageVisibility } from "@vant/use";
 export default defineComponent({
 	name: "modelWraper",
 
 	setup() {
-		const showPC = ref(false);
-		const showStudent = ref(false);
+		const data = reactive({
+			showPC: false,
+			showStudent: false,
+			showVip: !storeData.user.vipMember,
+		});
 		const openGuid = () => {
 			// 加载后 判断 端口号 加载对应的引导
 			if (state.platform === IPlatform.PC) {
 				// PC
 				setTimeout(() => {
-					showPC.value = true;
+					data.showPC = true;
 				}, 500);
 			} else {
-				// 不是vip, 不引导
-				if (!storeData.user.vipMember) {
-					return
+				if (storeData.user.vipMember) {
+					// 学生端
+					setTimeout(() => {
+						data.showStudent = true;
+					}, 500);
+				} else {
+					// vip
+					data.showVip = true;
 				}
-				// 学生端
-				setTimeout(() => {
-					showStudent.value = true;
-				}, 500);
 			}
 		};
+		
+		const getUserInfo = async () => {
+			const res = await studentQueryUserInfo();
+			const student = res?.data || {};
+			storeData.user.vipMember = student.vipMember;
+			// console.log("🚀 ~ student:", student);
+			if (storeData.user.vipMember) {
+				data.showVip = false;
+				openGuid();
+			}
+		};
+		const pageVisible = usePageVisibility();
+		watch(
+			() => pageVisible.value,
+			(val) => {
+				if (val === "visible") {
+					if (storeData.user.vipMember) return;
+					console.log("页面显示");
+					getUserInfo();
+				}
+			}
+		);
+
 		watch(
 			() => headTopData.modeType,
 			(val) => {
@@ -59,9 +88,9 @@ export default defineComponent({
 							src={icons.icon_3}
 						/>
 					</div>
-					{showPC.value && headTopData.modeType === "init" ? <TeacherBootom></TeacherBootom> : null}
-					{showStudent.value && headTopData.modeType === "init" ? <StudentBottom></StudentBottom> : null}
-					{state.platform !== IPlatform.PC && headTopData.modeType === "init" && <TheVip />}
+					{data.showPC && headTopData.modeType === "init" ? <TeacherBootom></TeacherBootom> : null}
+					{data.showStudent && headTopData.modeType === "init" ? <StudentBottom></StudentBottom> : null}
+					{data.showVip && headTopData.modeType === "init" && <TheVip />}
 				</div>
 			</>
 		);

src/page-instrument/custom-plugins/guide-page/student-bottom.tsx

@@ -1,183 +1,183 @@
 import { Button, Popup } from "vant";
-import { } from "vant";
+import {} from "vant";
 import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
 import { getImage } from "./images";
 import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
-  name: "studentB-guide",
-  emits: ["close"],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {},
-      show: false,
-      steps: [
-        {
-          ele: "",
-          eleRect: {} as DOMRect,
-          img: getImage("studentB1.png"),
-          handStyle: {
-            top: "-1.41rem",
-            left:'1.4rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-5.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-            left:'1.2rem'
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'3.2rem'
-          },
-        },
-        {
-          ele: "",
-          img: getImage("studentB2.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'0.15rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-5.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'1.3rem',
-          },
-        },
-        {
-          ele: "",
-          img: getImage("studentB3.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'2.8rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-4.5rem",
-            width:'6.48rem',
-            height:'3.01rem',
-            left:'-2.9rem'
+	name: "studentB-guide",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const data = reactive({
+			box: {},
+			show: false,
+			steps: [
+				{
+					ele: "",
+					eleRect: {} as DOMRect,
+					img: getImage("studentB1.png"),
+					handStyle: {
+						top: "-1.41rem",
+						left: "1.4rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-5.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+						left: "1.2rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "3.2rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("studentB2.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "0.15rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-5.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "1.3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("studentB3.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "2.8rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-4.5rem",
+						width: "6.48rem",
+						height: "3.01rem",
+						left: "-2.9rem",
+					},
+					btnsStyle: {
+						top: "-1.1rem",
+						left: "-1.8rem",
+					},
+				},
+			],
+			step: 0,
+		});
+		const tipShow = ref(false);
+		const query: any = getQuery();
+		const guideInfo = localStorage.getItem("guideInfo");
+		if ((guideInfo && JSON.parse(guideInfo).studentB) || !query.showGuide) {
+			tipShow.value = false;
+		} else {
+			tipShow.value = true;
+		}
 
-          },
-          btnsStyle: {
-            top: "-1.1rem",
-            left:'-1.8rem',
-          },
-        },
-      ],
-      step: 0,
-    });
-    const tipShow = ref(false)
-    const query: any = getQuery();
-   const guideInfo = localStorage.getItem('guideInfo')
-   if(guideInfo&&JSON.parse(guideInfo).studentB || !query.showGuide){
-    tipShow.value =false
-   }else {
-    tipShow.value =true
-   }
-    const getStepELe = () => {
-      console.log(`modeType${data.step}`)
-      const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-        data.box = {
-          left: eleRect.x + "px",
-          top: eleRect.y + "px",
-          width: eleRect.width + "px",
-          height: eleRect.height + "px",
-        };
-      }
-    };
-    onMounted(() => {
-      getStepELe();
-    });
+		const getStepELe = () => {
+			console.log(`modeType${data.step}`);
+			const ele: HTMLElement = document.getElementById(`modeType-${data.step}`)!;
+			if (ele) {
+				const eleRect = ele.getBoundingClientRect();
+				data.box = {
+					left: eleRect.x + "px",
+					top: eleRect.y + "px",
+					width: eleRect.width + "px",
+					height: eleRect.height + "px",
+				};
+			}
+		};
+		onMounted(() => {
+			getStepELe();
+		});
 
+		const handleNext = () => {
+			if (data.step >= 2) {
+				endGuide();
+				return;
+			}
+			data.step = data.step + 1;
+			getStepELe();
+		};
 
-    const handleNext = () => {
-      if (data.step >= 2) {
-       endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = ()=>{
-      let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}') || null
-      if(!guideInfo){
-        guideInfo = {studentB:true}
-      }else{
-        guideInfo.studentB = 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} 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}px`,
-                top: `${item.eleRect?.top}px`,
-              }}
-            >
-              <img class={styles.img} style={item.imgStyle} src={item.img} />
-              <img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} />
-              <div class={styles.btns} style={item.btnsStyle}>
-                {data.step + 1 == data.steps.length ? (
-              <>
-              <div class={[styles.studentNext]}  onClick={() =>endGuide()}>
-              完成
-            </div>
-            <div
-              class={[styles.nextBtn]}
-              style={{ "border-color": "#fff" }}
-          
-              onClick={() => {
-                data.step = 0;
-                getStepELe();
-              }}
-            >
-              再看一遍
-            </div>
-        
-          </>
-        ) : (
-          <Button class={styles.studentNext} round type="primary" onClick={() => handleNext()}>
-
-            下一步 ({data.step + 1}/{data.steps.length})
-          </Button>
-        )}
-                
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-      </Popup>
-    );
-  },
+		const endGuide = () => {
+			let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
+			if (!guideInfo) {
+				guideInfo = { studentB: true };
+			} else {
+				guideInfo.studentB = 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} 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}px`,
+									top: `${item.eleRect?.top}px`,
+								}}
+							>
+								<img class={styles.img} style={item.imgStyle} src={item.img} />
+								<img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} />
+								<div class={styles.btns} style={item.btnsStyle}>
+									{data.step + 1 == data.steps.length ? (
+										<>
+											<div class={[styles.studentNext]} onClick={() => endGuide()}>
+												完成
+											</div>
+											<div
+												class={[styles.nextBtn]}
+												style={{ "border-color": "#fff" }}
+												onClick={() => {
+													data.step = 0;
+													getStepELe();
+												}}
+											>
+												再看一遍
+											</div>
+										</>
+									) : (
+										<Button class={styles.studentNext} round type="primary" onClick={() => handleNext()}>
+											下一步 ({data.step + 1}/{data.steps.length})
+										</Button>
+									)}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</Popup>
+		);
+	},
 });

src/page-instrument/custom-plugins/the-vip/index.tsx

@@ -1,43 +1,25 @@
-import { defineComponent, onMounted, reactive } from "vue";
-import icon_bg from "./icon_bg.png";
+import { defineComponent } from "vue";
 import icon_title from "./icon_title.png";
 import icon_btn from "./icon_btn.png";
 import icon_close from "./icon_close.png";
 import styles from "./index.module.less";
 import { Popup } from "vant";
-import { setUserInfo, storeData } from "/src/store";
 import { api_back } from "/src/helpers/communication";
-import { listenerMessage, postMessage } from "/src/utils/native-message";
-import { studentQueryUserInfo } from "../../api";
+import { postMessage } from "/src/utils/native-message";
 
 export default defineComponent({
 	name: "TheVip",
-	emits: ["close"],
-	setup(props, { emit }) {
-		const data = reactive({
-			show: !storeData.user.vipMember,
-		});
+	setup() {
 		const close = () => {
 			api_back();
 		};
-    const getUserInfo = async () => {
-      const res = await studentQueryUserInfo();
-				const student = res?.data || {};
-				setUserInfo(student);
-    }
-		onMounted(() => {
-      listenerMessage('webViewOnResume', () => {
-        if (storeData.user.vipMember) return;
-        console.log('页面显示')
-        getUserInfo()
-      });
-		});
+    
 		return () => (
 			<Popup
 				teleport="body"
 				closeOnClickOverlay={false}
 				class={["popup-custom"]}
-				show={!storeData.user.vipMember}
+				show={true}
 			>
 				<div class={styles.container}>
 					<img class={styles.close} src={icon_close} onClick={close} />
@@ -54,7 +36,7 @@ export default defineComponent({
 								postMessage({
 									api: "openWebView",
 									content: {
-										url: `${location.origin}/classroom-app/#/member-center`,
+										url: `${location.origin.includes('192') ? 'https://test.lexiaoya.cn' : location.origin}/classroom-app/#/member-center`,
 										orientation: 1,
 									},
 								});