tf-business/pages_module/testCode/index.vue

<!-- 扫一扫 -->
<template>
	<view class="scan-view">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!-- <u-navbar  :title="userInfo.channelname " :background="'#000'" :title-color="'#fff'" :border-bottom="false"></u-navbar> -->
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<view class="left" @click="onClickBack">
				<text class="fwhfont icon-icon-chevron-left" style="font-size: 50rpx;"></text>
			</view>
			<view class="title">
				<text class="title-text">{{ userInfo.channelname }}</text>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view class="scan-border">
			<view
				style="width: 500rpx;height: 600rpx;border: 1rpx solid #ccc;margin-bottom: 120rpx;position: relative;">
				<view class="Bordertop">
					<view style="width: 44rpx;height: 10rpx;background-color: #FBCC04;"></view>
					<view style="width: 44rpx;height: 10rpx;background-color:  #FBCC04;"></view>
				</view>
				<view class="Borderright">
					<view style="width: 10rpx;height: 44rpx;background-color:  #FBCC04;"></view>
					<view style="width:10rpx;height: 44rpx;background-color:  #FBCC04;position: absolute;bottom: 0rpx;">
					</view>
				</view>
				<view class="Borderbottom">
					<view style="width: 44rpx;height: 10rpx;background-color:  #FBCC04;"></view>
					<view style="width: 44rpx;height: 10rpx;background-color:  #FBCC04;"></view>
				</view>
				<view class="Borderleft">
					<view style="width: 10rpx;height: 44rpx;background-color:  #FBCC04;"></view>
					<view
						style="width: 10rpx;height: 44rpx;background-color:  #FBCC04;position: absolute;bottom: 0rpx;">
					</view>
				</view>
				<!-- bindscancode="onScancode" @initdone="onCameraInitDone" -->
				<camera class="scan-camera" @scancode="onScancode" @error="onError" mode="scanCode"
					device-position="back" flash="auto">
					<cover-view class="scan-animation" :animation="animation"></cover-view>
				</camera>
			</view>
			<view class="scanText">将二维码/条码放到取景框内，即可自动扫描</view>
			<view class="footerButton">
				<view class="btns">
					<text class="fwhfont icon-jianpan" style="padding-right: 20rpx;"></text>
					<text>输码</text>
				</view>
				<view class="btns">
					<text class="fwhfont icon-icon-list" style="padding-right: 20rpx;"></text>
					<text>记录</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
var animation = uni.createAnimation({
	timingFunction: "linear",
	delay: 0
});
export default {
	data() {
		return {
			animation: {},

		};
	},

	onShow() {
		this.lineAnimation()
	},
	methods: {

		/**扫码线条动画*/
		lineAnimation() {
			this.animation = animation;
			let that = this;
			let scode = true;
			this.timer = setInterval(
				function () {
					if (scode) {
						animation.translateY(260).step({
							duration: 1500,
						});
						scode = !scode;
					} else {
						animation.translateY(-10).step({
							duration: 1500,
						});
						scode = !scode;
					}
					that.animation = animation.export();
				}.bind(this),
				1500
			);
		},
		// 相机初始化完成回调函数
		onCameraInitDone() {
			// setInterval(() => {
			// 	this.$refs.camera.scanCode();
			// }, 1000);
		},
		onError() {
			this.$toast('扫码错误')
		},

		onClickBack() {
			uni.navigateBack();
		},
		/**扫码成功*/
		onScancode(e) {
			uni.showModal({
				title: '提示',
				content: '这是一个模态弹窗',
			});
			console.log(e);
		},

	},

	onUnload() {

	},
};
</script>
<style lang="scss" scoped>
page {
	background-color: black;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}

.scan-view {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: fixed;
	align-items: center;
	justify-content: space-around;
	background-color: #000;
}

.Bordertop {
	display: flex;
	justify-content: space-between;
	position: absolute;
	z-index: 99;
	width: 100%;
	top: -2rpx;
}

.Borderleft {
	left: -2rpx;
	z-index: 99;
	position: absolute;
	height: 100%;
}

.Borderright {
	z-index: 99;
	position: absolute;
	right: -2rpx;
	height: 100%;
}

.Borderbottom {
	display: flex;
	z-index: 99;
	justify-content: space-between;
	position: absolute;
	width: 100%;
	bottom: -6rpx;
}

.scan-border {
	width: 100%;
	height: 75%;
	/* border: 6rpx solid #08FDFE; */
	display: flex;
	flex-direction: column;
	align-items: center;

	.scan-camera {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}
}

.scan-animation {
	position: absolute;
	top: 4%;
	left: 2%;
	width: 480rpx;
	height: 2rpx;
	background-color: #FBCC04;
	border-radius: 50%;
}

.footerButton {
	width: 100%;
	margin-top: 100rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.btns {
		color: #ebebeb;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 10rpx;
		padding: 20rpx;
		background-color: #333333;
		border-radius: 20rpx;
	}
}

.scanText {
	position: absolute;
	bottom: 32%;
	// left: 15%;
	color: #ebebeb;
}

/* 导航栏样式 */
.nav-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 3%;
	left: 0;
	width: 100%;
	height: 110rpx;
	padding: 0 10px;
	box-sizing: border-box;
	z-index: 999;
	margin-top: 22rpx;
}

/* 左侧按钮样式 */
.left {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	background: #fff;
	border-radius: 60rpx;
}

/* 标题样式 */
.title {
	flex: 1;
	display: flex;
	align-items: center;
	margin-left: 26rpx;
}

/* 标题文字样式 */
.title-text {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #FFFFFF;
	font-size: 36rpx;
}
</style>