You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
6.5 KiB
278 lines
6.5 KiB
<template>
|
|
<view class="bg">
|
|
<view class="form-box">
|
|
<view class="form-item">
|
|
<image src="https://m.cloud.sz-trip.com/static/images/Login/newMobile.png" alt=""></image>
|
|
<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 @click="handleLogin()" class="submit">登录</view>
|
|
<view class="flex-center" style="margin-top: 30rpx;">
|
|
<radio-group @change="toggleAgreement">
|
|
<radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio>
|
|
</radio-group>
|
|
<view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {
|
|
phone: "",
|
|
code: "",
|
|
captcha: "", // 新增图形验证码字段
|
|
},
|
|
// 验证码逻辑
|
|
codeText: "获取验证码",
|
|
codeDisabled: false,
|
|
countdown: 60,
|
|
// 图形验证码相关
|
|
captchaUrl: "", // 图形验证码图片地址
|
|
captchaId: "",
|
|
// 记住账号
|
|
rememberPhone: false,
|
|
// 加载状态
|
|
submitting: false,
|
|
smsCodeId: "",
|
|
|
|
checked: false,
|
|
isAgreed: false,
|
|
|
|
}
|
|
},
|
|
onReady() {
|
|
this.refreshCaptcha();
|
|
},
|
|
methods: {
|
|
// 刷新图形验证码
|
|
refreshCaptcha() {
|
|
this.Post({}, "/api/uservice/user/getCaptchaImg").then((res) => {
|
|
if (res) {
|
|
this.captchaUrl = res.data.code;
|
|
this.captchaId = res.data.id;
|
|
}
|
|
});
|
|
},
|
|
// 切换协议同意状态
|
|
toggleAgreement() {
|
|
this.isAgreed = !this.isAgreed;
|
|
},
|
|
// 重置表单
|
|
resetForm() {
|
|
this.form.code = "";
|
|
this.form.captcha = ""; // 重置图形验证码
|
|
// 刷新图形验证码
|
|
this.refreshCaptcha();
|
|
},
|
|
|
|
// 获取短信验证码（添加图形验证码校验）
|
|
handleGetCode() {
|
|
// 先验证手机号和图形验证码
|
|
if (!this.form.phone) {
|
|
this.$message.warning("请先输入手机号码");
|
|
return;
|
|
}
|
|
if (!this.form.captcha) {
|
|
this.$message.warning("请先输入图形验证码");
|
|
return;
|
|
}
|
|
|
|
this.Post(
|
|
{
|
|
mobile: this.form.phone,
|
|
captchaCode: this.form.captcha,
|
|
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>
|
|
|
|
<style scoped lang="scss">
|
|
.bg {
|
|
/* background: #FFFFFF; */
|
|
padding-bottom: 120rpx;
|
|
position: relative;
|
|
background-image: url("https://m.cloud.sz-trip.com/static/images/Login/newTopBg.png");
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.submit {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #0B898E;
|
|
border-radius: 50rpx;
|
|
margin: 0 auto;
|
|
width: 600rpx;
|
|
margin-top: .6rem;
|
|
}
|
|
|
|
|
|
input::placeholder {
|
|
color: #ABABAB;
|
|
}
|
|
|
|
.yuan {
|
|
width: .37rem;
|
|
height: .37rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.article-box {
|
|
font-weight: 400;
|
|
font-size: 27rpx;
|
|
color: #00B200;
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.iconfont {
|
|
margin-right: 10rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
text {
|
|
border-bottom: 1px solid;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|