hldy_xcx/pages/yuangongindex/index.vue

<template>
	<view class="login-container">
		<view class="small-ball" :style="{top:`${moveHeight}px`}" @click="clickSmallball">
			<view class="small-dian" v-if="hong">
				{{ hong }}
			</view>
			<image class="small-ball-img" src="https://www.focusnu.com/media/directive/index/ling.png" />
		</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>
		<model :show="show" @close="show=false" :content="content" />
		<swiper style="width: 100%;position: fixed;bottom: 0;left: 0;" :duration="150" :style="{minHeight: `100vh`}"
			:current="which" @change="swiperchange">

			<view v-for="(item,index) in menuArray" :key="index">
				<swiper-item>
					<view class="white-content-father">
						<view class="chuo-ball" @click="loadingData"
							v-if="item.applyType =='1' && item.applyStatus==`1`">
							<image class="ball-img"
								:src=" `https://www.focusnu.com/media/directive/index/refresh.png`" />
						</view>
						<view class="white-content" v-if="item.applyType =='0' && item.applyStatus==`1`">
							<image class="white-content-img" style="height: 200rpx;"
								:src="`https://www.focusnu.com/media/directive/index/yuangonginvited.png`"
								lazy-load="false" />
							<view class="second-font" style="margin-top: 350rpx;">
								<text>
									{{item.comName}}
								</text>
							</view>
							<view class="second-font">
								邀请您加入
							</view>
							<view style="margin-top: 60rpx;color: #999999;">
								{{ item.orgLeader }} | {{ item.orgLeaderPhone }}
							</view>
							<view class="button-double">
								<view class="double-left" @click="changeStatus(item,false)">
									拒绝
								</view>
								<view class="double-right" @click="changeStatus(item,true)">
									接受
								</view>
							</view>
						</view>
						<view class="white-content" v-if="item.applyType =='1' && item.applyStatus==`1`">
							<image class="white-content-img"
								:src="`https://www.focusnu.com/media/directive/index/${statusarray[Number(item.applyStatus) - 1]}.png`"
								lazy-load="false" />
							<view class="white-font">
								您提交的

							</view>
							<view class="second-font">
								<text>
									"{{item.comName}}"
								</text>
							</view>
							<view class="second-font">
								入驻申请
								<text style="color: #fa8622;">
									正在审核中
								</text>
							</view>
							<view class="button-blue" @click="look(item)">
								查看
							</view>
						</view>

						<view class="white-content" v-if="item.applyType =='1' && item.applyStatus==`3`">
							<image class="white-content-img"
								:src="`https://www.focusnu.com/media/directive/index/${statusarray[Number(item.applyStatus) - 1]}.png`"
								lazy-load="false" />

							<view class="white-font">
								您提交的
							</view>
							<view class="second-font">
								<text>
									"{{item.comName}}"
								</text>
							</view>
							<view class="second-font">
								入驻申请
								<text style="color: #eb2b59;">
									审核不通过
								</text>
							</view>
							<view class="button-white-spec" @click="jumptolist(item.auditContent)">
								驳回原因
							</view>
							<view class="button-blue-spec" @click="again(item)">
								重新申请
							</view>
							
						</view>

						<view style="z-index: 1;width: 100%;" v-if=" item.applyStatus==`2`">
							<view class="zhiling-box">
								<view class="">
									暂无指令
								</view>
								<image class="zhiling-img" v-show="false"
									src="https://www.focusnu.com/media/directive/index/mine/more.png" />
							</view>
							<view class="white-box-father">
								<view v-for="(item0,index) in buttonArray" :key="index" class="white-box"
									@click="clickButton(item,index)">
									<image class="box-img"
										:src="`https://www.focusnu.com/media/directive/index/addstaff/${index}.png`" />
									<view class="box-font">{{item0}}</view>

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

					</view>

					<view class="zhiling-box" v-if="item.applyType =='1' && item.applyStatus==`-1`">
						<view class="zhiling-box">
							<view class="">
								暂无信息
							</view>
							<image class="zhiling-img" v-show="false"
								src="https://www.focusnu.com/media/directive/index/mine/more.png" />
						</view>

					</view>

					<view class="white-content" style="margin: 0 auto;margin-top: 0rpx;height: 740rpx;"
						v-if="item.applyStatus==`-1`">
						<view style="display: flex;width: 100%;margin-top: 30rpx;align-items: center;">
							<view class="blue-shu"></view>
							<view class="blue-font">
								入驻护理机构
							</view>

						</view>
						<image class="white-content-secondimg"
							src="https://www.focusnu.com/media/directive/index/addstaff/staff.png" lazy-load="false" />
						<view class="button-blue" @click="searchjigou()">
							入驻机构
						</view>
					</view>

					<view class="white-content-father-time" v-if="item.applyStatus==`2`">
						<view class="white-content" style="background-color: transparent;">
							<view class="white-bgc">
								{{ item.comName }}
							</view>

						</view>
					</view>
				</swiper-item>
			</view>
		</swiper>

		<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`" v-if="index != menuArray.length - 1">
					</view>
					<view class="jia" @click="moveend" v-if="index == menuArray.length - 1">
						<image class="jia-img" :src="`https://www.focusnu.com/media/directive/index/bluejia.png`" />
					</view>
				</view>
			</view>
		</view>
		<downMenu :itemTarget="0" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted,
		
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		getMessageList
	} from '@/pages/addstaff/api/addjigou.js'
	import {
		getIndex,
		isRead,
		invitedConfirm
	} from './api.js'
	import request from '@/request/index.js'
	import downMenu from '@/compontent/public/yuangongdownmenu.vue'
	import model from "@/compontent/public/model.vue"

	const show = ref(false);

	const content = ref("");

	const buttonArray = ref(["技能培训", "考勤排班", "每日工作", "信息变更", "员工功能", "员工功能", "员工功能"])
	const statusarray = ["loading", "success", "fail"]
	const which = ref(0);

	const clickSmallball = () => {
		
		uni.setStorageSync('jumpIndex', 1);
		uni.navigateTo({
			url: "/pages/yuangongindex/message"
		})
	}

	const searchjigou = () => {
		uni.requestSubscribeMessage({
			// 这里填后台申请好的 templateId 数组
			tmplIds: ['yvvhlRft1CAdtU-dWlCW8U63VnTwRU8w3gR0BUdqcWw'],
			success: (res) => {
				uni.navigateTo({
					url: "/pages/yuangongindex/searchjigou"
				})
			},
			fail: (err) => {
				uni.navigateTo({
					url: "/pages/yuangongindex/searchjigou"
				})
			}
		});

	}
	const clearvalue = () => {
		supervalue.value = ""
	}

	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/yuangongindex/workjoin`
		});
	}
	const again = (item) => {
		uni.navigateTo({
			url: "/pages/yuangongindex/searchjigou"
		})
	}
	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
	}

	const gotoWindy = () => {
		uni.navigateTo({
			url: "/pages/selectunit/map"
		});
	}

	const goback = () => {
		uni.navigateBack()
	}
	const moveHeight = ref(0);
	onMounted(() => {
		// 首先尝试获取胶囊信息（返回 px）
		let capsule = null;
		if (typeof uni.getMenuButtonBoundingClientRect === 'function') {
			try {
				capsule = uni.getMenuButtonBoundingClientRect();
			} catch (e) {
				capsule = null;
			}
			moveHeight.value = capsule.top
		}
	})

	onUnmounted(() => {})
	const menuArray = ref([])
	const loadingData = () => {
		uni.getStorage({
			key: 'openid',
			success: function(res) {
				getIndex(res.data).then(res => {
					menuArray.value = []
					res.result.forEach((element) => {
						menuArray.value.push(element)
					})
					menuArray.value.push({
						applyStatus: `-1`
					})
				})
				getMessageList().then(res => {
					// console.log("special",res)
					uni.setStorageSync("staff", res.result[0])
				})
			}
		});

	}
	const jumpToMine = () => {
		uni.navigateTo({
			url: '/pages/yuangongindex/companyyaoqing'
		})
	}
	const hong = ref(0);
	const changeStatus = (item, status) => {
		let data = {
			employeeId: item.employeesId,
			status: status ? 2 : 3,
			orgCode: item.orgCode
		}
		invitedConfirm(data).then(res => {
			if (res.success) {
				loadingData()
			}
		})
	}
	const clickButton = (item, index) => {
		// console.log("AAA",item)
		if (index === 3) {
			getMessageList(item.orgCode).then(res => {
				uni.setStorageSync("changeyuangongorgCode", item.orgCode)
				if (res.success) {
					uni.navigateTo({
						url: `/pages/addstaff/all?element=${JSON.stringify(res.result[0])}`
					});
				}
			})
		}
	}
	const jumptolist = (res) => {
		if (res) {
			content.value = res;
			show.value = true
		}
	}
	onShow(() => {
		loadingData();
		isRead().then(res => {
			if (res.result) {
				hong.value = res.result;
			}
		})
	})
	onPullDownRefresh(() => {
		loadingData();
		isRead().then(res => {
			// console.log("aaaa",res.result)
			if (res.result) {
				hong.value = res.result;
			}
		})
		uni.stopPullDownRefresh()
	})
</script>

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

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

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

	.index-ball-father {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		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;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.super-white-ball {
			width: 70rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 40rpx;
			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;
			z-index: 2;
			position: relative;

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

	}

	.white-content {
		z-index: 1;
		height: 740rpx;
		width: 90%;
		background-color: #fff;
		border-radius: 30rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;

		.white-content-img {
			position: absolute;
			top: 110rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 200rpx;
			height: 175rpx;
		}

		.white-content-secondimg {
			position: absolute;
			left: 50%;
			top: 30%;
			transform: translate(-50%, -30%);
			width: 400rpx;
			height: 300rpx;
			z-index: 1;
		}

		.white-font {
			margin-top: 330rpx;
			font-size: 30rpx;
		}

		.second-font {
			margin-top: 10rpx;
			font-size: 30rpx;
			padding: 0 30rpx;
		}
	}

	.white-content-father {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 40vh;
		z-index: 1;
		position: relative;
		overflow: hidden;

	}

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

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

		.white-bgc {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #333333;
		}

		.white-content {
			height: 110rpx;
			width: 92%;
			overflow: hidden;
			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;
		border-radius: 35rpx;
		font-size: 32rpx;

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

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

		.white-box {
			margin-top: 35rpx;
			width: 20.7%;
			margin-left: 3%;
			height: 230rpx;
			background-color: #fff;
			border-radius: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

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

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

	.result {
		margin: 0 auto;
	}

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

	.jia {
		margin-top: -5rpx;
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

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

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

	.black-box {
		border-radius: 20rpx;
		height: 20rpx;
		width: 35rpx;
		margin-right: 15rpx;
		background-color: black;
	}

	.button-double {
		position: absolute;
		bottom: 45rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 90rpx;
		border-radius: 37rpx;
		font-size: 33rpx;
		margin-top: 80rpx;

		.double-left {
			width: 30%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F7F7F7;
			border-radius: 40rpx;
			margin-left: 40rpx;
			z-index: 999;
		}

		.double-right {
			width: 30%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: #F7F7F7;
			background: linear-gradient(to right, #00C9FF, #0076FF);
			color: #fff;
			border-radius: 40rpx;
			margin-right: 40rpx;
			z-index: 999;
		}
	}

	.button-blue {
		position: absolute;
		bottom: 45rpx;
		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;
		z-index: 999;
	}

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

	.chuo-img {
		position: absolute;
		top: 72rpx;
		right: 235rpx;
		width: 120rpx;
		height: 110rpx;
		z-index: 3;
	}

	.chuo-ball {
		position: absolute;
		top: 20rpx;
		right: 60rpx;
		width: 60rpx;
		height: 60rpx;
		z-index: 3;
		background-color: rgb(242, 242, 242);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.ball-img {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.blue-shu {
		width: 17rpx;
		height: 35rpx;
		border-radius: 17rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		margin-left: 40rpx;
		margin-right: 20rpx;
	}

	.blue-font {
		font-size: 30rpx;
		color: black;
	}

	.small-ball {
		position: fixed;
		right: 120px;
		// top: 36px;
		z-index: 9999;
		width: 64rpx;
		height: 64rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.small-ball-img {
			width: 60%;
			height: 60%;
		}

		.small-dian {
			position: absolute;
			right: 0%;
			top: 0%;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #FF5757;
			color: #fff;
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>