update

components/chengji/chengji.vue

@@ -0,0 +1,148 @@
+<template>
+	<uni-popup ref="popupRef" background-color="#fff" type="left" class="popup-container">
+		<view>
+			<uni-icons type="left" size="30" @click="handleBack"></uni-icons>
+			<text>成绩</text>
+		</view>
+		<w-swiper :list="list" :swiperHeight="300" :positionIndex="current">
+			<template v-slot:default="{item,index}">
+				<view class="body" v-if="item.mta_show">
+					{{item}}
+					
+					<danxuan :question="item" showError v-if="item.type == '1'"></danxuan>
+					<panduan :question="item" showError v-if="item.type == '2'"></panduan>
+					<tiankong :question="item" showError v-if="item.type == '3'"></tiankong>
+					<!-- 答案解析 -->
+					<button @click="showJiexiPopup(item)">show</button>
+					
+					<!-- 答案 -->
+					<view>答案{{showAnswerResult(item)}}</view>
+					<!-- 你的答案 -->
+					<view>您的答案:{{showAnswerReply(item)}}</view>
+				</view>
+			</template>
+		</w-swiper>
+
+		<!-- 解析浮层数据 -->
+		<questionJiexi ref="jiexiRef"></questionJiexi>
+	</uni-popup>
+</template>
+
+<script setup>
+	import questionJiexi from '@/components/questionJiexi/questionJiexi.vue';
+	import wSwiper from '@/components/wSwiper/wSwiper.vue';
+	import danxuan from "@/components/question/danxuan.vue";
+	import panduan from "@/components/question/panduan.vue";
+	import tiankong from "@/components/question/tiankong.vue";
+	import {
+		useStudyRouteParams
+	} from "@/utils/emitEvents.js";
+	import {
+		useQuestionTools
+	} from "@/components/question/useQuestionTools.js";
+	
+	const {
+		getLetterByIndex
+	} = useQuestionTools();
+
+	import {
+		ref
+	} from "vue";
+
+	const {
+		setStudyStorage
+	} = useStudyRouteParams();
+
+	const props = defineProps({
+		list: {
+			type: Array,
+		},
+		jieId: {
+			type: [String, Number]
+		},
+		zhangId: {
+			type: [String, Number]
+		},
+		nextZhangId: {
+			type: [String, Number]
+		},
+		nianji: {
+			type: [String, Number]
+		},
+		xueqi: {
+			type: [String,Number]
+		}
+	})
+
+	const current = ref(0)
+	const popupRef = ref(null)
+	const jiexiRef = ref(null);
+
+	// 切换成绩
+	function showPopup() {
+		popupRef.value.open()
+	}
+
+	// 展示
+	function showJiexiPopup(data) {
+		jiexiRef.value.showPopup(data);
+	}
+
+	function handleBack() {
+		// 从 单元测试 到 岛 的路由参数
+		setStudyStorage({
+			nianji: props.nianji,
+			xueqi:props.xueqi,
+			zhangId: props.zhangId,
+			jieId: props.jieId,
+			nextZhangId: props.nextZhangId,
+		});
+		uni.switchTab({
+			url: `/pages/study/index`
+		})
+
+	}
+
+	function showAnswerResult(item) {
+		if (item.type == 1) {
+			// 单选题
+			return getLetterByIndex(item.result)
+		} else if (item.type == 3){
+			if (item.result == 1) {
+				return '正确'
+			} else {
+				return '错误'
+			}
+		} else {
+			return item.result
+		}
+	}
+	
+	
+	function showAnswerReply(item) {
+		if (item.type == 1) {
+			// 单选题
+			return getLetterByIndex(item.reply)
+		} else if (item.type == 3){
+			if (item.reply == 1) {
+				return '正确'
+			} else {
+				return '错误'
+			}
+		} else {
+			return item.reply
+		}
+	}
+
+	defineExpose({
+		showPopup
+	})
+</script>
+
+<style lang="scss">
+	.popup-container {
+		::v-deep .uni-popup__wrapper.left {
+			width: 100vw;
+		}
+	}
+</style>

components/question/danxuan.vue

