对口语进行列表渲染
This commit is contained in:
		
							parent
							
								
									4ac7184bd5
								
							
						
					
					
						commit
						1ae42a3c2a
					
				|  | @ -41,7 +41,7 @@ const install = (Vue, vm) => { | |||
| 		// 方式四,如果token放在了Storage本地存储中,拦截是每次请求都执行的
 | ||||
| 		// 所以哪怕您重新登录修改了Storage,下一次的请求将会是最新值
 | ||||
| 		// const token = uni.getStorageSync('token');
 | ||||
| 		const token = "Bearer aca170b01b4b4c88b3629fde91a3b2b7" | ||||
| 		const token = "Bearer e33c7c66dd374ea3a07312503d548978" | ||||
| 		// console.log("我是token", token)
 | ||||
| 		config.header.Authorization = token;  | ||||
| 		// #ifdef H5
 | ||||
|  |  | |||
|  | @ -1,37 +1,42 @@ | |||
| <template> | ||||
| 	<!-- 口语下拉 --> | ||||
| 			<view> | ||||
| 				<view class="view_left"> | ||||
| 					<view class="view_left_pd" @click="arrow_xl"> | ||||
| 						{{selectedOption}} | ||||
| 						<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> | ||||
| 						<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 class="view_left"> | ||||
| 						<view class="view_left_pd" @click="arrow_xl"> | ||||
| 							{{selectedOption}} | ||||
| 							<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> | ||||
| 							<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 class="view_left_pd" @click="arrow_xl2"> | ||||
| 						{{categorize}} | ||||
| 						<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> | ||||
| 						<view class="pull_DownTow" v-if="arrowDown"> | ||||
| 							<view v-for="(item,index) in options2 " :key="index" @click="Classification(item.id)">{{item.name}}</view> | ||||
| 						</view> | ||||
| 					</view> | ||||
| 				</view> | ||||
| 				<!-- 口语主体 --> | ||||
| 				<view v-for="(item,index) in slander" :key="index"> | ||||
| 					<view class="unite">{{item.label}}</view> | ||||
| 					<view class="slander_for"> | ||||
| 						<view class="slander_behavior" v-for="(items,indexs) in item.list" :key='indexs'> | ||||
| 							<view class="slander_left">{{items.topicEn}}</view> | ||||
| 							<view style="display: flex;"> | ||||
| 								<view class="slander_an">串题</view> | ||||
| 								<view class="slander_an blue">跟读</view> | ||||
| 								<view class="slander_an blue">模考</view> | ||||
| 						<view class="view_left_pd" @click="arrow_xl2"> | ||||
| 							{{categorize}} | ||||
| 							<u-icon name="arrow-down" size="22" class="pd_icon"></u-icon> | ||||
| 							<view class="pull_DownTow" v-if="arrowDown"> | ||||
| 								<view v-for="(item,index) in options2 " :key="index" @click="Classification(item.id)">{{item.name}}</view> | ||||
| 							</view> | ||||
| 						</view> | ||||
| 					</view> | ||||
| 				</view> | ||||
| 			</view> | ||||
| 					<!-- 口语主体 --> | ||||
| 					<view v-for="(item,index) in slander" :key="index"> | ||||
| 						<view class="view_inuygs"> | ||||
| 						<view class="header_part"> | ||||
| 							<view class="unite">{{selectedOption}}</view> | ||||
| 							<view class="unite">{{item.label}}</view> | ||||
| 						</view> | ||||
| 						<view style="display: flex;"> | ||||
| 							<view class="slander_an">串题</view> | ||||
| 							<view class="slander_an blue">跟读</view> | ||||
| 							<view class="slander_an blue">模考</view> | ||||
| 						</view> | ||||
| 						</view> | ||||
| 						<view class="slander_for"> | ||||
| 							<view class="slander_behavior" v-for="(items,indexs) in item.list" :key='indexs'> | ||||
| 								<view class="slander_left">{{items.topicEn}}</view> | ||||
| 							</view> | ||||
| 						</view> | ||||
| 					</view> | ||||
| 					</view> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
|  | @ -81,7 +86,7 @@ | |||
| 				], | ||||
| 			} | ||||
| 		}, | ||||
| 		onLoad() { | ||||
| 		created() { | ||||
| 			this.getList() | ||||
| 		}, | ||||
| 		methods:{ | ||||
|  | @ -109,6 +114,7 @@ | |||
| 				 this.options.forEach(item=>{ | ||||
| 					 if(item.id== id){ | ||||
| 						 this.selectedOption=item.name | ||||
| 						  | ||||
| 					 }else if(id==2){ | ||||
| 						 this.postdata.part="part2" | ||||
| 						 this.getList() | ||||
|  | @ -137,6 +143,11 @@ | |||
| 		justify-content: left; | ||||
| 		margin-top: 20rpx; | ||||
| 	} | ||||
| 	.view_inuygs{ | ||||
| 		display: flex; | ||||
| 		justify-content: space-between; | ||||
| 		align-items: center; | ||||
| 	} | ||||
| 	 | ||||
| 	.view_left_pd { | ||||
| 		position: relative; | ||||
|  | @ -145,13 +156,15 @@ | |||
| 		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: 26rpx 0rpx; | ||||
| 
 | ||||
| 		margin-right: 20rpx; | ||||
| 	} | ||||
| 	.slander_for { | ||||
| 		background: #FFFFFF; | ||||
|  | @ -159,16 +172,12 @@ | |||
| 		padding: 0 30rpx; | ||||
| 	} | ||||
| 	.slander_behavior { | ||||
| 		display: flex; | ||||
| 		justify-content: space-between; | ||||
| 		 | ||||
| 		padding: 20rpx 0rpx; | ||||
| 		border-bottom: 2rpx solid #F2F2F2; | ||||
| 	} | ||||
| 	.slander_left { | ||||
| 		width: 328rpx; | ||||
| 		text-overflow: ellipsis; | ||||
| 		white-space: nowrap; | ||||
| 		overflow: hidden | ||||
| 		 | ||||
| 	} | ||||
| 	.pull_DownTow{ | ||||
| 	width: 150rpx; | ||||
|  | @ -206,5 +215,22 @@ | |||
| 	} | ||||
| 	.pd_icon { | ||||
| 		margin-left: 8rpx; | ||||
| 		 | ||||
| 	} | ||||
| 	.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; | ||||
| 	} | ||||
| 	.blue { | ||||
| 		background: rgba(45,124,230,0.1); | ||||
| 		color: #2D7CE6; | ||||
| 	} | ||||
| </style> | ||||
|  |  | |||
|  | @ -5,7 +5,7 @@ | |||
| 			</u-navbar> | ||||
| 			<!-- 搜索 --> | ||||
| 			<view class="view_search" v-if="search"> | ||||
| 				<u-search :show-action="false" :animation="true" bg-color="#fff" placeholder="搜索相关内容..."></u-search> | ||||
| 				<u-search :show-action="false" :animation="true" bg-color="#fff" placeholder="搜索相关内容..." color="#3E97FF"></u-search> | ||||
| 			</view> | ||||
| 			<!--导航栏 --> | ||||
| 			<view class="view_tabs"> | ||||
|  | @ -14,7 +14,7 @@ | |||
| 			<!-- 轮播图 --> | ||||
| 			<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent" class="swiper"> | ||||
| 				<!-- 口语 --> | ||||
| 				<swiper-item> | ||||
| 				<swiper-item style="height: 300rpx;"> | ||||
| 					<slander></slander> | ||||
| 				</swiper-item> | ||||
| 				<!-- 写作 --> | ||||
|  | @ -149,12 +149,10 @@ | |||
| 				<swiper-item> | ||||
| 					<reading></reading> | ||||
| 				</swiper-item> | ||||
| 
 | ||||
| 
 | ||||
| 			</swiper> | ||||
| 		</view> | ||||
| 		<!-- 底部按钮 --> | ||||
| 		<view class="footer"> | ||||
| 		<view :class="search== true ?  'footer2' : 'footer'"> | ||||
| 			<view class="footer_button"> | ||||
| 				<view :class="search==true  ? 'button_andadd' :'button_show'">确定添加(4)</view> | ||||
| 				<view class="footer_button_right" v-if="search">口语模考</view> | ||||
|  | @ -206,9 +204,6 @@ | |||
| 			reading, | ||||
| 			slander | ||||
| 		}, | ||||
| 		onLoad() { | ||||
| 			// this.getCompose() | ||||
| 		}, | ||||
| 		methods: { | ||||
| 			upType(index, num) { | ||||
| 				this.listType.splice(index, 1, num) | ||||
|  | @ -405,7 +400,7 @@ | |||
| 		} | ||||
| 
 | ||||
| 		.swiper { | ||||
| 			height: 62vh; | ||||
| 			height: 80%; | ||||
| 		} | ||||
| 
 | ||||
| 		swiper-item { | ||||
|  | @ -427,6 +422,13 @@ | |||
| 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | ||||
| 		padding: 30rpx 32rpx; | ||||
| 	} | ||||
| 	.footer2{ | ||||
| 		width: 100%; | ||||
| 		background: #FFFFFF; | ||||
| 		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25); | ||||
| 		padding: 30rpx 32rpx; | ||||
| 		margin-top: 25rpx; | ||||
| 	} | ||||
| 
 | ||||
| 	.footer_button { | ||||
| 		display: flex; | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	Block a user
	 libowei
						libowei