water-uniApp/pages/login/login.vue

<template>
	<view class="container">
		<image src="/static/login-bg.png" class="bg-image" mode="aspectFit" />

		<view class="btns">
			<!-- <button class="primary-btn" @click="oneClickLogin">手机号一键登录</button> -->
			<button class="primary-btn"
			open-type="getPhoneNumber"
			@getphonenumber="onGetPhoneNumber">手机号一键登录</button>
			<button class="plain-btn" plain @click="goBindPhone">使用其他号码登录</button>
		</view>

		<view class="agreement">
			<checkbox class="custom-checkbox" :checked="checked" @click="checked = !checked" />
			<text class="agreement-text">
				阅读并同意
				<text class="link" @tap="gotourl('/pages/agreement/user')">《用户协议》</text>
				<text class="link" @tap="gotourl('/pages/agreement/privacy')">《隐私声明》</text> 若您的手机号未注册，将为您自动注册
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import { post, get } from '@/utils/request'
	
	const gotourl = (text) => {
		uni.navigateTo({
			url: text
		});
	}

	const checked = ref(false)
	
	const onGetPhoneNumber = async (e) => {
	  if (!checked.value) {
	    uni.showToast({ title: '请同意协议', icon: 'none' })
	    return
	  }
	  
	  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
	    uni.showToast({ title: '获取手机号失败', icon: 'none' })
	    return
	  }
	  
	  try {
		  // console.log(e.detail, 'e.detaile.detail');
		  const { encryptedData, iv, code } = e.detail
		  
		  const loginRes = await uni.login({ provider: 'weixin' });
		  
		  const res = await get('/api/waterUser/parsePhone',{
			  encryptedData,
			  iv, 
			  code: loginRes.code
		  })
		  	
		  if (res.code === '200') {
			  const phone = encodeURIComponent(res.data); // 对手机号进行编码
			  uni.navigateTo({
				url: `/pages/bindPhone/bindPhone?phone=${phone}`
			  });
		  } else {
		    uni.showToast({ title: res.message || '手机号解析失败', icon: 'none' })
		  }
	  } catch (err) {
		// console.log('请求失败：', err)
		uni.showToast({ title: '请求失败，请稍后重试', icon: 'none' })
	  }
	}

	const goBindPhone = () => {
		if (!checked.value) return uni.showToast({
			title: '请同意协议',
			icon: 'none'
		})
		uni.navigateTo({
			url: '/pages/bindPhone/bindPhone'
		})
	}
	
	onLoad(() => {
		// console.log(import.meta.env.MODE) // development / production
		// console.log(import.meta.env.VITE_API_BASE_URL)
	})
</script>

<style scoped>
	.container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #ffffff;
		/* justify-content: center; */
	}

	.bg-image {
		width: 100%;
		max-width: 600rpx;
		margin-top: 120rpx;
	}

	.btns {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.primary-btn,
	.plain-btn {
		width: 100%;
		height: 90rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
	}

	.primary-btn {
		background: linear-gradient(to right, #6da4ff, #3f7ffb);
		color: #ffffff;
		border: none;
	}

	.plain-btn {
		border: 2rpx solid #2979ff;
		color: #2979ff;
		background-color: #ffffff;
	}

	.agreement {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-wrap: nowrap;
		/* padding: 0 40rpx; */
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	.custom-checkbox {
		margin-right: 10rpx;
		transform: scale(0.8);
	}

	.agreement-text {
		flex: 1;
		text-align: left;
		word-break: break-word;
	}

	.link {
		color: #2979ff;
		margin: 0 6rpx;
	}
</style>