You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
488 lines
12 KiB
488 lines
12 KiB
<template>
|
|
<div class="content">
|
|
|
|
<!-- 顶部通用设置模块 -->
|
|
<div>
|
|
<text class="headLine">Settings</text>
|
|
<!-- <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> -->
|
|
|
|
<!-- <div class="list-item"> -->
|
|
<uv-list customStyle>
|
|
<uv-list-item class="listView">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<div>
|
|
<text class="list-text">Language</text>
|
|
</div>
|
|
</uv-list-item>
|
|
<uv-list-item class="listView">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<div @click="gotoFeedback()">
|
|
<text class="list-text">Feedback</text>
|
|
</div>
|
|
</uv-list-item>
|
|
<uv-list-item class="listView">
|
|
<!-- 左边图标文本显示部分 -->
|
|
<div @click="gotoPolicy()">
|
|
<text class="list-text">Provacy policy</text>
|
|
</div>
|
|
</uv-list-item>
|
|
</uv-list>
|
|
|
|
<!-- <tn-list-cell class="listView" :radius="true">
|
|
<view class="list-box"> -->
|
|
<!-- 左边图标文本显示部分 -->
|
|
<!-- <view>
|
|
<view class="list-text">Language</view>
|
|
</view> -->
|
|
<!-- 右边操作按钮部分 -->
|
|
<!-- <view class="list-select">
|
|
<text class="list-select-text">{{ languageLabel }}</text><text class="tn-icon-down-triangle list-select-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> -->
|
|
<!-- </div> -->
|
|
|
|
<!-- <view class="tn-margin-top-sm">
|
|
<tn-list-cell class="listView" :radius="true">
|
|
<view>
|
|
|
|
<view @click="gotoFeedback()">
|
|
<view class="list-text">Feedback</view>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
</view> -->
|
|
|
|
<!-- <view class="tn-margin-top-sm">
|
|
<tn-list-cell class="listView" :radius="true">
|
|
<view>
|
|
|
|
<view @click="gotoPolicy()">
|
|
<view class="list-text">Provacy policy</view>
|
|
</view>
|
|
</view>
|
|
</tn-list-cell>
|
|
</view> -->
|
|
<!-- </tn-list-view> -->
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 底部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>
|
|
</div>
|
|
</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, //打开语言搜索框
|
|
privacyUrl: 'https://docs.google.com/document/d/1Ll7e3UBv8iRCaZ9TrsXZOC5MWMp8xl04SfYkhPgIwAc/edit?usp=sharing',
|
|
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() {
|
|
|
|
},
|
|
onBackPress(options){
|
|
let that = this;
|
|
if (options.from === 'navigateBack') {
|
|
return false;
|
|
}
|
|
that.back();
|
|
return true;
|
|
|
|
},
|
|
methods: {
|
|
//返回主页
|
|
back() {
|
|
uni.switchTab({
|
|
url: '/pages/scan/Scan'
|
|
});
|
|
},
|
|
|
|
//跳转反馈页面
|
|
gotoFeedback(){
|
|
uni.navigateTo({
|
|
url: '/pages/feedback/Feedback'
|
|
});
|
|
},
|
|
|
|
//跳转反馈页面
|
|
gotoPolicy(){
|
|
let that = this;
|
|
console.log('点击了跳转政策')
|
|
let url = encodeURIComponent(that.privacyUrl);
|
|
uni.navigateTo({
|
|
url: '/pages/webview/webview?url=' + url
|
|
});
|
|
},
|
|
|
|
|
|
|
|
//选择搜索引擎
|
|
// 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: start;
|
|
// background-color: #1F222B;
|
|
// height:100vh;
|
|
|
|
|
|
|
|
// .headLine{
|
|
// color: #fff;
|
|
// font-size: 48rpx;
|
|
// //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: 60rpx;
|
|
// //background-color: #141b29;
|
|
|
|
// .listItem{
|
|
// border: 2px solid yellow;
|
|
// height: 130rpx;
|
|
// margin-top: 30rpx;
|
|
// background-color: #161A23;
|
|
// 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: 40rpx;
|
|
// //border: 2px solid blue;
|
|
// }
|
|
|
|
// .list-left-text-two{
|
|
// color: grey;
|
|
// font-size: 40rpx;
|
|
// //border: 2px solid lightsalmon;
|
|
// }
|
|
// }
|
|
|
|
// .list-left-feedback-text{
|
|
// width: 480rpx;
|
|
// .list-left-feedback-text-one{
|
|
// font-size: 40rpx;
|
|
// //border: 2px solid blue;
|
|
// }
|
|
|
|
// .list-left-feedback-text-two{
|
|
// color: grey;
|
|
// font-size: 30rpx;
|
|
// //border: 2px solid lightsalmon;
|
|
// }
|
|
// }
|
|
|
|
|
|
// .list-left-icon{
|
|
// //border: 2px solid blueviolet;
|
|
// margin-right: 20rpx;
|
|
// font-size: 100rpx;
|
|
// }
|
|
|
|
// .list-left-select-text{
|
|
// width: 320rpx;
|
|
// .list-left-select-text-one{
|
|
// font-size: 40rpx;
|
|
// //border: 2px solid blue;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .list-right{
|
|
// //border: 2px solid pink;
|
|
// color: royalblue;
|
|
// font-size: 48rpx;
|
|
|
|
// .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;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
justify-content: start;
|
|
/* #endif */
|
|
background-color: #000000;
|
|
height: 600vh;
|
|
width: 750rpx;
|
|
|
|
}
|
|
|
|
.listView{
|
|
height: 100rpx;
|
|
width: 660rpx;
|
|
padding-top: 60rpx;
|
|
background-color: #161A23;
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
text-align: start;
|
|
/* #endif */
|
|
//border: 2px solid red;
|
|
}
|
|
|
|
.headLine{
|
|
color: #fff;
|
|
font-size: 48rpx;
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
.list-item{
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.list-text{
|
|
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
background-color: #161A23;
|
|
//border: 1px solid greenyellow;
|
|
}
|
|
|
|
.list-select{
|
|
//border: 2px solid pink;
|
|
color: royalblue;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.list-select-icon{
|
|
//border: 2px solid gainsboro;
|
|
font-size: 50rpx;
|
|
margin-left: 30rpx;
|
|
}
|
|
</style>
|
|
|