officialAccount/pages/index/index.vue

<template>
	<view class="login-container">
		<image class="back-imge" src="https://www.focusnu.com/media/directive/login/back.png" @click="goback" />
		<!-- 扫码遮罩层 -->
		<view v-if="scanning" class="scan-mask">
			<!-- 半透明背景自动铺满 -->
			<view class="mask-bg" @click="cancelScan"></view>
			<!-- 扫描框容器，绝对居中 -->
			<view class="mask-center" @click.stop>
				<div id="reader" class="reader"></div>
				<!-- <view class="cancel-btn" @click="scanQrCode">取消扫描</view> -->
			</view>
		</view>
		<view class="index-up">
			<image class="index-up-img" src="https://www.focusnu.com/media/directive/index/indexgif.gif" mode="widthFix" lazy-load="false" />
		</view>

		<view class="index-ball-father">
			<view class="white-ball">
				<image class="small-img" @click="gotoPay" src="https://www.focusnu.com/media/directive/index/button/money.png" mode="widthFix"
					lazy-load="false" />
			</view>
			<view class="white-ball">
				<image class="small-img" src="https://www.focusnu.com/media/directive/index/button/scan.png" mode="widthFix" lazy-load="false" />
			</view>
			<view class="white-ball">
				<image class="small-img" src="https://www.focusnu.com/media/directive/index/button/watch.png" mode="widthFix" lazy-load="false" />
			</view>
			<view class="super-white-ball" @click="jumpTo">
				<image class="small-img" src="https://www.focusnu.com/media/directive/index/button/more.png" mode="widthFix" lazy-load="false" />
			</view>
		</view>
		<view class="index-smallPhoto">
			<view class="photo-box" @click="preview()">
				<image class="photo-box-img" src="https://www.focusnu.com/media/directive/index/kuai.png" mode="widthFix" lazy-load="false" />
				<image class="photo-box-img" :src="tu" mode="widthFix" lazy-load="false" />
			</view>
		</view>
		<view class="white-scan" v-if="scaning">
			<view class="scan-title">
				<image class="scan-img" src="https://www.focusnu.com/media/directive/index/badscan.png" />
				<view class="scan-font">
					<view class="weight">
						扫描机构二维码
					</view>
					<view class="noral">
						持续搜索中...
					</view>
				</view>
				<view class="scan-back" @click="scaning = false;">
					返回
				</view>
				<!-- <image class="scan-back" src="https://www.focusnu.com/media/directive/index/index/back.png" @click="scaning = false;" /> -->
			</view>

			<view v-if="qrResult" class="result">
				扫描结果：{{ qrResult }}
			</view>
			<view class="other-scan">
				<view class="scan-circle" @click="scanQrCode">
					<view class="small-circle"></view>
					<image class="scan-img" src="https://www.focusnu.com/media/directive/index/goodscan.png" />
				</view>
				<view class="scan-text">
					扫描二维码
				</view>
			</view>

		</view>
		<view class="white-content-father-time" v-if="!scaning">
			<view class="white-content">
				<view class="time-father">
					<view class="font-weight">
						{{ hours }}:{{ minutes }}:{{ seconds }}
					</view>
					<view class="font-small">
						{{ month }}月{{ day }}日 {{ weekday }}
					</view>
				</view>
				<view class="white-shu"></view>
				<view class="wendu-content">
					<image class="wendu-img" src="https://www.focusnu.com/media/directive/index/index/wendu.png" lazy-load="false" />
					<view class="wendu-font">
						<view>温度</view>
						<view style="font-weight: 600;">16℃</view>
					</view>
					<image class="wendu-img" src="https://www.focusnu.com/media/directive/index/index/shidu.png" lazy-load="false" />
					<view class="wendu-font">
						<view>湿度</view>
						<view style="font-weight: 600;">49%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="white-content-father" v-if="!scaning">
			<swiper style="width: 100%;" :duration="500" :style="{height: `600rpx`}" :current="which"
				@change="swiperchange">
				<swiper-item style="width: 100%;">
					<view class="white-content">
						<image class="white-content-img" src="https://www.focusnu.com/media/directive/index/index/nobang.png" lazy-load="false" />
						<view class="white-font">
							请绑定护理单元~
						</view>
						<view class="botton-button">
							<view class="botton-button-father">
								<view class="botton-button-bgc" @click="gotoWindy">
									<image class="botton-button-img" src="https://www.focusnu.com/media/directive/index/index/cloudbang.png" />
								</view>
								<view class="botton-button-font">
									云绑定
								</view>
							</view>
							<view class="botton-button-father">
								<view class="botton-button-bgc" @click="scaning = true">
									<image class="botton-button-img" src="https://www.focusnu.com/media/directive/index/index/scan.png" />
								</view>
								<view class="botton-button-font" @click="scaning = true">
									扫码绑定
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="white-content">
						<image style="top: 10rpx;width: 600rpx;height: 400rpx;" class="white-content-img"
							src="https://www.focusnu.com/media/directive/index/badold.png" />
						<view style="margin-top: 350rpx;" class="white-font">
							请添加长者信息
						</view>
						<view class="bad-button">
							<view class="blue-button" @click="addoldman">
								+添加长者
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="zhiling-box">
						<view class="">
							单元清洁服务指令已执行完毕，点击查看
						</view>
						<image class="zhiling-img" src="https://www.focusnu.com/media/directive/index/index/back.png" />
					</view>
					<view class="white-box-father">
						<view v-for="(item,index) in buttonArray" :key="index" class="white-box">
							<image class="box-img" :src="`https://www.focusnu.com/media/directive/index/jumpbutton/${index}.png`" />
							<view class="box-font">{{item}}</view>

						</view>
						<view class="white-box">
							<view style="font-weight: 600;font-size: 80rpx;">+</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 底部的栏，为啥这样写，是因为要做左右拉动 -->
		<view class="botton-view">
			<view class="jia-box">
				<view class="gray-box" v-if="whichMenu===2"></view>
				<view class="jia">
					+
				</view>
			</view>
			<view v-for="(item,index) in itemArray" class="array-father">
				<view :class="itemTarget===index ? `bottom-button-target` : `bottom-button`" @click="itemTarget=index">
					<image class="botton-img"
						:src="`https://www.focusnu.com/media/directive/index/itemsbutton/${index}${itemTarget===index?1:0}.png`" />
					<view class="bottom-text" :style="!index ?{fontWeight:600}:{}">
						{{item}}
					</view>
				</view>
				<!-- <view v-if="itemTarget===index" class="blue-heng"></view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	// import tu from 'https://www.focusnu.com/media/directive/index/tu.png'
	import request from '@/request/index.js' // 你封装的 uni.request

	const tu = 'https://www.focusnu.com/media/directive/index/tu.png'
	const itemArray = ["NU", "动态", "我的"];
	const buttonArray = ref(["护理流程", "服务指令", "实时监控", "客户信息", "缴费账单", "充值缴费", "退住管理"])
	const itemTarget = ref(0);
	const which = ref(0);
	const scaning = ref(false)

	function preview() {
		uni.previewImage({
			urls: [tu], // 需要预览的所有图片地址数组
			// current: imgList.value[currentIndex], // 当前点击的那张
		})
	}
	const jumpTo = () => {
		uni.navigateTo({
			url: "/pages/index/indexone"
		});
	}
	const month = ref('01')
	const day = ref('01')
	const weekday = ref('周一')
	const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
	const hours = ref('00')
	const minutes = ref('00')
	const seconds = ref('00')
	let timer = null

	function updateTime() {
		const now = new Date()
		// 月份要 +1，保证两位
		month.value = String(now.getMonth() + 1).padStart(2, '0')
		day.value = String(now.getDate()).padStart(2, '0')
		weekday.value = weekMap[now.getDay()]
		// 如果想要两位数显示，不足两位前面补 0
		hours.value = String(now.getHours()).padStart(2, '0')
		minutes.value = String(now.getMinutes()).padStart(2, '0')
		seconds.value = String(now.getSeconds()).padStart(2, '0')
	}
	const whichMenu = ref(0);
	const swiperchange = (res) => {
		whichMenu.value = res.detail.current
		// console.log("res",res.detail.current)
	}
	const addoldman = () => {
		uni.navigateTo({
			url: "/pages/addoldman/IDcard"
		});
	}
	const gotoPay = () => {
		uni.navigateTo({
			url: "/pages/pay/index"
		});
	}

	const qrResult = ref('')
	const scanning = ref(false)
	let html5QrCode = null
	async function cancelScan() {
		if (html5QrCode && scanning.value) {
			try {
				await html5QrCode.stop()
			} catch (e) {
				console.warn('停止扫码出错', e)
			}
		}
		scanning.value = false
	}

	function scanQrCode() {
		// 如果正在扫描，先停止一次
		if (html5QrCode && scanning.value) {
			html5QrCode.stop().catch(() => {}).finally(() => {
				scanning.value = false
			})
			return
		}

		// 标记为正在扫描，显示容器
		scanning.value = true
		qrResult.value = ''

		// 创建扫码实例（指定容器ID）
		html5QrCode = new Html5Qrcode("reader")

		// 扫码配置：每秒 10 帧，识别框大小 250×250
		const config = {
			fps: 10,
			qrbox: {
				width: 350,
				height: 350
			}
		}

		html5QrCode.start({
				facingMode: "environment"
			}, // 后置摄像头
			config,
			decodedText => {
				// 扫码成功回调
				qrResult.value = decodedText
				// 停止扫描并隐藏容器
				html5QrCode.stop().catch(console.warn).finally(() => {
					scanning.value = false
				})
			},
			errorMessage => {
				// 解析过程中报错，不用处理
			}
		).catch(err => {
			console.error("扫码启动失败", err)
			scanning.value = false
		})
	}

	const gotoWindy = () => {
		uni.navigateTo({
			url: "/pages/selectunit/map"
		});
		
	}
	
	const goback = () => {
		uni.navigateBack()
	}
	
	onMounted(async () => {
		updateTime() // 立刻执行一次，保证页面一加载就有值
		timer = setInterval(updateTime, 1000) // 每秒更新
	})

	onUnmounted(() => {
		clearInterval(timer) // 组件销毁时清理定时器
		html5QrCode && html5QrCode.stop().catch(console.warn)
	})
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		position: relative;

	}

	.array-father {
		width: 33%;
		position: relative;

	}

	.botton-view {
		position: fixed;
		bottom: 0;
		left: 0;
		// margin-top: 50rpx;
		// margin: 0 auto;
		// margin-top: 60rpx;
		height: 120rpx;
		width: 100%;
		// border-radius: 60rpx;
		background-color: #fff;
		// background-color: greenyellow;
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		z-index: 999;

		.bottom-button {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.bottom-button-target {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgb(42, 133, 235);
			flex-direction: column;
		}

		.blue-heng {
			height: 6rpx;
			width: 150rpx;
			background-color: rgb(42, 133, 235);
			position: absolute;
			bottom: 55rpx;
			left: 50%;
			/* 左边缘到父容器左边的距离占父宽度 50% */
			transform: translateX(-50%);
		}
	}

	.index-up {
		position: absolute;
		top: -70rpx;
		left: 0;
		width: 100%;

		.index-up-img {
			width: 100%;
			height: 20rpx;
		}
	}

	.index-ball-father {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		// margin-top: 35rpx;
		position: fixed;
		top: 35rpx;
		left: 0;
		z-index: 999;
		margin-top: 120rpx;

		.white-ball {
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 20rpx;
			box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.super-white-ball {
			width: 70rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 40rpx;
			box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.small-img {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.index-smallPhoto {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 480rpx;
		margin-bottom: 50rpx;

		.photo-box {
			margin-right: 40rpx;
			height: 180rpx;
			width: 250rpx;
			// background-color: #fff;
			z-index: 2;
			position: relative;

			.photo-box-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

	}

	.white-content-father {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;

		margin-bottom: 200rpx;

		.white-content {
			height: 500rpx;
			width: 92%;
			margin-left: 4%;
			background-color: #fff;
			box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
			border-radius: 30rpx;
			z-index: 2;
			display: flex;
			// justify-content: space-evenly;
			align-items: center;
			flex-direction: column;
			position: relative;

			.white-content-img {
				position: absolute;
				top: -40rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				height: 370rpx;
				// margin: 0 auto;
			}

			.white-font {
				margin-top: 240rpx;
				font-size: 27rpx;
				color: #222222;
			}
		}

		.botton-button {
			width: 100%;
			height: 280rpx;
			display: flex;
			justify-content: space-around;

			.botton-button-father {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.botton-button-bgc {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #D8DEEA;

					.botton-button-img {
						width: 35rpx;
						height: 35rpx;
					}

				}

				.botton-button-font {
					margin-top: 10rpx;
					font-size: 30rpx;
				}
			}
		}

	}

	.botton-img {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 5rpx;
	}

	.bottom-text {
		font-size: 22rpx;
	}

	.jia-box {
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
	}

	.jia {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: rgb(1, 168, 255);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

	}

	.gray-box {
		border-radius: 20rpx;
		height: 30rpx;
		width: 50rpx;
		margin-right: 15rpx;
		background-color: #A4A8BD;
	}

	.white-content-father-time {
		width: 100%;
		display: flex;
		justify-content: center;

		.white-content {
			height: 170rpx;
			width: 92%;
			background-color: #fff;
			background-image:
				linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
				url("https://www.focusnu.com/media/directive/index/bluebgc.png");
			background-repeat: no-repeat;
			background-position: center top;

			/* 2. 水平方向拉满容器，垂直方向保持原始比例 */
			background-size: 100% auto;
			box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
			border-radius: 35rpx;
			z-index: 2;
			display: flex;
			align-items: center;
			border: 2rpx solid #fff;

			.time-father {
				margin-left: 45rpx;

				.font-weight {
					font-weight: 600;
					font-size: 40rpx;
					margin-bottom: 7rpx;
				}

				.font-small {
					color: #7C788D;
				}
			}

		}

		.white-shu {
			height: 100%;
			width: 2rpx;
			background-color: #fff;
			margin: 0 20rpx;
		}
	}

	.wendu-content {
		display: flex;
		align-items: center;

		.wendu-img {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx 0 60rpx;
		}

		.wendu-font {
			font-size: 25rpx;
		}
	}

	.bad-button {
		width: 100%;
		margin-top: 40rpx;
		display: flex;
		justify-content: flex-end;

		.blue-button {
			background: linear-gradient(to right, #00C9FF, #0076FF);
			color: #fff;
			font-size: 25rpx;
			padding: 10rpx 20rpx;
			border-radius: 35rpx;
			margin-right: 40rpx;
		}
	}

	.zhiling-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 92%;
		margin-left: 3%;
		height: 100rpx;
		background-color: #fff;
		box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
		// margin-top: 20rpx;
		border-radius: 35rpx;

		.zhiling-img {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.white-box-father {
		display: flex;
		width: 100%;
		flex-wrap: wrap;

		.white-box {
			margin-top: 20rpx;
			width: 20%;
			margin-left: 4%;
			height: 190rpx;
			background-color: #fff;
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);

			.box-img {
				width: 55rpx;
				height: 55rpx;
				margin-bottom: 15rpx;
			}

			.box-font {
				font-size: 25rpx;
			}
		}
	}

	.white-scan {
		background-color: #fff;
		border-radius: 35rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
		width: 92%;
		margin-left: 4%;
		height: 700rpx;
		z-index: 2;
		margin-bottom: 300rpx;

		.scan-title {
			width: 100%;
			height: 180rpx;
			display: flex;
			position: relative;
			align-items: center;
		}

		.scan-img {
			margin-left: 65rpx;
			width: 65rpx;
			height: 65rpx;
		}

		.scan-font {
			margin-left: 30rpx;

			.weight {
				font-weight: 500;
			}

			.noral {
				font-size: 25rpx;
				color: #999999;
			}
		}

	}

	.other-scan {
		width: 100%;
		height: 520rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.scan-circle {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			background-color: #fbfbfb;
			display: flex;
			align-items: center;
			position: relative;

			// animation: fadeInOut 2s infinite;
			.scan-img {
				width: 30%;
				height: 30%;
				margin: 0 auto;
			}

			.small-circle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform-origin: center center;
				/* 从中心缩放，否则宽高从左上角开始 */
				transform: translate(-50%, -50%);
				animation: shrinkExpand 1s infinite;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}

		.scan-text {
			margin-top: 30rpx;
		}

	}

	.scan-back {
		// width: 40rpx;
		// height: 30rpx;
		position: absolute;
		right: 60rpx;
		top: auto;
		color: #999999;
		font-size: 32rpx;
	}

	@keyframes shrinkExpand {

		0%,
		100% {
			width: 100%;
			height: 100%;
		}

		50% {
			width: 0%;
			height: 0%;
		}
	}

	/* 扫码遮罩层 */
	.scan-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}

	/* 半透明背景 */
	.mask-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	/* 中心容器 */
	.mask-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	/* 扫码区域 */
	.reader {
		width: 600rpx;
		height: 600rpx;
		background: #000;
		/* 可以用透明，html5-qrcode 会覆盖视频流 */
		// border: 4rpx solid #fff;
		border-radius: 16rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.result {
		margin: 0 auto;
	}
	.back-imge{
		position: absolute;
		top: 100rpx;
		left: 30rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 1;
	}
	
</style>