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>
		</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">
			<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>
			</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">
			<view class="white-content">
				<view class="white-bgc" v-if="whichMenu < menuArray.length">
					<!-- 长春市朝阳区久泰开运养老服务有限公司 -->
					{{menuArray[whichMenu].comName}}
				</view>

			</view>
		</view>
		<view class="white-content-father">
			<swiper style="width: 100%;" :duration="500" :style="{height: `700rpx`}" :current="which"
				@change="swiperchange">

				<view v-for="(item,index) in menuArray" :key="index">
					<swiper-item style="width: 100%;" v-if="item.status==`1`">
						<view class="white-content">
							<image class="white-content-img"
								src="https://www.focusnu.com/media/directive/index/addjiji/shenhezhong.png"
								lazy-load="false" />
							<view class="white-font">
								你的
								<text style="font-weight: 600;">
									{{item.comName}}
								</text>
							</view>
							<view class="second-font">
								提交的加盟申请
								<text style="color: #01A5FF;">
									正在审核中
								</text>
							</view>
							<view class="button-blue" @click="look(item)">
								查看
							</view>
						</view>
					</swiper-item>

					<swiper-item v-if="item.status==`3`">
						<view class="white-content">
							<image class="white-content-img"
								src="https://www.focusnu.com/media/directive/index/addjiji/shenheshibai.png"
								lazy-load="false" />
							<view class="white-font" style="margin-top: 320rpx;">
								您提交的
							</view>
							<view class="second-font">
								{{item.comName}}
							</view>
							<view class="second-font">
								加盟申请
								<text style="color: #FF7744;">
									审核不通过
								</text>
							</view>
							<!-- <view class="second-font">
								
								<text style="color: #FF7744;">
									驳回原因:{{item.content}}
								</text>
							</view> -->
							<view class="button-blue-spec" @click="again(item)">
								重新提交
							</view>
							<view class="button-white-spec" @click="jumptolist">
								驳回原因
							</view>
						</view>
					</swiper-item>
					<swiper-item v-if="item.status==`2`">
						<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/addjiji/${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>
				</view>


				<swiper-item>
					<view class="white-content">
						<image class="white-content-secondimg"
							src="https://www.focusnu.com/media/directive/index/addjiji/addjigou.png"
							lazy-load="false" />
						<view class="button-blue" @click="addjigou">
							添加机构
						</view>
					</view>
				</swiper-item>
			</swiper>

		</view>
		<view
			style="z-index:999;position: fixed;bottom: 70rpx; width: 100%;display: flex;justify-content: center;margin-top: -25rpx;height: 100rpx;">
			<view class="jia-box">
				<view v-for="(item,index) in menuArray" :key="index" @click="changecard(index)">
					<view :class="whichMenu==index? `black-box` :`gray-box`"></view>
				</view>

				<view class="jia" @click="moveend">
					<image class="jia-img" :src="`https://www.focusnu.com/media/directive/index/addjiji/add.png`" />
				</view>
			</view>
		</view>
		<downMenu :itemTarget="0" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getMessageList
	} from '@/pages/addjigou/api/addjigou.js'
	// import tu from 'https://www.focusnu.com/media/directive/index/tu.png'
	import request from '@/request/index.js' // 你封装的 uni.request
	import downMenu from '@/compontent/public/downmenu.vue'

	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)

	const changecard = (e) => {

		which.value = e
		whichMenu.value = which.value

	}
	const moveend = () => {
		which.value = menuArray.value.length
		whichMenu.value = which.value
	}
	const addjigou = () => {
		uni.setStorageSync('specicalid', "");
		uni.setStorageSync("baddata", "")
		uni.setStorageSync("backhuancun", {})
		uni.navigateTo({
			url: `/pages/addjigou/name`
		});
	}
	const look = (element) => {
		uni.navigateTo({
			url: `/pages/addjigou/all?element=${JSON.stringify(element)}`
		});
	}

	const jumptolist = () => {
		uni.navigateTo({
			url: `/pages/login/workjoin?type=1`
		});
	}

	const again = (item) => {
		console.log("????", item)
		uni.setStorageSync("baddata", item)
		uni.setStorageSync('specicalid', item.id);
		uni.setStorageSync("backhuancun", {})
		uni.navigateTo({
			url: `/pages/addjigou/name`
		});
	}
	const jumpTo = () => {
		uni.navigateTo({
			url: `/pages/login/index`
		});
	}

	const whichMenu = ref(0);
	const swiperchange = (res) => {
		whichMenu.value = res.detail.current
		which.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 () => {

	})

	onUnmounted(() => {
		// html5QrCode && html5QrCode.stop().catch(console.warn)
	})
	const menuArray = ref([])
	onLoad(() => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				getMessageList(res.data).then(res => {
					menuArray.value = res.result
					// workArray.value = res.result
					// console.log("????",res.result)
				})
			}
		});
	})
</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;
		padding-top: 550rpx;
	}

	.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: 120rpx;
		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;

		.white-content {
			height: 650rpx;
			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: 90rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 420rpx;
				height: 320rpx;
			}

			.white-content-secondimg {
				position: absolute;
				top: 20rpx;
				left: 34%;
				transform: translateX(-34%);
				width: 610rpx;
				height: 450rpx;
			}

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

			.second-font {
				margin-top: 10rpx;
				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;
		// 		}
		// 	}
		// }

	}

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



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

		.white-bgc {
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding-left: 50rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			box-shadow: 2rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
			border: 2rpx solid #fff;
		}

		.white-content {
			// margin-left: 30rpx;
			height: 110rpx;
			width: 92%;
			overflow: hidden;
			// background-repeat: no-repeat;
			// background-position: center top;
			/* 2. 水平方向拉满容器，垂直方向保持原始比例 */
			background-size: 100% auto;

			border-radius: 35rpx;
			z-index: 2;


		}

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

	.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: 4%;
		height: 110rpx;
		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;

		// margin-top: 10rpx;
		.white-box {
			margin-top: 35rpx;
			width: 20%;
			margin-left: 4%;
			height: 220rpx;
			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: 25rpx;
			}

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

	.jia-box {
		position: absolute;
		top: 0rpx;
		left: 0;
		display: flex;
		height: 80rpx;
		width: 100%;
		justify-content: center;
	}

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

		.jia-img {
			width: 20rpx;
			height: 20rpx;
			z-index: 2;
		}
	}

	.gray-box {
		border-radius: 20rpx;
		height: 30rpx;
		width: 50rpx;
		margin-right: 15rpx;
		background-color: rgb(203, 205, 216);
	}

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

	.button-blue {
		position: absolute;
		bottom: 30rpx;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
		margin-top: 80rpx;
	}

	.button-blue-spec {
		position: absolute;
		bottom: 30rpx;
		left: 8%;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
		margin-top: 80rpx;
	}

	.button-white-spec {
		position: absolute;
		bottom: 30rpx;
		right: 8%;
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		border: 2rpx solid #b1c0ca;
		// color: #fff;
		font-size: 33rpx;
		margin-top: 80rpx;
	}
</style>