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" @scancode="scancode" @initdone="initdone"
			@stop="openStop" @error="openFail" 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)
			},
			initdone(e) {
				console.log('相机初始化完成时触发', e)

			},
			openStop(err) {
				console.log('摄像头异常终止', err)
				uni.showToast({
					title:'摄像头异常终止',
					icon:'none'
				})
			},
			openFail(err) {
				console.log('用户不允许使用摄像头时触发', err)
				uni.showToast({
					title:'用户不允许使用摄像头',
					icon:'none'
				})
			},
			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
					let url = ''
					const tag = res.substring(0, 2)
					if (tag == "XM" || tag == "HT" || tag == "G7") {
						url = '/pages/stationDetail/stationDetail'
					} else {
						url = '/pages/stationDetail/ZYSite'
					}
					console.log(tag)
					uni.redirectTo({
						// url: `/pages/stationDetail/stationDetail`,
						url: url,
						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>