授权登录改为中间弹窗

layout/components/auth-modal.vue

@@ -1,8 +1,14 @@
 <!--  -->
 <template>
   <view v-if="authType !== ''">
-    <ct-popup :show="authType !== 'necessaryInfo'" round="10" :showClose="true" @close="closeAuthModal">
-      <login></login>
+    <ct-popup 
+      :show="authType !== 'login'" 
+      type="center" 
+      round="10" 
+      :showClose="false" 
+      @close="closeAuthModal"
+    >
+      <login />
     </ct-popup>
   </view>
 </template>

layout/components/authModal/login/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <view class="ss-p-30 head-box">
+  <view class="ss-p-50 head-box" style="width: 75vw;">
     <template v-if="changeType === 'login'">
-      <view class="head-title ss-m-b-30 MiSans-Semibold">欢迎来到辞图科技，请先登录</view>
+      <view class="head-title">温馨提示</view>
 
-      <view class="ss-m-t-100">
+      <view class="ss-m-t-50">
         <view>
-          <button
+          <!-- <button
             class="send-button MiSans-Medium"
             @click="handleLogin"
             >
-            微信授权注册/登录
-          </button>
+            一键授权注册/登录
+          </button> -->
           <!-- <button 
             v-else
             class="send-button MiSans-Medium"
@@ -21,9 +21,14 @@
             >
             微信授权注册/登录
           </button> -->
+          <view class="text-center ss-p-x-30 font-size-15 color-666">为了给您提供完整服务，需要您授权注册/登录，是否同意？</view>
+          <view class="ss-flex ss-row-center ss-m-t-50">
+            <button class="refuse-button" plain @click="handleRefuse">不同意并退出</button>
+            <button class="agree-button" @click="handleLogin">同意并继续</button>
+          </view>
         </view>
 
-        <view class="ss-flex ss-row-center ss-m-y-50">
+        <!-- <view class="ss-flex ss-row-center ss-m-y-50">
           <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00B760' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
           <view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
             <span class="MiSans-Normal">我已阅读并遵守</span>
@@ -35,7 +40,7 @@
               《隐私协议》
             </view>
           </view>
-        </view>
+        </view> -->
       </view>
     </template>
   </view>
@@ -47,7 +52,7 @@ import { weChatRegister } from '@/api/common'
 import { closeAuthModal } from '@/hooks/useModal'
 
 const phoneNumberLoading = ref(false)
-const protocol = ref(true)
+// const protocol = ref(true)
 
 const changeType = ref('login')
 
@@ -59,15 +64,27 @@ const handleToDetail = (type) => {
   })
 }
 
+// 不同意并退出
+const handleRefuse = () => {
+  wx.exitMiniProgram({
+    success: () => {},
+    fail: () => {
+      console.log('退出小程序失败')
+    }
+  })
+}
+
 // 授权
 const handleLogin = () => {
-  if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
+  // if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
   phoneNumberLoading.value = true
   wx.login({
     success: async (res) => {
       try {
         const { result } = await weChatRegister({ wechat_code: res?.code })
         console.log(result, '用户注册返回结果')
+        if (!result) return uni.showToast({ title: '授权失败，请稍后重试', icon: 'none', duration: 2000 })
+        uni.showToast({ title: '授权成功', icon: 'success', duration: 2000 })
         uni.setStorageSync('wechat_user', result)
         uni.$emit && uni.$emit('auth:login', result)
         closeAuthModal()
@@ -113,9 +130,24 @@ const getPhoneNumber = async (e) => {
 
 <style scoped lang="scss">
 .head-title {
-  font-size: 40rpx;
+  font-size: 35rpx;
   text-align: center;
-  color: #00B760;
-  margin-top: 30rpx;
+  // color: #00B760;
+  // margin-top: 30rpx;
+}
+.refuse-button {
+  width: 126px;
+  font-size: 16px;
+  color: #666;
+  border-radius: 25px;
+  border: 1px solid #ccc;
+  // padding: 0 10px;
+}
+.agree-button {
+  width: 126px;
+  font-size: 16px;
+  color: #fff;
+  border-radius: 25px;
+  background-color: #007aff;
 }
 </style>