yizhizan-h5/package/my/scan/index.vue

<template>
	<view class="page-container">
		<nav-bar title="扫码登录"></nav-bar>
		<view class="content">
			<view class="wrapper">
				<image src="/static/invite.png" class="slogan-img"></image>
				<view class="tip">是否确认登录网页端</view>
				<view class="button" @click="handleConfirmLogin">确认登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				scanToken: '',
				loading: false,
			}
		},
		onLoad(options) {
			if (options.token) {
				this.scanToken = options.token
			}
		},
		methods: {
			// 确认登录
			handleConfirmLogin() {
				if (this.loading) return
				
				this.loading = true
				uni.showLoading({ title: '登录中' })
				this.$Request
					.post('/app/Login/confirm', {
						token: this.scanToken
					})
					.then(res => {
						if (res.code === 0) {
							this.$queue.showToast('登录成功')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/index'
								})
							}, 1500)
						}
					})
					.finally(() => {
						this.loading = false
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		.content {
			display: flex;
			align-items: center;
			justify-content: center;
			.wrapper {
				padding-top: 120rpx;
			}
			.slogan-img {
				display: block;
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto 20rpx;
			}
			.tip {
				text-align: center;
				margin-bottom: 40rpx;
			}
			.button {
				width: 400rpx;
				height: 80rpx;
				border: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				line-height: 80rpx;
				border-radius: 100px;
				background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
			}
		}
	}       
</style>