yyky_new_app/pages/equ_list/add_equ.vue

<template>
	<view class="box">
	
		<!-- v-model="active" -->
		<!-- #ifdef MP -->
		<van-tabs>
			<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>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<!-- 	<view class="" style="margin-top: var(--status-bar-height);">
			<uni-nav-bar title="添加设备" left-icon="left" backgroundColor="#F35546" color="#fff" @clickLeft="back"></uni-nav-bar>
		</view> -->
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<!-- 状态栏占位 -->
		<view class="status_bar"></view>
		<view class="" style="margin-top: var(--status-bar-height);">
			<uni-nav-bar title="添加设备" left-icon="left" backgroundColor="#F35546" color="#fff"
				@clickLeft="back"></uni-nav-bar>
		</view>
		<view class="tab_contant">
			<view class="tab">
				<view :class="active1" @click="chenked(1)">
					<view class="tab_itemtitle">扫码</view>
					<view class="tab_itembot" v-if="isActive==1">
						<!-- <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> -->
					</view>
				</view>
				<view :class="active2" @click="chenked(2)">
					<view class="tab_itemtitle">输入</view>
					<view class="tab_itembot" v-if="isActive==2">
						<!-- <view class="input">
							<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>
				</view>
			</view>
		</view>
		<view class="scan" v-if="isActive==1">
			<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>
		<view class="input" v-if="isActive==2">
			<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>
		<!-- #endif -->

		<!-- <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: '',
				isActive: 1
			}
		},
		onShow: function() {},
		computed: {
			active1() {
				return this.isActive == 1 ? 'active' : 'active1'
			},
			active2() {
				return this.isActive == 2 ? 'active' : 'active1'
			},
			active3() {
				return this.isActive == 3 ? 'active' : 'active1'
			}
		},
		methods: {
			chenked(type) {
				this.isActive = type
			},
			back() {
				uni.navigateBack()
			},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
			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">
	.tab_contant {
		// position: absolute;
		width: 750rpx;
		// height: 634px;
		// left: 0px;
		// top: 0rpx;

		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.tab {
			width: 480rpx;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 26px;

			// 选中的样式
			.active {
				width: 64px;
				height: 50px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.tab_itemtitle {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 155%;
					/* identical to box height, or 25px */

					text-align: center;
					color: #000000;
				}

				.tab_itembot {
					width: 36px;
					height: 0px;

					/* 五分钟蓝 */
					margin-top: 5px;
					border: 2px solid #F35546;
					border-radius: 50px;
				}
			}

			// 未选中的样式
			.active1 {
				width: 64px;
				height: 50px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.tab_itemtitle {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
					line-height: 155%;
					/* identical to box height, or 19px */

					text-align: center;
					color: #000000;
					opacity: 0.6;
				}

				.tab_itembot {
					width: 15.02px;
					height: 0px;
					margin-top: 10px;
					border: 2px solid #B9B9B9;
					border-radius: 50px;
					.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;
						}
					
					}
				}
			}

		}
	}

	.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>