fix:app 用户登录，默认不勾选用户协议

wlzboy

2025-11-02 2cd31915236257e325b49f2e86f6912512e1f7ce

 app/pages/login.vue

@@ -21,21 +21,22 @@
          <image :src="codeUrl" @click="getCode" class="login-code-img" mode="aspectFit"></image>
        </view>
      </view>
      <view class="agreement-checkbox">
        <checkbox-group @change="onAgreementChange">
          <label class="checkbox-label">
            <checkbox :checked="agreedToPolicy" value="agreed" color="#007AFF" class="round-checkbox" style="margin-top: 0;" />
            <text class="agreement-text">
              <text class="text-grey1">同意</text>
              <text @click.stop="handleUserAgrement" class="text-blue agreement-link">《用户协议》</text>
              <text class="text-grey1">和</text>
              <text @click.stop="handlePrivacy" class="text-blue agreement-link">《隐私政策》</text>
            </text>
          </label>
        </checkbox-group>
      </view>
      
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
      <view class="wechat-login" @click="handleWechatLogin">
        <view class="wechat-btn">
          <image class="wechat-icon" src="/static/icons/profile.png"></image>
          <text class="wechat-text">微信一键登录</text>
        </view>
      </view>
    
      <view class="xieyi text-center">
        <text class="text-grey1">登录即代表同意</text>
        <text @click.stop="handleUserAgrement" class="text-blue agreement-link">《用户协议》</text>
        <text class="text-grey1">和</text>
        <text @click.stop="handlePrivacy" class="text-blue agreement-link">《隐私协议》</text>
      </view>
    </view>
  </scroll-view>
@@ -51,6 +52,8 @@
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        // 隐私政策同意状态(默认未选中,需要用户主动勾选)
        agreedToPolicy: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "",
@@ -76,6 +79,10 @@
      handleUserAgrement() {
        this.$tab.navigateTo('/pages/mine/user-agreement/index')
      },
      // 协议同意状态变更
      onAgreementChange(e) {
        this.agreedToPolicy = e.detail.value.length > 0
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
@@ -88,6 +95,10 @@
      },
      // 登录方法
      async handleLogin() {
        if (!this.agreedToPolicy) {
          this.$modal.msgError("请先阅读并同意用户协议和隐私政策")
          return
        }
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
@@ -98,40 +109,6 @@
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 微信登录方法
      async handleWechatLogin() {
        // #ifdef MP-WEIXIN
        // 微信小程序登录
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            console.log('微信登录成功', loginRes);
            // 获取用户信息
            uni.getUserInfo({
              provider: 'weixin',
              success: (infoRes) => {
                console.log('用户信息获取成功', infoRes);
                // 跳转到微信登录确认页面
                this.$tab.navigateTo(`/pages/login/wechat?userInfo=${encodeURIComponent(JSON.stringify(infoRes.userInfo))}`);
              },
              fail: (error) => {
                console.error('获取用户信息失败', error);
                this.$modal.msgError("获取微信用户信息失败");
              }
            });
          },
          fail: (error) => {
            console.error('微信登录失败', error);
            this.$modal.msgError("微信登录失败");
          }
        });
        // #endif
        
        // #ifndef MP-WEIXIN
        // H5或其他平台提示
        this.$modal.msgError("请在微信客户端中使用微信登录功能");
        // #endif
      },
      // 密码登录
      async pwdLogin() {
@@ -148,6 +125,8 @@
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          // 触发登录成功事件，启动消息轮询
          uni.$emit('user-login')
          this.$tab.reLaunch('/pages/index')
        })
      }
@@ -269,30 +248,6 @@
        }
      }

      .wechat-login {
        margin: 20rpx 0;

        .wechat-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #07c160;
          height: 90rpx;
          border-radius: 20px;

          .wechat-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }

          .wechat-text {
            color: white;
            font-size: 32rpx;
          }
        }
      }

      .reg {
        margin: 20rpx 0;

@@ -306,24 +261,96 @@
        }
      }
      
      .xieyi {
      .agreement-checkbox {
        margin: 50rpx 0 30rpx 0;
        padding: 20rpx 0;
        line-height: 2;

        .text-grey1 {
          color: #888;
          font-size: 24rpx;
        padding: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: left;
        
        checkbox-group {
          display: flex;
          align-items: center;
        }

        .agreement-link {
          color: #007AFF;
          font-size: 24rpx;
          padding: 10rpx 8rpx;
          margin: 0 5rpx;
          display: inline-block;
          position: relative;
          z-index: 10;
        
        .checkbox-label {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          
          checkbox {
            margin-right: 15rpx;
            transform: scale(1.2);
            flex-shrink: 0;
            vertical-align: middle;
          }
          
          // 圆形复选框样式
          .round-checkbox {
            border-radius: 50% !important;
          }
          
          // 针对微信小程序的圆形样式
          ::v-deep .uni-checkbox-input,
          ::v-deep .wx-checkbox-input {
            border-radius: 50% !important;
          }
          
          // 针对H5的圆形样式
          ::v-deep input[type="checkbox"] {
            border-radius: 50% !important;
            -webkit-appearance: none;
            appearance: none;
            width: 36rpx;
            height: 36rpx;
            border: 2rpx solid #d1d1d1;
            background-color: #fff;
            position: relative;
            
            &:checked {
              background-color: #007AFF;
              border-color: #007AFF;
              
              &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 12rpx;
                height: 12rpx;
                background-color: #fff;
                border-radius: 50%;
              }
            }
          }
          
          .agreement-text {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            line-height: 1.5;
            font-size: 26rpx;
            text-align: left;
            justify-content: flex-start;
            
            .text-grey1 {
              color: #666;
              font-size: 26rpx;
              line-height: 1.5;
            }
            
            .text-blue {
              color: #007AFF;
              font-size: 26rpx;
              padding: 8rpx 10rpx;
              margin: 0 5rpx;
              display: inline-block;
              position: relative;
              z-index: 10;
              line-height: 1.5;
            }
          }
        }
      }
    }