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

<template>
	<view class="page-content">
		<view>
			<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
				<block slot="backText">返回</block>
				<block slot="content bg-white"> </block>
			</cu-custom>
			<view class="cu-list menu-avatar">
				<view class="cu-item margin-sm margin-left margin-right radius">
					<view class="cu-avatar bg-gray round lg"></view>
					<view class="content money-container">
						<view class="">
							<view class="text-cut bg-gray"></view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut bg-gray"></view> <text class="text-xs bg-gray"></text>
						</view>
					</view>
					<view class="action">
						<view class="text-white money-position padding-left-lg padding-xs bg-main-oil text-lg">
							<text class="text-xs bg-gray"></text>

						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin margin-top-0 radius">
				<view class="title mini-label bg-gray"></view>
				<view class="title  bg-gray"></view>
				<text class="cuIcon-write text-orange"></text>
			</view>
			<view class="my-cell margin-left margin-right padding-top padding-bottom radius">
				<view class="strong bg-gray padding-bottom-xs"></view>
				<view class="font-12 bg-gray">
					<text class="text-cut"></text>
				</view>
			</view>
			<!--  -->
			<view class="padding-top-xs margin margin-top-xs margin-bottom-0 padding-bottom radius">
				<view class="bg-white padding padding-bottom-sm">
					<view class="padding-bottom-sm text-lg bg-gray"></view>
					<view class="padding-top-xs">
						<text class="strong padding-right-xs bg-gray font-16"></text>
						<text class="padding-right-xs bg-gray">

							<text class="text-blod bg-gray oil-main-color"></text>
						</text>
					</view>
					<view class="grid col-5 padding-top justify-start">
						<view class="padding-xs" v-for="(item,index) in 4" :key="index">
							<view class="bg-gray"></view>
						</view>
					</view>
				</view>
				<view class="padding solid-top padding-bottom-0 padding-top-xs bg-white">
					<view class="padding-bottom-sm text-lg bg-gray"></view>
					<view class="grid col-5 justify-start">
						<view class="padding-xs" v-for="(item,index) in 5" :key="index">
							<view class="bg-gray"></view>
						</view>
					</view>
				</view>
				<view class="solid-top padding solid-top bg-white">
					<view class="shadow-warp ">
						<view class="cu-form-group">
							<view class="title"></view>
							<view class="bg-gray"></view>
							<view class="bg-gray"></view>
						</view>
						<view class="my-cell">
							<view class="bg-gray"></view>
							<view class="bg-gray"></view>
						</view>
						<view class="my-cell">
							<view class="text-gray"></view>
							<view class="text-gray"></view>
						</view>
					</view>
				</view>
				<view class="red-circle">

				</view>
			</view>
		</view>

	</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',
			}
		},

		onLoad() {
			uni.scanCode({
				scanType: 'qrCode',
				onlyFromCamera: false,
				success: (resResult) => {
					// innerAudioContext.play()
					console.log('play滴~')
					let res = resResult.result
					console.log(res)
					uni.setStorageSync('qrCode', res)
					this.once = true
					let url = ''
					const tag = res.substring(0, 2)
					// 老星油 XM  ， HT G7  ， 则一 ZEYI ，  新星油 XOIL
					if (tag == "XM" || tag == "HT" || tag == "G7") {
						url = '/pages/stationDetail/stationDetail'
					} else if (res.substring(0, 4) == 'ZEYI' || res.substring(0, 4) == 'XOIL') {
						url = '/pages/stationDetail/ZYSite'
					} else {
						uni.showToast({
							title: '未知二维码',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 800)
						return false;
					}
					console.log(tag)
					uni.redirectTo({
						// url: `/pages/stationDetail/stationDetail`,
						url: url,
						fail: (err) => {
							// console.log(err)
						},
						success: (res) => {
							// console.log('chengg', res)
						}
					})
				},
				fail: (err) => {
					uni.navigateBack({

					})
				}
			})

		},
		methods: {
			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)
					console.log(tag)
					if (tag == "XM" || tag == "HT" || tag == "G7") {
						url = '/pages/stationDetail/stationDetail'
					} else if (res.substring(0, 4) == 'ZEYI') {
						url = '/pages/stationDetail/ZYSite'
					} else {
						uni.showToast({
							title: '未知二维码',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 800)
						return false;
					}
					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;
		color: transparent !important;
	}

	.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;
	}

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

	.page-content {
		background-color: #f1f2f7;
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.money-container {
		position: relative;
	}

	.money-position {
		position: absolute;
		top: 0;
		right: 0;
		min-height: 1rem;
		min-width: 3rem;
		display: block;
		border-radius: 0 0 0 100upx;
	}

	.bg-gray {
		min-height: 1rem;
		min-width: 3rem;
	}

	.red-circle {
		height: 200upx;
		border-radius: 50%;
		background-color: red;
		opacity: 0.8;
	}
</style>