150 lines
3.4 KiB
Plaintext
150 lines
3.4 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">
|
||
<picker class="picker" :id="'selector'+index" index={index} mode="selector" value={{item.selectIndex}} @change="handleSelectChange">
|
||
<text class="item_label">{{item.selectVal}}</text>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'set',
|
||
|
||
data() {
|
||
return{
|
||
setList:[
|
||
{isSet:false,setVal:'',selectVal:'请选择',selectIndex:0,name:'高压风冷'},
|
||
{isSet:true,setVal:'',selectVal:'请选择',selectIndex:0,name:'中压风冷'},
|
||
{isSet:false,setVal:'',selectVal:'请选择',selectIndex:0,name:'低压风冷'},
|
||
{isSet:true,setVal:'',selectVal:'请选择',selectIndex:0,name:'闭锁调压'},
|
||
],
|
||
//电流通道列表
|
||
currentList: ['1路','2路','3路','4路'],
|
||
}
|
||
},
|
||
apiready(){
|
||
let selector0 = document.getElementById('selector0');
|
||
let selector1 = document.getElementById('selector1');
|
||
let selector2 = document.getElementById('selector2');
|
||
let selector3 = document.getElementById('selector3');
|
||
selector0.setData({
|
||
data: this.data.currentList
|
||
});
|
||
selector1.setData({
|
||
data: this.data.currentList
|
||
});
|
||
selector2.setData({
|
||
data: this.data.currentList
|
||
});
|
||
selector3.setData({
|
||
data: this.data.currentList
|
||
});
|
||
},
|
||
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(e) {
|
||
let _index = e.target.attributes.index;
|
||
this.setList.forEach((item,index) => {
|
||
if(index === _index){
|
||
item.selectIndex = e.detail.value;
|
||
item.selectVal = this.data.currentList[e.detail.value];
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.set_wrap{
|
||
width: 100%;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
.set_back_text{
|
||
font-size: 40px;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
.set_list{
|
||
margin-top: 50px;
|
||
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: #000000;
|
||
}
|
||
.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;
|
||
}
|
||
</style> |