@@ -0,0 +1,92 @@
+<template>
+	<view v-if="question">
+		<!-- 标题区域 -->
+		<view>单选题:</view>
+		<!-- 题干区域 -->
+		<view v-html="data.name"></view>
+		<!-- 选项区域 -->
+		<view>
+			<view v-for="(item,index) in data.contents" :class="formatClass(index)" :key="index" @click="onSelect(index)">
+				<text>{{item.number}}</text>
+				<text>{{item.label}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		watch
+	} from 'vue';
+	import {
+		useQuestionTools
+	} from "./useQuestionTools"
+	const {
+		getLetterByIndex
+	} = useQuestionTools();
+
+	const props = defineProps({
+		question: {
+			type: Object,
+		},
+		showError: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const data = reactive({
+		name: '', //题干数据
+		contents: [], // 选项数据
+	})
+
+	watch(() => props.question, (val) => formatData(val), {
+		immediate: true
+	})
+
+	function formatClass(index) {
+		if (props.showError) {
+			return {
+				active_right: props.question.result == index,
+				showError: props.question.reply == index && props.question.result != index
+			}
+		} else {
+			return {
+				active: props.question.reply == index
+			}
+		}
+	}
+
+	function formatData(val) {
+		if (val) {
+			data.name = val.name;
+			data.contents = val.optList.map((item, index) => {
+				return {
+					label: item,
+					number: getLetterByIndex(index)
+				}
+			})
+		}
+	}
+
+	function onSelect(index) {
+		if (props.showError) {
+			return;
+		}
+		props.question.reply = index;
+	}
+</script>
+
+<style lang="scss" scoped>
+	.active {
+		background-color: blue; // 单选题选中的颜色
+	}
+	.showError {
+		background-color: red; // 答案解析：单选错误选中颜色
+	}
+	.active_right {
+		background-color: green; // 答案解析：单选正确颜色
+	}
+</style>

components/question/panduan.vue

@@ -0,0 +1,70 @@
+<template>
+	<view>
+		<!-- 标题区域 -->
+		<view>判断题:</view>
+		<!-- 题干区域 -->
+		<view v-html="question.name"></view>
+		<!-- 选项区域 -->
+		<view>
+			<radio-group @change="radioChange">
+				<label :class="formatClass('1')">
+					<view>
+						<radio value="1" :checked="question.reply == '1'" />
+					</view>
+					<view>正确</view>
+				</label>
+				<label :class="formatClass('0')">
+					<view>
+						<radio value="0" :checked="question.reply == '0'" />
+					</view>
+					<view>错误</view>
+				</label>
+			</radio-group>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const props = defineProps({
+		question: {
+			type: Object,
+		},
+		showError: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	function radioChange(e) {
+		if (props.showError) {
+			return;
+		}
+		props.question.reply = e.detail.value;
+	}
+	
+	function formatClass(index) {
+		if (props.showError) {
+			return {
+				active_right: props.question.result == index,
+				showError: props.question.reply == index && props.question.result != index
+			}
+		} else {
+			return {
+				active: props.question.reply == index
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+	.active {
+		background-color: blue; // 判断题选中的颜色
+	}
+	.showError {
+		background-color: red; // 判断错误选中颜色
+	}
+	.active_right {
+		background-color: green; // 答案解析：单选正确颜色
+	}
+</style>

components/question/tiankong.vue

@@ -0,0 +1,9 @@
+<template>
+	<view>填空</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

components/question/useQuestionTools.js

@@ -0,0 +1,12 @@
+export function useQuestionTools() {
+	function getLetterByIndex(index) {
+		let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+		if (index < 0 || index > 26) {
+			return '?';
+		}
+		return letters.charAt(index);
+	}
+	return {
+		getLetterByIndex
+	}
+}

components/questionJiexi/questionJiexi.vue

@@ -0,0 +1,36 @@
+<template>
+	<uni-popup ref="popupRef" background-color="#fff" type="left" class="popup-container">
+		<button @click="handleBack">返回</button>
+		<view class="popup-content">
+			<text class="text">popup 内容</text>
+			<!-- 思路分析 -->
+			<view> {{data.answer}}</view>
+			<!-- 视频讲解 -->
+			<view>
+				{{data.jiangjie}}
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref,unref } from "vue";
+	const popupRef = ref(null)
+	let data = {};
+	function showPopup(item) {
+		data = item;
+		popupRef.value.open()
+	}
+	
+	function handleBack() {
+		popupRef.value.close()
+	}
+	
+	defineExpose({showPopup})
+</script>
+
+<style lang="scss">
+	.popup-content {
+		width: 100vw;
+	}
+</style>

components/wSwiper/wSwiper.vue

@@ -0,0 +1,79 @@
+<template>
+	<swiper :circular="false" @change="onChangeTab" :current="data.current"
+		:style="{'height': swiperHeight + 'px'}">
+		<swiper-item v-for="(cItem,index) in props.list" :key="cItem">
+			<view class="item flex-col flex-center">
+				<slot :item="cItem"></slot>
+			</view>
+		</swiper-item>
+	</swiper>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		watch,
+		onMounted
+	} from 'vue';
+	import {
+		onLoad,
+	} from "@dcloudio/uni-app";
+
+	const props = defineProps({
+		swiperHeight: { // swiper的高度
+			required: true,
+			type: Number,
+			default: 0
+		},
+		positionIndex: { // 当前的数据的下标，直接定位到某条数据时使用
+			required: false,
+			type: Number,
+			default: 0
+		},
+		list: { // 数据数组
+			required: true,
+			type: Array,
+			default: []
+		},
+	})
+	const emits = defineEmits(['change'])
+	const data = reactive({
+		current:0,
+	})
+	
+	watch(() => props.positionIndex, (val) => positionData(), {
+		immediate: true
+	})
+	watch(() => props.list, (val) => positionData(), {
+		immediate: true
+	})
+
+	
+	function positionData() {
+		if (props.list[data.current]) {
+			props.list[data.current].mta_show = true;
+		}
+		if (props.list[data.current+1]) {
+			props.list[data.current+1].mta_show = true;
+		}
+		if (props.list[data.current-1]) {
+			props.list[data.current-1].mta_show = true;
+		}
+	}
+	function onChangeTab(e) {
+		data.current = e.detail.current;
+		if (props.list[data.current+1]) {
+			props.list[data.current+1].mta_show = true;
+		}
+		if (props.list[data.current-1]) {
+			props.list[data.current-1].mta_show = true;
+		}
+		emits('change', data.current)
+	}
+</script>
+
+
+<style>
+
+</style>