update 选 拼

api/word.js

@@ -58,3 +58,15 @@ export function getWordZhangwo(data = {}) {
     timeout: 20000
   })
 }
+
+export function getWordShouCang(data = {}) {
+  return request({
+    'url': '/app/word/collect',
+    headers: {
+      isToken: true
+    },
+    method: 'post',
+    data,
+    timeout: 20000
+  })
+}

pages.json

@@ -15,6 +15,7 @@
 		{
 			"path": "pages/selectGradesTerms/index",
 			"style": {
+				
 				"navigationBarTitleText": "选择学科和年纪",
 				"navigationStyle": "custom",
 				"app-plus": {

pages/newEnglish/components/mainCard.vue

@@ -19,8 +19,7 @@
 		</swiper-item>
 		<swiper-item>
 			<view class="swiper-item uni-bg-blue">
-				选
-				<hr />{{activeWord}}
+        <selectPage :active-word="activeWord" :active-words="activeWords"></selectPage>
 			</view>
 		</swiper-item>
 		<swiper-item>
@@ -33,7 +32,8 @@
 </template>
 
 <script setup>
-	import pinPageVue from './pinPage.vue';
+import pinPageVue from './pinPage.vue';
+import selectPage from './selectPage.vue';
 	import learnContent from './learnContent.vue';
 	const props = defineProps({
 		activeWord: {

pages/newEnglish/components/pinPage.vue

@@ -6,8 +6,8 @@
 		<selectTypesVue activeSelect="2"></selectTypesVue>
 		<!-- 拼读区 -->
 		<view>
-			<view v-for="item in data.list">
-				<view></view>
+			<view v-for="item in data.selectList">
+				<view>内容：{{item}}</view>
 			</view>
 		</view>
 		<!-- 解释区 -->
@@ -17,9 +17,15 @@
 		<!-- 音标区 -->
 		<view></view>
 		<!-- 图片区 -->
-		<view></view>
+		<view>
+			{{data.result ? '正确': '错误'}}
+		</view>
 		<!-- 选择区 -->
-		<view></view>
+		<view>
+			<view v-for="item in data.randomList" @click="handleSelect(item)">
+				<view>内容：{{item}}</view>
+			</view>
+		</view>
 	</div>
 </template>
 
@@ -30,6 +36,14 @@
 		reactive,
 		computed
 	} from 'vue';
+	import {onLoad} from "@dcloudio/uni-app"
+	import * as httpApi from "@/api/word.js"
+	import {
+		getUserIdentity,
+	} from "@/utils/common.js"
+	
+	const userCode = getUserIdentity();
+	
 	const props = defineProps({
 		activeWord: {
 			type: Object,
@@ -41,32 +55,57 @@
 
 	const data = reactive({
 		list: [],
+		randomList: [],
 		selectList: [],
 		result: false, // 正确性
 	})
+	
+	onLoad(() => {
+		initItem()
+	})
 
 	setTimeout(() => {
 		console.log('activeWord', props.activeWord)
 	})
 
+
+	function shuffleArray(array) {
+	  for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]]; // ES6解构赋值交换元素
+	  }
+	  return array;
+	}
+	
+	function randomClone(arr) {
+	  const clone = [...arr];
+	  return shuffleArray(clone); // 复用方法一的洗牌算法
+	}
+
 	// 初始化 单词列表
-	function initList() {
-		data.selectList.forEach((item, index) => {
-			data.list[index] = ''
+	function initItem() {
+		
+		data.list = props.activeWord.chaifen;
+		data.randomList = randomClone(data.list);
+		data.list.forEach((item, index) => {
+			data.selectList[index] = ''
 		})
 	}
 
 	function handleSelect(word) {
-		if (data.list.find(item => item == word)) {
-			data.list[data.list.findIndex(item => item == word)] = '';
+		if (data.selectList.find(item => item == word)) {
+			data.selectList[data.selectList.findIndex(item => item == word)] = '';
+			// 校验正确性
+			checkIsRight();
+			return;
 		}
 		// 覆盖状态
 		let status = false;
-		data.list.forEach((item, index) => {
+		data.selectList.forEach((item, index) => {
 			// 无值 无修改
 			if (!item && !status) {
 				// 第一项空值覆盖
-				data.list[index] = word;
+				data.selectList[index] = word;
 				// 以有控制覆盖
 				status = true;
 			}
@@ -86,9 +125,19 @@
 	}
 
 	function noticeBackDb() {
-
+		if (userCode == 'Visitor') {
+			// 游客不更新后台
+			return;
+		}
+		httpApi.getWordZhangwo({
+			type: 1,
+			wordId: props.activeWord.id
+		})
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	
+	
+	
 </style>

pages/newEnglish/components/selectPage.vue

@@ -6,18 +6,22 @@
 		<selectTypesVue activeSelect="2"></selectTypesVue>
 		<!-- 拼读区 -->
 		<view>
-			<view v-for="item in data.list">
-				<view></view>
-			</view>
+			{{data.name}}
+		</view>
+		<!--  音标区  -->
+		<view>
+			{{activeWord.yinbiao}}
 		</view>
 		<!-- 图片区 -->
-		<view></view>
+		<view>
+			{{ data.result ?'正确':'错误' }}
+		</view>
 		<!-- 选择区 -->
 		<view>
-			<view>{{data.qa}}</view>
-			<view>{{data.qb}}</view>
-			<view>{{data.qc}}</view>
-			<view>{{data.qd}}</view>
+			<view :class="{active: data.answer == 'A'}" @click="handleSelect('A')">{{data.opa}}</view>
+			<view :class="{active: data.answer == 'B'}" @click="handleSelect('B')">{{data.opb}}</view>
+			<view :class="{active: data.answer == 'C'}" @click="handleSelect('C')">{{data.opc}}</view>
+			<view :class="{active: data.answer == 'D'}" @click="handleSelect('D')">{{data.opd}}</view>
 		</view>
 	</view>
 </template>
@@ -25,10 +29,20 @@
 <script setup>
 	import selectWordsVue from './selectWords.vue';
 	import selectTypesVue from './selectTypes.vue';
+	import * as httpApi from "@/api/word.js"
+	import {
+		onLoad
+	} from "@dcloudio/uni-app"
 	import {
 		reactive,
 		computed
 	} from 'vue';
+	import {
+		getUserIdentity,
+	} from "@/utils/common.js"
+	
+	const userCode = getUserIdentity();
+	
 	const props = defineProps({
 		activeWord: { // 单词数据
 			type: Object,
@@ -38,21 +52,34 @@
 		},
 	})
 	const data = reactive({
-		list: [],
-		qa: null,
-		qb: null,
-		qc: null,
-		qd: null,
+		name: [],
+		opa: null,
+		opb: null,
+		opc: null,
+		opd: null,
 		answer: null, // 已选项
 		result: false, // 正确性
 	})
 
+	onLoad(() => {
+		initItem()
+	})
+
+	function initItem() {
+		data.name = props.activeWord.name;
+		data.opa = props.activeWord.opa;
+		data.opb = props.activeWord.opb;
+		data.opc = props.activeWord.opc;
+		data.opd = props.activeWord.opd;
+	}
+
 	function handleSelect(d1) {
 		data.answer = d1;
+		checkIsRight();
 	}
 
 	function checkIsRight() {
-		if (data.answer == props.activeWord.value) {
+		if (data.answer == props.activeWord.daan) {
 			// 正确
 			data.result = true;
 			noticeBackDb()
@@ -62,9 +89,19 @@
 	}
 
 	function noticeBackDb() {
-
+		if (userCode == 'Visitor') {
+			// 游客不更新后台
+			return;
+		}
+		httpApi.getWordZhangwo({
+			type: 2,
+			wordId: props.activeWord.id
+		})
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.active {
+		color: red;
+	}
 </style>