jiazhipeng
7 days ago
17 changed files with 627 additions and 432 deletions
@ -1,190 +1,278 @@ |
|||||
<template> |
<template> |
||||
<view style="padding-top: 88rpx;"> |
<view class="bg"> |
||||
<view class="login-tip">时味苏州PHoneLogin 申请获得</view> |
<view class="form-box"> |
||||
<view class="login-tip2">以下权限</view> |
<view class="form-item"> |
||||
<view class="login-tip-box"> |
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobile.png" alt=""></image> |
||||
<text>获得你的公开信息（昵称、头像、地区及性别）</text> |
<input type="number" v-model="form.phone" placeholder="请输入手机号" /> |
||||
|
</view> |
||||
|
<view class="form-item"> |
||||
|
<image src="https://m.cloud.sz-trip.com/static/images/Login/newCaptcha.png" alt=""></image> |
||||
|
<input type="text" v-model="form.captcha" placeholder="请输入图形验证码" /> |
||||
|
<image :src="captchaUrl" @click="refreshCaptcha()" alt="" style="width: 200rpx;height: 50rpx;" |
||||
|
class="captcha"> |
||||
|
</view> |
||||
|
<view class="form-item"> |
||||
|
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobilecode.png" alt=""></image> |
||||
|
<input type="number" v-model="form.code" placeholder="请输入验证码" /> |
||||
|
<view @click="handleGetCode()" class="getCode">{{ codeText }}</view> |
||||
|
</view> |
||||
</view> |
</view> |
||||
<view class="btn-box"> |
<view @click="handleLogin()" class="submit">登录</view> |
||||
<button bindtap="cancel" type="default" @click="redirectIndex">取消</button> |
<view class="flex-center" style="margin-top: 30rpx;"> |
||||
<button type="primary" @click="getUserInfo">同意</button> |
<radio-group @change="toggleAgreement"> |
||||
</view> |
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
||||
<view class="flex-center article-box"> |
</radio-group> |
||||
<radio-group @change="toggleAgreement"> |
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view> |
||||
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio> |
</view> |
||||
</radio-group> |
|
||||
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view> |
|
||||
</view> |
</view> |
||||
<uni-popup ref="popup" type="bottom" background-color="#fff"> |
|
||||
<button type="default" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button> |
|
||||
</uni-popup> |
|
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "login", |
|
||||
data() { |
data() { |
||||
return { |
return { |
||||
isAgreed: false, |
form: { |
||||
openid: '' |
phone: "", |
||||
}; |
code: "", |
||||
}, |
captcha: "", // 新增图形验证码字段 |
||||
onLoad(options) { |
}, |
||||
|
// 验证码逻辑 |
||||
|
codeText: "获取验证码", |
||||
|
codeDisabled: false, |
||||
|
countdown: 60, |
||||
|
// 图形验证码相关 |
||||
|
captchaUrl: "", // 图形验证码图片地址 |
||||
|
captchaId: "", |
||||
|
// 记住账号 |
||||
|
rememberPhone: false, |
||||
|
// 加载状态 |
||||
|
submitting: false, |
||||
|
smsCodeId: "", |
||||
|
|
||||
|
checked: false, |
||||
|
isAgreed: false, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.refreshCaptcha(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
// 处理手机号授权 |
// 刷新图形验证码 |
||||
handlePhoneNumber(e) { |
refreshCaptcha() { |
||||
if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功 |
this.Post({}, "/api/uservice/user/getCaptchaImg").then((res) => { |
||||
this.$refs.popup.close(); |
if (res) { |
||||
this.Post({ |
this.captchaUrl = res.data.code; |
||||
code: e.detail.code, |
this.captchaId = res.data.id; |
||||
encryptedData: e.detail.encryptedData, |
|
||||
iv: e.detail.iv, |
|
||||
openid: this.openid |
|
||||
}, '/api/uservice/user/bindPhoneNumber') |
|
||||
.then(res => { |
|
||||
this.$store.commit('changeUserInfo', res.data); |
|
||||
this.navigateBasedOnPath(); |
|
||||
}) |
|
||||
.catch(error => { |
|
||||
console.error('绑定手机号失败:', error); |
|
||||
uni.showToast({ |
|
||||
title: '绑定手机号失败，请稍后重试', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
}); |
|
||||
} else { |
|
||||
console.error('获取手机号失败:', e.detail.errMsg); |
|
||||
uni.showToast({ |
|
||||
title: '获取手机号失败，请稍后重试', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
// 跳转到协议页面 |
|
||||
gotoInfo(id) { |
|
||||
uni.navigateTo({ |
|
||||
url: '/subPackages/user/privacyInfo?id=' + id |
|
||||
}); |
|
||||
}, |
|
||||
// 切换协议同意状态 |
|
||||
toggleAgreement() { |
|
||||
this.isAgreed = !this.isAgreed; |
|
||||
}, |
|
||||
// 重定向到首页 |
|
||||
redirectIndex() { |
|
||||
uni.switchTab({ |
|
||||
url: '/pages/index/index', |
|
||||
}); |
|
||||
}, |
|
||||
// 获取用户信息 |
|
||||
getUserInfo() { |
|
||||
if (!this.isAgreed) { |
|
||||
uni.showToast({ |
|
||||
title: '请先勾选同意《用户服务协议》、《隐私政策》', |
|
||||
icon: 'none' |
|
||||
}); |
|
||||
return; |
|
||||
} |
|
||||
let data = { |
|
||||
avatar: "https://jdsz.obs.cn-east-3.myhuaweicloud.com:443/backend/upload/202509281759047643d42d0a25de93f030757727b6a74a999c2f5f0426.png", |
|
||||
birthday: "2020-02-05", |
|
||||
createtime: 1760087570, |
|
||||
email: "", |
|
||||
expires_in: 2592000, |
|
||||
expiretime: 1762679570, |
|
||||
from_source: "WECHAT", |
|
||||
fullname: "", |
|
||||
gender: 1, |
|
||||
id: 6069705, |
|
||||
id_number: "", |
|
||||
isBindMobile: 1, |
|
||||
is_enterprise: 2, |
|
||||
mobile: "19941952818", |
|
||||
name_verification: "UNCERTFIED", |
|
||||
nickname: "abc", |
|
||||
score: 106, |
|
||||
token: "c04a0d8e-b2dd-4a47-a2e8-0a7652520bad", |
|
||||
user_id: 6069705, |
|
||||
username: "", |
|
||||
uuid: "3c6f7d59-5c27-42ad-902b-89043fc4b4f8", |
|
||||
} |
} |
||||
this.$store.commit('changeUserInfo', data); |
}); |
||||
}, |
}, |
||||
// 根据路径进行导航 |
// 切换协议同意状态 |
||||
navigateBasedOnPath() { |
toggleAgreement() { |
||||
if (this.$store.state.user.toPath.includes('user/user')) { |
this.isAgreed = !this.isAgreed; |
||||
uni.switchTab({ |
}, |
||||
url: this.$store.state.user.toPath |
// 重置表单 |
||||
}); |
resetForm() { |
||||
} else { |
this.form.code = ""; |
||||
uni.navigateBack({}); |
this.form.captcha = ""; // 重置图形验证码 |
||||
} |
// 刷新图形验证码 |
||||
} |
this.refreshCaptcha(); |
||||
}, |
}, |
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style> |
// 获取短信验证码（添加图形验证码校验） |
||||
.login-tip { |
handleGetCode() { |
||||
font-size: 28rpx; |
// 先验证手机号和图形验证码 |
||||
margin: 0 60rpx; |
if (!this.form.phone) { |
||||
margin-top: 40rpx; |
this.$message.warning("请先输入手机号码"); |
||||
} |
return; |
||||
|
} |
||||
|
if (!this.form.captcha) { |
||||
|
this.$message.warning("请先输入图形验证码"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
.login-tip2 { |
this.Post( |
||||
font-size: 44rpx; |
{ |
||||
margin: 0rpx 60rpx; |
mobile: this.form.phone, |
||||
margin-top: 20rpx; |
captchaCode: this.form.captcha, |
||||
font-weight: 400; |
captchaCodeId: this.captchaId, |
||||
|
}, |
||||
|
"/api/uservice/user/getMobileCodeForLogin" |
||||
|
).then((res) => { |
||||
|
console.log(res); |
||||
|
if (res.code == 1) { |
||||
|
this.codeDisabled = true; |
||||
|
this.smsCodeId = res.data.id; |
||||
|
this.codeText = `重新发送(${this.countdown}s)`; |
||||
|
const timer = setInterval(() => { |
||||
|
this.countdown--; |
||||
|
this.codeText = `重新发送(${this.countdown}s)`; |
||||
|
if (this.countdown <= 0) { |
||||
|
clearInterval(timer); |
||||
|
this.codeText = "获取验证码"; |
||||
|
this.codeDisabled = false; |
||||
|
this.countdown = 60; |
||||
|
} |
||||
|
}, 1000); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 登录提交（包含图形验证码校验） |
||||
|
handleLogin() { |
||||
|
if (!this.form.phone) { |
||||
|
uni.showToast({ |
||||
|
title:"请输入手机号码", |
||||
|
icon:"none" |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
if (!this.form.captcha) { |
||||
|
uni.showToast({ |
||||
|
title:"请输入图形验证码", |
||||
|
icon:"none" |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
if (!this.form.code) { |
||||
|
uni.showToast({ |
||||
|
title:"请输入短信校验码", |
||||
|
icon:"none" |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
if (!this.isAgreed) { |
||||
|
uni.showToast({ |
||||
|
title:"请先勾选同意《用户服务协议》、《隐私政策》", |
||||
|
icon:"none" |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
this.submitting = true; |
||||
|
this.Post( |
||||
|
{ |
||||
|
mobile: this.form.phone, |
||||
|
smsCodeId: this.smsCodeId, |
||||
|
smsCode: this.form.code, |
||||
|
fromSource: "mini" |
||||
|
},"/api/uservice/user/loginByMobileCode").then((res) => { |
||||
|
this.submitting = false; |
||||
|
if (res.code == 1) { |
||||
|
this.$store.commit('changeUserInfo', res.data); |
||||
|
this.navigateBasedOnPath(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
} |
} |
||||
|
</script> |
||||
|
|
||||
.login-tip-box { |
<style scoped lang="scss"> |
||||
display: flex; |
.bg { |
||||
align-items: flex-start; |
/* background: #FFFFFF; */ |
||||
margin: 0 60rpx; |
padding-bottom: 120rpx; |
||||
font-size: 28rpx; |
position: relative; |
||||
margin-top: 40rpx; |
background-image: url("https://m.cloud.sz-trip.com/static/images/Login/newTopBg.png"); |
||||
line-height: 40rpx; |
background-size: 100% 100%; |
||||
|
padding-top: 240rpx; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
.form-box { |
||||
|
margin: 0 auto; |
||||
|
padding: 0 50rpx; |
||||
|
.form-item { |
||||
|
padding: 20rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
background: #fff; |
||||
|
border-radius: 25px; |
||||
|
height: 80rpx; |
||||
|
margin-bottom: 50rpx; |
||||
|
padding-left: 30rpx; |
||||
|
&>image { |
||||
|
width: 50rpx; |
||||
|
height: 50rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
input { |
||||
|
border: none; |
||||
|
padding-left: 20rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: #ABABAB; |
||||
|
} |
||||
|
.captcha { |
||||
|
position: absolute; |
||||
|
right: 50rpx; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
.getCode { |
||||
|
position: absolute; |
||||
|
right: 50rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #0B898E; |
||||
|
height: 50rpx; |
||||
|
line-height: 50rpx; |
||||
|
border: 1px solid #0B898E; |
||||
|
border-radius: 30rpx; |
||||
|
padding: 0 20rpx; |
||||
|
text-align: center; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
.login-tip-box .icon-gou1 { |
|
||||
line-height: 80rpx; |
.submit { |
||||
margin-top: -20rpx; |
font-size: 36rpx; |
||||
margin-right: 30rpx; |
font-weight: 500; |
||||
color: #666; |
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
background: #0B898E; |
||||
|
border-radius: 50rpx; |
||||
|
margin: 0 auto; |
||||
|
width: 600rpx; |
||||
|
margin-top: .6rem; |
||||
} |
} |
||||
|
|
||||
.btn-box { |
|
||||
display: flex; |
input::placeholder { |
||||
position: absolute; |
color: #ABABAB; |
||||
bottom: 100rpx; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
} |
} |
||||
|
|
||||
.btn-box button { |
.yuan { |
||||
width: 400rpx; |
width: .37rem; |
||||
|
height: .37rem; |
||||
|
flex-shrink: 0; |
||||
} |
} |
||||
|
|
||||
.article-box { |
.article-box { |
||||
position: absolute; |
font-weight: 400; |
||||
left: 0; |
font-size: 27rpx; |
||||
right: 0; |
color: #00B200; |
||||
justify-content: center; |
margin-top: 30rpx; |
||||
font-size: 24rpx; |
display: flex; |
||||
color: #1aad19; |
align-items: center; |
||||
bottom: 40rpx; |
.iconfont { |
||||
} |
margin-right: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
.article-box .iconfont { |
text { |
||||
margin-right: 10rpx; |
border-bottom: 1px solid; |
||||
font-size: 26rpx; |
} |
||||
} |
} |
||||
|
|
||||
.article-box text { |
|
||||
border-bottom: 1px solid; |
|
||||
} |
|
||||
</style> |
</style> |
||||
Loading…
Reference in new issue