登录页完成

package.json

@@ -66,6 +66,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-vue": "^10.6.2",
     "jsonc-parser": "^3.3.1",
+    "miniprogram-api-typings": "^4.1.2",
     "prettier": "^3.7.4",
     "sass": "1.78.0",
     "tsx": "^4.21.0",

pnpm-lock.yaml

@@ -156,6 +156,9 @@ importers:
       jsonc-parser:
         specifier: ^3.3.1
         version: 3.3.1
+      miniprogram-api-typings:
+        specifier: ^4.1.2
+        version: 4.1.2
       prettier:
         specifier: ^3.7.4
         version: 3.7.4
@@ -3369,6 +3372,9 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  miniprogram-api-typings@4.1.2:
+    resolution: {integrity: sha512-VmIgxal0GU3nHwsH2UNaRh8jNHG/kauG08Z4W/qiJ1Iubvme48aE+q3grpT9ZLBArMKmSuKlsTq+uPPHSGr0rA==}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -8716,6 +8722,8 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  miniprogram-api-typings@4.1.2: {}
+
   mitt@3.0.1: {}
 
   mkdirp@0.5.6:

src/pages/login/index.vue

@@ -47,7 +47,22 @@
             </button>
           </template>
         </AuthInputItem>
-
+        <view class="agreement">
+          <label class="agreement-label">
+            <checkbox
+              :checked="agreementFlag"
+              @click.stop="agreementFlag = !agreementFlag"
+              class="agreement-checkbox"
+            />
+            <view class="txt">
+              我已阅读并同意
+              <text @click.stop="agreementClick('agreement')">《要易云平台用户协议》</text>、
+              <text @click.stop="agreementClick('policy')">《隐私权政策》</text>、
+              <text @click.stop="agreementClick('personalInfo')">《个人信息使用授权书》</text>、
+              <text @click.stop="handleOpenPrivacyContractClick">《用户隐私保护指引》</text>
+            </view>
+          </label>
+        </view>
         <view class="submit">
           <button class="submit-btn" @click.prevent="submit">登录</button>
         </view>
@@ -79,6 +94,19 @@ const form = reactive({
   password: '',
 })
 
+const agreementFlag = ref(false)
+
+const agreementClick = (type: string) => {}
+
+const handleOpenPrivacyContractClick = () => {
+  // 打开隐私协议页面
+  wx.openPrivacyContract({
+    success: () => {},
+    fail: () => {},
+    complete: () => {},
+  })
+}
+
 const { errors, validate, validateField, clearFieldError } = useFormValidator(
   resetPasswordRules,
   form

src/styles/modules/auth-page.scss

@@ -65,6 +65,40 @@
         color: var(--font-color-666);
       }
 
+      .agreement {
+        margin-top: 60rpx;
+        display: flex;
+        color: var(--font-color-666);
+
+        .agreement-label {
+          display: flex;
+          align-items: flex-start;
+          font-size: 26rpx;
+          line-height: 36rpx;
+          .agreement-checkbox {
+            margin-right: 6rpx;
+            margin-top: 0;
+            transform: scale(0.75);
+          }
+
+          /* 穿透 scoped，直接作用在 checkbox */
+          // :deep(checkbox.agreement-checkbox) {
+          //   --checkbox-border-color: #c0c4cc;
+          // }
+
+          // /* 选中状态 */
+          // :deep(checkbox.agreement-checkbox[checked]) {
+          //   --checkbox-checked-bg-color: var(--main-color);
+          //   --checkbox-border-color: var(--main-color);
+          // }
+        }
+
+        .txt text {
+          color: var(--main-color);
+          font-size: 26rpx;
+        }
+      }
+
       .submit {
         display: flex;
         align-items: center;

tsconfig.json

@@ -11,7 +11,8 @@
       "@dcloudio/types",
       "@uni-helper/uni-app-types",
       "@uni-helper/uni-ui-types",
-      "wot-design-uni/global"
+      "wot-design-uni/global",
+      "miniprogram-api-typings"
     ]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]