FastBee/APP/pagesB/home/device/add/relateDevice.vue

<template>
	<page-meta><navigation-bar :title="$tt('linkDevice.linkDevice')" background-color="#F1F3F9"
			front-color="#000000" /></page-meta>
	<view class="relate-device">
		<view class="main-wrap">
			<view class="form-wrap">
				<u--form labelWidth="90" labelAlign="center">
					<view class="card" v-for="(item, index) in form.deviceNumberAndProductIds" :key="index">
						<view class="tools-wrap">
							<u-icon v-if="index !== 0" name="minus-circle" color="#f56c6c" size="21"
								@click="removeDeviceNumber(index)"></u-icon>
							<u-icon v-if="index === 0" name="plus-circle" color="#2979ff" size="21"
								@click="addDeviceNumber"></u-icon>
							<u-icon name="scan" color="#5ac725" size="24"
								@click="openScan(form.deviceNumberAndProductIds[index])"></u-icon>
						</view>
						<u-form-item :label="$tt('linkDevice.deviceNum')" borderBottom>
							<u-input v-model="form.deviceNumberAndProductIds[index].deviceNumber"
								:placeholder="$tt('linkDevice.inputDeviceId')" border="none"></u-input>
						</u-form-item>
						<u-form-item :label="$tt('linkDevice.productNum')" borderBottom>
							<u-input v-model="form.deviceNumberAndProductIds[index].productId"
								:placeholder="$tt('linkDevice.inputProductId')" border="none"></u-input>
						</u-form-item>
						<u-form-item :label="$tt('linkDevice.productName')">
							<u-input v-model="form.deviceNumberAndProductIds[index].productName" readonly
								:placeholder="$tt('linkDevice.product')" border="none"></u-input>
						</u-form-item>
					</view>
				</u--form>
			</view>

			<view class="footer">
				<u-button type="primary" :plain="true" @tap="submitForm"
					customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('common.save')}}</u-button>
			</view>
		</view>

		<u-modal :show="modal.show" :content="modal.content" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import { deviceRelateUser } from '@/apis/modules/device';

	export default {
		data() {
			return {
				// 模态窗
				modal: {
					show: false,
					content: ''
				},
				// 表单内容
				form: {
					deviceNumberAndProductIds: [{
						deviceNumber: '',
						productId: null,
						productName: ''
					}],
					userId: null
				}
			};
		},
		created() {
			//获取登录用户信息
			if (this.profile == null) {
				this.getProfile();
			} else {
				this.form.userId = this.profile.userId;
			}
		},
		onUnload() {},
		methods: {
			// 获取登录用户信息
			getProfile() {
				// 调用用户信息接口
				this.$api.common
					.getProfile()
					.then(res => {
						//存储用户信息,TODO 需要调用一次，不然其他页面调用返回空
						uni.$u.vuex('profile', res.data);
						this.profile;
						this.form.userId = this.profile.userId;
					})
					.catch(err => {
						this.$u.toast(err.msg);
					});
			},
			// 添加一项
			addDeviceNumber() {
				this.form.deviceNumberAndProductIds.push({ deviceNumber: '', productId: null, productName: '' });
			},
			// 移除一项
			removeDeviceNumber(index) {
				this.form.deviceNumberAndProductIds.splice(index, 1);
			},
			// 返回
			goBack() {
				getApp().globalData.operate = 'operate';
				uni.navigateBack({
					delta: 1
				});
			},
			// 模态窗取消
			confirm() {
				this.modal = {
					show: false,
					content: ''
				};
			},
			// 全部保存
			submitForm() {
				if (this.form.userId == null || this.form.userId == 0) {
					uni.showToast({ icon: 'none', title: this.$tt('linkDevice.userName') });
					return;
				}
				for (let i = 0; i < this.form.deviceNumberAndProductIds.length; i++) {
					if (this.form.deviceNumberAndProductIds[i].deviceNumber == '') {
						uni.showToast({ icon: 'none', title: this.$tt('linkDevice.deviceEmpty') });
						return;
					}
					if (this.form.deviceNumberAndProductIds[i].productId == null || this.form.deviceNumberAndProductIds[i]
						.productId == 0) {
						uni.showToast({ icon: 'none', title: this.$tt('linkDevice.productIdEmpty') });
						return;
					}
				}
				deviceRelateUser(this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({ icon: 'success', title: this.$tt('common.saveSuccessful') });
						setTimeout(() => {
							uni.$emit('refreshData');
							this.goBack();
						}, 1000);
					} else {
						this.modal = {
							show: true,
							content: res.msg
						};
					}
				});
			},
			// 扫码
			async openScan(item) {
				// #ifndef MP-WEIXIN || APP-PLUS
				uni.showToast({
					icon: 'none',
					title: this.$tt('user.scanning')
				});
				return;
				// #endif

				// 权限问题，app 需要做权限说明
				let onlyFromCamera = false;
				// #ifdef APP-PLUS
				onlyFromCamera = true;
				let result = await this.$store.dispatch("permission/requestPermissions", 'CAMERA');
				if (result !== 1) return;
				// #endif

				// 允许从相机和相册扫码
				uni.scanCode({
					onlyFromCamera, // 是否允许从相册扫码
					success: res => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if (res.result.substr(0, 1) != '{') {
							console.log('坑点：解析二维码后第一个位置包含一个特殊字符，大部分编译器和调试工具识别不了这个特殊字符');
							res.result = res.result.substring(1);
						}
						// 解析JSON
						try {
							let json = JSON.parse(res.result);
							// type=1 代表扫码关联设备
							if (json.type == 1) {
								item.deviceNumber = json.deviceNumber;
								item.productId = json.productId;
								item.productName = json.productName;
								return;
							}
							uni.showToast({ icon: 'none', title: this.$tt('linlDevice.format') });
						} catch (error) {
							uni.showToast({ icon: 'none', title: this.$tt('linlDevice.format') });
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.relate-device {
		width: 100%;

		.main-wrap {
			padding: 14rpx 30rpx;

			.form-wrap {
				width: 100%;

				.tools-wrap {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					gap: 20rpx;
					padding: 20rpx 0;
				}

				.card {
					padding: 5px 12px;
					background: #FFFFFF;
					border-radius: 5px;

					&:not(:first-child) {
						margin-top: 20rpx;
					}
				}

				::v-deep .u-form-item__body {
					padding: 26rpx 0;
				}
			}

			.footer {
				margin-top: 30rpx;
			}
		}
	}
</style>