Require explicit agreement before mini login

banban-mini/src/pages/login/index.scss

@@ -133,9 +133,40 @@
   }
 }
 
-.agreement {
+.agreement-panel {
-  text-align: center;
+  margin-top: 4px;
-  font-size: 24px;
+}
-  color: #999999;
+
-  line-height: 1.5;
+.agreement-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.agreement-checkbox {
+  flex: 0 0 auto;
+  transform: scale(0.82);
+  transform-origin: left top;
+  margin-top: 2px;
+  margin-right: 6px;
+}
+
+.agreement-text-wrap {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.55;
+}
+
+.agreement-text,
+.agreement-link {
+  font-size: 24px;
+  line-height: 1.55;
+}
+
+.agreement-text {
+  color: #777777;
+}
+
+.agreement-link {
+  color: #1677FF;
 }

banban-mini/src/pages/login/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Button, Input } from '@tarojs/components'
+import { View, Text, Button, Input, Checkbox, CheckboxGroup } from '@tarojs/components'
 import { useEffect, useState } from 'react'
 import Taro from '@tarojs/taro'
 import { getToken, wechatLogin } from '@/services/auth'
@@ -7,6 +7,7 @@ import './index.scss'
 export default function Login() {
   const [submitting, setSubmitting] = useState(false)
   const [nickname, setNickname] = useState('')
+  const [agreementAccepted, setAgreementAccepted] = useState(false)
 
   useEffect(() => {
     if (getToken()) {
@@ -30,6 +31,13 @@ export default function Login() {
 
   const handleLogin = async () => {
     if (submitting) return
+    if (!agreementAccepted) {
+      Taro.showToast({
+        title: '请先阅读并同意协议',
+        icon: 'none',
+      })
+      return
+    }
 
     const cachedUserInfo = (Taro.getStorageSync('userInfo') || {}) as {
       nickname?: string
@@ -92,6 +100,50 @@ export default function Login() {
     }
   }
 
+  const handleAgreementChange = (event) => {
+    const values = event.detail.value || []
+    setAgreementAccepted(values.includes('accepted'))
+  }
+
+  const openUserAgreement = () => {
+    Taro.showModal({
+      title: '用户服务协议',
+      content: '欢迎使用伴伴。您在使用本小程序前，应阅读并同意本协议。我们将为您提供设备绑定、状态查看、消息互动、定位展示等服务。请您遵守法律法规，不得利用本服务从事违法或侵犯他人权益的行为。',
+      showCancel: false,
+      confirmText: '我知道了',
+    })
+  }
+
+  const openPrivacyPolicy = () => {
+    const taroWithPrivacy = Taro as typeof Taro & {
+      openPrivacyContract?: (option?: {
+        success?: () => void
+        fail?: (error: unknown) => void
+      }) => void
+    }
+
+    if (typeof taroWithPrivacy.openPrivacyContract === 'function') {
+      taroWithPrivacy.openPrivacyContract({
+        fail: () => {
+          Taro.showModal({
+            title: '隐私政策',
+            content: '暂时无法打开隐私保护指引，请稍后重试。',
+            showCancel: false,
+            confirmText: '我知道了',
+          })
+        },
+      })
+      return
+    }
+
+    Taro.showModal({
+      title: '隐私政策',
+      content: '伴伴会在提供设备绑定、消息互动、定位展示等功能时，按需处理您的账号信息、设备信息和位置信息。我们仅在实现相关功能所必需的范围内使用上述信息。',
+      showCancel: false,
+      confirmText: '我知道了',
+    })
+  }
+
   return (
     <View className='login-page'>
       <View className='login-header'>
@@ -137,9 +189,19 @@ export default function Login() {
           </Button>
         </View>
 
-        <Text className='agreement'>
+        <View className='agreement-panel'>
-          登录即代表您同意《用户协议》和《隐私政策》
+          <CheckboxGroup value={agreementAccepted ? ['accepted'] : []} onChange={handleAgreementChange}>
-        </Text>
+            <View className='agreement-row'>
+              <Checkbox className='agreement-checkbox' value='accepted' checked={agreementAccepted} color='#07C160' />
+              <View className='agreement-text-wrap'>
+                <Text className='agreement-text'>我已阅读并同意</Text>
+                <Text className='agreement-link' onClick={openUserAgreement}>《用户服务协议》</Text>
+                <Text className='agreement-text'>和</Text>
+                <Text className='agreement-link' onClick={openPrivacyPolicy}>《隐私政策》</Text>
+              </View>
+            </View>
+          </CheckboxGroup>
+        </View>
       </View>
     </View>
   )