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