smartmeter-app/page_user/switchs.vue

<template>
	<view class="pages">
		<u-navbar title="设备列表" :border-bottom="false" :background="bgc" title-color='#262B37' title-size='36' height='36'></u-navbar>
		<view class="titleadd">
			<view class="title"> 点击切换设备 </view>
			<view class="add" @click="show=true"> + </view>
		</view>
		<view class="dd">
			<u-select v-model="show" :list="list" title='添加方式' @confirm="confirm"></u-select>
		</view>
		<view class="list">
			<view class="card_box" v-for="(item,index) in deviceList" :key="index"  @click="todetail(item.deviceId)">
				<view class="card">
					<view class="card_right">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR" mode=""></image>
					</view>
					<view class="card_left">
						<view class="card_left_tit">
							{{item.deviceId}}电表
						</view>
						<view class="card_left_sta">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uZSiz7XWpxcXEkl6sTwj" mode=""></image>
							<view class="sta_txt" v-if="item.status==3">
								剩余电量：{{item.surplusElectriQuantity}}度
							</view>
							<view class="sta_txt" v-if="item.status==2" style="color:#95989D ;">
								已欠费
							</view>
							<view class="sta_txt" v-if="item.status==1" style="color:#FF4F4F ;">
								欠费已断电
							</view>
						</view>
						<view class="card_left_no">
							电表号：{{item.mac}}
						</view>
					</view>
					<view class="nowuse" v-if="item.isDefault">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uv8toN3gFm0IDcjfsdH2" mode=""></image>
					</view>
					<view class="switch" v-else @click="changedefort(item)" >
						切换
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				show:false,
				deviceList:{},
				list: [{
						value: '1',
						label: '扫码添加'
					},
					{
						value: '2',
						label: '搜索附近设备添加'
					}
				],
			}
		},
		onLoad() {
			this.getdevice()
		},
		methods: {
			confirm(e){
				console.log(e,'eeeeeeeeee');
				let type =e[0].value
				if(type=='1'){
					this.scanQRCode()
				}else if(type=='2'){
					uni.navigateTo({
						url: '/pages/device/index'
					})
				}
				// console.log(e);
				// this.mode = e[0].label
				// this.gettype()
			},
			getdevice() {
				this.$u.get("/app/device/tenant").then((res) => {
					  this.deviceList = res.rows
					// uni.setStorageSync('deviceId', this.deviceInfo.deviceId);
				
				});
			},
			changedefort(item){
				this.$u.put("/app/device/tenant/setDefault/"+item.deviceId).then((res) => {
					  this.getdevice() 
					// uni.setStorageSync('deviceId', this.deviceInfo.deviceId);
				
				});
			},
			scanQRCode() {
			     uni.scanCode({
			       onlyFromCamera: true,
			       scanType: ['qrCode'],
			       success: res => {
			         console.log('扫描结果：', res);
			         this.qrResult = res.result; // 将扫描结果存储在数据中
			       },
			       fail: err => {
			         console.error('扫描失败：', err);
			         uni.showToast({
			           title: '扫描失败',
			           icon: 'none'
			         });
			       }
			     });
			   },
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7FAFE !important;
	}

	.pages {
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.titleadd{
		display: flex;
		justify-content: space-between;
		padding: 0 12rpx;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			color: #000000;
			line-height: 50rpx;
		}
		.add{
			font-size: 68rpx;
			line-height: 50rpx;
		}
	}
	.list{
		.card_box {
			margin-top: 34rpx;
			display: flex;
			flex-wrap: wrap;
		
			.card {
				display: flex;
				// align-items: center;
				margin-top: 20rpx;
				width: 658rpx;
				height: 282rpx;
				background: #fff;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(255, 255, 255, 0);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
		
				.card_left {
					width: 310rpx;
					margin-top: 46rpx;
					margin-left: 50rpx;
		
					.card_left_tit {
						font-size: 44rpx;
						font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
						font-weight: 500;
						color: #8883F0;
					}
		
					.card_left_sta {
		
						margin-top: 15rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
		
						image {
							width: 23.32rpx;
							height: 36.47rpx;
		
						}
		
						.sta_txt {
							margin-left: 15rpx;
							color: #262B37;
							font-size: 24rpx;
							font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
							font-weight: 400;
						}
					}
		
					.card_left_no {
						margin-top: 15rpx;
						font-size: 24rpx;
						font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
						font-weight: 400;
						color: #95989D;
					}
				}
		
				.card_right {
					margin-top: 60rpx;
					margin-left: 50rpx;
					// margin-right: 94rpx;
		
					image {
						width: 63.04rpx;
						height: 167.48rpx;
					}
				}
				.nowuse{
					margin-top: 68rpx;
					image{
						width: 124rpx;
						height: 32rpx;
					}
				}
				.switch{
					margin-top: 116rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 108rpx;
					height: 60rpx;
					background: rgba(255,255,255,0);
					border: 2rpx solid #8883F0;
					border-radius: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #8883F0;
					line-height: 38rpx;
				}
			}
		}
	}
	
	
</style>