electricControl/pages/main/set.stml

<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>