151 lines
3.3 KiB
Vue
151 lines
3.3 KiB
Vue
<template>
|
||
<view class="login_content">
|
||
<view class="login_content_bg" />
|
||
<u-navbar :autoBack="true" bgColor="transparent" :safeAreaInsetTop="true" :placeholder="true" />
|
||
<view class="login_content_body">
|
||
<view class="login_title">手机验证码登录</view>
|
||
<view class="login_tips">未注册的手机验证后自动创建账户</view>
|
||
<view class="login_mobile">
|
||
<u-input type="number" placeholder="请输入手机号码" border="node" clearable fontSize="44rpx" v-model="mobile">
|
||
<template slot='prefix'>
|
||
<text class="login_mobile_tips">+86</text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
<view :class="[`login_mobile_Code`, mobile.length == 11 ? '' : 'active']" @tap="handelLoginCode">
|
||
<text>获取验证码</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobile: "",
|
||
bookTitle:'',
|
||
bookSid :'',
|
||
chapterorder:'',
|
||
bookId:'',
|
||
toPath:''
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// this.bookTitle = options.t;
|
||
this.bookSid = options.sid;
|
||
this.chapterorder = options.c;
|
||
this.bookId = options.i;
|
||
this.toPath = options.to;
|
||
},
|
||
methods: {
|
||
handelLoginCode() {
|
||
const mobile = this.mobile;
|
||
// const bookTitle = this.bookTitle;
|
||
const bookSid = this.bookSid;
|
||
const chapterorder = this.chapterorder;
|
||
const bookId = this.bookId;
|
||
const toPath = this.toPath
|
||
if (mobile.length >= 11) {
|
||
const data = {
|
||
phone: mobile,
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
|
||
uni.$u.http.post('/SendCode', data).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.status == 1) {
|
||
uni.navigateTo({
|
||
url: `/pages/loginMobile/loginMobile?phone=${mobile}&sid=${bookSid}&i=${bookId}&c=${chapterorder}&to=${toPath}`
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
cosnole.log(err, "========")
|
||
uni.hideLoading();
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// ::v-deep.u-input__content {
|
||
/deep/.u-input__content {
|
||
height: 116rpx;
|
||
background-color: #fff;
|
||
border-radius: 58rpx;
|
||
}
|
||
|
||
// ::v-deep.u-input--square {
|
||
/deep/.u-input--square {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.login_content {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.login_content_bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1056rpx;
|
||
background: url("/static/images/login_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.login_content_body {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 40rpx 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.login_title {
|
||
font-size: 56rpx;
|
||
color: #1d242c;
|
||
line-height: 1;
|
||
}
|
||
|
||
.login_tips {
|
||
font-size: 28rpx;
|
||
color: #524e5c;
|
||
line-height: 1;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.login_mobile {
|
||
margin-top: 90rpx;
|
||
|
||
.login_mobile_tips {
|
||
margin: 0 32rpx;
|
||
font-size: 44rpx;
|
||
color: #1d242c;
|
||
}
|
||
}
|
||
|
||
.login_mobile_Code {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 116rpx;
|
||
line-height: 1;
|
||
background: linear-gradient(to left, #f27e49, #f25a14);
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
margin-top: 64rpx;
|
||
border-radius: 58rpx;
|
||
}
|
||
|
||
.login_mobile_Code.active {
|
||
background: #999999;
|
||
}
|
||
}
|
||
}
|
||
</style> |