LSM_OIL_SITE/pages/station-info/scan-camera/scan-camera.vue

<template>
	<view class="page-content">
		<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">扫描二维码</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<camera class='scan-camera' :flash="flashValue" mode="scanCode" binderror="cameraError" bindscancode='scancode'
		 @scancode="scancode" frame-size='large'>
			<cover-view class='scan-animation' :animation="animationData2"></cover-view>
			<cover-view class="cover-aquare">
				<cover-view class='cover-aquare-inner'></cover-view>
				<cover-view class='cover-corner cover-left-top'>
					<cover-view class="w-line"></cover-view>
					<cover-view class="h-line"></cover-view>
				</cover-view>
				<cover-view class='cover-corner cover-right-top'>
					<cover-view class="w-line w1-line"></cover-view>
					<cover-view class="h-line h1-line"></cover-view>
				</cover-view>
				<cover-view class='cover-corner cover-left-bottom'>
					<cover-view class="h-line"></cover-view>
					<cover-view class="w-line"></cover-view>
				</cover-view>
				<cover-view class='cover-corner cover-right-bottom'>
					<cover-view class="h-line  h3-line"></cover-view>
					<cover-view class="w-line w3-line"></cover-view>
				</cover-view>

			</cover-view>

			<cover-view class="flash text-center">
				<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue!='on'">
					打开手电筒
				</cover-view>
				<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue=='on'">
					关闭手电筒
				</cover-view>
			</cover-view>


		</camera>
	</view>
</template>

<script>
	let diSrc = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9360.mp3'
	let innerAudioContext = wx.createInnerAudioContext()
	innerAudioContext.src = diSrc
	export default {
		data() {
			return {
				once: false,
				lightOn: false,
				animationData2: {},
				flashValue: 'auto'
			}
		},
		onShow() {
			this.donghua()
			setInterval(() => {
				this.donghua()
			}, 6000);
		},
		// onShow() {
		// 	this.donghua()

		// },
		methods: {
			touchFlash() {
				if (this.flashValue != 'on') {
					this.flashValue = 'on'
				} else if (this.flashValue == 'on') {
					this.flashValue = 'off'
				}
			},
			donghua() {
				var animation2 = uni.createAnimation({
					duration: 1000,
					timingFunction: 'linear',
				})

				this.animation2 = animation2

				animation2.translateY(235).step({
					duration: 3000
				})

				this.animationData2 = animation2.export()

				setTimeout(() => {
					animation2.translateY(0).step({
						duration: 3000
					})
					this.animationData2 = animation2.export()

				}, 3000)
			},
			scancode(e) {
				if (!this.once) {
					var scanUrl = ''
					// uni.getStorageSync('scanUrl')
					// 提示音
					innerAudioContext.play()
					console.log('play滴~')
					// 校验扫描结果，并处理
					let res = e.detail.result
					console.log(res)
					console.log(e)
					uni.setStorageSync('qrCode', res)
					this.once = true
					uni.redirectTo({
						url: `/pages/stationDetail/stationDetail`,
						fail: (err) => {
							console.log(err)
						},
						success: (res) => {
							console.log('chengg', res)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.page-content {
		overflow: hidden;
	}

	.scan-camera {
		width: 750upx;
		height: 92vh;
		border-radius: 6rpx;
	}

	.cover-corner {
		position: absolute;
		z-index: 2;
	}

	.cover-left-top {
		left: 0upx;
		top: 0upx;

	}

	.cover-right-top {
		right: 0;
		top: 0;

	}

	.cover-left-bottom {
		left: 0;
		bottom: 0;

	}

	.cover-right-bottom {
		right: 0;
		bottom: 0;

	}

	.scan-animation {
		position: absolute;
		width: 480rpx;
		height: 8rpx;
		top: 200upx;
		left: 135upx;
		background-color: #FE0505;
		border-radius: 50%;
		box-shadow: 5upx 5upx 0 10upx #FE0505;
	}

	.cover-aquare-inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 2upx solid #f1f3f7;
	}

	.cover-aquare {
		position: absolute;
		width: 500upx;
		height: 500upx;
		overflow: inherit;
		top: 200upx;
		left: 125upx;
		/* border: 1px solid #FE0505; */
	}

	.h-line {
		width: 10upx;
		height: 20upx;
		background-color: #FE0505;
	}

	.w-line {
		width: 30upx;
		height: 10upx;
		background-color: #FE0505;
	}

	.h1-line {
		width: 10upx;
		float: right;
		height: 20upx;
	}

	.w1-line {
		width: 30upx;
		height: 10upx;
	}

	.h3-line {
		right: -21upx;
		position: relative;
		z-index: 4;
	}

	.flash {
		position: absolute;
		width: 750upx;
		top: 800upx;
		z-index: 4;
	}

	.cu-avatar {
		text-align: center;
		background: transparent;
	}

	.cu-avatar [class*="cuIcon-"] {
		padding-left: 1.5rem;
	}
</style>