fanfan
11 months ago
parent
b6e54aa6cb
commit
6b24ab0c96
@ -1,271 +1,309 @@ |
||||
<template> |
||||
<view class="login"> |
||||
<view class="refund-navbar"> |
||||
<u-navbar title="" :border-bottom="false" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="login-hd"> |
||||
<view class="a">验证码登录</view> |
||||
<view class="b">若该手机号未注册，我们将自动为您注册</view> |
||||
</view> |
||||
<view class="login-bd"> |
||||
<view class="a">+86<input v-model="phoneNum" type="tel" placeholder="请输入手机号" /></view> |
||||
<view class="b"> |
||||
<input v-model="semCode" placeholder="请输入验证码" /> |
||||
<text @click="getCode" v-if="!showCountDown">获取验证码</text> |
||||
<text v-if="showCountDown">{{countdown}}</text> |
||||
</view> |
||||
<view class="c" style="display: flex;align-items: center;"> |
||||
<u-checkbox active-color="#FF343C" v-model="isCheckout" style="margin-right: -20rpx;"></u-checkbox>同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text @click="toTextPage(2)">《隐私政策》</text> |
||||
</view> |
||||
</view> |
||||
<view class="login-fd login-fd-on" @click="login">登录</view> |
||||
<view class="" v-if="isCheckout"> |
||||
<mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile> |
||||
</view> |
||||
<view class="" v-else style="font-size: 28rpx;color: #666;text-align: center;margin-top: 50rpx;" @click="login"> |
||||
手机号快捷登录 |
||||
</view> |
||||
</view> |
||||
<view class="login"> |
||||
<view class="refund-navbar"> |
||||
<u-navbar |
||||
title="" |
||||
:border-bottom="false" |
||||
:background="background" |
||||
></u-navbar> |
||||
</view> |
||||
<view class="login-hd"> |
||||
<view class="a">验证码登录</view> |
||||
<view class="b">若该手机号未注册，我们将自动为您注册</view> |
||||
</view> |
||||
<view class="login-bd"> |
||||
<view class="a" |
||||
>+86<input v-model="phoneNum" type="tel" placeholder="请输入手机号" |
||||
/></view> |
||||
<view class="b"> |
||||
<input v-model="semCode" placeholder="请输入验证码" /> |
||||
<text @click="getCode" v-if="!showCountDown">获取验证码</text> |
||||
<text v-if="showCountDown">{{ countdown }}</text> |
||||
</view> |
||||
<view class="c" style="display: flex; align-items: center"> |
||||
<u-checkbox |
||||
active-color="#FF343C" |
||||
v-model="isCheckout" |
||||
style="margin-right: -20rpx" |
||||
></u-checkbox |
||||
>同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text |
||||
@click="toTextPage(2)" |
||||
>《隐私政策》</text |
||||
> |
||||
</view> |
||||
</view> |
||||
<view class="login-fd login-fd-on" @click="login">登录</view> |
||||
<view class="" v-if="isCheckout"> |
||||
<mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile> |
||||
</view> |
||||
<view |
||||
class="" |
||||
v-else |
||||
style=" |
||||
font-size: 28rpx; |
||||
color: #666; |
||||
text-align: center; |
||||
margin-top: 50rpx; |
||||
" |
||||
@click="login" |
||||
> |
||||
手机号快捷登录 |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import * as UserApi from '@/api/user' |
||||
import * as CaptchaApi from '@/api/captcha'; |
||||
import mpWeiXinMobile from './components/mp-weixin-mobile.vue' |
||||
import store from '@/store'; |
||||
import { |
||||
isEmpty |
||||
} from '@/utils/util' |
||||
export default { |
||||
components: { |
||||
mpWeiXinMobile |
||||
}, |
||||
data() { |
||||
return { |
||||
isCheckout: false, |
||||
showCountDown: false, |
||||
currentIndex: 0, |
||||
background: { |
||||
background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`, |
||||
backgroundSize: '100% auto', |
||||
}, |
||||
phoneNum: '', |
||||
semCode: '', |
||||
countdown: 60, |
||||
countDownFun: null, |
||||
code: '', |
||||
refereeId: "" |
||||
} |
||||
}, |
||||
onLoad(o) { |
||||
this.refereeId = o.refereeId |
||||
}, |
||||
methods: { |
||||
toTextPage(n) { |
||||
uni.navigateTo({ |
||||
url: "/pages/news1/text?pageFlag=" + n |
||||
}) |
||||
}, |
||||
validatePhoneNumber(phone) { |
||||
// 定义手机号码的正则表达式 |
||||
var regExp = /^1[3456789]\d{9}$/; |
||||
import * as UserApi from "@/api/user"; |
||||
import * as CaptchaApi from "@/api/captcha"; |
||||
import mpWeiXinMobile from "./components/mp-weixin-mobile.vue"; |
||||
import store from "@/store"; |
||||
import { isEmpty } from "@/utils/util"; |
||||
export default { |
||||
components: { |
||||
mpWeiXinMobile, |
||||
}, |
||||
data() { |
||||
return { |
||||
isCheckout: false, |
||||
showCountDown: false, |
||||
currentIndex: 0, |
||||
background: { |
||||
background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`, |
||||
backgroundSize: "100% auto", |
||||
}, |
||||
phoneNum: "", |
||||
semCode: "", |
||||
countdown: 60, |
||||
countDownFun: null, |
||||
code: "", |
||||
refereeId: "", |
||||
}; |
||||
}, |
||||
onLoad(o) { |
||||
this.refereeId = o.refereeId; |
||||
}, |
||||
methods: { |
||||
toTextPage(n) { |
||||
uni.navigateTo({ |
||||
url: "/pages/news1/text?pageFlag=" + n, |
||||
}); |
||||
}, |
||||
validatePhoneNumber(phone) { |
||||
// 定义手机号码的正则表达式 |
||||
var regExp = /^1[3456789]\d{9}$/; |
||||
|
||||
if (regExp.test(phone)) { |
||||
return true; // 符合手机号码格式要求 |
||||
} else { |
||||
return false; // 不符合手机号码格式要求 |
||||
} |
||||
}, |
||||
getCode() { |
||||
// 获取验证码 |
||||
const that = this |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
uni.showToast({ |
||||
title: '请输入正确的手机号' |
||||
}) |
||||
return |
||||
} |
||||
that.showCountDown = !that.showCountDown |
||||
that.countDownFun = setInterval(() => { |
||||
if (that.countdown >= 1) { |
||||
that.countdown = that.countdown - 1 |
||||
} else { |
||||
that.showCountDown = false |
||||
that.countdown = 60 |
||||
clearInterval(that.countDownFun) |
||||
} |
||||
|
||||
}, 1000) |
||||
CaptchaApi.sendSmsCaptcha({ |
||||
form: { |
||||
mobile: that.phoneNum |
||||
} |
||||
}).then(res => { |
||||
if (res.status == 200) { |
||||
uni.showToast({ |
||||
title: res.message |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.message |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
login() { |
||||
let that = this; |
||||
if(that.isCheckout == false){ |
||||
that.$toast('请勾选用户协议') |
||||
return ; |
||||
} |
||||
// 登录 |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
that.$toast('请输入正确的手机号') |
||||
return |
||||
} |
||||
if (that.semCode == '') { |
||||
that.$toast('请输入验证码') |
||||
return |
||||
} |
||||
uni.login({ |
||||
provider: 'weixin', |
||||
success: function(res) { |
||||
|
||||
store.dispatch('Login', { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
ucode:res.code |
||||
// refereeId: false |
||||
}).then(res => { |
||||
uni.setStorageSync('token', res.data.token) |
||||
that.$toast(res.message) |
||||
that.getUserInfo() |
||||
setTimeout(() => that.onNavigateBack(1), 2000) |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
}, |
||||
getUserInfo() { |
||||
UserApi.info() |
||||
.then(result => { |
||||
uni.setStorageSync('userInfo', result.data.userInfo) |
||||
}) |
||||
}, |
||||
onNavigateBack(delta = 1) { |
||||
// 登录成功返回原页面 |
||||
const pages = getCurrentPages() |
||||
if (pages.length > 1) { |
||||
uni.navigateBack({ |
||||
delta: Number(delta || 1) |
||||
}) |
||||
} else { |
||||
this.$navTo('pages/index/index') |
||||
} |
||||
} |
||||
if (regExp.test(phone)) { |
||||
return true; // 符合手机号码格式要求 |
||||
} else { |
||||
return false; // 不符合手机号码格式要求 |
||||
} |
||||
}, |
||||
getCode() { |
||||
// 获取验证码 |
||||
const that = this; |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
uni.showToast({ |
||||
title: "请输入正确的手机号", |
||||
}); |
||||
return; |
||||
} |
||||
that.showCountDown = !that.showCountDown; |
||||
that.countDownFun = setInterval(() => { |
||||
if (that.countdown >= 1) { |
||||
that.countdown = that.countdown - 1; |
||||
} else { |
||||
that.showCountDown = false; |
||||
that.countdown = 60; |
||||
clearInterval(that.countDownFun); |
||||
} |
||||
}, 1000); |
||||
CaptchaApi.sendSmsCaptcha({ |
||||
form: { |
||||
mobile: that.phoneNum, |
||||
}, |
||||
}).then((res) => { |
||||
if (res.status == 200) { |
||||
uni.showToast({ |
||||
title: res.message, |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.message, |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
login() { |
||||
let that = this; |
||||
if (that.isCheckout == false) { |
||||
that.$toast("请勾选用户协议"); |
||||
return; |
||||
} |
||||
// 登录 |
||||
if (!that.validatePhoneNumber(that.phoneNum)) { |
||||
that.$toast("请输入正确的手机号"); |
||||
return; |
||||
} |
||||
if (that.semCode == "") { |
||||
that.$toast("请输入验证码"); |
||||
return; |
||||
} |
||||
uni.login({ |
||||
provider: "weixin", |
||||
success: function (res) { |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
ucode: res.code, |
||||
// refereeId: false |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
}, |
||||
fail:function(){ |
||||
store |
||||
.dispatch("Login", { |
||||
smsCode: that.semCode, |
||||
mobile: that.phoneNum, |
||||
refereeId: that.refereeId, |
||||
isParty: false, |
||||
partyData: {}, |
||||
// ucode: res.code, |
||||
// refereeId: false |
||||
}) |
||||
.then((res) => { |
||||
uni.setStorageSync("token", res.data.token); |
||||
that.$toast(res.message); |
||||
that.getUserInfo(); |
||||
setTimeout(() => that.onNavigateBack(1), 2000); |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
getUserInfo() { |
||||
UserApi.info().then((result) => { |
||||
uni.setStorageSync("userInfo", result.data.userInfo); |
||||
}); |
||||
}, |
||||
onNavigateBack(delta = 1) { |
||||
// 登录成功返回原页面 |
||||
const pages = getCurrentPages(); |
||||
if (pages.length > 1) { |
||||
uni.navigateBack({ |
||||
delta: Number(delta || 1), |
||||
}); |
||||
} else { |
||||
this.$navTo("pages/index/index"); |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.login { |
||||
width: 100%; |
||||
background: #fffafb url(https://www.royaum.com.cn/static/news/login-bg.png) center top no-repeat; |
||||
background-size: 100% auto; |
||||
min-height: 100vh; |
||||
.login { |
||||
width: 100%; |
||||
background: #fffafb url(https://www.royaum.com.cn/static/news/login-bg.png) |
||||
center top no-repeat; |
||||
background-size: 100% auto; |
||||
min-height: 100vh; |
||||
|
||||
&-hd { |
||||
padding: 90rpx 75rpx 75rpx; |
||||
overflow: hidden; |
||||
&-hd { |
||||
padding: 90rpx 75rpx 75rpx; |
||||
overflow: hidden; |
||||
|
||||
.a { |
||||
line-height: 80rpx; |
||||
font-size: 40rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
.a { |
||||
line-height: 80rpx; |
||||
font-size: 40rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
|
||||
.b { |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #5A5A5A; |
||||
line-height: 50rpx; |
||||
} |
||||
} |
||||
.b { |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #5a5a5a; |
||||
line-height: 50rpx; |
||||
} |
||||
} |
||||
|
||||
&-bd { |
||||
padding: 0 75rpx; |
||||
overflow: hidden; |
||||
&-bd { |
||||
padding: 0 75rpx; |
||||
overflow: hidden; |
||||
|
||||
.a { |
||||
padding: 20rpx 0; |
||||
border-bottom: 1px solid #F2F2F2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #212121; |
||||
.a { |
||||
padding: 20rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #212121; |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-left: 30rpx; |
||||
line-height: 50rpx; |
||||
border-left: 1px solid #C4C4C4; |
||||
padding-left: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
input { |
||||
flex: 1; |
||||
margin-left: 30rpx; |
||||
line-height: 50rpx; |
||||
border-left: 1px solid #c4c4c4; |
||||
padding-left: 30rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
|
||||
.b { |
||||
padding: 30rpx 0; |
||||
border-bottom: 1px solid #F2F2F2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #F3202A; |
||||
.b { |
||||
padding: 30rpx 0; |
||||
border-bottom: 1px solid #f2f2f2; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #f3202a; |
||||
|
||||
input { |
||||
flex: 1; |
||||
margin-right: 30rpx; |
||||
line-height: 50rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
input { |
||||
flex: 1; |
||||
margin-right: 30rpx; |
||||
line-height: 50rpx; |
||||
font-size: 28rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
|
||||
.c { |
||||
padding: 28rpx 0; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #A0A0A0; |
||||
.c { |
||||
padding: 28rpx 0; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #a0a0a0; |
||||
|
||||
text { |
||||
color: #FF343C; |
||||
} |
||||
} |
||||
} |
||||
text { |
||||
color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-fd { |
||||
width: 680rpx; |
||||
line-height: 88rpx; |
||||
background: #FFBDBA; |
||||
border-radius: 88rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 120rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #FFFFFF; |
||||
&-fd { |
||||
width: 680rpx; |
||||
line-height: 88rpx; |
||||
background: #ffbdba; |
||||
border-radius: 88rpx; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
margin-top: 120rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
|
||||
&-on { |
||||
background-color: #FF343C; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
&-on { |
||||
background-color: #ff343c; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue