小程序一键登录按钮与点击事件冲突

发布时间 2023-11-23 10:39:49作者: Cxymds

在小程序登录时按照政策要求必须要提醒用户阅读服务协议以及隐私协议,例如

这种情况下必须先勾选才能够点击一键登录,否则就会进行弹窗提示。

	<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>

但是open-typegetPhoneNumber的按钮是不能阻止点击事件的,因为还需要弹出提示。但是默认的getphonenumber事件是会自动调用的,弹出手机号选择授权窗口,但是我们在没有选择已阅读协议的时候是不希望getPhoneNumber被调用, 那么如何解决这个问题呢。

以下是一种笨拙的实现思路,大家如果有好的思路可以留言一下。

思路: 在创建按钮的时候创建两个按钮,一个是普通的按钮,在未选择已阅读的时候显示,在勾选了已阅读之后切换为一键登录的按钮。

template

<button type="primary" v-if="isTreaty" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
<button type="primary" v-else @tap="goTo('/pages/login/login')">一键登录</button>

js(此处是uni-app)

// 是否同意用户协议
const isTreaty = ref(uni.getStorageSync('isTreaty') || false );
// 同意阅读协议
const treatyChange = (val) => {
	isTreaty.value = !isTreaty.value;
	uni.setStorageSync('isTreaty',isTreaty.value)
};