scanCode/pages/setting/Setting.vue

<template>
	<view class="content">
		
		<!-- 顶部通用设置模块 -->
		<view>
			<view class="headLine">General Settings</view>
			<tn-list-view :card="cardMode" class="settingList" unlined="all">
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">Beep</view>
							 <view class="list-left-text-two">Beep when the scan is successfull.</view> 
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
						<view class="list-right">
							<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
							:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">Auto-copied to clipboard</view>
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
						<view class="list-right">
							<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1"
							:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-search tn-color-gray"></view>
						  <view class="list-left-select-text">
							 <view class="list-left-select-text-one">Search Engine</view>
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
						<view class="list-right">
							<text class="list-right-text">{{ webEngineLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openWebSelectView"></text>
							<tn-select title="Select Browser" :confirmText="confirmText" :cancelText="cancelText"
							v-model="webEngine" mode="single" :list="webEngineList" @confirm="selectWebEngine" :searchShow="searchEngineFlag" :searchPlaceholder="placeholderText"></tn-select>
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-moon-fill tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">Dark Mode</view>
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
						<view class="list-right">
							<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1"
							:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
						</view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-english tn-color-gray"></view>
						  <view class="list-left-select-text">
							 <view class="list-left-select-text-one">Language options</view>
						  </view>
					    </view>
						<!-- 右边操作按钮部分 -->
						<view class="list-right">
							<text class="list-right-text">{{ languageLabel }}</text><text class="tn-icon-down-triangle list-right-icon" @click="openLanguageSelectView"></text>
							<tn-select title="Select Language" :confirmText="confirmText" :cancelText="cancelText"
							v-model="language" mode="single" :list="languageList" @confirm="selectLanauage" :searchShow="searchLanguageFlag" :searchPlaceholder="placeholderText"></tn-select>
						</view>
					</view>
				</tn-list-cell>
			</tn-list-view>
		</view>
		
		
		
		<!-- 底部Help帮助模块 -->
		
		
		<view>
			<view class="headLine">Help</view>
			<tn-list-view :card="cardMode" class="settingList">
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-help tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">FAQ</view>
						  </view>
					    </view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-edit-form tn-color-gray"></view>
						  <view class="list-left-feedback-text">
							 <view class="list-left-feedback-text-one">Feedback</view>
							 <view class="list-left-feedback-text-two">Report bugs and tell us what to improve.</view> 
						  </view>
					    </view>
					</view>
				</tn-list-cell>
				
				<tn-list-cell class="listItem">
					<view class="list-icon-text">
						<!-- 左边图标文本显示部分 -->
					    <view class="list-left">
						  <view class="list-left-icon tn-icon-safe-fill tn-color-gray"></view>
						  <view class="list-left-text">
							 <view class="list-left-text-one">Provacy policy</view>
						  </view>
					    </view>
					</view>
				</tn-list-cell>
			</tn-list-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardMode: true,
				beepChecked: true,
				ClipboardCheked: true,
				DarkModeChecked: true,
				unlined: false,
				inactiveColor: 'grey',
				activeColor: 'royalblue',
				webEngine: false, //打开浏览器列表
				searchEngineFlag: true, //打开浏览器搜索框
				webEngineLabel: 'Google', //默认浏览器选择文本
				webEngineValue: 0, //默认浏览器选择结果
				placeholderText: 'search which you like', //搜索文本占位文字
				confirmText: 'Confirm', //搜索确认文本
				cancelText: 'Cancel', //搜索取消文本
				language: false,  //打开语言列表
				languageLabel: 'English', //默认语言选择文本
				languageValue: 0, //默认语言选择结果
				searchLanguageFlag: true, //打开语言搜索框
				
				webEngineList:[
					{
						"value": 0,
						"label": "Google"
					},
					{
						"value": 1,
						"label": "Yahoo"
					},
					{
						"value": 2,
						"label": "Bing"
					}
				],
				
				languageList:[
					{
						"value": 0,
						"label": "English"
					},
					{
						"value": 1,
						"label": "Deutsch"
					},
					{
						"value": 2,
						"label": "A"
					},
					{
						"value": 3,
						"label": "B"
					},
					{
						"value": 4,
						"label": "C"
					},
					{
						"value": 5,
						"label": "D"
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			
			//选择搜索引擎
			selectWebEngine(e){
				console.log('选择了浏览器',e[0].label);
				this.webEngineLabel = e[0].label;
				this.webEngineValue = e[0].value;
			},
			
			//打开选择搜索引擎界面
			openWebSelectView(){
				this.webEngine = true;
			},
			
			//打开选择语言界面
			openLanguageSelectView(){
				this.language = true;
			},
			
			//选择语言
			selectLanauage(e){
				console.log('选择了语言',e[0].label);
				this.languageLabel = e[0].label;
				this.languageValue = e[0].value;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #1F222B;
		height:100vh;
		
		
		
		.headLine{
			color: royalblue;
			font-size: 36rpx;
			//padding-top:30px;
			//margin-right:200px;
			margin-top: 60rpx;
			//border: 2px solid purple;
		}
		
		.settingList{
			//border: 2px solid red;
			width: 660rpx;
			//height:300px;
			height: auto;
			//margin-top: 10px;
			//background-color: #141b29;
			
			.listItem{
				//border: 2px solid yellow;
				height: 100rpx;
				//margin-top: 30px;	
				background-color: #141b29;
				color: #fff;
				text-align: start;
				
				.list-icon-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
				
					.list-left{
						//border: 2px solid green;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.list-left-text{
							width: 420rpx;
							.list-left-text-one{
								font-size: 30rpx;
								//border: 2px solid blue;
							}
							
							.list-left-text-two{
								color: grey;
								font-size: 26rpx;
								//border: 2px solid lightsalmon;
							}
						}
						
						.list-left-feedback-text{
							width: 480rpx;
							.list-left-feedback-text-one{
								font-size: 30rpx;
								//border: 2px solid blue;
							}
							
							.list-left-feedback-text-two{
								color: grey;
								font-size: 26rpx;
								//border: 2px solid lightsalmon;
							}
						}
						
						
						.list-left-icon{
							//border: 2px solid blueviolet;
							margin-right: 20rpx;
							font-size: 50rpx;
						}
						
						.list-left-select-text{
							width: 320rpx;
							.list-left-select-text-one{
								font-size: 30rpx;
								//border: 2px solid blue;
							}
						}
					}
					
					.list-right{
						//border: 2px solid pink;
						color: royalblue;
						font-size: 40rpx;
						
						.list-right-icon{
							//border: 2px solid gainsboro;
							font-size: 50rpx;
							margin-left: 30rpx;
						}
						
						.list-right-text{
							//border: 2px solid green;
							//margin-right: 30px;
							//padding-right: 30px;
						}
					}
				}
			}
		}
	}
	
	// .message {
	//   display: flex;
	//   flex-direction: row;
	//   align-items: center;
	//   justify-content: space-around;
	  
	//   &__left {
	//     width: 10%;
	//   }
	//   &__middle {
	//     width: 80%;
	//     padding-left: 20rpx;
	//     padding-right: 40rpx;
	//   }
	//   &__right {
	//     width: 10%;
	//     display: flex;
	//     flex-direction: column;
	//     align-items: center;
	//     justify-content: center;
	//   }
	  
	//   &__name {
	//     font-size: 32rpx;
	//     margin-bottom: 8rpx;
	//   }
	//   &__content {
	// 	//margin-top: 20px;
	//     font-size: 26rpx;
	//     color: #838383;
	//   }
	//   &__tips {
	//     &__icon {
	//       font-size: 36rpx;
	//       color: #AAAAAA;
	//     }
	//   }
	// }

	
</style>