YTAPP/pages/scan/index.vue

<template>
	<view class="content">
		<view class="content scan-view">
			<view class="scan-btn-view">
				<view class="border-wrapper">
					<div class="scan-btn first"></div>
					<div class="scan-btn second"></div>
				</view>
				<button class="scan-btn" @click="scan">
					<uni-icons type="scan" size="40" color="white"></uni-icons>
				</button>
			</view>
			<view class="text-area">
				<text class="title">扫码</text>
			</view>

			<input
				class="inputSty"
				v-model="valiFormData.code"
				:focus="focusType"
				@blur="setfocus"
				@confirm="onsubmit"
				placeholder="请输入运单号"
				placeholder-style="font-size:12px"
			/>

			<view class="input-view">
				<!-- 	<text v-if="valiFormData.code">
					Scan Result: {{valiFormData.code}}
				</text> -->
				<button :disabled="valiFormData.code.length === 0" class="submit-btn" @click="onsubmit" size="mini">
					<uni-icons type="checkmarkempty" size="12" :color="valiFormData.code.length === 0 ? 'gray' : 'white'"></uni-icons>
					<text :style="{ color: valiFormData.code.length === 0 ? 'gray' : 'white' }">提交</text>
				</button>
			</view>
			<view v-if="history.length > 0" class="history">
				<text class="title">记录</text>
			</view>
		</view>
		<view class="history">
			<view class="item" v-for="(item, i) in history">
				<text class="code" :style="{ color: item.status ? 'green' : '#666' }">{{ item.code }}</text>
				<uni-icons v-if="item.status" type="checkmarkempty" class="status" size="16" color="green"></uni-icons>
				<text class="status fail" v-else>F</text>
				<text style="margin-left: 10rpx; font-weight: 300">
					{{ '\r\n' + item.createTime }}
				</text>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import permision from '@/common/permission.js';
import { ref, reactive, nextTick } from 'vue';
import { warehouseScanURL } from '@/utils/api.js';
export default {
	data() {
		const valiFormData = reactive({
			code: ''
		});
		const token = ref(null);
		return {
			messageType: '',
			messageText: '',
			valiFormData,
			token,
			submitFail: false,
			history: [],
			focusType: true,
			st: -1,
			hidePage: false
		};
	},
	onLoad() {
		// #ifdef APP-PLUS
		plus.key.addEventListener('keyup', this.keypress);
		// #endif
		// #ifdef H5
		document.addEventListener('keyup', this.keypress);
		// #endif
	},
	onUnload() {
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', this.keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', this.keypress);
		// #endif
	},
	onShow() {
		this.hidePage = false;
		this.token = uni.getStorageSync('token');
	},
	onHide() {
		this.hidePage = true;
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', this.keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', this.keypress);
		// #endif
	},
	onBackPress() {
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', this.keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', this.keypress);
		// #endif
	},
	methods: {
		async scan() {
			// #ifdef APP-PLUS
			let status = await this.checkPermission();
			if (status !== 1) {
				return;
			}
			// #endif
			uni.scanCode({
				success: (res) => {
					this.valiFormData.code = res.result;
					// this.$refs.alertDialog.open()
					this.onsubmit();
				},
				fail: (err) => {
					// 需要注意的是小程序扫码不需要申请相机权限
				}
			});
		},
		// #ifdef APP-PLUS
		async checkPermission(code) {
			let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');

			if (status === null || status === 1) {
				status = 1;
			} else {
				uni.showModal({
					content: 'Camera permission required',
					confirmText: 'Setting',
					success: function (res) {
						if (res.confirm) {
							permision.gotoAppSetting();
						}
					}
				});
			}
			return status;
		},
		// #endif
		async warehouseScan(order_code) {
			this.st && clearTimeout(this.st);
			uni.request({
				url: warehouseScanURL,
				method: 'POST',
				header: {
					batoken: this.token
				},
				data: {
					order_code
				},
				success: (res) => {
					if (res.data.code == 1) {
						this.submitFail = false;
						this.messageType = 'success';
						this.messageText = 'Submit Successed!';
						this.$refs.message.open();
						const historyItem = {
							code: this.valiFormData.code,
							createTime: new Date(),
							status: true
						};
						this.history.unshift(historyItem);
						this.history.length > 10 && (this.history.length = 10);
						uni.setStorageSync('history', this.history);
						this.getHistory();
					} else {
						this.submitFail = true;
						this.messageType = 'error';
						this.messageText = res.data.msg;
						this.$refs.message.open();
						const historyItem = {
							code: this.valiFormData.code,
							createTime: new Date(),
							status: false
						};
						this.history.unshift(historyItem);
						this.history.length > 10 && (this.history.length = 10);
						uni.setStorageSync('history', this.history);
						this.getHistory();
					}
					this.st = setTimeout(() => {
						this.valiFormData.code = '';
						this.st && clearTimeout(this.st);
					}, 1000);
				}
			});
		},
		onsubmit() {
			this.warehouseScan(this.valiFormData.code);
		},
		getHistory() {
			this.history = uni.getStorageSync('history');
		},
		keypress(e) {
			console.log(e, '按键码');
			// 102  左侧    103  右侧   104  中间按键
			if (e.keyCode === 102 || e.keyCode === 103 || e.keyCode === 104) {
				//这里按键成功
			}

			if (e.keyCode == 66) {
				//enter按键
				//这里input已经拿到数据了，在这里把拿到的数据，通过接口数据联调起来
				this.onsubmit();
			}
		},
		setfocus() {
			if (this.hidePage) {
				return;
			}
			this.focusType = false;
			nextTick(() => {
				this.focusType = true;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.scan-view {
	background: white;
	width: 100%;
	position: fixed;
	position: sticky;
	top: 0px;
}

.scan-btn-view {
	margin-top: 200rpx;
	margin-bottom: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.scan-btn {
	border-radius: 50%;
	width: 150rpx;
	height: 150rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 122, 255, 1);
}

.border-wrapper {
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	width: 100%;
	height: 100%;
	display: block;
}

.scan-btn.first {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 150rpx;
	height: 150rpx;
	background: rgba(0, 122, 255, 0.2);
	opacity: 0.1;
	border-radius: 50%;
	animation: first 3s infinite linear;
}

.scan-btn.second {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 150rpx;
	height: 150rpx;
	background: rgba(0, 122, 255, 0.2);
	opacity: 0.1;
	border-radius: 50%;
	animation: first 3s infinite linear;
	animation-delay: 1s;
}

@keyframes first {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	33% {
		opacity: 0.66;
		transform: scale(1.33);
	}

	66% {
		opacity: 0.33;
		transform: scale(1.67);
	}

	100% {
		opacity: 0;
		transform: scale(2);
	}
}

.text-area {
	display: flex;
	justify-content: center;
}

.inputSty {
	padding: 20rpx;
	width: 60%;
	border-bottom: #999 1rpx solid;
}

.input-view {
	margin-top: 50rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	flex-direction: column;
	display: flex;
	justify-content: center;
	align-items: center;
}

.submit-btn {
	background: rgba(0, 170, 0, 1);
}

.history {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-items: start;

	.title {
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: 600;
	}

	.code {
		font-weight: 600;
	}

	.item {
		padding: 20rpx;
		font-size: 20rpx;
		color: #666;

		.status {
			padding-left: 20rpx;
		}

		.fail {
			font-weight: 600;
			color: #f00;
		}
	}
}
</style>