smartmeter-app/pages_teacher/teacher_teachers/teacher_writeadd.vue

<template>
	<view class="view_template">
		<view class="view_body">
			<u-navbar :is-back="true" title='添加作业' title-color="#000" :border-bottom="false" :background="true"
				id="navbar">
			</u-navbar>
			<!-- 搜索 -->
			<view class="view_search" v-if="search">
				<u-search v-model="searchKeyword" :show-action="false" :animation="true" bg-color="#fff"
					placeholder="搜索相关内容..." color="#3E97FF" @input="searchs()"></u-search>
			</view>
			<!-- <view class="serchbox">
				<view class="serchimg">
					<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">

					</image>
				</view>
				<input type="text"
					   v-model="searchKeyword"
					   placeholder="搜索相关内容..."
					   class="input"
					   placeholder-style="color:#C7CDD3"
					   @input="search()">
			</view> -->
			<!--导航栏 -->
			<view class="view_tabs">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#2D7CE6"
					bg-color="0"></u-tabs>
			</view>
			<!-- 轮播图 -->
			<swiper :interval="5000" :duration="1000" is-scroll="true" :current="current" @change="updateCurrent"
				class="swiper">
				<!-- 口语 -->
				<swiper-item style="height: 300rpx;">
					<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 slanderpart1" v-if="selectedOption=='Part1'" :key="index">
							<view class="view_inuygs">
								<view class="header_part">
									<view class="unite">{{ item.label }}</view>
								</view>
								<view class="bottom_one" v-if="item.list.length <= 1"
									v-for="(items, indexs) in item.list" :key='indexs'>
									<view :class="{ 'active': items.ischuanti === true }"
										@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
									<view :class="{ 'active': items.isgendu === true }"
										@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
									<view :class="{ 'active': items.ismk === true }"
										@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
								</view>
							</view>

							<!-- part1-->
							<view class="slander_for" v-if="item.list.length > 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual" v-html="highlightSearch( items.topicEn)">

									</view>
									<view class="bottom_one">
										<view :class="{ 'active': items.ischuanti === true }"
											@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
										<view :class="{ 'active': items.isgendu === true }"
											@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
										<view :class="{ 'active': items.ismk === true }"
											@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
									</view>
								</view>
							</view>
							<!-- part2-->
							<view class="slander_for" v-if="item.list.length <= 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual2" v-html="highlightSearch( items.topicEn)">

									</view>
								</view>
							</view>
						</view>
						<!-- part2 -->
						<view v-for="(item, index) in slanderpart2" v-if="selectedOption=='Part2'" :key="index">
							<view class="view_inuygs">
								<view class="header_part">
									<view class="unite">{{ item.label }}</view>
								</view>
								<view class="bottom_one" v-if="item.list.length <= 1"
									v-for="(items, indexs) in item.list" :key='indexs'>
									<view :class="{ 'active': items.ischuanti === true }"
										@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
									<view :class="{ 'active': items.isgendu === true }"
										@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
									<view :class="{ 'active': items.ismk === true }"
										@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
								</view>
							</view>

							<!-- part1-->
							<view class="slander_for" v-if="item.list.length > 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual" v-html="highlightSearch( items.topicEn)">

									</view>
									<view class="bottom_one">
										<view :class="{ 'active': items.ischuanti === true }"
											@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
										<view :class="{ 'active': items.isgendu === true }"
											@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
										<view :class="{ 'active': items.ismk === true }"
											@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
									</view>
								</view>
							</view>
							<!-- part2-->
							<view class="slander_for" v-if="item.list.length <= 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual2" v-html="highlightSearch( items.topicEn)">

									</view>
								</view>
							</view>
						</view>
						<!-- part3 -->
						<view v-for="(item, index) in slanderpart3" v-if="selectedOption=='Part3'" :key="index">
							<view class="view_inuygs">
								<view class="header_part">
									<view class="unite">{{ item.label }}</view>
								</view>
								<view class="bottom_one" v-if="item.list.length <= 1"
									v-for="(items, indexs) in item.list" :key='indexs'>
									<view :class="{ 'active': items.ischuanti === true }"
										@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
									<view :class="{ 'active': items.isgendu === true }"
										@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
									<view :class="{ 'active': items.ismk === true }"
										@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
								</view>
							</view>

							<!-- part1-->
							<view class="slander_for" v-if="item.list.length > 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual" v-html="highlightSearch( items.topicEn)">

									</view>
									<view class="bottom_one">
										<view :class="{ 'active': items.ischuanti === true }"
											@click="updateSelectspeak(items, 'ischuanti', indexs)">串题</view>
										<view :class="{ 'active': items.isgendu === true }"
											@click="updateSelectspeak(items, 'isgendu', indexs)">跟读</view>
										<view :class="{ 'active': items.ismk === true }"
											@click="updateSelectspeak(items, 'ismk', indexs)">模考</view>
									</view>
								</view>
							</view>
							<!-- part2-->
							<view class="slander_for" v-if="item.list.length <= 1">
								<view class="slander_of" v-for="(items, indexs) in item.list" :key='indexs'>
									<view class="textual2" v-html="highlightSearch( items.topicEn)">

									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

				<!-- 写作 -->
				<swiper-item>

					<compose ref="compose"></compose>
				</swiper-item>
				<!--听力  -->
				<swiper-item>
					<audiology ref="audiology"></audiology>
				</swiper-item>
				<!-- 阅读 -->
				<swiper-item>
					<reading ref="reading"></reading>
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部按钮 -->
		<view :class="search == true ? 'footer2' : 'footer'" v-if="totalLength != 0">
			<view class="footer_button">
				<view :class="search == true ? 'button_andadd' : 'button_show'"  @click="submessage()">确定添加（{{ totalLength }}）</view>
				<view class="footer_button_right" v-if="search" :class="mocktype==1?'act1':''" @click="ismock()">口语模考</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import audiology from './components/audiology.vue'
	import reading from './components/reading.vue'
	import slander from './components/slander.vue'
	import compose from './components/compose.vue'
	export default {
		data() {
			return {
				// 导航栏
				list: [{
						name: '口语'
					},
					{
						name: '写作'
					},
					{
						name: '听力'
					},
					{
						name: '阅读'
					}
				],
				radio: [{
					name: '1',
					disabled: false
				}],
				// 写作
				Compose: [],
				num: 0,
				// 下拉框的v-if布尔值
				radioValue: '',
				part1: true,
				current: 0,
				search: true,
				listType: [],
				idList: [],
				// 口语
				postdata: {
					"key": "",
					"pageNum": 0,
					"mode": "home",
					"part": "part1",
					"order": "0",
					"type": "",
					"isStudy": 0,
					"isFavorite": 0,
					"isEvlua": 0,
					"isFun": 0,
					"level": 0,
					"isNew": 0
				},
				slanderpart1: [],
				originslanderpart1: [],
				slanderpart2: [],
				originslanderpart2: [],
				slanderpart3: [],
				originslanderpart3: [],
				part2: false,
				grizzly: true,
				categorize: '分类',
				// 下拉框的v-if布尔值
				selectedOption: 'Part1',
				arrow: false,
				arrowDown: false,
				options: [{
						id: 1,
						name: 'Part1'
					},
					{
						id: 2,
						name: 'Part2'
					},
					{
						id: 3,
						name: 'Part3'
					}
				],
				totalLength: 0,
				searchKeyword: '',
				userId: null,
				selectspeak: [],
				selectwrite: [],
				selectlisten: [],
				selectread: [],
				mocktype:'0',
			}
		},
		components: {
			audiology,
			reading,
			compose
		},
		onShow() {
			this.getList()
		},
		onLoad(option) {

		
			if(option!=undefined){
					const dataToSave = JSON.parse(decodeURIComponent(option.dataToSave))
					this.selectspeak = dataToSave.selectspeak
					this.selectwrite = dataToSave.selectwrite
					this.selectlisten = dataToSave.selectlisten
					this.selectread = dataToSave.selectread
					this.mocktype=dataToSave.mocktype
					this.$refs.compose.updatawrite(this.selectwrite)
					this.$refs.audiology.updatawrite(this.selectlisten)
					this.$refs.reading.updatawrite(this.selectread)
					this.calculateTotalLength()
					console.log(dataToSave,'optionoptionoptionoptionoptionoption');
			}
			
			
		},
		methods: {
			ismock(){
				console.log(this.mocktype,'this.mocktype');
				if(this.mocktype=="0"){
					this.mocktype='1'
				}else if(this.mocktype=="1"){
					this.mocktype='0'
				}
			},
			updatawrite(data) {
				this.selectwrite = data
				console.log(this.selectwrite, ' this.selectwrite this.selectwrite');
				this.calculateTotalLength()
			},
			updataread(data) {
				this.selectread = data
				console.log(this.selectread, ' this.selectwrite this.selectwrite');
				this.calculateTotalLength()
			},
			updatalisten(data) {
				this.selectlisten = data
				console.log(this.selectlisten, ' this.selectwrite this.selectwrite');
				this.calculateTotalLength()
			},
			submessage() {
				const dataToSave = {
					selectspeak: this.selectspeak,
					selectwrite: this.selectwrite,
					selectlisten: this.selectlisten,
					selectread: this.selectread,
					mocktype:this.mocktype,
				};

				// 将数据保存在本地缓存中
				uni.setStorageSync('selectforwork', dataToSave);
				uni.navigateBack({
					delta: 1, // Number of pages to go back
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.error(err);
					}
				});
			},
			fuwei() {

				// this.slander = JSON.parse(JSON.stringify(this.originslanderpart1));
				// this.selectedIds.forEach(selectedItem => {
				// 	const index = this.stulist.findIndex(item => item.id === selectedItem.id);
				// 	if (index !== -1) {
				// 		this.$set(this.stulist, index, { ...this.stulist[index], isSelected: true });
				// 	}
				// });
			},
			searchs() {
				if (this.selectedOption == 'Part1') {
					const filteredSlander = [];

					// 将搜索关键字转换为小写，使搜索不区分大小写
					const searchKeywordLowerCase = this.searchKeyword.toLowerCase();

					// 遍历原始数据
					for (const item of this.originslanderpart1) {
						const filteredList = item.list.filter(subItem => {
							// 将目标字符串转换为小写，使匹配不区分大小写
							const introductionLowerCase = subItem.introduction.toLowerCase();
							const topicEnLowerCase = subItem.topicEn.toLowerCase();

							// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
							return (
								introductionLowerCase.includes(searchKeywordLowerCase) ||
								topicEnLowerCase.includes(searchKeywordLowerCase)
							);
						});

						// 如果有匹配项，添加到 filteredSlander 中
						if (filteredList.length > 0) {
							filteredSlander.push({
								label: item.label,
								list: filteredList
							});
						}
					}

					// 更新 this.slander
					this.slanderpart1 = filteredSlander;
				} else if (this.selectedOption == 'Part2') {
					const filteredSlander = [];

					// 将搜索关键字转换为小写，使搜索不区分大小写
					const searchKeywordLowerCase = this.searchKeyword.toLowerCase();

					// 遍历原始数据
					for (const item of this.originslanderpart2) {
						const filteredList = item.list.filter(subItem => {
							// 将目标字符串转换为小写，使匹配不区分大小写
							const introductionLowerCase = subItem.introduction.toLowerCase();
							const topicEnLowerCase = subItem.topicEn.toLowerCase();

							// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
							return (
								introductionLowerCase.includes(searchKeywordLowerCase) ||
								topicEnLowerCase.includes(searchKeywordLowerCase)
							);
						});

						// 如果有匹配项，添加到 filteredSlander 中
						if (filteredList.length > 0) {
							filteredSlander.push({
								label: item.label,
								list: filteredList
							});
						}
					}

					// 更新 this.slander
					this.slanderpart2 = filteredSlander;
				} else if (this.selectedOption == 'Part3') {
					const filteredSlander = [];

					// 将搜索关键字转换为小写，使搜索不区分大小写
					const searchKeywordLowerCase = this.searchKeyword.toLowerCase();

					// 遍历原始数据
					for (const item of this.originslanderpart3) {
						const filteredList = item.list.filter(subItem => {
							// 将目标字符串转换为小写，使匹配不区分大小写
							const introductionLowerCase = subItem.introduction.toLowerCase();
							const topicEnLowerCase = subItem.topicEn.toLowerCase();

							// 检查 introduction 或 topicEn 是否包含小写的 searchKeyword
							return (
								introductionLowerCase.includes(searchKeywordLowerCase) ||
								topicEnLowerCase.includes(searchKeywordLowerCase)
							);
						});

						// 如果有匹配项，添加到 filteredSlander 中
						if (filteredList.length > 0) {
							filteredSlander.push({
								label: item.label,
								list: filteredList
							});
						}
					}

					// 更新 this.slander
					this.slanderpart3 = filteredSlander;
				}


			},
			highlightSearch(name) {
				// 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
				if (this.searchKeyword) {
					const regex = new RegExp(this.searchKeyword, 'gi');
					return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
				}
				return name;
			},
			calculateTotalLength() {
				this.totalLength = this.selectspeak.length + this.selectwrite.length + this.selectlisten.length + this
					.selectread.length;

			},
			calculateTotal(array) {
				return array.reduce((total, item) => {
					// 假设每个元素都有一个名为value的属性
					return total + (item.value || 0); // 如果value为undefined，将其视为0
				}, 0);
			},
			updateSelectspeak(items, type, indexs) {
				// 切换slander数组中的值
				items[type] = !items[type];

				// 获取对应的speakingType值
				const speakingTypeValue = this.getSpeakingTypeValue(type);

				// 检查selectspeak数组中是否已存在对应的对象
				const existingSelectspeak = this.selectspeak.find(select => select.id === items.id);

				if (existingSelectspeak) {
					// 如果已存在，在speakingType中添加新的值或移除对应的值
					if (items[type]) {
						// 如果选中了该项，请添加speakingType
						if (!existingSelectspeak.speakingType.includes(speakingTypeValue)) {
							existingSelectspeak.speakingType.push(speakingTypeValue);
						}
					} else {
						// 如果取消选中该项，请删除speakingType
						existingSelectspeak.speakingType = existingSelectspeak.speakingType
							.filter(value => value !== speakingTypeValue);

						// 如果speakingType为空，则清除selectspeak项
						if (existingSelectspeak.speakingType.length === 0) {
							const indexToRemove = this.selectspeak.indexOf(existingSelectspeak);
							this.selectspeak.splice(indexToRemove, 1);
						}
					}
				} else {
					// 如果不存在，创建新的对象并添加到selectspeak数组中
					if (items[type]) {
						this.selectspeak.push({
							// part: indexs,
							part: items.part,
							topicEn: items.topicEn,
							id: items.id,
							introduction: items.introduction,
							speakingType: [speakingTypeValue]
						});
					}
				}
				this.calculateTotalLength()
				console.log(this.selectspeak, 'selectspeakselectspeak');
			},
			getSpeakingTypeValue(type) {
				// 返回对应的数字值
				switch (type) {
					case 'ischuanti':
						return '1';
					case 'isgendu':
						return '2';
					case 'ismk':
						return '3';
					default:
						return '';
				}
			},
			upType(index, num) {
				this.listType.splice(index, 1, num)
			},
			change(index) {
				this.current = index;
			},
			// 选中某个单选框时，由radio时触发
			radioCheck(index) {
				if (this.radioValue == this.list2[index].id) {
					this.radioValue = null
				} else {
					this.radioValue = this.list2[index].id
				}
			},
			//轮播图滑动和tabs保持一致
			updateCurrent(current, source) {
				this.current = current.detail.current
				if (this.current == 0) {
					this.search = true
				} else {
					this.search = false
				}
			},
			getList() {
				let postdata = {
					"key": "",
					"pageNum": 0,
					"mode": "home",
					"part": "part1",
					"order": "0",
					"type": "",
					"isStudy": 0,
					"isFavorite": 0,
					"isEvlua": 0,
					"isFun": 0,
					"level": 0,
					"isNew": 0
				}
				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata).then(
				res => {
					if (res.code == 0) {
						this.getpart2()
						let keyArr = Object.keys(res.data)
						let valueArr = Object.values(res.data)
						this.slanderpart1 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})
						this.originslanderpart1 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})
						this.originslanderpart1part1 = JSON.parse(JSON.stringify(this.originslanderpart1));
						let json = JSON.stringify(res.data)
						this.updatapart1()
						

					}

					// console.log(json);
				})




			},
			updatapart1() {
				console.log('调用了');
				// Iterate through each item in selectspeak
				this.selectspeak.forEach(selectItem => {
					// Find the corresponding item in slanderpart1
					const slanderItem = this.slanderpart1.find(slanderItem =>
						slanderItem.list.some(item => item.id === selectItem.id)
					);
					console.log(slanderItem, 'slanderItemslanderItem');

					// If a corresponding item is found, update properties based on speakingType
					if (slanderItem) {
						const listItemIndex = slanderItem.list.findIndex(item => item.id === selectItem.id);
						if (listItemIndex !== -1) {
							// Use Vue.set to ensure reactivity when updating array elements by index
							this.$set(slanderItem.list, listItemIndex, {
								...slanderItem.list[listItemIndex],
								ischuanti: selectItem.speakingType.includes('1'),
								isgendu: selectItem.speakingType.includes('2'),
								ismk: selectItem.speakingType.includes('3'),
							});
						}
					}
				});
				console.log(this.slanderpart1, 'slanderpart1slanderpart1slanderpart1');

				// 处理匹配的内容，可以根据需求进行其他操作
				// console.log('Matching contents:', matchingContents);
			},
			getpart2() {
				let postdata1 = {
					"key": "",
					"pageNum": 0,
					"mode": "home",
					"part": "part2",
					"order": "0",
					"type": "",
					"isStudy": 0,
					"isFavorite": 0,
					"isEvlua": 0,
					"isFun": 0,
					"level": 0,
					"isNew": 0
				}
				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata1).then(
					res => {
						if (res.code == 0) {
							this.getpart3()
						}
						let keyArr = Object.keys(res.data)
						let valueArr = Object.values(res.data)
						this.slanderpart2 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})

						this.originslanderpart2 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})
						this.updatapart2()
						this.originslanderpart2 = JSON.parse(JSON.stringify(this.originslanderpart2));
						// let json = JSON.stringify(res.data)

					})
			},
			updatapart2() {
				console.log('调用了');
				// Iterate through each item in selectspeak
				this.selectspeak.forEach(selectItem => {
					// Find the corresponding item in slanderpart1
					const slanderItem = this.slanderpart2.find(slanderItem =>
						slanderItem.list.some(item => item.id === selectItem.id)
					);
					console.log(slanderItem, 'slanderItemslanderItem');
			
					// If a corresponding item is found, update properties based on speakingType
					if (slanderItem) {
						const listItemIndex = slanderItem.list.findIndex(item => item.id === selectItem.id);
						if (listItemIndex !== -1) {
							// Use Vue.set to ensure reactivity when updating array elements by index
							this.$set(slanderItem.list, listItemIndex, {
								...slanderItem.list[listItemIndex],
								ischuanti: selectItem.speakingType.includes('1'),
								isgendu: selectItem.speakingType.includes('2'),
								ismk: selectItem.speakingType.includes('3'),
							});
						}
					}
				});
				
			
				// 处理匹配的内容，可以根据需求进行其他操作
				// console.log('Matching contents:', matchingContents);
			},
			getpart3() {
				let postdata2 = {
					"key": "",
					"pageNum": 0,
					"mode": "home",
					"part": "part3",
					"order": "0",
					"type": "",
					"isStudy": 0,
					"isFavorite": 0,
					"isEvlua": 0,
					"isFun": 0,
					"level": 0,
					"isNew": 0
				}
				this.$u.post('https://api.admin-v2.langsi.online/admin-api/speaking/topic/home/list', postdata2).then(
					res => {
						let keyArr = Object.keys(res.data)
						let valueArr = Object.values(res.data)
						this.slanderpart3 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})
						this.originslanderpart3 = keyArr.map((item, index) => {
							return {
								label: item,
								list: valueArr[index]
							}
						})
						this.updatapart3()
						this.originslanderpart3 = JSON.parse(JSON.stringify(this.originslanderpart3));
						let json = JSON.stringify(res.data)
						// console.log(json);
					})
			},
			updatapart3() {
				console.log('调用了');
				// Iterate through each item in selectspeak
				this.selectspeak.forEach(selectItem => {
					// Find the corresponding item in slanderpart1
					const slanderItem = this.slanderpart2.find(slanderItem =>
						slanderItem.list.some(item => item.id === selectItem.id)
					);
					console.log(slanderItem, 'slanderItemslanderItem');
			
					// If a corresponding item is found, update properties based on speakingType
					if (slanderItem) {
						const listItemIndex = slanderItem.list.findIndex(item => item.id === selectItem.id);
						if (listItemIndex !== -1) {
							// Use Vue.set to ensure reactivity when updating array elements by index
							this.$set(slanderItem.list, listItemIndex, {
								...slanderItem.list[listItemIndex],
								ischuanti: selectItem.speakingType.includes('1'),
								isgendu: selectItem.speakingType.includes('2'),
								ismk: selectItem.speakingType.includes('3'),
							});
						}
					}
				});
				
			
				// 处理匹配的内容，可以根据需求进行其他操作
				// console.log('Matching contents:', matchingContents);
			},
			//下拉显示下拉框
			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

					} else if (id == 3) {
						this.postdata.part = "part3"
						this.part2 = true
						this.grizzly = false

					} else {
						this.postdata.part = "part1"
						this.part2 = false
						this.grizzly = true

					}
				})
			},
			clicking(target, type) {

			},
			radioGroupChange() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.view_template {
		width: 100%;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
	}

	.serchbox {
		padding: 0 32rpx;
		display: flex;
		flex-wrap: nowrap;
		margin-top: 30rpx;
		align-items: center;
		width: 686rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.serchimg {
			width: 30.51rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}

		.input {
			margin: 0 auto;
			width: 568rpx;
			height: 88rpx;
			border-radius: 30rpx;
			// background-color: #f5f8fc;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Light;
			font-weight: 300;
			text-align: left;
			color: #a7b9cd;
			letter-spacing: 1.2rpx;
			line-height: 36rpx;
			// padding: 0 100rpx;
			// padding-right: 135rpx;
			box-sizing: border-box;

		}
	}

	.view_body {
		height: 89vh;
		width: 91.3%;
		margin: 0 auto;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		// padding: 32rpx;
		.view_search {
			height: 88rpx;
			margin: 0 auto;
			line-height: 88rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

		}

		.view_button {
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 12rpx 24rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: rgba(101, 116, 140, 0.8);
		}

		.view_buttons {
			background: #2D7CE6;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 12rpx 24rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.view_fff {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.view_Do {
			display: flex;
			justify-content: space-between;
			padding: 28rpx 0rpx;
			margin: 0 28rpx;
			border-bottom: 2rpx solid #F2F2F2;
		}

		.view_pushbutton {
			display: flex;
		}

		.grizzly {
			background: #E1EEFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #2D7CE6;
			padding: 6rpx 18rpx;
			margin-left: 12rpx;
		}

		.yellow {
			background: #FFEBD7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #FB9734;
			padding: 6rpx 18rpx;
			margin-left: 12rpx;
		}

		.view_English {
			display: flex;
			font-size: 24rpx;
			font-weight: 500;
			color: #2E4975;
		}

		.active {
			z-index: 9;
			background: #2D7CE6;
			color: #fff;
		}

		.slander {
			height: 352rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.slander_behavior {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0rpx;
			border-bottom: 2rpx solid #F2F2F2;
		}

		.slander_for {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 0 30rpx;
		}

		.unite {
			width: 270rpx;
			font-size: 28rpx;
			font-family: 'PingFang';
			font-weight: 800;
			color: #2E4975;
			margin: 26rpx 0rpx;
		}

		.slander_an {
			background: #F4F4F4;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-size: 20rpx;
			font-family: 'PingFang';
			font-weight: 500;
			color: rgba(101, 116, 140, 0.8);
			padding: 10rpx;
			margin-right: 15rpx;
		}

		.pd_icon {
			margin-left: 8rpx;
		}

		.highlighted {

			background: rgba(45, 124, 230, 0.1);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			color: #2D7CE6;
		}

		.part {
			font-size: 28rpx;
			font-family: 'PingFang';
			font-weight: 500;
			color: #2E4975;

		}

		.part2 {
			font-size: 28rpx;
			font-family: 'PingFang';
			font-weight: 500;
			color: #2E4975;
			margin-left: 20rpx;

		}

		.swiper {
			height: 80%;
		}

		swiper-item {
			overflow: scroll;
		}

		.slander_left {
			width: 328rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			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 {
			width: 290rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 1;
			font-size: 28rpx;
			font-family: 'PingFang';
			font-weight: 800;
			color: #2E4975;

			margin-right: 20rpx;
		}

		.pull_Down {
			position: absolute;
			bottom: -184rpx;
			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;
			}

			.active {
				background: rgba(45, 124, 230, 0.1);
				color: #2D7CE6;
			}
		}

		.pull_down {
			display: flex;
			justify-content: space-between;
			width: 100rpx;
			font-size: 24rpx;
		}



	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(177, 177, 177, 0.25);
		padding: 30rpx 32rpx;
	}

	.footer2 {
		position: fixed;
		bottom: 0;
		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;
		justify-content: space-between;
	}

	.button_ky {
		padding: 24rpx 52rpx;
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		color: #2E4975;
		background-color: #FAFAFA;
	}

	.button_andadd {
		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		padding: 26rpx 125rpx;
		color: #fff;
	}

	.button_show {
		width: 100%;
		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		padding: 26rpx 125rpx;
		color: #fff;
		text-align: center;
	}

	.view_fff_bottom {
		margin-bottom: 54rpx;
	}

	.Task {
		font-size: 24rpx;
		font-weight: 500;
		color: #2E4975;
	}

	.view_left {
		display: flex;
		justify-content: left;
		margin-top: 20rpx;
	}

	.view_left_pd {
		position: relative;
		padding: 12rpx 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-right: 15rpx;
		font-size: 24rpx;
	}

	.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_DownTow {
		width: 150rpx;
		position: absolute;
		bottom: -133rpx;
		left: 50%;
		margin-left: -72rpx;
		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;
		text-align: center;

		view {
			padding: 15rpx 0rpx;
			border-bottom: 2rpx solid #F2F2F2;
		}

	}

	.pull_Down view:last-child {
		border: none;
	}

	.sl_body {
		background-color: #fff;
	}

	.footer_button_right {
		padding: 24rpx 62rpx;
		border: 1px solid #2D7CE6;
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		color: #2D7CE6;
	}
	.act1{
		color: #fff;
		background: #2D7CE6 ;
		border: 1px solid #2D7CE6;
	}
</style>