231 lines
4.7 KiB
Plaintext
231 lines
4.7 KiB
Plaintext
<template>
|
||
<view class="set_wrap">
|
||
<text class="set_back_text" @click="handleBackIndex">返回</text>
|
||
<view class="set_list">
|
||
<view
|
||
class="list_inline"
|
||
v-for="(item,index) in setList"
|
||
>
|
||
<view class="inline_item">
|
||
<text class="item_label">{{item.name}}：</text>
|
||
<view class="item_content">
|
||
<view class="switch_box"><switch class="switch" index={index} :checked="item.isSet" @change="handleSwitchChange" /></view>
|
||
<input class="input" type="text" :disabled="!item.isSet" placeholder="请输入电流值" />
|
||
</view>
|
||
</view>
|
||
<view class="inline_item">
|
||
<text class="item_label">电流通道：</text>
|
||
<view class="item_content">
|
||
<text class="item_label" @click="handleSelectChange(index)">{{item.selectVal}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="set_btn" @click="handleSubmitSet">保存参数</text>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
let UIMultiSelector = api.require("UIMultiSelector");
|
||
export default {
|
||
name: 'set',
|
||
data() {
|
||
return{
|
||
setList:[
|
||
{isSet:false,setVal:'',selectVal:'请选择',name:'高压风冷'},
|
||
{isSet:true,setVal:'',selectVal:'请选择',name:'中压风冷'},
|
||
{isSet:false,setVal:'',selectVal:'请选择',name:'低压风冷'},
|
||
{isSet:true,setVal:'',selectVal:'请选择',name:'闭锁调压'},
|
||
],
|
||
//电流通道列表
|
||
currentList: [
|
||
{
|
||
text:'1路',
|
||
status:'normal'
|
||
},
|
||
{
|
||
text:'2路',
|
||
status:'normal'
|
||
},
|
||
{
|
||
text:'3路',
|
||
status:'normal'
|
||
},
|
||
{
|
||
text:'4路',
|
||
status:'normal'
|
||
},
|
||
],
|
||
}
|
||
},
|
||
apiready(){
|
||
|
||
},
|
||
methods: {
|
||
//返回首页
|
||
handleBackIndex(){
|
||
api.navigateBack({
|
||
delta: 2,
|
||
});
|
||
},
|
||
//switch开关选择
|
||
handleSwitchChange(e){
|
||
let _index = e.target.attributes.index;
|
||
this.setList.forEach((item,index) => {
|
||
if(index === _index){
|
||
item.isSet = e.detail.value;
|
||
}
|
||
})
|
||
},
|
||
//下拉选择
|
||
handleSelectChange(selectNum) {
|
||
let _setList = this.data.setList;
|
||
//设置下拉选项
|
||
UIMultiSelector.open({
|
||
rect: {
|
||
h: 400
|
||
},
|
||
text: {
|
||
title: '电流通道',
|
||
leftBtn: '取消',
|
||
rightBtn: '确认',
|
||
},
|
||
styles: {
|
||
mask: 'rgba(0,0,0,0)',
|
||
title: {
|
||
bg: '#ffffff',
|
||
color: '#000000',
|
||
size: 36,
|
||
h: 80
|
||
},
|
||
leftButton: {
|
||
w: 160,
|
||
h: 80,
|
||
marginT: 5,
|
||
marginL: 8,
|
||
color: '#ffffff',
|
||
size: 36,
|
||
bg:'#5199FF'
|
||
},
|
||
rightButton: {
|
||
w: 160,
|
||
h: 80,
|
||
marginT: 5,
|
||
marginR: 8,
|
||
color: '#ffffff',
|
||
size: 36,
|
||
bg:'#5199FF'
|
||
},
|
||
item: {
|
||
h: 80,
|
||
bg: '#ffffff',
|
||
bgActive: '#5199FF',
|
||
bgHighlight: '#5199FF',
|
||
color: '#000000',
|
||
active: '#ffffff',
|
||
highlight: '#ffffff',
|
||
size: 36,
|
||
activeSize:36,
|
||
lineColor: '#d8d8d8',
|
||
textAlign: 'center'
|
||
},
|
||
},
|
||
max: 1,
|
||
singleSelection: true,
|
||
animation: true,
|
||
items:this.data.currentList
|
||
}, function(ret){
|
||
if(ret.eventType === 'clickLeft'){
|
||
UIMultiSelector.close();
|
||
}else if(ret.eventType === 'clickRight' || ret.eventType === 'clickItem'){
|
||
UIMultiSelector.close();
|
||
_setList[selectNum].selectVal = ret.items.length > 0?ret.items[0].text:_setList[selectNum].selectVal;
|
||
}
|
||
});
|
||
},
|
||
//保存参数
|
||
handleSubmitSet(){
|
||
console.log("保存参数");
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.set_wrap{
|
||
width: 100%;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
background-image: url("../../image/login.png");
|
||
background-size: 120%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
position: relative;
|
||
}
|
||
.set_back_text{
|
||
font-size: 40px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 20px;
|
||
}
|
||
.set_list{
|
||
margin-top: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.list_inline{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
}
|
||
.inline_item{
|
||
margin: 0 40px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.item_label{
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
.item_content{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.switch_box{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 76px;
|
||
height: 46px;
|
||
}
|
||
.switch{
|
||
transform: scale(1.5, 1.5);
|
||
}
|
||
.input{
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
border: 1px solid silver;
|
||
font-size: 32px;
|
||
height: 60px;
|
||
width: 200px;
|
||
margin-left: 20px;
|
||
border-radius: 10px;
|
||
}
|
||
.set_btn{
|
||
font-size: 40px;
|
||
color: #5199FF;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
width: 300px;
|
||
margin: 50px auto 0;
|
||
font-weight: bold;
|
||
}
|
||
</style> |