gas-station-ticket-uniapp-240822/components/showLogin/showLogin.vue

<template>
	<uv-popup ref="popup" 
	:safeAreaInsetBottom="false"
	type="bottom" round="30rpx">
		<view class="toast">
			<view class="title">
				提示
			</view>
			<view class="content">
				本小程序需要登录之后才可以正常使用
			</view>
			<view class="btns">
				<view class="btn c" @click="login">
					登录
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	export default {
		name: 'ShowLogin',
		data() {
			return {

			}
		},
		methods: {
			checkLogin() {
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open('center');
					return true
				}
			},
			
			cancel() {
				this.$refs.popup.close('center')
			},
			login(){
				this.$store.commit('login')
				this.$refs.popup.close('center')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toast {
		width: 500rpx;
		background: white;

		.title {
			min-height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}

		.content {
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		.btns{
			display: flex;
			padding: 30rpx;
			.btn{
				flex: 1;
				background: #00aaff;
				border-radius: 20rpx;
				color: #fff;
				padding: 20rpx 0;
				text-align: center;
			}
		}

		.btnstwo {
			display: flex;

			.btn {
				flex: 1;
				// background: $uni-linear-gradient-btn-color;
				// color: #fff;
				padding: 20rpx 0;
				text-align: center;
			}

			.c {
				background: #fff;
				border-top: 1px solid #999;
				color: #333;
			}
		}
	}
</style>