uniapp 单选按钮 选中默认设备

lmy_loveF2023-12-16 18:36

需求1：选中默认设备，113 和114 和139都可以选中一个默认设备

选中多个默认设备方法：

javascript 复制代码 
async toSwitch(typeItem, title) {
				const res = await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)
				if (!res) {
					this.common.toast('切换默认设备失败')
					return
				}
				const target = this.typeList.find(v => v.title === title)
				target.equipmentList.forEach(dev => {
				dev.ibdr_default_device = 20//设置为非默认设备
				})
				typeItem.ibdr_default_device = 10 // 设置默认设备
				this.common.toast(title + '已切换默认设备')
			},

需求2：选中一个默认设备，113 和114 和139 所有设备中只能选中一个

选中单个默认设备方法：

javascript 复制代码 
async toSwitch(typeItem, title) {
				const res = await this.setDefaultDev(typeItem.ibdr_devsn, typeItem.ibdr_pid)
				if (!res) {
					this.common.toast('切换默认设备失败')
					return
				}
				
				this.typeList.forEach(list => {
					list.equipmentList.forEach(dev => {
						dev.ibdr_default_device = 20//取消默认选中
					})
				})
				
				typeItem.ibdr_default_device = 10 // 设置默认设备
				this.common.toast(title + '已切换默认设备')
			},

源数据：

javascript 复制代码 
[{
	"title": "113-G3P国内定位器",
	"equipmentList": [{
		"ibdr_pdid": "113",
		"ibdr_default_device": "10",
		"ibdr_devsn": "1135257499235",
		"ibdr_last_time": "2023-12-13 11:13:34",
		"ibdr_name": "1135257499235"
	}, {
		"ibdr_pdid": "113",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1135257511548",
		"ibdr_last_time": "2023-12-13 11:13:34",
		"ibdr_name": "1135257511548"
	}]
}, {
	"title": "114-铁将军-火星人2300",
	"equipmentList": [{
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141553148067",
		"ibdr_last_time": "2023-12-13 11:13:31",
		"ibdr_name": "1141553148067"
	}, {
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141540433527",
		"ibdr_last_time": "2023-12-13 11:13:31",
		"ibdr_name": "1141540433527"
	}, {
		"ibdr_pdid": "114",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1141528873710",
		"ibdr_last_time": "2023-12-13 11:13:30",
		"ibdr_name": "1141528873710"
	}]
}, {
	"title": "139-龙嘉4G-带CAN",
	"equipmentList": [{
		"ibdr_pdid": "139",
		"ibdr_default_device": "20",
		"ibdr_devsn": "1394343434349",
		"ibdr_last_time": "2023-12-13 11:13:27",
		"ibdr_name": "1394343434349"
	}]
}]

绑定页面方式：

html 复制代码 
<template>
	<view class="container tui-skeleton">
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton>
		<view v-if="typeList.length>0 && !skeletonShow">
			<view class="typeBox" v-for="(typeItem,typeIndex) in typeList" :key="typeIndex">
				<view class="titleBox">{{typeItem.title}}</view>
				<view v-for="(item,index) in typeItem.equipmentList" :key="index">
					<view class="my_toolListr" v-if="item.ibdr_default_device == 10">
						<view class="tool_item" @click="toSwitch(item, typeItem.title)"
							:class="[index==typeItem.equipmentList.length-1?'noline':'',{'check_active':checkDefaultItem(item)}]">
							<view class="iconfont icon-checked" style="margin-right: 10rpx;"
								v-show="checkDefaultItem(item)">
							</view>
							<!-- {{JSON.stringify(item)}} -->
							<text class="text-style">{{item.ibdr_devsn}}<text v-if="item.ibdr_devsn!=item.ibdr_name">-{{item.ibdr_name}}</text></text>
						</view>
						<view class="tool-jtBtn" @click="toDevice(item)"><img
								style="width:32rpx !important;height: 40rpx !important;"
								src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/jt1.png" mode="widthFix" />
						</view>
					</view>
					<!--无默认的样式-->
					<view class="my_toolListr" v-else>
						<view class="tool_item tool-hui" @click="toSwitch(item, typeItem.title)">
							<view class="iconfont icon-checked" style="margin-right: 10rpx;"></view>
							<text>{{item.ibdr_devsn}}<text v-if="item.ibdr_devsn!=item.ibdr_name">-{{item.ibdr_name}}</text></text>
						</view>
						<view class="tool-jtBtn" @click="toDevice(item)"><img
								style="width:32rpx !important;height: 40rpx !important;"
								src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/jt1.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 160rpx;display: flex;align-items: center;flex-direction: column;">
			<view>
				<image src="http://f.zstjj.com/f/uniapp/610097/static/img/icon/zwsj.png"></image>
			</view>
			<view style="color: #8f8f8f;">暂无设备</view>
		</view>
	</view>
