hldy_xcx/pages/oldmanindex/saoyisao.vue

<template>
	<div class="container">
		<!-- <view class="title-back">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
			</view>
		</view> -->
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<!-- <view style="font-size: 30rpx;">机构加盟</view> -->
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 30}px`}"></view>
		<view class="big-img" @click="onScan">
			<image style="width: 100%;height: 100%;"
				src="https://www.focusnu.com/media/directive/index/saoyisao/kuai.png" />
			<view class="big-img-third">
				<view class="big-img-second">
					<image style="width: 70%;height: 70%;"
						src="https://www.focusnu.com/media/directive/index/saoyisao/sao.png" />
				</view>
			</view>
			<view class="big-font">
				点击扫描区域二维码
			</view>
		</view>

		<!-- </view> -->
	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		base_url
	} from '@/request/index.js';
	import {
		getOrgNuId
	} from './api.js'


	const goBack = () => {
		uni.navigateBack()
	}

	function isAtLeastTenChars(str) {
		return typeof str === "string" && str.length >= 10;
	}

	async function onScan() {
		const res = await uni.scanCode();
		if (isAtLeastTenChars(res.result)) {
			getOrgNuId(res.result).then(res0 => {
				if (res0.result) {
					// console.log("<><><",res0.result)
					uni.navigateTo({
						url: `/pages/oldmanindex/saoyisaothen?element=${JSON.stringify(res0.result)}`
					})
				} else {
					uni.showToast({
						title: '扫描的二维码有误',
						icon: 'none', // 不显示对勾图标
						duration: 2000
					});
				}
			})
		} else {
			uni.showToast({
				title: '扫描的二维码有误',
				icon: 'none', // 不显示对勾图标
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: #F7F7F7;
		position: relative;

		.title-back {
			background-color: #F7F7F7;
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #cbd1d2;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
		}

		.left-father {
			display: flex;
			align-items: center;

			.back-img {
				width: 45rpx;
				height: 40rpx;
				margin-left: 40rpx;
				margin-right: 15rpx;
			}
		}

		.white-content {
			width: 96%;
			margin-left: 2%;
			height: 600rpx;
			border-radius: 50rpx;
			background-color: #fff;
			position: relative;
		}
	}

	.big-bgc {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1800rpx;
		height: 900rpx;

	}

	.big-img {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -40%);
		width: 250rpx;
		height: 250rpx;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			animation: scanMove 1.3s ease-in-out infinite;
			z-index: 1001;
			height: 80rpx; // 尾巴长度
			background: linear-gradient(to top,
					rgba(5, 170, 254, 0.6),
					rgba(5, 170, 254, 0.1),
					transparent);
			will-change: transform;
		}

		.big-img-third {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			height: 90%;
			border-radius: 50rpx;
			background-color: #F1F5FD;

			.big-img-second {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				height: 80%;
				border-radius: 50rpx;
				background-color: #E0EAFA;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.big-font {
		position: absolute;
		color: #888A8B;
		left: 50%;
		transform: translateX(-50%);
		bottom: -150rpx;
		font-size: 32rpx;
		width: 600rpx;
		// width: ;
		display: flex;
		justify-content: center;
	}

	// 扫描动画关键帧
	@keyframes scanMove {
		0% {
			top: -10%;
		}

		100% {
			top: 75%;
		}
	}
</style>