修改口语写作阅读听力
This commit is contained in:
		
							parent
							
								
									78f5e329b9
								
							
						
					
					
						commit
						aed068f967
					
				|  | @ -35,9 +35,6 @@ | ||||||
| 						<view class="partshow" v-if="tk==partitem.id"> | 						<view class="partshow" v-if="tk==partitem.id"> | ||||||
| 							<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> | 							<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> | ||||||
| 								<view class="imaflex"> | 								<view class="imaflex"> | ||||||
| 									<view class="image"> |  | ||||||
| 										<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode=""> |  | ||||||
| 									</view> |  | ||||||
| 									<view>{{quesitem.typeText}}</view> | 									<view>{{quesitem.typeText}}</view> | ||||||
| 								</view> | 								</view> | ||||||
| 								<view> | 								<view> | ||||||
|  | @ -94,32 +91,51 @@ | ||||||
| 				this.image = !this.image | 				this.image = !this.image | ||||||
| 				this.tk = id | 				this.tk = id | ||||||
| 				if (this.image == false) { | 				if (this.image == false) { | ||||||
|  | 					this.tk = id | ||||||
|  | 				}else { | ||||||
| 					this.tk = null | 					this.tk = null | ||||||
| 				} | 				} | ||||||
| 			}, | 			}, | ||||||
| 			checkboxChange(parat, e) { | 			checkboxChange(parat, e) { | ||||||
| 				if (e.value) { | 				if (e.value) { | ||||||
| 					this.checked.push(parat.id) | 					this.checked.push(parat.id) | ||||||
|  | 					 const allItemsNoSubsets = parat.modules.every(item => !('subsets' in item)); | ||||||
|  | 					parat.modules.forEach(item=>{ | ||||||
|  | 						   this.$set(item, 'subsets', item.id); | ||||||
|  | 						  item.subsets = item.id; | ||||||
|  | 						this.subsets.push(item.id) | ||||||
|  | 						console.log( item.subsets) | ||||||
|  | 							}) | ||||||
|  | 					 | ||||||
| 				} else { | 				} else { | ||||||
| 					let index = this.checked.indexOf(parat.id); | 					let index = this.checked.indexOf(parat.id); | ||||||
| 					if (index !== -1) { | 					if (index !== -1) { | ||||||
| 						this.checked.splice(index, 1); | 						this.checked.splice(index, 1); | ||||||
|  | 						parat.modules.forEach(item=>{ | ||||||
|  | 							    this.$delete(item, 'subsets'); | ||||||
|  | 							    const index = this.subsets.indexOf(item.id); | ||||||
|  | 							    if (index !== -1) { | ||||||
|  | 							        this.subsets.splice(index, 1); | ||||||
|  | 							    }	 | ||||||
|  | 								}) | ||||||
|  | 								 | ||||||
| 					} | 					} | ||||||
| 				} | 				} | ||||||
| 				console.log(this.checked) | 				console.log(this.checked,'part数组') | ||||||
| 				this.$forceUpdate() | 				this.$forceUpdate() | ||||||
| 
 | 
 | ||||||
| 			}, | 			}, | ||||||
| 			checkoutzj(quesitem, id) { | 			checkoutzj(quesitem, id) { | ||||||
| 				if (id.value) { | 				if (id.value) { | ||||||
| 					this.subsets.push(quesitem.id) | 					this.subsets.push(quesitem.id) | ||||||
|  | 					console.log(quesitem) | ||||||
| 				} else { | 				} else { | ||||||
| 					let index2 = this.subsets.indexOf(quesitem.id); | 					let index2 = this.subsets.indexOf(quesitem.id); | ||||||
| 					if (index2 !== -1) { | 					if (index2 !== -1) { | ||||||
| 						this.subsets.splice(index2, 1); | 						this.subsets.splice(index2, 1); | ||||||
| 					} | 					} | ||||||
| 				} | 				} | ||||||
| 				console.log(this.subsets) | 				console.log(this.subsets,'题型数组') | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
|  | @ -1,5 +1,5 @@ | ||||||
| <template> | <template> | ||||||
| 	<!-- 阅读 --> | 	<!-- 听力 --> | ||||||
| 	<view> | 	<view> | ||||||
| 		<!-- 外层循环 --> | 		<!-- 外层循环 --> | ||||||
| 		<view v-for="(item,index) in listHearing" :key="item.id"> | 		<view v-for="(item,index) in listHearing" :key="item.id"> | ||||||
|  | @ -9,15 +9,14 @@ | ||||||
| 			</view> | 			</view> | ||||||
| 			<view class="substance"> | 			<view class="substance"> | ||||||
| 				<!-- 渲染Text --> | 				<!-- 渲染Text --> | ||||||
| 				<text :class="{'active': itemActive[item.id] === TextIndex || TextIndex === 0}" v-for="(TextItem,TextIndex) in item.tests" | 				<text :class="{ 'active': itemActive[item.id] === TextIndex  }" v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex" | ||||||
| 				 :key="TextIndex" @click="Bages_addActive(TextIndex,item.id)" class="zz"> | 				 @click="Bages_addActive(TextIndex,item.id) "> | ||||||
| 					{{TextItem.name}} | 					{{TextItem.name}} | ||||||
| 				</text> | 				</text> | ||||||
| 			</view> | 			</view> | ||||||
| 			<!-- 渲染part --> | 			<!-- 渲染part --> | ||||||
| 			<view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex"> | 			<view v-for="(TextItem,TextIndex) in item.tests" :key="TextIndex"> | ||||||
| 
 | 				<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex"> | ||||||
| 				<view v-for="(partitem,partindex) in TextItem.parts" :key="partindex" v-if="itemActive[item.id] === TextIndex || TextIndex==0"> |  | ||||||
| 					<view> | 					<view> | ||||||
| 						<view class="Part1"> | 						<view class="Part1"> | ||||||
| 							<view class="imaflex" @click="icon(partitem.id)"> | 							<view class="imaflex" @click="icon(partitem.id)"> | ||||||
|  | @ -36,9 +35,6 @@ | ||||||
| 						<view class="partshow" v-if="tk==partitem.id"> | 						<view class="partshow" v-if="tk==partitem.id"> | ||||||
| 							<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> | 							<view class="Part2" v-for="(quesitem,quesindex) in partitem.modules" :key="quesindex"> | ||||||
| 								<view class="imaflex"> | 								<view class="imaflex"> | ||||||
| 									<view class="image"> |  | ||||||
| 										<image src="http://tmp/IFVuR12hLLNO034931f24322ab271b1f57fdf626bcbf.png" mode=""> |  | ||||||
| 									</view> |  | ||||||
| 									<view>{{quesitem.typeText}}</view> | 									<view>{{quesitem.typeText}}</view> | ||||||
| 								</view> | 								</view> | ||||||
| 								<view> | 								<view> | ||||||
|  | @ -57,17 +53,12 @@ | ||||||
| 	export default { | 	export default { | ||||||
| 		data() { | 		data() { | ||||||
| 			return { | 			return { | ||||||
| 				selepad: [], |  | ||||||
| 				listHearing: [], | 				listHearing: [], | ||||||
| 				checked: [], | 				checked: [], | ||||||
| 				subsets: [], | 				subsets: [], | ||||||
| 				itemActive: {}, | 				itemActive: {}, | ||||||
| 				image: true, | 				image: true, | ||||||
| 				tk: null, | 				tk: null, | ||||||
| 				list2: [{ |  | ||||||
| 					value: '选项1', |  | ||||||
| 					id: '1' |  | ||||||
| 				}], |  | ||||||
| 
 | 
 | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
|  | @ -75,52 +66,76 @@ | ||||||
| 			this.hearing() | 			this.hearing() | ||||||
| 		}, | 		}, | ||||||
| 		methods: { | 		methods: { | ||||||
| 			// 阅读调取接口渲染 | 			// 听力调取接口渲染 | ||||||
| 			hearing() { | 			hearing() { | ||||||
| 				this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', { | 				this.$u.get('https://api.admin-v2.langsi.online/admin-api/ielts/paper/list', { | ||||||
| 					classify: 2 | 					classify: 2 | ||||||
| 				}).then(res => { | 				}).then(res => { | ||||||
| 					this.listHearing = res.data | 					this.listHearing = res.data | ||||||
|  | 					let activeindex = {} | ||||||
|  | 					let arr = res.data | ||||||
|  | 					for (let parper of arr) { | ||||||
|  | 						let test = parper.tests[0] | ||||||
|  | 						activeindex[parper.id] = 0 | ||||||
|  | 					} | ||||||
|  | 					this.itemActive = activeindex | ||||||
| 				}) | 				}) | ||||||
| 			}, | 			}, | ||||||
| 			// 听力test点击事件 | 			// 听力test点击事件 | ||||||
| 			Bages_addActive(textindex, pid) { | 			Bages_addActive(TextIndex, id) { | ||||||
| 				this.itemActive[pid] = textindex | 				this.itemActive[id] = TextIndex | ||||||
| 				this.$forceUpdate() | 				this.$forceUpdate() | ||||||
| 
 |  | ||||||
| 			}, | 			}, | ||||||
| 			// 点击变化图表 | 			// 点击变化图表 | ||||||
| 			icon(id) { | 			icon(id) { | ||||||
| 				this.image = !this.image | 				this.image = !this.image | ||||||
| 				this.tk = id | 				this.tk = id | ||||||
| 				if (this.image == false) { | 				if (this.image == false) { | ||||||
|  | 					this.tk = id | ||||||
|  | 				}else { | ||||||
| 					this.tk = null | 					this.tk = null | ||||||
| 				} | 				} | ||||||
| 			}, | 			}, | ||||||
| 			checkboxChange(parat, e) { | 			checkboxChange(parat, e) { | ||||||
| 				if (e.value) { | 				if (e.value) { | ||||||
| 					this.checked.push(parat.id) | 					this.checked.push(parat.id) | ||||||
|  | 					 const allItemsNoSubsets = parat.modules.every(item => !('subsets' in item)); | ||||||
|  | 					parat.modules.forEach(item=>{ | ||||||
|  | 						   this.$set(item, 'subsets', item.id); | ||||||
|  | 						  item.subsets = item.id; | ||||||
|  | 						this.subsets.push(item.id) | ||||||
|  | 						console.log( item.subsets) | ||||||
|  | 							}) | ||||||
|  | 					 | ||||||
| 				} else { | 				} else { | ||||||
| 					let index = this.checked.indexOf(parat.id); | 					let index = this.checked.indexOf(parat.id); | ||||||
| 					if (index !== -1) { | 					if (index !== -1) { | ||||||
| 						this.checked.splice(index, 1); | 						this.checked.splice(index, 1); | ||||||
|  | 						parat.modules.forEach(item=>{ | ||||||
|  | 							    this.$delete(item, 'subsets'); | ||||||
|  | 							    const index = this.subsets.indexOf(item.id); | ||||||
|  | 							    if (index !== -1) { | ||||||
|  | 							        this.subsets.splice(index, 1); | ||||||
|  | 							    }	 | ||||||
|  | 								}) | ||||||
|  | 								 | ||||||
| 					} | 					} | ||||||
| 
 |  | ||||||
| 				} | 				} | ||||||
| 				console.log(this.checked) | 				console.log(this.checked,'part数组') | ||||||
| 				this.$forceUpdate() | 				this.$forceUpdate() | ||||||
| 
 | 
 | ||||||
| 			}, | 			}, | ||||||
| 			checkoutzj(quesitem, id) { | 			checkoutzj(quesitem, id) { | ||||||
| 				if (id.value) { | 				if (id.value) { | ||||||
| 					this.subsets.push(quesitem.id) | 					this.subsets.push(quesitem.id) | ||||||
|  | 					console.log(quesitem) | ||||||
| 				} else { | 				} else { | ||||||
| 					let index2 = this.subsets.indexOf(quesitem.id); | 					let index2 = this.subsets.indexOf(quesitem.id); | ||||||
| 					if (index2 !== -1) { | 					if (index2 !== -1) { | ||||||
| 						this.subsets.splice(index2, 1); | 						this.subsets.splice(index2, 1); | ||||||
| 					} | 					} | ||||||
| 				} | 				} | ||||||
| 				console.log(this.subsets) | 				console.log(this.subsets,'题型数组') | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|  | @ -142,10 +157,12 @@ | ||||||
| 			background: #FFFFFF; | 			background: #FFFFFF; | ||||||
| 			border-radius: 12rpx 12rpx 12rpx 12rpx; | 			border-radius: 12rpx 12rpx 12rpx 12rpx; | ||||||
| 		} | 		} | ||||||
|  | 
 | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
| 	.Part1 { | 	.Part1 { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		justify-content: space-between; | 		justify-content: space-between; | ||||||
|  |  | ||||||
|  | @ -1,45 +1,60 @@ | ||||||
| <template> | <template> | ||||||
| 	<!-- 口语下拉 --> | 	<!-- 口语下拉 --> | ||||||
| 	<view> | 	<view> | ||||||
| 					<view class="view_left"> | 		<view class="view_left"> | ||||||
| 						<view class="view_left_pd" @click="arrow_xl"> | 			<view class="view_left_pd" @click="arrow_xl"> | ||||||
| 							{{selectedOption}} | 				<view class="pull_down"> | ||||||
| 							<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> | 					<view>{{selectedOption}}</view> | ||||||
| 							<view class="pull_Down" v-if="arrow"> | 					<u-icon name="arrow-down" size="22"></u-icon> | ||||||
| 								<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view> | 				</view> | ||||||
| 							</view> | 				<view class="pull_Down" v-if="arrow"> | ||||||
| 						</view> | 					<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view> | ||||||
| 					</view> | 				</view> | ||||||
| 					<!-- 口语主体 --> | 			</view> | ||||||
| 					<view v-for="(item,index) in slander" :key="index"> | 		</view> | ||||||
| 						<view class="view_inuygs"> | 		<!-- 口语主体 --> | ||||||
| 						<view class="header_part"> | 		<view v-for="(item,index) in slander" :key="index"> | ||||||
| 							<view class="unite">{{item.label}}</view> | 			<view class="view_inuygs"> | ||||||
| 						</view> | 				<view class="header_part"> | ||||||
| 						</view> | 					<view class="unite">{{item.label}}</view> | ||||||
| 						<view  v-for="(items,indexs) in item.list" :key='indexs'> | 				</view> | ||||||
| 							<!-- 白色大背景边框 --> | 				<view class="bottom_one" v-if="part2"> | ||||||
| 						<view class="slander_for"> | 					<view class="blue">串题</view> | ||||||
| 							<view class="textual"> | 					<view class="blue">跟读</view> | ||||||
|  | 					<view>模考</view> | ||||||
|  | 				</view> | ||||||
|  | 			</view> | ||||||
|  | 		 | ||||||
|  | 				<!-- part1--> | ||||||
|  | 				<view class="slander_for"> | ||||||
|  | 					<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'> | ||||||
|  | 						<view class="textual"> | ||||||
| 							{{items.topicEn}} | 							{{items.topicEn}} | ||||||
| 							</view> |  | ||||||
| 							<view class="bottom_one"> |  | ||||||
| 								<view>串题</view> |  | ||||||
| 								<view>跟读</view> |  | ||||||
| 								<view>模考</view> |  | ||||||
| 							</view> |  | ||||||
| 						</view> | 						</view> | ||||||
| 							 | 						<view class="bottom_one" v-if="grizzly"> | ||||||
|  | 							<view class="blue">串题</view> | ||||||
|  | 							<view class="blue">跟读</view> | ||||||
|  | 							<view>模考</view> | ||||||
| 						</view> | 						</view> | ||||||
| 					</view> | 					</view> | ||||||
|  | 				</view> | ||||||
|  | 				<!-- part2--> | ||||||
|  | 				<view class="slander_for" v-if="part2"> | ||||||
|  | 					<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'> | ||||||
|  | 						<view class="textual2"> | ||||||
|  | 							{{items.topicEn}} | ||||||
|  | 						</view> | ||||||
| 					</view> | 					</view> | ||||||
|  | 				</view> | ||||||
|  | 		</view> | ||||||
|  | 	</view> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
| 	export default { | 	export default { | ||||||
| 		data(){ | 		data() { | ||||||
| 			return { | 			return { | ||||||
| 				postdata :{ | 				postdata: { | ||||||
| 					"key": "", | 					"key": "", | ||||||
| 					"pageNum": 0, | 					"pageNum": 0, | ||||||
| 					"mode": "home", | 					"mode": "home", | ||||||
|  | @ -55,19 +70,20 @@ | ||||||
| 				}, | 				}, | ||||||
| 				//口语 | 				//口语 | ||||||
| 				slander: [], | 				slander: [], | ||||||
| 					categorize:'分类', | 				part2:false, | ||||||
| 					// 下拉框的v-if布尔值 | 				grizzly:true, | ||||||
| 					selectedOption:'Part1', | 				categorize: '分类', | ||||||
| 				arrow:false, | 				// 下拉框的v-if布尔值 | ||||||
| 				arrowDown:false, | 				selectedOption: 'Part1', | ||||||
| 				options:[ | 				arrow: false, | ||||||
| 					{ | 				arrowDown: false, | ||||||
| 						id:1, | 				options: [{ | ||||||
| 						name:'Part1' | 						id: 1, | ||||||
|  | 						name: 'Part1' | ||||||
| 					}, | 					}, | ||||||
| 					{ | 					{ | ||||||
| 						id:2, | 						id: 2, | ||||||
| 						name:'Part2' | 						name: 'Part2' | ||||||
| 					} | 					} | ||||||
| 				], | 				], | ||||||
| 			} | 			} | ||||||
|  | @ -75,10 +91,10 @@ | ||||||
| 		created() { | 		created() { | ||||||
| 			this.getList() | 			this.getList() | ||||||
| 		}, | 		}, | ||||||
| 		methods:{ | 		methods: { | ||||||
| 			 | 
 | ||||||
| 			getList() { | 			getList() { | ||||||
| 				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list',this.postdata).then(res => { | 				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', this.postdata).then(res => { | ||||||
| 					let keyArr = Object.keys(res.data) | 					let keyArr = Object.keys(res.data) | ||||||
| 					let valueArr = Object.values(res.data) | 					let valueArr = Object.values(res.data) | ||||||
| 					this.slander = keyArr.map((item, index) => { | 					this.slander = keyArr.map((item, index) => { | ||||||
|  | @ -90,43 +106,47 @@ | ||||||
| 				}) | 				}) | ||||||
| 			}, | 			}, | ||||||
| 			//下拉显示下拉框 | 			//下拉显示下拉框 | ||||||
| 			arrow_xl(){ | 			arrow_xl() { | ||||||
| 				this.arrow=!this.arrow | 				this.arrow = !this.arrow | ||||||
| 			}, | 			}, | ||||||
| 			arrow_xl2(){ | 			arrow_xl2() { | ||||||
| 				this.arrowDown=!this.arrowDown | 				this.arrowDown = !this.arrowDown | ||||||
| 			}, | 			}, | ||||||
| 			arrow_options(id){ | 			arrow_options(id) { | ||||||
| 				 this.options.forEach(item=>{ | 				this.options.forEach(item => { | ||||||
| 					 if(item.id== id){ | 					if (item.id == id) { | ||||||
| 						 this.selectedOption=item.name | 						this.selectedOption = item.name | ||||||
| 						  | 
 | ||||||
| 					 }else if(id==2){ | 					} else if (id == 2) { | ||||||
| 						 this.postdata.part="part2" | 						this.postdata.part = "part2" | ||||||
| 						 this.getList() | 						this.part2=true | ||||||
| 					 }else{ | 						this.grizzly = false | ||||||
| 						 this.postdata.part="part1" | 						this.getList() | ||||||
| 						 this.getList() | 					} else { | ||||||
| 					 } | 						this.postdata.part = "part1" | ||||||
| 				 }) | 						this.part2= false | ||||||
|  | 						this.grizzly = true | ||||||
|  | 						this.getList() | ||||||
|  | 					} | ||||||
|  | 				}) | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| 	 |  | ||||||
| 	.view_left { | 	.view_left { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		justify-content: left; | 		justify-content: left; | ||||||
| 		margin-top: 20rpx; | 		margin-top: 20rpx; | ||||||
| 	} | 	} | ||||||
| 	.view_inuygs{ | 
 | ||||||
|  | 	.view_inuygs { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		justify-content: space-between; | 		justify-content: space-between; | ||||||
| 		align-items: center; | 		align-items: center; | ||||||
| 	} | 	} | ||||||
| 	 | 
 | ||||||
| 	.view_left_pd { | 	.view_left_pd { | ||||||
| 		position: relative; | 		position: relative; | ||||||
| 		padding: 12rpx 32rpx; | 		padding: 12rpx 32rpx; | ||||||
|  | @ -136,6 +156,7 @@ | ||||||
| 		font-size: 24rpx; | 		font-size: 24rpx; | ||||||
| 		color: #072F5A; | 		color: #072F5A; | ||||||
| 	} | 	} | ||||||
|  | 
 | ||||||
| 	.unite { | 	.unite { | ||||||
| 		font-size: 28rpx; | 		font-size: 28rpx; | ||||||
| 		font-family: 'PingFang'; | 		font-family: 'PingFang'; | ||||||
|  | @ -144,60 +165,85 @@ | ||||||
| 
 | 
 | ||||||
| 		margin-right: 20rpx; | 		margin-right: 20rpx; | ||||||
| 	} | 	} | ||||||
|  | 
 | ||||||
| 	.pull_Down { | 	.pull_Down { | ||||||
| 		position: absolute; | 		position: absolute; | ||||||
| 		bottom: -130rpx; | 		bottom: -130rpx; | ||||||
| 		left: 50%; | 		left: 50%; | ||||||
| 		margin-left: -79rpx; | 		margin-left: -79rpx; | ||||||
| 		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.25); | 		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25); | ||||||
| 		border-radius: 20rpx 20rpx 20rpx 20rpx; | 		border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||||
| 		background: #FFFFFF; | 		background: #FFFFFF; | ||||||
| 		border-bottom: 2rpx solid #F2F2F2; | 		border-bottom: 2rpx solid #F2F2F2; | ||||||
|  | 
 | ||||||
| 		view { | 		view { | ||||||
| 			padding: 15rpx 50rpx; | 			padding: 15rpx 50rpx; | ||||||
| 			border-bottom: 2rpx solid #F2F2F2; | 			border-bottom: 2rpx solid #F2F2F2; | ||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
|  | 
 | ||||||
| 	.pull_Down view:last-child { | 	.pull_Down view:last-child { | ||||||
| 		border: none; | 		border: none; | ||||||
| 	} | 	} | ||||||
| 	.pd_icon { | 
 | ||||||
| 		margin-left: 8rpx; | 	.header_part { | ||||||
| 		 |  | ||||||
| 	} |  | ||||||
| 	.header_part{ |  | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		align-items: center; | 		align-items: center; | ||||||
| 		margin: 26rpx 0rpx; | 		margin: 26rpx 0rpx; | ||||||
| 	} | 	} | ||||||
| 	.slander_an{ | 
 | ||||||
|  | 	.slander_an { | ||||||
| 		padding: 6rpx 18rpx; | 		padding: 6rpx 18rpx; | ||||||
| 		background: #fff; | 		background: #fff; | ||||||
| 		border-radius: 12rpx 12rpx 12rpx 12rpx; | 		border-radius: 12rpx 12rpx 12rpx 12rpx; | ||||||
| 		margin-left: 12rpx; | 		margin-left: 12rpx; | ||||||
| 		color: #65748C; | 		color: #65748C; | ||||||
| 	} | 	} | ||||||
| 	.blue { | 
 | ||||||
| 		background: rgba(45,124,230,0.1); | 	.slander_for { | ||||||
| 		color: #2D7CE6; | 		background-color: #fff; | ||||||
|  | 		border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||||
|  | 		 | ||||||
| 	} | 	} | ||||||
| 	.slander_for{ | 
 | ||||||
|  | 	.slander_of { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 		align-items: center; | 		align-items: center; | ||||||
| 		justify-content: space-between; | 		justify-content: space-between; | ||||||
| 		background-color: #fff; | 		padding: 24rpx 0; | ||||||
|  | 		margin: 0 20rpx; | ||||||
|  | 		border-bottom: 2rpx solid #F2F2F2; | ||||||
|  | 		 | ||||||
| 	} | 	} | ||||||
| 	.textual{ | 
 | ||||||
| 			width: 290rpx; | 	.textual { | ||||||
| 			height: 80rpx; | 		width: 290rpx; | ||||||
| 		  display: -webkit-box; | 		display: -webkit-box; | ||||||
| 		   -webkit-box-orient: vertical; | 		-webkit-box-orient: vertical; | ||||||
| 		   overflow: hidden; | 		overflow: hidden; | ||||||
| 		   -webkit-line-clamp: 2; | 		-webkit-line-clamp: 2; | ||||||
| 		   |  | ||||||
| 	} | 	} | ||||||
| 	.bottom_one{ | 
 | ||||||
|  | 	.bottom_one { | ||||||
| 		display: flex; | 		display: flex; | ||||||
| 	 | 		view { | ||||||
|  | 			padding: 6rpx 18rpx; | ||||||
|  | 			background: #F4F4F4; | ||||||
|  | 			border-radius: 12rpx 12rpx 12rpx 12rpx; | ||||||
|  | 			font-size: 20rpx; | ||||||
|  | 			font-weight: 500; | ||||||
|  | 			color: rgba(101,116,140,0.8); | ||||||
|  | 			margin-left: 15rpx; | ||||||
|  | 		}	 | ||||||
|  | 		.blue { | ||||||
|  | 		background: rgba(45, 124, 230, 0.1); | ||||||
|  | 		color: #2D7CE6; | ||||||
|  | 	} | ||||||
|  | 	} | ||||||
|  | 	.pull_down{ | ||||||
|  | 		display: flex; | ||||||
|  | 		justify-content: space-between; | ||||||
|  | 		width: 100rpx; | ||||||
|  | 		font-size: 24rpx; | ||||||
| 	} | 	} | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | @ -15,7 +15,54 @@ | ||||||
| 			<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper"> | 			<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper"> | ||||||
| 				<!-- 口语 --> | 				<!-- 口语 --> | ||||||
| 				<swiper-item style="height: 300rpx;"> | 				<swiper-item style="height: 300rpx;"> | ||||||
| 					<slander></slander> | 					<view> | ||||||
|  | 						<view class="view_left"> | ||||||
|  | 							<view class="view_left_pd" @click="arrow_xl"> | ||||||
|  | 								<view class="pull_down"> | ||||||
|  | 									<view>{{selectedOption}}</view> | ||||||
|  | 									<u-icon name="arrow-down" size="22"></u-icon> | ||||||
|  | 								</view> | ||||||
|  | 								<view class="pull_Down" v-if="arrow"> | ||||||
|  | 									<view v-for="(item,index) in options" :key="index" @click="arrow_options(item.id)">{{item.name}}</view> | ||||||
|  | 								</view> | ||||||
|  | 							</view> | ||||||
|  | 						</view> | ||||||
|  | 						<!-- 口语主体 --> | ||||||
|  | 						<view v-for="(item,index) in slander" :key="index"> | ||||||
|  | 							<view class="view_inuygs"> | ||||||
|  | 								<view class="header_part"> | ||||||
|  | 									<view class="unite">{{item.label}}</view> | ||||||
|  | 								</view> | ||||||
|  | 								<view class="bottom_one" v-if="part2"> | ||||||
|  | 									<view class="blue">串题</view> | ||||||
|  | 									<view class="blue">跟读</view> | ||||||
|  | 									<view>模考</view> | ||||||
|  | 								</view> | ||||||
|  | 							</view> | ||||||
|  | 						 | ||||||
|  | 								<!-- part1--> | ||||||
|  | 								<view class="slander_for"> | ||||||
|  | 									<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'> | ||||||
|  | 										<view class="textual"> | ||||||
|  | 											{{items.topicEn}} | ||||||
|  | 										</view> | ||||||
|  | 										<view class="bottom_one" v-if="grizzly"> | ||||||
|  | 											<view class="blue">串题</view> | ||||||
|  | 											<view class="blue">跟读</view> | ||||||
|  | 											<view>模考</view> | ||||||
|  | 										</view> | ||||||
|  | 									</view> | ||||||
|  | 								</view> | ||||||
|  | 								<!-- part2--> | ||||||
|  | 								<view class="slander_for" v-if="part2"> | ||||||
|  | 									<view class="slander_of" v-for="(items,indexs) in item.list" :key='indexs'> | ||||||
|  | 										<view class="textual2"> | ||||||
|  | 											{{items.topicEn}} | ||||||
|  | 										</view> | ||||||
|  | 									</view> | ||||||
|  | 								</view> | ||||||
|  | 						</view> | ||||||
|  | 					</view> | ||||||
| 				</swiper-item> | 				</swiper-item> | ||||||
| 				<!-- 写作 --> | 				<!-- 写作 --> | ||||||
| 				<swiper-item> | 				<swiper-item> | ||||||
|  | @ -79,14 +126,49 @@ | ||||||
| 				search: true, | 				search: true, | ||||||
| 				listType: [], | 				listType: [], | ||||||
| 				idList: [], | 				idList: [], | ||||||
|  | 				// 口语 | ||||||
|  | 				postdata: { | ||||||
|  | 					"key": "", | ||||||
|  | 					"pageNum": 0, | ||||||
|  | 					"mode": "home", | ||||||
|  | 					"part": "part1", | ||||||
|  | 					"order": "0", | ||||||
|  | 					"type": "", | ||||||
|  | 					"isStudy": 0, | ||||||
|  | 					"isFavorite": 0, | ||||||
|  | 					"isEvlua": 0, | ||||||
|  | 					"isFun": 0, | ||||||
|  | 					"level": 0, | ||||||
|  | 					"isNew": 0 | ||||||
|  | 				}, | ||||||
|  | 				//口语 | ||||||
|  | 				slander: [], | ||||||
|  | 				part2:false, | ||||||
|  | 				grizzly:true, | ||||||
|  | 				categorize: '分类', | ||||||
|  | 				// 下拉框的v-if布尔值 | ||||||
|  | 				selectedOption: 'Part1', | ||||||
|  | 				arrow: false, | ||||||
|  | 				arrowDown: false, | ||||||
|  | 				options: [{ | ||||||
|  | 						id: 1, | ||||||
|  | 						name: 'Part1' | ||||||
|  | 					}, | ||||||
|  | 					{ | ||||||
|  | 						id: 2, | ||||||
|  | 						name: 'Part2' | ||||||
|  | 					} | ||||||
|  | 				], | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
| 		components:{ | 		components:{ | ||||||
| 			audiology, | 			audiology, | ||||||
| 			reading, | 			reading, | ||||||
| 			slander, |  | ||||||
| 			compose | 			compose | ||||||
| 		}, | 		}, | ||||||
|  | 		created() { | ||||||
|  | 			this.getList() | ||||||
|  | 		}, | ||||||
| 		methods: { | 		methods: { | ||||||
| 			upType(index, num) { | 			upType(index, num) { | ||||||
| 				this.listType.splice(index, 1, num) | 				this.listType.splice(index, 1, num) | ||||||
|  | @ -94,16 +176,6 @@ | ||||||
| 			change(index) { | 			change(index) { | ||||||
| 				this.current = index; | 				this.current = index; | ||||||
| 			}, | 			}, | ||||||
| 			//写作接口 |  | ||||||
| 			// getCompose() { |  | ||||||
| 			// 	this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list').then(res => { |  | ||||||
| 			// 		this.Compose = res.data |  | ||||||
| 			// 		console.log(this.Compose) |  | ||||||
| 			// 		for (let i = 0; i < res.data.length; i++) { |  | ||||||
| 			// 			this.listType.push(1) |  | ||||||
| 			// 		} |  | ||||||
| 			// 	}) |  | ||||||
| 			// }, |  | ||||||
| 			// 选中某个单选框时,由radio时触发 | 			// 选中某个单选框时,由radio时触发 | ||||||
| 			radioCheck(index) { | 			radioCheck(index) { | ||||||
| 				if (this.radioValue == this.list2[index].id) { | 				if (this.radioValue == this.list2[index].id) { | ||||||
|  | @ -121,6 +193,43 @@ | ||||||
| 					this.search = false | 					this.search = false | ||||||
| 				} | 				} | ||||||
| 			}, | 			}, | ||||||
|  | 			getList() { | ||||||
|  | 				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', this.postdata).then(res => { | ||||||
|  | 					let keyArr = Object.keys(res.data) | ||||||
|  | 					let valueArr = Object.values(res.data) | ||||||
|  | 					this.slander = keyArr.map((item, index) => { | ||||||
|  | 						return { | ||||||
|  | 							label: item, | ||||||
|  | 							list: valueArr[index] | ||||||
|  | 						} | ||||||
|  | 					}) | ||||||
|  | 				}) | ||||||
|  | 			}, | ||||||
|  | 			//下拉显示下拉框 | ||||||
|  | 			arrow_xl() { | ||||||
|  | 				this.arrow = !this.arrow | ||||||
|  | 			}, | ||||||
|  | 			arrow_xl2() { | ||||||
|  | 				this.arrowDown = !this.arrowDown | ||||||
|  | 			}, | ||||||
|  | 			arrow_options(id) { | ||||||
|  | 				this.options.forEach(item => { | ||||||
|  | 					if (item.id == id) { | ||||||
|  | 						this.selectedOption = item.name | ||||||
|  | 			 | ||||||
|  | 					} else if (id == 2) { | ||||||
|  | 						this.postdata.part = "part2" | ||||||
|  | 						this.part2=true | ||||||
|  | 						this.grizzly = false | ||||||
|  | 						this.getList() | ||||||
|  | 					} else { | ||||||
|  | 						this.postdata.part = "part1" | ||||||
|  | 						this.part2= false | ||||||
|  | 						this.grizzly = true | ||||||
|  | 						this.getList() | ||||||
|  | 					} | ||||||
|  | 				}) | ||||||
|  | 			}, | ||||||
| 			radioGroupChange() { | 			radioGroupChange() { | ||||||
| 
 | 
 | ||||||
| 			} | 			} | ||||||
|  | @ -136,7 +245,6 @@ | ||||||
| 
 | 
 | ||||||
| 	.view_body { | 	.view_body { | ||||||
| 		height: 89vh; | 		height: 89vh; | ||||||
| 		overflow-y: auto; |  | ||||||
| 		width: 91.3%; | 		width: 91.3%; | ||||||
| 		margin: 0 auto; | 		margin: 0 auto; | ||||||
| 		border-radius: 0rpx 0rpx 0rpx 0rpx; | 		border-radius: 0rpx 0rpx 0rpx 0rpx; | ||||||
|  | @ -295,17 +403,132 @@ | ||||||
| 			white-space: nowrap; | 			white-space: nowrap; | ||||||
| 			overflow: hidden | 			overflow: hidden | ||||||
| 		} | 		} | ||||||
|  | 		.view_left { | ||||||
|  | 			display: flex; | ||||||
|  | 			justify-content: left; | ||||||
|  | 			margin-top: 20rpx; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.view_inuygs { | ||||||
|  | 			display: flex; | ||||||
|  | 			justify-content: space-between; | ||||||
|  | 			align-items: center; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.view_left_pd { | ||||||
|  | 			position: relative; | ||||||
|  | 			padding: 12rpx 32rpx; | ||||||
|  | 			background: #FFFFFF; | ||||||
|  | 			border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||||
|  | 			margin-right: 15rpx; | ||||||
|  | 			font-size: 24rpx; | ||||||
|  | 			color: #072F5A; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.unite { | ||||||
|  | 			font-size: 28rpx; | ||||||
|  | 			font-family: 'PingFang'; | ||||||
|  | 			font-weight: 800; | ||||||
|  | 			color: #2E4975; | ||||||
|  | 		 | ||||||
|  | 			margin-right: 20rpx; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.pull_Down { | ||||||
|  | 			position: absolute; | ||||||
|  | 			bottom: -130rpx; | ||||||
|  | 			left: 50%; | ||||||
|  | 			margin-left: -79rpx; | ||||||
|  | 			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25); | ||||||
|  | 			border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||||
|  | 			background: #FFFFFF; | ||||||
|  | 			border-bottom: 2rpx solid #F2F2F2; | ||||||
|  | 		 | ||||||
|  | 			view { | ||||||
|  | 				padding: 15rpx 50rpx; | ||||||
|  | 				border-bottom: 2rpx solid #F2F2F2; | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.pull_Down view:last-child { | ||||||
|  | 			border: none; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.header_part { | ||||||
|  | 			display: flex; | ||||||
|  | 			align-items: center; | ||||||
|  | 			margin: 26rpx 0rpx; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.slander_an { | ||||||
|  | 			padding: 6rpx 18rpx; | ||||||
|  | 			background: #fff; | ||||||
|  | 			border-radius: 12rpx 12rpx 12rpx 12rpx; | ||||||
|  | 			margin-left: 12rpx; | ||||||
|  | 			color: #65748C; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.slander_for { | ||||||
|  | 			background-color: #fff; | ||||||
|  | 			border-radius: 20rpx 20rpx 20rpx 20rpx; | ||||||
|  | 			 | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.slander_of { | ||||||
|  | 			display: flex; | ||||||
|  | 			align-items: center; | ||||||
|  | 			justify-content: space-between; | ||||||
|  | 			padding: 24rpx 0; | ||||||
|  | 			margin: 0 20rpx; | ||||||
|  | 			border-bottom: 2rpx solid #F2F2F2; | ||||||
|  | 			 | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.textual { | ||||||
|  | 			width: 290rpx; | ||||||
|  | 			display: -webkit-box; | ||||||
|  | 			-webkit-box-orient: vertical; | ||||||
|  | 			overflow: hidden; | ||||||
|  | 			-webkit-line-clamp: 2; | ||||||
|  | 		} | ||||||
|  | 		 | ||||||
|  | 		.bottom_one { | ||||||
|  | 			display: flex; | ||||||
|  | 			view { | ||||||
|  | 				padding: 6rpx 18rpx; | ||||||
|  | 				background: #F4F4F4; | ||||||
|  | 				border-radius: 12rpx 12rpx 12rpx 12rpx; | ||||||
|  | 				font-size: 20rpx; | ||||||
|  | 				font-weight: 500; | ||||||
|  | 				color: rgba(101,116,140,0.8); | ||||||
|  | 				margin-left: 15rpx; | ||||||
|  | 			}	 | ||||||
|  | 			.blue { | ||||||
|  | 			background: rgba(45, 124, 230, 0.1); | ||||||
|  | 			color: #2D7CE6; | ||||||
|  | 		} | ||||||
|  | 		} | ||||||
|  | 		.pull_down{ | ||||||
|  | 			display: flex; | ||||||
|  | 			justify-content: space-between; | ||||||
|  | 			width: 100rpx; | ||||||
|  | 			font-size: 24rpx; | ||||||
|  | 		} | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	.footer { | 	.footer { | ||||||
|  | 		position: fixed; | ||||||
|  | 		bottom: 0; | ||||||
| 		width: 100%; | 		width: 100%; | ||||||
| 		background: #FFFFFF; | 		background: #FFFFFF; | ||||||
| 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | ||||||
| 		padding: 30rpx 32rpx; | 		padding: 30rpx 32rpx; | ||||||
| 	} | 	} | ||||||
| 	.footer2{ | 	.footer2{ | ||||||
|  | 		position: fixed; | ||||||
|  | 		bottom: 0; | ||||||
| 		width: 100%; | 		width: 100%; | ||||||
| 		background: #FFFFFF; | 		background: #FFFFFF; | ||||||
| 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user
	 libowei
						libowei