ebike-ui/ebike-maintenance/pages/user/scan/inputcode.vue

<template>
	<div style="width:100vw;height:100vh;display: flex;justify-content: center;background: white;">
		<div class="divInfo">
			<div class="divTitle">请输入车辆二维码下方6位编号开锁</div>
			<div><input :focus="focus" @input="changeInput" type="number" maxlength="6" style="height: 0;width: 0;" />
			</div>
			<div class="divImgP">
				<image class="divImg"  :src="`${imgPath}static/userui/scan/bike.png`" />
			</div>
			<div class="divData">
				<div class="divDataTab" v-for="(item,index) in inputData" :key="index" @click="clickTab">{{item}}</div>
			</div>

			<div class="divBottom">
				<image style="width: 60px;height: 60px;"  :src="`${imgPath}static/userui/scan/light.png`" />
				<div style="font-size: 12px;color: gray;" @click="onTorch">轻触点亮</div>
				<div :class="(btnDis?'divBtnDis ':'')+'divBtn'" @click="addRide">确认</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		showModelMessage,
		getUrlParams
	} from "@/utils/tools.js";
	import {
		callOrdereApi
	} from "@/utils/api.js";
	import config from '@/utils/config';
	const imgPath = config.imgPath;
	const len = 6;
	const oUser = uni.getStorageSync("wechat_user");
	const inputData = ref(new Array(len).fill(""));
	const focus = ref(true);
	const btnDis = ref(true);
	let data = null;



	function changeInput(e) {
		const {
			value
		} = e.detail;
		const arrVal = value.split("");
		const arrData = [];
		for (let i = 0; i < len; i++) {
			arrData[i] = arrVal[i] || '';
		};
		data = value;
		inputData.value = arrData;
		if (arrVal.length == 6) {
			btnDis.value = false;
		}
	}

	function clickTab() {
		focus.value = true;
	}

	// 打开闪光灯
	function onTorch() {
		try {
			var os = plus.os.name;
			if ('iOS' == os) {
				// 获取iOS设备的默认摄像头设备
				var device = plus.ios.invoke('AVCaptureDevice', 'defaultDeviceWithMediaType:', 'vide');
				// 锁定设备配置
				plus.ios.invoke(device, 'lockForConfiguration:', null);
				// 设置手电筒模式为打开
				plus.ios.invoke(device, 'setTorchMode:', 1);
				// 设置闪光灯模式为打开
				plus.ios.invoke(device, 'setFlashMode:', 1);
				// 解锁设备配置
				plus.ios.invoke(device, 'unlockForConfiguration');
			} else {
				// 获取安卓系统的主Activity
				var main = plus.android.runtimeMainActivity();
				// 获取摄像头服务
				var camera = main.getSystemService('camera');
				// 获取摄像头ID列表
				var ids = plus.android.invoke(camera, 'getCameraIdList');
				for (var i = 0; i < ids.length; i++) {
					// 获取摄像头特性
					var c = plus.android.invoke(camera, 'getCameraCharacteristics', ids[i]);
					// 检查闪光灯是否可用
					var available = plus.android.invoke(c, 'get', plus.android.getAttribute(c, 'FLASH_INFO_AVAILABLE'));
					// 检查摄像头是否为后置摄像头
					var facing = plus.android.invoke(c, 'get', plus.android.getAttribute(c, 'LENS_FACING'));
					if (null != facing && 1 == facing) {
						// 打开后置摄像头的手电筒
						plus.android.invoke(camera, 'setTorchMode', ids[i], true);
					}
				}
			}
		} catch (e) {
			console.error('error @onTorch!!', e);
		}
	}


	//订单
	function addRide() {
		const {
			userId
		} = oUser;
		const params = {
			userId,
			bikeCode: data
		}
		console.log("44444444444444444",params)
		callOrdereApi("userOrders/saveRide", params, "post").then(res => {
			const {
				code,
				message
			} = res;
			if (code != 200) {
				showModelMessage(message);
			} else {
				showWorn.value = true;
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/user/home/home"
					})
				}, 1000)
			}
		})
	}
</script>

<style scoped>
	.divInfo {
		text-align: center;
	}

	.divTitle {
		margin-top: 40px;
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

	.divImgP {
		position: absolute;
		left: 0px;
		right: 0px;
		height: 120px;
		top: 60px;
		background: white;
		z-index: 100000;
		display: flex;
		justify-content: center;
	}

	.divImg {
		width: 220px;
		height: 100px;
		margin: 20px 0px;
	}

	.divData {
		display: flex;
		justify-content: space-evenly;
		position: relative;
		top: 130px;
	}

	.divDataTab {
		width: 28px;
		height: 40px;
		border: 1px solid #80808038;
		border-radius: 5px;
		background: #f5f2f2b8;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.divBottom {
		position: relative;
		margin-top: 150px;
		text-align: center;
	}

	.divBtnDis {
		pointer-events: none;
		background: #b9b7b7 !important;
		opacity: 0.3;

	}

	.divBtn {
		background: #61D246;
		margin-top: 10px;
		line-height: 35px;
		border-radius: 5px;
		color: white;
	}
</style>