| | |
| | | <image :src="codeUrl" @click="getCode" class="login-code-img" mode="aspectFit"></image> |
| | | </view> |
| | | </view> |
| | | <view class="agreement-checkbox"> |
| | | <view class="agreement-checkbox" :class="{ 'agreement-highlight': highlightAgreement }"> |
| | | <checkbox-group @change="onAgreementChange"> |
| | | <label class="checkbox-label"> |
| | | <checkbox :checked="agreedToPolicy" value="agreed" color="#007AFF" class="round-checkbox" style="margin-top: 0;" /> |
| | |
| | | <text class="cuIcon-wechat" style="margin-right: 10rpx;"></text> |
| | | 手机号码快捷登录 |
| | | </button> |
| | | <!-- 未同意协议时,显示普通按钮,点击后弹提示 --> |
| | | <button |
| | | v-else-if="isWechat" |
| | | v-else-if="isWechat && !agreedToPolicy" |
| | | @click="checkAgreementBeforePhone" |
| | | class="wechat-login-btn cu-btn block bg-green lg round" |
| | | style="margin-top: 20rpx;"> |
| | | <text class="cuIcon-wechat" style="margin-right: 10rpx;"></text> |
| | | 手机号码快捷登录 |
| | | </button> |
| | | <!-- 已同意协议时,显示真实授权按钮 --> |
| | | <button |
| | | v-else-if="isWechat && agreedToPolicy" |
| | | open-type="getPhoneNumber" |
| | | @getphonenumber="onGetPhoneNumber" |
| | | class="wechat-login-btn cu-btn block bg-green lg round" |
| | |
| | | code: "", |
| | | uuid: '' |
| | | }, |
| | | // 协议区域高亮提示状态 |
| | | highlightAgreement: false, |
| | | // 微信一键登录相关 |
| | | isWechat: false, // 是否为微信小程序环境 |
| | | wechatOpenId: '', // 微信OpenID |
| | |
| | | this.wechatUnionId = savedUnionId // 可能为null |
| | | this.loginByOpenId() |
| | | } |
| | | }, |
| | | |
| | | // 未同意协议时点击手机号快捷登录的处理 |
| | | checkAgreementBeforePhone() { |
| | | this.$modal.msgError("请先阅读并同意用户协议和隐私政策") |
| | | // 滚动到协议区域(高亮提示) |
| | | this.highlightAgreement = true |
| | | setTimeout(() => { |
| | | this.highlightAgreement = false |
| | | }, 2000) |
| | | }, |
| | | |
| | | // 处理获取手机号的回调 |
| | |
| | | } |
| | | } |
| | | |
| | | .agreement-highlight { |
| | | animation: highlight-shake 0.5s ease-in-out; |
| | | background-color: #fff3cd; |
| | | border-radius: 16rpx; |
| | | border: 2rpx solid #ffc107; |
| | | } |
| | | |
| | | @keyframes highlight-shake { |
| | | 0% { transform: translateX(0); } |
| | | 20% { transform: translateX(-8rpx); } |
| | | 40% { transform: translateX(8rpx); } |
| | | 60% { transform: translateX(-8rpx); } |
| | | 80% { transform: translateX(8rpx); } |
| | | 100% { transform: translateX(0); } |
| | | } |
| | | |
| | | .agreement-checkbox { |
| | | margin: 50rpx 0 30rpx 0; |
| | | padding: 20rpx; |