</template>

判断是否选中方法：

javascript 复制代码 
checkDefaultItem(item) {
				if (item.ibdr_default_device == 10) {
					return true
				}
				return false
			},

页面CSS样式：

javascript 复制代码 
<style>
	@import '../../../../static/dwq/dwq.css';

	.typeBox {
		overflow: hidden;
	}

	.titleBox {
		padding: 20rpx 30rpx;
		color: #767676;
		font-size: 28rpx;
	}

	.my_toolListr {
		background-color: #fff;
		border-bottom: 1px solid #efefef;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.tool_item {
		margin-left: 30rpx;
		font-size: 34rpx;
		height: 100rpx;
		padding-right: 30rpx;
		position: relative;
		/* border-bottom: 1px solid #efefef; */
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.tool_item .iconfont {
		font-size: 44rpx;
		color: #5d9dff !important;
	}

	.tool-hui .iconfont {
		font-size: 44rpx;
		color: #9d9d9d !important;
	}

	.tool-jtBtn {
		position: absolute;
		right: 0px;
		padding: 8rpx 30rpx 0rpx 80rpx;
	}

	.noline {
		border: none !important;
	}

	.tool_item:active {
		opacity: .8;
	}

	.check_active {
		color: #5D9DFF;
	}

	.text-style {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 600rpx;
	}
</style>
javascript 复制代码 
dwq.css

@font-face {
	font-family: 'iconfont';
	/* project id 2324997 */
	src: url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.eot');
	src: url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.woff2') format('woff2'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.woff') format('woff'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.ttf') format('truetype'),
		url('https://at.alicdn.com/t/font_2324997_qn99wh6zwxj.svg#iconfont') format('svg');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 30px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
	color: #999;
	vertical-align: middle;
	line-height: 1;
	padding-top: -1px;
	margin-bottom: 1px;
}

.icon-dingdan:before {
	content: "\e603";
}

.icon-tijiaochenggong:before {
	content: "\e72e";
}

.icon-nocheck:before {
	content: "\e601";
}

.icon-xufei:before {
	content: "\e664";
}

.icon-cs:before {
	content: "\e6ab";
}

.icon-jzw:before {
	content: "\e67e";
}

.icon-sc:before {
	content: "\e611";
}

.icon-jjs:before {
	content: "\f0f9";
}

.icon-start:before {
	content: "\e60f";
}

.icon-end:before {
	content: "\e610";
}

.icon-rili:before {
	content: "\e600";
}

.icon-checked:before {
	content: "\e62b";
}

.icon-qhsb:before {
	content: "\e76c";
}

.icon-shop:before {
	content: "\e663";
}

.icon-warning:before {
	content: "\e605";
}

.icon-zhsz:before {
	content: "\e76b";
}

.icon-jsxw:before {
	content: "\e719";
}

.icon-daohang:before {
	content: "\e634";
}
相关推荐
A_ugust__2 小时前
C# ASP.NET CORE web api 实现AES加密解密
前端·c#·asp.net
iknow1812 小时前
【前端安全】js逆向之微信公众号登录密码
开发语言·前端·javascript
面包会有的，牛奶也会有的。3 小时前
python测试开发---前后端交互Axios
开发语言·前端·vue.js·交互
Her...3 小时前
electron教程（三）窗口设置
前端·javascript·electron
frankz613 小时前
新版统信UOS系统 electron sandbox与GPU兼容问题
前端·javascript·electron
_.Switch4 小时前
边缘计算与 Python Web 应用：从理论到实践
开发语言·前端·人工智能·python·架构·log4j·边缘计算
2401_857297914 小时前
秋招内推2025--招联金融
java·前端·算法·金融·求职招聘
优雅永不过时·4 小时前
three.js 通过着色器实现热力图效果
前端·javascript·智慧城市·three.js·热力图·着色器
lizi888885 小时前
手把手教你用Python进行Web抓取（附代码）
前端·python·php
小彭努力中5 小时前
45. 圆形平面设置纹理贴图
前端·3d·webgl·贴图
热门推荐
016-4 数组中选择两个最小值【武汉理工大学】02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04ROS 2 话题：使用C++进行发布与订阅05软件工程从理论到实践客观题汇总(头歌第一章至第八章)06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07苍穹外卖面试总结08RAG 实践- Ollama+RagFlow 部署本地知识库09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10洛谷刷题 | B3621 枚举元组