语音考试模块初步上线

src/api/modules/lighting.ts

@@ -31,7 +31,7 @@ interface lightingCombinationIdRes {
 
 
 }
-interface lightingItemListRes{
+export interface lightingItemListRes{
     code: number,
     msg: string,
     rows: [{

src/views/buyVip/index.vue

@@ -6,8 +6,11 @@
 		<div class="item-box">
 			<van-cell class="cell-title" title="选择充值方式" />
 			<div class="radio-box">
-				<div v-for="(item, index) in goodsList" :class="{ select: index === goodsIndex }" :key="index" @click="goodsIndex = index">
+				<div v-for="(item, index) in goodsList" class="radio-item" :class="{ select: index === goodsIndex }" :key="index" @click="goodsIndex = index">
 					<span>{{ item.dictLabel }}</span>
+					<div v-if="index === 1" class="radio-item-recom">
+						推荐
+					</div>
 					<span>¥{{ item.dictValue.split(',')[0] }}</span>
 					<span>原价{{ item.dictValue.split(',')[1] }}元</span>
 				</div>
@@ -101,6 +104,25 @@
 			.select {
 				background: #fcf1de;
 			}
+			.radio-item{
+				position: relative;
+				.radio-item-recom{
+					position: absolute;
+					top: 0;
+					width: 30px;
+					height: 15px;
+					line-height: 15px;
+					font-size: 10px;
+					background: #FF4D53;
+					border-radius: 0%;
+					right: 0;
+					transform: translate(15%,-30%);
+					border-radius: 5px 0px 5px 0px;
+					color: #fff;
+			
+
+				}
+			}
 			div {
 				width: 98px;
 				font-size: 20px;

src/views/lightMock/components/examTopicList.vue

@@ -12,29 +12,20 @@
 			>
 			<div class="header-tip">
 				<img class="floader" src="@/assets/img/floder.png" />
-				<div class="title">播放单个组合：{{ title || "" }}</div>
+				<div class="title">{{ type == 0 ? "随机播放" + directives + "条灯光" : "播放单个组合：" + comTitle }}{{ title || "" }}</div>
 			</div>
 		</div>
 		<div class="mid">
-			<composeTopicsMaskList ref="mid" :list="list" />
+			<composeTopicsMaskList ref="mid" :list="type == 0 ? randSingleList : randComlist" />
 		</div>
 		<!-- 前进,倒退 -->
 		<div class="bottom">
 			<div class="bottom-container">
-				<div
-					@click="
-						() => {
-							emit('before');
-						}
-					"
-					class="previousGroup">
-					上一组
-				</div>
 				<div @click="stopTopicsAudio" class="timeOut">暂停</div>
 				<div
 					@click="
 						() => {
-							emit('after');
+							nextGroup();
 						}
 					"
 					class="nextGroup">
@@ -46,11 +37,41 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineProps, ref, onMounted } from "vue";
+import { defineComponent, defineProps, ref, onMounted, PropType, watch, reactive } from "vue";
 import composeTopicsMaskList from "./composeTopicsMaskList.vue";
+import { lightingItemListRes, lightingCombinationId } from "@/api/modules/lighting";
+import { useStore } from "vuex";
+import store from "@/store";
+interface lightingItemListResRow {
+	createTime: string;
+	updateTime: string;
+	id: number;
+	title: string;
+	operation: string;
+	icon: string;
+	voice: string;
+	process: number;
+}
+interface lightingCombinationListResRow {
+	createTime: string;
+	updateTime: string;
+	id: number;
+	titile: string;
+	operation: string;
+	icon: string;
+	itemId?: string;
+}
 export default defineComponent({
 	setup(props, { emit }) {
 		let mid = ref(null);
+		const store = useStore();
+		let randComlist = ref([]);
+		let randComlistIndex = ref(0);
+		let randSingleListList = ref(0);
+		let randSingleList = ref([]);
+		let type = store.state.lightConfig.type as number;
+		let directives = store.state.lightConfig.directives;
+		let newComList: lightingCombinationListResRow[];
 		// onMounted(() => {
 		// 	console.log(mid.value,"xx");
 		// });
@@ -62,9 +83,79 @@ export default defineComponent({
 				mid.value.listIndex = -1;
 			}
 		};
+		const nextGroup = () => {
+			if (type == 0) {
+				let copySingleList = [...props.singleList]
+				randComlistIndex.value = randComlistIndex.value + 1;
+				let arrEnd = copySingleList.pop();
+				let arrBegin = copySingleList.shift();
+				let arr = copySingleList.sort((a, b) => Math.random() - 0.5);
+				let arrMid = arr.slice(0, directives);
+				randSingleList.value = [arrBegin, ...arrMid, arrEnd];
+			} else {
+				if (randComlistIndex.value + 1 >= props.comList.length) {
+					randComlistIndex.value = 0;
+				} else {
+					randComlistIndex.value = randComlistIndex.value + 1;
+				}
+				lightingCombinationId(newComList[randComlistIndex.value].id).then((res) => {
+					randComlist.value = res.data;
+				});
+			}
+		};
+		watch(
+			() => props.comList,
+			(val, oldValue) => {
+				if (type == 1) {
+					console.log("辩护了");
+					let arr = val?.sort((a, b) => Math.random() - 0.5);
+					newComList = arr;
+					if (arr && arr.length > 0) {
+						lightingCombinationId(arr[randComlistIndex.value].id).then((res) => {
+							randComlist.value = res.data;
+						});
+					}
+				}
+
+				/* ... */
+			},
+			{
+				immediate: true,
+			}
+		);
+
+		watch(
+			() => props.singleList,
+			(val, oldValue) => {
+				if (type == 0) {
+					let copyVal = [...val]
+					let arrEnd = copyVal.pop();
+					let arrBegin =copyVal.shift();
+					let arr = [...copyVal].sort((a, b) => Math.random() - 0.5);
+					let arrMid = arr.slice(0, directives);
+					arr = [arrBegin, ...arrMid, arrEnd];
+					randSingleList.value = arr
+				}
+
+				/* ... */
+			},
+			{
+				immediate: true,
+			}
+		);
+
 		return {
+			nextGroup,
+			randSingleListList,
+			randSingleList,
 			emit,
+			randComlistIndex,
+			props,
+			randComlist,
+			store,
+			type,
 			mid,
+			directives,
 			stopTopicsAudio,
 		};
 	},
@@ -77,14 +168,37 @@ export default defineComponent({
 			type: String,
 			default: "",
 		},
-		list: {
-			type: Array,
-			default: [],
+		comList: {
+			type: Array as PropType<lightingCombinationListResRow[]>,
+			default: () => {
+				return [];
+			},
+		},
+		singleList: {
+			type: Array as PropType<lightingItemListResRow[]>,
+			default: () => {
+				return [];
+			},
+		},
+	},
+	computed: {
+		randSingleList(): lightingItemListResRow[] {},
+		comTitle(): string {
+			if (this.comList && this.comList.length > 0 && this.randComlistIndex < this.comList.length) {
+				return this.comList[this.randComlistIndex].titile;
+			} else {
+				return "";
+			}
 		},
+		// randComList():lightingCombinationListResRow[]{
+		// 	let arr = this.comList.sort((a, b) => Math.random() - 0.5);
+		// 	return arr
+		// }
 	},
 	components: {
 		composeTopicsMaskList,
 	},
+	mounted() {},
 });
 </script>
 

src/views/lightMock/index.vue

@@ -46,6 +46,8 @@
 					examTopicListVisible = false;
 				}
 			"
+			:comList="list1"
+			:singleList="list2"
 			v-if="examTopicListVisible"></examTopicList>
 		<div
 			@click="
@@ -74,6 +76,7 @@ const active = 0;
 let examTopicListVisible = ref(false);
 let lightConfigVisible = ref(false);
 let list1Index = ref(-1);
+let list1Ids = ref<Number[]>([])
 let list1 = ref([
 	{
 		createTime: "2022-03-21 16:40:22",
@@ -102,6 +105,8 @@ let singleTopicsVisible = ref(false);
 let singleTopicTitle = ref("");
 lightingCombinationList().then((res) => {
 	list1.value = res.rows;
+
+
 	// console.log(list1);
 });
 lightingItemList().then((res) => {