xinjiangMiniProgram/pages/subPage/login/login.vue

<template>
	<view class="content">
		<view class="padding">
			<view class="logoCon">
				<view class="logo">
					<image src="@/static/images/logo.png" mode=""></image>
				</view>
				<view class="name">事务通</view>
			</view>

			<view class="oneBtnBox" v-if="!isCheck">
				<oneBtn text="手机号快捷登录" @oneBtnClick="handleBtnClick"></oneBtn>
			</view>
			<view class="oneBtnBox" v-else>
				<button open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" class="cotactzz">手机号快捷登录</button>
				<oneBtn text="手机号快捷登录"></oneBtn>
			</view>

			<view style="padding-top: 30rpx;">
				<privacyRadion style="margin-top: 40rpx;" @changeRadio="changeRadio" :isCheck="isCheck" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import {
		weixinLogin
	} from '@/config/api.js'
	import {
		toast
	} from '@/uni_modules/uview-plus'
	import {
		userStore
	} from '@/store/index.js';
	import privacyRadion from '@/components/privacyRadion/privacyRadion.vue'
	let FormData = ref({
		phone: '',
		code: ''
	})
	let isCheck = ref(false)

	function handleBtnClick() {
		toast('请先勾先勾选用户协议与隐私政策')
	}
	// 是否选择协议
	 function changeRadio(val) {
			uni.hideKeyboard();
			isCheck.value = val
		}
	

	function loginFn() {
		// 微信登录
		return new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					if (loginRes.code) {
						// 登录成功，获取用户信息
						console.log('loginRes.code')
						console.log(loginRes.code)
						resolve(loginRes.code)
						// this.getUserInfo(loginRes.code);
					} else {
						console.error('微信登录失败');
					}
				},
				fail: err => {
					reject(null)
					console.error('微信登录失败', err);
					uni.hideLoading()
				}
			});
		})

	}
	
	async function getPhoneNumber(e) {
		if (!isCheck.value) return toast('请勾选产品协议与隐私政策');
		let phoneCode = e.detail.code
		uni.showLoading({
			title: '正在加载...'
		})
		console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
		console.log(e.detail) // 错误码（失败时返回）
		const loginCode = await loginFn()
		if (!loginCode || !phoneCode) return
		
		let obj = {
			phoneCode,
			socialCode: loginCode
		}
		const {
			data: res
		} = await weixinLogin(obj)
		
		const counterStore = userStore();
		await counterStore.upDateToken(res.accessToken)
		await counterStore.upDateLoginInfo(res)
		// this.$goPage('/pages/userCenter/login/face')
		uni.hideLoading()
		uni.$u.toast('登录成功')
		setTimeout(()=>{
			uni.switchTab({
				url: '/pages/tabbar/index/index'
			})
		},1500)
	}
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.other {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #9C9C9C;
		position: fixed;
		bottom: 80rpx;
		left: 0;
		width: 100%;

		.lineTxt {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				width: 240rpx;
				height: 1rpx;
				top: 50%;
				background: #e6e6e6;
				right: 150rpx;
				transform: translateY(50%);
				z-index: 99;
			}

			&::after {
				content: '';
				position: absolute;
				width: 240rpx;
				height: 1rpx;
				top: 50%;
				background: #e6e6e6;
				left: 150rpx;
				transform: translateY(50%);
				z-index: 99;
			}
		}

		.icon {
			width: 80rpx;
			height: 80rpx;
			margin: 20rpx 0;
		}

		.txt {}
	}

	.content {
		.logoCon {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 150rpx;

			.logo {
				width: 160rpx;
				height: 160rpx;
			}

			.name {
				font-size: 32rpx;
				margin-top: 20rpx;
				font-weight: 700;
			}
		}

		.oneBtnBox {
			margin-top: 40rpx;
			position: relative;

			.cotactzz {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				opacity: 0;
			}
		}
	}
</style>