手机号授权登录

pages/user/login.vue

@@ -19,7 +19,12 @@
         <view class="text">&nbsp<text>用户协议</text>、<text>隐私协议</text></view>
       </view>
       <view class="btn-area flex-c">
-        <me-button @click="phoneLogin()" text="手机号一键登录" width="590rpx"></me-button>
+        <view hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
+          <button v-show="checked" open-type="getPhoneNumber" @getphonenumber="phoneLogin" class="login flex-c" type="default"
+          >手机号一键登录</button>
+          <button v-show="!checked" @click="check()" type="default" class="login flex-c"
+          >手机号一键登录</button>
+        </view>
       </view>
     </view>
     <view class="visitor-ctr flex-c">
@@ -46,9 +51,17 @@ const checked = ref(false)
 const isShake = ref(false)
 
 //手机号登录
-const phoneLogin = () => {
+const phoneLogin = (e) => {
+  if (e.detail.code === undefined) {
+    return helpers.showToast("请授权手机号")
+  }
+
+  console.log(e.detail.code)
+}
+
+const check = () => {
   if (checked.value === false) {
-    helpers.showToast("请阅读并勾选用户协议")
+    helpers.showToast("请阅读并同意用户协议")
     isShake.value = true
     setTimeout(() => {
       isShake.value = false
@@ -153,6 +166,14 @@ page {
       width: 100%;
       height: 96rpx;
       margin-top: 32rpx;
+      .login {
+        width: 590rpx;
+        height: 96rpx;
+        color: #FFFFFF;
+        background: var(--themeColor);
+        border-radius: 16rpx;
+        font-size: 30rpx;
+      }
     }
   }
   .visitor-ctr {