DaQingPuJi/大庆普济医院小程序/components/check_login/check_login.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2022年10月9日 21:29:16
	 */
	import {
		ref,defineExpose
	} from 'vue'
	import {
		$image,
		UserLoginAction,
		UserStatusAction,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		setToken,
		delToken,
		getToken,
	} from '@/lu/token.js'
	const $emit = defineEmits(['callback'])
	onShow(() => {
		checkFlow()
	})
	const checkFlow = () => {
		UserStatus()
	}

	const UserStatus = async (open = false) => {
		uni.setStorageSync('CHECK_LOGIN_TIME', new Date() / 1)
		let token = getToken()
		if (token) {
			const response = await UserStatusAction()
			$response(response, () => {
				cover_show.value = false
				$emit('callback', true)
			}, () => {
				delToken()
				cover_show.value = true
				if (open) login_show.value = true
			})
		} else {
			if (open) login_show.value = true
		}
	}

	const cover_show = ref(true)
	const coverClick = () => {
		UserStatus(true)
	}

	const login_show = ref(false)
	const login_popup_ref = ref(null)
	const loginPopupRef = (e) => {
		login_popup_ref.value = e
		login_popup_ref.value.open('center')
	}
	const loginChange = ({
		show
	}) => {
		login_show.value = show
	}

	const login_loading = ref(false)
	const wxGetUserInfo = (res) => {
		if (!res.detail.iv) {
			uni.$lu.toast("您取消了授权,登录失败");
			return false;
		}
		login_loading.value = true
		uni.login({
			provider: 'weixin',
			success: async (loginRes) => {
				const response = await UserLoginAction({
					code: loginRes.code
				})
				login_show.value = false
				$response(response, () => {
					login_loading.value = false
					cover_show.value = false
					setToken(response.data.token)
					$emit('callback', true)
				}, () => {
					login_loading.value = false
				})
			},
		});
	}
	defineExpose({
	      coverClick
	    });
</script>
<template>
	<view>
		<view class="check_login_wrapper">
			<view class="check_login_popup_wrapper">
				<view v-if="login_show">
					<uni-popup :ref="loginPopupRef" background-color="#ffffff00" @change="loginChange">
						<view class="login_popup_wrapper">
							<view class="top_blank_wrapper"></view>
							<view class="login_popup_text_wrapper">
								<view class="login_popup_text_title_wrapper">您还未登录</view>
								<view class="login_popup_text_tip_wrapper">（请先登录在进行此操作）</view>
							</view>
							<button class="login_popup_button_wrapper" :loading="login_loading" open-type="getUserInfo"
								@getuserinfo="wxGetUserInfo" withCredentials="true">
								<view>微信快捷登录</view>
							</button>
							<view @click="login_show = false" class="login_popup_cancel_button_wrapper">暂不登录</view>
						</view>
					</uni-popup>
				</view>
			</view>
			<view v-if="cover_show" @click="coverClick()" class="check_login_cover_wrapper"></view>
		</view>
	</view>
</template>
<style scoped>
	.login_popup_text_title_wrapper {
		font-size: 32rpx;
		font-weight: bold;
		color: #3D3D3D;
		margin-top: 65rpx;
		line-height: 42rpx;
		line-height: 1;
	}

	.login_popup_text_tip_wrapper {
		font-size: 30rpx;
		color: #727272;
		line-height: 1;
		line-height: 29rpx;
		margin-top: 11rpx;
	}

	.login_popup_cancel_button_wrapper {
		width: 445rpx;
		height: 84rpx;
		background: #bbbbbb;
		border-radius: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		margin: 38rpx auto 0;
	}

	.login_popup_button_wrapper {
		width: 445rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #23D3AF, #0DC5CF);
		border: 2px solid #D0EEEF;
		border-radius: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 84rpx;
		border: none !important;
		margin-top: 34rpx;
	}

	.login_popup_text_wrapper {
		text-align: center;
	}

	.login_popup_icon_wrapper image {
		width: 152rpx;
		height: 152rpx;
		display: block;
	}

	.login_popup_icon_wrapper {
		width: 152rpx;
		height: 152rpx;
		position: absolute;
		top: -64rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.login_popup_wrapper {
		position: relative;
		width: 569rpx;
		height: 465rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
	}

	.check_login_popup_wrapper {
		position: relative;
		z-index: 9909;
	}

	.check_login_cover_wrapper {
		/* background-color: #0DC5CF; */
		position: fixed ;
		
		
		top: 0;
		bottom: 400rpx;
		left: 0;
		right: 0;
		z-index: 9908;
	}
</style>