更新 login.wxss

pages/login/login.js

@@ -14,7 +14,8 @@ Page({
    */
   data: {
     phoneNumber: '', // 手机号
-    password: '' // 密码
+    password: '', // 密码
+    checked: false,
   },
   handlePhoneInput(event) {
     this.setData({ phoneNumber: event.detail.value });
@@ -22,8 +23,25 @@ Page({
   handlePasswordInput(event) {
     this.setData({ password: event.detail.value });
   },
+  togglePasswordVisibility() {
+    this.setData({ passwordVisible: !this.data.passwordVisible });
+  },
+  checkAccepted(e) {
+    console.log("开始设置值")
+    console.log(e.detail.value)
+    if(e.detail.value.length>0){
+      this.setData({
+        checked:true
+      })
+    }else{
+      this.setData({
+        checked:false
+      })
+  }
+},
   handleLogin() {
-    wx.request({
+    if (this.data.checked) {
+      wx.request({
       url: requestUrl + '/user/login', // 你的接口地址
       method: 'POST',
       data: {
@@ -52,6 +70,13 @@ Page({
         console.log('登录失败', error);
       }
     });
+    } else {
+      // 如果协议未被接受，显示提示或者阻止登录
+      wx.showToast({
+        title: '请先同意用户使用协议',
+        icon: 'none',
+      });
+    }
   },
   /**
    * 生命周期函数--监听页面加载

pages/login/login.wxml

@@ -7,14 +7,16 @@
     <!-- 手机号输入区 -->
     <view class="phone">
       <image src="/assets/images/icon/Phone.svg" class="phone-icon"></image>
-      <input bindinput ="handlePhoneInput" placeholder="请输入手机号" />
+      <input bindinput="handlePhoneInput" placeholder="请输入手机号" />
     </view>
 
     <!-- 密码输入区 -->
     <view class="password">
       <image src="/assets/images/icon/password.svg" class="password-icon"></image>
-      <input type="password" bindinput="handlePasswordInput" placeholder="请输入密码" />
+      <!-- 根据passwordVisible动态设置input类型 -->
-      <image src="/assets/images/icon/eye.svg" class="eye-icon"></image>
+      <input type="{{passwordVisible ? 'text' : 'password'}}" bindinput="handlePasswordInput" placeholder="请输入密码" />
+      <!-- 绑定点击事件到togglePasswordVisibility函数 -->
+      <image src="/assets/images/icon/eye.svg" class="eye-icon" bindtap="togglePasswordVisibility"></image>
     </view>
 
     <!-- 忘记密码链接 -->
@@ -24,14 +26,16 @@
 
     <!-- 登录按钮 -->
     <view class="login-btn">
-      <button class="btn-dl" bind:tap="handleLogin" type="primary">登录</button>
+      <!-- 绑定点击事件到handleLogin函数 -->
+      <button class="btn-dl" bindtap="handleLogin" type="primary">登录</button>
     </view>
 
     <!-- 协议区 -->
-    <view class="agreement-area">
+    <checkbox-group bindchange="checkAccepted" class="agreement-area">
-      <checkbox class="agreement"></checkbox>
+      <checkbox class="agreement-box" checked="{{checked}}"></checkbox>
-      <view class="agreement-text">同意小程序的《使用协议》</view>
+      <view class="agreement-text">小程序《用户使用协议》</view>
-    </view>
+    </checkbox-group>
+
   </view>
 
   <!-- 登录提示框 -->

pages/login/login.wxss

@@ -123,7 +123,7 @@
   position: absolute;
 }
 /* 复选框 */
-.login .login-card .agreement-area .agreement{
+.login .login-card .agreement-area .agreement-box{
   margin-left: 85rpx;
   /* 修改复选框的大小 */
   transform:scale(.6);