会员提示和曲谱列表

src/page-gym/musci-list/index.tsx

@@ -11,7 +11,9 @@ import { storeData } from "/src/store";
 import { Popup } from "@varlet/ui";
 import ChoosePartName from "./choosePartName";
 import { useRoute } from "vue-router";
-import iconBack from "./icon-back.png";
+import iconBack from "./icons/icon-back.png";
+import VipModel from "./vipModel";
+import { postMessage } from "/src/utils/native-message";
 
 export default defineComponent({
 	name: "detail-list",
@@ -86,9 +88,19 @@ export default defineComponent({
 			const nextUrl = `${location.origin + location.pathname}?${searchStr}#/detail/${musicData.row.id}?${hashSearchStr}`;
 			location.replace(nextUrl);
 		};
+		/** 去开通会员 */
+		const gotoMember = () => {
+			postMessage({
+				api: "openWebView",
+				content: {
+					url: location.origin + location.hostname + "/#/member",
+					orientation: 1,
+				},
+			});
+		};
 		return () => (
 			<>
-				<img class={styles.closeBtn} src={iconBack} onClick={() => emit('close')} />
+				<img class={styles.closeBtn} src={iconBack} onClick={() => emit("close")} />
 				<div class={styles.wrap}>
 					<List
 						loading={musicData.loading}
@@ -116,6 +128,16 @@ export default defineComponent({
 							}}
 						/>
 					</Popup>
+					<Popup v-model:show={musicData.vipShow} teleport="body" defaultStyle={false}>
+						<VipModel
+							onClose={(open: boolean) => {
+								if (open) {
+									gotoMember();
+								}
+								musicData.vipShow = false;
+							}}
+						/>
+					</Popup>
 				</div>
 			</>
 		);

src/page-gym/musci-list/vipModel/index.module.less

@@ -0,0 +1,44 @@
+.fraction {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    background-color: #fff;
+    border-radius: 18px;
+    min-width: 244px;
+    padding: 20px 8px 8px 8px;
+}
+.icon{
+    width: 150px;
+}
+.closeBtn{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+.tip {
+    width: 70%;
+    font-size: 13px;
+    color: #808080;
+    padding: 10px 0;
+    text-align: center;
+}
+.btns{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    margin: 8px 0;
+}
+.btn {
+    width: 80%;
+    line-height: 31px;
+    text-align: center;
+    border-radius: 36px;
+    font-size: 13px;
+    &:active{
+        opacity: .8;
+    }
+}

src/page-gym/musci-list/vipModel/index.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import styles from "./index.module.less";
+import iconVip from "../icons/icon-vip.png";
+import iconBack from "../../header-top/image/close2.svg";
+
+export default defineComponent({
+	name: "evaluat-audio",
+	emits: ["close"],
+	setup(props, { emit }) {
+		return () => (
+			<div class={styles.fraction}>
+				<img class={styles.closeBtn} src={iconBack} onClick={() => emit('close')} />
+				<img class={styles.icon} src={iconVip} />
+				<div class={styles.tip}>您尚未开通云教练服务，请联系乐团老师开通</div>
+				<div class={styles.btns}>
+					<div style={{ background: "var(--van-primary-color)" }} class={styles.btn} onClick={() => emit("close", true)}>
+						确认
+					</div>
+				</div>
+			</div>
+		);
+	},
+});