143 lines
2.9 KiB
Vue
143 lines
2.9 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 v-model="mobileCode" type="number" placeholder="请输入手机验证码" border="node" clearable
|
||
fontSize="44rpx">
|
||
<template #prefix>
|
||
<text class="login_mobile_tips"></text>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
<view class="login_mobile_Code" @tap="confirmLogin">
|
||
<text>确认登录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mySetStorage
|
||
} from '@/utils/storage/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
mobileCode: '',
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.phone = options.phone
|
||
},
|
||
methods: {
|
||
confirmLogin() {
|
||
const data = {
|
||
phone: this.phone,
|
||
code: this.mobileCode
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
|
||
|
||
uni.$u.http.post('/Login', data).then((res) => {
|
||
uni.hideLoading();
|
||
const {
|
||
token,
|
||
uid
|
||
} = res.data;
|
||
if (res.status == 1) {
|
||
mySetStorage('token', token);
|
||
mySetStorage('uid', uid);
|
||
uni.reLaunch({
|
||
url: `/pages/bookCity/bookCity/index`
|
||
})
|
||
}
|
||
}).catch((err) => {
|
||
uni.hideLoading();
|
||
cosnole.log(err, "========")
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep.u-input__content {
|
||
height: 116rpx;
|
||
background-color: #fff;
|
||
border-radius: 58rpx;
|
||
}
|
||
|
||
::v-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-color: #999999;
|
||
}
|
||
}
|
||
}
|
||
</style> |