mes_mobile/pages/equipmentManage/editDevice.vue

<template>
	<page-meta>
		<navigation-bar title="添加设备" color="white"></navigation-bar>
	</page-meta>
	<view class="page_padding">
	<!-- 	<view class="page_name font14">
			添加/编辑设备
		</view> -->
		<view class="page_content contentboxsty font13">
			<view class="content_row">
				<view class="name">选择设备</view>
				<picker placeholder="请选择设备" @change="bindPickerChange" :value="index" :range="array" >
					 <input type="text" :value="array[index]"  placeholder="请选择设备" disabled />
				</picker>

				<!-- <view class="">
					<picker @change="bindPickerChange" placeholder="请选择设备" :value="index" :range="array">
						<view class="uni-input" style="width: 70%;">{{array[index]}}</view>
					</picker>
				</view -->
			</view>
			<view class="content_row">
				<view class="name">设备自定义名称</view>
				<view class="">
					<input placeholder="请输入设备名称"/>
					
				</view>
			</view>
			<view class="content_row">
				<view class="name">设备功率</view>
				<view class="">
					<input placeholder="请输入设备功率"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name">设备IP</view>
				<view class="">
					<input placeholder="请输入设备IP"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name">端口</view>
				<view class="">
					<input placeholder="请输入设备端口"/>
				</view>
			</view>
			<view class="content_row">
				<view class="name">状态</view>
				<view class="flex_layout">
					<view class="switch" @click="switchSta(1)">
						<view v-if="selectSta==1" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
						<text class="text">启用</text>
					</view>
					<view class="switch" @click="switchSta(2)">
						<view v-if="selectSta==2" class="t-icon t-icon-qiyong1 contenticon"></view>
						<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
						<text class="text">禁用</text> 
					</view>
				</view>
			</view>
			<view class="textarea_row">
				<view class="name">设置备注</view>
				<view class="textarea">
					
					<textarea />
				</view>
					
			</view>
		</view>
	</view>
	<view class="bottom_but flex_layout">
		<view class="font13 but_color">保存</view>
		<view class="font13">取消</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 array: ['中国', '美国', '巴西', '日本'],
				 selectSta:1,
			}
		},
		methods: {
			switchSta(type){
				console.log(type)
				this.selectSta = type;
			},
		}
	}
</script>

<style lang="scss">
	.page_name{margin-bottom: 10px;}
	.page_content{padding: 0 12px 10px;}
	.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
		.name{width: 30%;}
		.switch{display: flex;align-items: center;
			.contenticon{width: 20px;height: 20px;}
			.text{padding: 0 20px 0 5px;}
		}
	}
	.textarea_row{
		.name{padding: 12px 0;}
		.textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);padding:5px 10px;
			textarea{width: 100%;}
		}
	}
</style>