Sprinkler-app/page_newyemian/wgluru-add.vue

<template>
	<view>
		<u-navbar :is-back="true" title="设备录入" title-color="#000" :border-bottom="false" :background="bgc"
			id="navbar">
		</u-navbar>
		<view class="page">
			<view class="form-container">
				<view class="form-item">
					<text class="label">设备名称</text>
					<u-input v-model="deviceName" placeholder="请输入设备名称" />
				</view>
				
				<view class="form-item">
					<text class="label">SN码</text>
					<view class="sn-input-wrapper">
						<u-input v-model="sn" placeholder="请输入或扫码获取SN码" />
						<view class="scan-btn" @click="scanSNCode">
							<text class="scan-text">扫码</text>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<text class="label">MAC地址</text>
					<view class="mac-display">{{ deviceInfo.mac }}</view>
				</view>
			</view>
			
			<view class="submit-btn" @click="confirmAdd">
				<text>确认录入</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				deviceName: '',
				sn: '',
				deviceInfo: {},
				userid: ''
			}
		},
		onLoad(options) {
			// 接收传递过来的设备信息
			if (options.deviceInfo) {
				this.deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo))
				this.deviceName = this.deviceInfo.modelName || '网关'
			}
			this.getinfo()
		},
		methods: {
			// 获取用户信息
			getinfo() {
				this.$u.get(`/system/user/profile`).then((res) => {
					if (res.code == 200) {
						this.userid = res.data.userId
					}
				})
			},
			// 扫码获取SN
			scanSNCode() {
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode', 'barCode'],
					success: res => {
						console.log('扫码结果：', res);
						// 解析扫码结果
						let snValue = res.result;
						
						// 如果是URL格式，尝试提取SN参数
						if (snValue.includes('?')) {
							function getQueryParam(url, paramName) {
								let regex = new RegExp(`[?&]${paramName}=([^&]*)`);
								let results = regex.exec(url);
								return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null;
							}
							let decodedValue = decodeURIComponent(snValue);
							let extractedSN = getQueryParam(decodedValue, 's') || getQueryParam(decodedValue, 'sn');
							if (extractedSN) {
								snValue = extractedSN;
							}
						}
						
						this.sn = snValue;
						uni.showToast({
							title: '扫码成功',
							icon: 'success',
							duration: 1500
						});
					},
					fail: err => {
						console.error('扫描失败：', err);
						uni.showToast({
							title: '扫描失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 确认录入
			confirmAdd() {
				if (!this.deviceName.trim()) {
					uni.showToast({
						title: '请输入设备名称',
						icon: 'none'
					});
					return;
				}
				
				const mac = this.deviceInfo.name || this.deviceInfo.mac || '';
				if (!mac) {
					uni.showToast({
						title: '设备信息错误',
						icon: 'none'
					});
					return;
				}
				
				const data = {
					mac: mac.slice(-12), // 确保是12位MAC
					pre: 'CTWG:',
					deviceName: this.deviceName,
					sn: this.sn || ''
				}
				console.log('录入参数:', data);
				
				uni.showLoading({
					title: '录入中...'
				});
				
				this.$u.post(`/app/device/addDevice`, data).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '录入成功',
							icon: 'success',
							duration: 2000
						});
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						console.log(res, '报错');
						uni.showToast({
							title: res.msg || '录入失败',
							icon: 'none',
							duration: 3000
						});
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('录入失败:', err);
					uni.showToast({
						title: '录入失败，请重试',
						icon: 'none',
						duration: 3000
					});
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7FAFE;
		min-height: 100vh;
	}

	.page {
		padding: 40rpx 32rpx;
		box-sizing: border-box;
	}

	.form-container {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		margin-bottom: 40rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			display: block;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		
		.mac-display {
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 20rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #666;
			font-family: monospace;
		}
	}

	.sn-input-wrapper {
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		::v-deep .u-input {
			flex: 1;
		}
		
		.scan-btn {
			min-width: 100rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #48893B;
			border-radius: 12rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			transition: all 0.3s;
			
			&:active {
				opacity: 0.8;
				transform: scale(0.95);
			}
			
			.scan-text {
				font-size: 24rpx;
				color: #fff;
				font-weight: 500;
				white-space: nowrap;
			}
		}
	}

	::v-deep .u-input__input {
		border: 1px solid #E0E0E0;
		border-radius: 16rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 88rpx;
		line-height: 88rpx;
	}

	.submit-btn {
		margin-top: 60rpx;
		width: 100%;
		height: 96rpx;
		background: #48893B;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		box-shadow: 0 10rpx 30rpx rgba(72, 137, 59, 0.4);
		transition: all 0.3s;
		
		&:active {
			opacity: 0.9;
			transform: translateY(2rpx);
		}
		
		text {
			color: #FFFFFF;
		}
	}
</style>