yyky_new_app/pages/equ_list/add_equ.vue

<template>
	<view class="box">
		<van-tabs v-model="active">
			<van-tab title="扫码">
				<view class="scan">
					<view class="scan_box">
						<image src="/static/img/scan.png" mode=""></image>
					</view>
					<view class="scan_btn" @click="scanQRCode">扫码</view>
					<view class="warn_text">
						<view class="text">
							请确保设备插卡并且处于开机状态，SIM卡有效并且开通GPRS
							业务
						</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="输入">
				<view class="input">
					<view class="text_box">
						<input type="text" placeholder="请输入设备ID号" v-model="text">
					</view>
					<view class="scan_btn" @click="next">
						<!-- <view class=""> -->
						下一步
						<!-- </view> -->
					</view>
					<view class="warn_text">
						<view class="text">
							请确保设备插卡并且处于开机状态，SIM卡有效并且开通GPRS
							业务
						</view>
					</view>
				</view>
			</van-tab>


		</van-tabs>
		<!-- <u-tabs :list="list" :current="current" @click="click" lineColor="#F35546" lineWidth="88" lineHeight="4"
			bg-color="#fff"></u-tabs>
		<view class="scan" v-if="current === 0">
			<view class="scan_box">
				<image src="/static/image/scan.png" mode=""></image>
			</view>
			<view class="scan_btn" @click="scanQRCode">扫码</view>
			<view class="warn_text">
				<view class="text">
					请确保设备插卡并且处于开机状态，SIM卡有效并且开通GPRS
					业务
				</view>
			</view>
		</view>
		<view class="input" v-if="current === 1">
			<view class="text_box">
				<input type="text" placeholder="请输入设备ID号" v-model="text">
			</view>
			<view class="scan_btn" @click="next">
				下一步
			</view>
			<view class="warn_text">
				<view class="text">
					请确保设备插卡并且处于开机状态，SIM卡有效并且开通GPRS
					业务
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list: [{
					name: '扫码'
				}, {
					name: '输入'
				}],
				current: 0,
				text: ''
			}
		},
		onShow: function() {

		},
		methods: {
			click(item) {
				this.current = item.index;
			},
			next() {
				console.log(this.text, 777);
				if (this.text) {
					uni.navigateTo({
						url: `/pages/equ_list/bind?deviceCode=${this.text}`
					})
				} else {
					this.$util.Tips({
						title: '请输入设备ID号'
					});
				}
			},
			scanQRCode() {
				uni.scanCode({
					success: (res) => {
						console.log(res); // 打印扫码结果
						// 在这里可以对扫码结果进行处理
						uni.navigateTo({
							url: `/pages/equ_list/bind?deviceCode=${res.result}`
						})
					},
					fail: (res) => {
						console.log(res);
						// 处理扫码失败的情况
						this.$util.Tips({
							title:'扫码失败',
							icon:'error'
						})
					}
				});
			}
			// uni.scanCode({
			// 	success: res => {
			// 		let code = null
			// 		this.modelCode = null
			// 		if (res.result && res.result.indexOf('SN') == -1) {
			// 			code = +res.result
			// 		} else if (res.result && res.result.indexOf('"SN"') != -1) {
			// 			res.result = JSON.parse(res.result)
			// 			code = +res.result.SN
			// 		} else {
			// 			return uni.showToast({
			// 				icon: 'none',
			// 				title: '非法的TBOX编号',
			// 			})
			// 		}
			// 		const codeType = typeof code === 'number' && !isNaN(code)
			// 		if (!codeType) {
			// 			return uni.showToast({
			// 				icon: 'none',
			// 				title: '非法的TBOX编号',
			// 			})
			// 		}
			// 		// 数据重置
			// 		this.resetData()
			// 		this.tboxCode = code
			// 		this.scanning && this.getTBoxInfo(code)
			// 	},
			// 	fail: function() {
			// 		this.scanning = true
			// 		uni.hideLoading()
			// 	},
			// })
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #fff;

		.scan {
			padding: 55rpx 32rpx 477rpx;
			text-align: center;
			background-color: #F7F7F7;

			.scan_box {
				image {
					width: 386rpx;
					height: 533rpx;
				}
			}

			.scan_btn {
				height: 98rpx;
				line-height: 98rpx;
				background: #F35546;
				border-radius: 9rpx;
				margin-top: 79rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.warn_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #777777;
				margin-top: 42rpx;
				text-align: start;
				line-height: 33rpx;
			}

		}

		.input {
			padding: 55rpx 32rpx 477rpx;
			// text-align: center;
			height: 100%;
			background-color: #F7F7F7;

			.text_box {
				background-color: #fff;
				height: 98rpx;
				line-height: 98rpx;
				padding: 0 32rpx;

				input {
					width: 100%;
					height: 100%;
					// width: 386rpx;
					// height: 533rpx;
				}
			}

			.scan_btn {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				background: #F35546;
				border-radius: 9rpx;
				margin-top: 131rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.warn_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #777777;
				margin-top: 42rpx;
				text-align: start;
				line-height: 33rpx;
			}

		}
	}

	/* ::v-deep .u-tabs__wrapper__nav{
		justify-content: center !important;
	} */
	::v-deep .u-tabs__wrapper__nav__item[data-v-0de61367] {
		width: 375rpx;
	}

	::v-deep uni-input[data-v-1b9e2be9] {
		width: 100% !important;
		height: 100% !important;
	}
</style>