绑定vip点击事件前

src/components/m-exercise/components/functionList.vue

@@ -1,5 +1,7 @@
 <script lang="tsx">
 	import { defineComponent } from "vue";
+	import store from "@/store"
+	import { Dialog } from 'vant';
 	export default defineComponent({
 		props: {
 			currentSubject: Object as any,
@@ -17,6 +19,54 @@
 			},
 		},
 		setup(props, { emit }) {
+			//该功能就是vip专门使用
+			const vipClick =(index :number)=>{
+				let vipButtonList :[any] = [{
+					name:"读题+答案"					
+				},
+				{
+					name:"读题"
+
+
+				},
+				{
+					name:"读技巧解释"
+
+
+					
+				}]
+				if(store.getters.getIsVip){
+					switch(index){
+						case 0:
+							emit("subjectAudioPlay", vipButtonList[index].name);
+						break;
+						case 1:
+							emit("subjectAudioPlay", vipButtonList[index].name);
+						break;
+						case 2:
+								emit("subjectAudioPlay", vipButtonList[index].name);
+								emit("update:skillsShow", true);
+						break;
+
+					}
+
+				}
+				else{
+					Dialog.confirm({
+						 title: '提示',
+  							message: '需要vip才能使用'
+   
+					}).then(()=>{
+
+
+					})
+
+				}
+
+
+
+			}
+
 			return () => {
 				return (
 					<div class="function-list">
@@ -61,23 +111,23 @@
 </script>
 
 <style lang="scss">
-	.function-list {
-		width: 100%;
-		font-size: 13px;
+.function-list {
+	width: 100%;
+	font-size: 13px;
+	display: flex;
+	justify-content: space-around;
+	padding: 15px;
+	box-sizing: border-box;
+	.function-item {
 		display: flex;
-		justify-content: space-around;
-		padding: 15px;
-		box-sizing: border-box;
-		.function-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			font-size: 13px;
-			font-weight: 400;
-			color: #8a9099;
-			span {
-				margin-top: 5px;
-			}
+		flex-direction: column;
+		align-items: center;
+		font-size: 13px;
+		font-weight: 400;
+		color: #8a9099;
+		span {
+			margin-top: 5px;
 		}
 	}
+}
 </style>

src/components/m-exercise/components/subjectChangePopup.vue

@@ -22,7 +22,7 @@
 			</template>
 		</van-cell>
 		<div class="list-box">
-			<span @click="changeCurrentSubjectIndex(index)" class="item" :class="subjectClass(item, index)" v-for="(item, index) in subjectList">{{ index + 1 }}</span>
+			<span :key="index" @click="changeCurrentSubjectIndex(index)" class="item" :class="subjectClass(item, index)" v-for="(item, index) in subjectList">{{ index + 1 }}</span>
 		</div>
 	</div>
 </template>

src/route/guard.ts

@@ -12,8 +12,6 @@ const guard = (router: Router) => {
 			next();
 			return;
 		}
-
-
 		//监听到登陆事件
 		if (to.query.state === "LOGIN") {
 			const toast = Toast.loading({
@@ -79,11 +77,14 @@ const guard = (router: Router) => {
 		// }
 
 		try {
-			const userTime = dayjs(store.getters.getUserData.expireTime).valueOf();
-			const currentTime = dayjs().valueOf();
+			const userTime :number = dayjs(store.getters.getUserData.expireTime).valueOf();
+			const currentTime :number = dayjs().valueOf();
 			const vipPathSet = new Set(["/exercise", "/mockTest"]);
 			if (vipPathSet.has(to.path)) {
-				if (userTime - currentTime > 0) {
+				if (to.query.title === '顺序练习') {
+					next();
+				}
+				else if (userTime - currentTime > 0 && to.query.title === '顺序练习') {
 					next();
 				} else {
 					Toast.fail("会员到期");
@@ -92,7 +93,7 @@ const guard = (router: Router) => {
 			} else {
 				next();
 			}
-		} catch (error) {}
+		} catch (error) { }
 	});
 };
 export default guard;

src/store/index.ts

@@ -1,6 +1,6 @@
 import { createStore } from "vuex";
 import createPersistedState from "vuex-persistedstate";
-
+import dayjs from "dayjs";
 const store = createStore({
   plugins: [createPersistedState()],
   state: () => ({
@@ -19,6 +19,12 @@ const store = createStore({
     getUserData(state) {
       return state.userData;
     },
+    getIsVip(state) :Boolean{
+      const userTime :number = dayjs(store.getters.getUserData.expireTime).valueOf();
+			const currentTime:number = dayjs().valueOf();
+      return (userTime - currentTime) > 0
+
+    }
   },
   mutations: {
     setSuject(state, suject: string) {

src/views/buyVip/index.vue

@@ -32,7 +32,7 @@
 	import topImg from './top-background.png';
 	import { ref } from 'vue';
 	import { getVipPrice, prepareOrder } from '@/api';
-	const goodsIndex = ref(0);
+	const goodsIndex = ref(1);
 	const goodsList = ref<any[]>([]);
 	getVipPrice().then((res) => {
 		goodsList.value = res.data;