feat:新增首页勾选协议

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 
-import { Button, Form, FormItem, Input, message } from 'ant-design-vue'
+import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { Rule } from 'ant-design-vue/es/form'
 
@@ -25,7 +25,7 @@ const formRef = ref()
 const btnTxt = ref('获取验证码')
 const disabled = ref(false)
 const time = ref(0)
-
+const checked = ref(false) // 勾选协议
 const ruleForm = reactive<LoginForm>({
   phone: '',
   code: '',
@@ -51,26 +51,31 @@ const rules: Record<string, Rule[]> = {
 }
 // 登录
 function handleLogin() {
-  formRef.value
-    .validate()
-    .then(() => {
-      loading.value = true
-      userStore.login({
-        user_type: UserTypeEnum.C,
-        grant_type: GrantTypeEnum.SMS,
-        invite_code: '',
-        phone: ruleForm.phone,
-        phoneCode: ruleForm.code,
-        type: TypeEnum.PHONE,
-        inviteCode: ruleForm.inviteCode,
-      }).then(() => {
-        message.success('登录成功')
-        loading.value = false
-        router.push('/')
-      }).catch(() => {
-        loading.value = false
+  if (checked.value) {
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true
+        userStore.login({
+          user_type: UserTypeEnum.C,
+          grant_type: GrantTypeEnum.SMS,
+          invite_code: '',
+          phone: ruleForm.phone,
+          phoneCode: ruleForm.code,
+          type: TypeEnum.PHONE,
+          inviteCode: ruleForm.inviteCode,
+        }).then(() => {
+          message.success('登录成功')
+          loading.value = false
+          router.push('/')
+        }).catch(() => {
+          loading.value = false
+        })
       })
-    })
+  }
+  else {
+    message.warning('请先勾选协议！')
+  }
 }
 // 获取验证码
 function handleSendCode() {
@@ -112,6 +117,31 @@ function timer() {
     disabled.value = false
   }
 }
+// 勾选协议
+function handleCheck() {
+  checked.value = !checked.value
+}
+// 查看协议
+function handleView(number: number) {
+  let url
+  if (number === 1) {
+    url = 'https://qn-static-resource.oss-cn-shanghai.aliyuncs.com/docs/%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.docx'
+  }
+  else {
+    url = 'https://qn-static-resource.oss-cn-shanghai.aliyuncs.com/docs/%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.docx'
+  }
+  let urls = ''
+  urls = `http://view.xdocin.com/xdoc?_xdoc=${url}`
+  window.open(
+    urls,
+    '',
+    `width=${
+     window.screen.availWidth - 10
+},height=${
+window.screen.availHeight - 70
+}, top = 0, left = 0, status=no`,
+  )
+}
 </script>
 
 <template>
@@ -194,11 +224,17 @@ function timer() {
             >
               登 录
             </Button>
-            <div class="versions">
-              v1.0.0
-            </div>
           </FormItem>
         </Form>
+        <div class="check" @click="handleCheck">
+          <Checkbox v-model:checked="checked" />
+          <span style="padding-left: 3px;">
+            勾选即代表您同意并接受<span class="blue" @click.stop="handleView(1)">服务协议</span>与<span class="blue" @click.stop="handleView(2)">隐私政策</span>
+          </span>
+        </div>
+        <div class="versions">
+          v1.0.0
+        </div>
       </div>
     </div>
   </div>
@@ -277,6 +313,7 @@ function timer() {
         border-radius: 4px;
         display: flex;
         justify-content: center;
+        flex-direction: column;
         align-items: center;
         letter-spacing: 0.2em;
         backdrop-filter: blur(50px);
@@ -285,7 +322,7 @@ function timer() {
         top: 0;
         right: 2%;
         .login-Form {
-          width: 70%;
+          width: 77%;
           margin: 0 auto;
           .icon {
             width: 15px;
@@ -328,15 +365,27 @@ function timer() {
             border-radius: 4px;
             color: white;
           }
-          .versions {
-            width: 100%;
-            text-align: center;
-            font-size: 13px;
-
-            font-weight: 400;
-            color: #6e7382;
-            padding-top: 20px;
-            letter-spacing: 2px;
+        }
+        .versions {
+          width: 100%;
+          text-align: center;
+          font-size: 13px;
+
+          font-weight: 400;
+          color: #6e7382;
+          padding-top: 10px;
+          letter-spacing: 2px;
+        }
+        .check {
+          width: 100%;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 400;
+          color: #6e7382;
+          text-align: center;
+          cursor: pointer;
+          .blue {
+            color: #5aa8fd;
           }
         }
       }