协议

pages/login/index.vue

@@ -28,14 +28,17 @@
         </uni-forms-item>
       </uni-forms>
       <button class="send-button" @tap="handleLogin"> 登录/注册 </button>
-      <view class="color-999 ss-flex ss-col-center ss-row-center ss-m-l-8 font-size-13">
-        点击登录/注册即代表您同意
-        <view class="color-primary" @tap.stop="handleToDetail('user')">
-          《用户协议》
-        </view>
-        <view class="agreement-text">和</view>
-        <view class="color-primary" @tap.stop="handleToDetail('privacy')">
-          《隐私协议》
+      <view class="agreement-box ss-flex ss-row-center">
+        <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00897B' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
+        <view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
+          我已阅读并遵守
+          <view class="color-primary" @tap.stop="handleToDetail('user')">
+            《用户协议》
+          </view>
+          <view class="agreement-text">和</view>
+          <view class="color-primary" @tap.stop="handleToDetail('privacy')">
+            《隐私协议》
+          </view>
         </view>
       </view>
     </view>
@@ -54,6 +57,7 @@ import { watch } from 'vue'
 
 const useUserStore = userStore()
 const smsLoginRef = ref()
+const protocol = ref(false)
 const state = ref({
   isMobileEnd: false, // 手机号输入完毕
   codeText: '获取验证码',
@@ -110,6 +114,7 @@ const handleToDetail = (type) => {
 
 // 登录
 const handleLogin = async () => {
+  if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
   const validate = await unref(smsLoginRef).validate()
   if (!validate) return
   if (!state.value.sms.inviteCode) {