登录注册、个人信息增加
This commit is contained in:
GaoHao
288
pages/login/login.vue
Normal file
288
pages/login/login.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view class="input-content">
|
||||
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">登录</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<view class="title">手机号</view>
|
||||
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<text class="title">密码</text>
|
||||
<view class="input flex">
|
||||
<input class="input" type="password" :value="password" placeholder="请输入密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
|
||||
<text class="send-msg" @click="forget" style="flex-shrink: 0;">忘记密码</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin">登录</button>
|
||||
<view style="margin-top: 32px;text-align: center">
|
||||
<view>
|
||||
没有账号？
|
||||
<text style="color: #ff7581" @click="register()">立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footerView">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox v-model="checked" label-size='24upx' shape="circle" @change="radioChange"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<view>同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/me/setting/mimi" open-type="navigate">《隐私政策》</navigator>
|
||||
和
|
||||
<navigator url="/me/setting/xieyi" open-type="navigate">《用户服务协议》</navigator>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
password: '',
|
||||
checked: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
if (uni.getStorageSync('isSafeView')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您正在使用无痕浏览，可能导致登录状态失效，建议切换浏览模式',
|
||||
})
|
||||
uni.setStorageSync("isSafeView", null)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
register() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/register'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 忘记密码
|
||||
*/
|
||||
forget() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/forgetPwd'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取手机号/密码
|
||||
* @param {Object} e
|
||||
*/
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 同意协议
|
||||
* @param {Object} e
|
||||
*/
|
||||
radioChange(e) {
|
||||
this.checked = e
|
||||
},
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
toLogin() {
|
||||
if (!this.checked) {
|
||||
uni.showToast({
|
||||
title: '请阅读并同意《隐私政策》和《用户服务协议》',
|
||||
icon: 'none',
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
const { mobile, password } = this;
|
||||
console.log(this.mobile)
|
||||
if (!mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
})
|
||||
} else if (mobile.length != 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
})
|
||||
} else if (!password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none',
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '正在登录中...',
|
||||
})
|
||||
http.request({
|
||||
url: 'app/Login/registerCode?password=' + password + '&phone=' + mobile,
|
||||
method: 'post'
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('userName', res.user.userName)
|
||||
uni.setStorageSync('avatar', res.user.avatar ? res.user.avatar : '../../static/default/avatar.png')
|
||||
uni.setStorageSync('phone', res.user.phone)
|
||||
uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
uni.setStorageSync('sex', res.user.sex)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
//设置渠道码
|
||||
if (res.user.qdCode) {
|
||||
uni.setStorageSync('qdCode', res.user.qdCode)
|
||||
}
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.reLaunch({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
} else{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 78rpx;
|
||||
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
line-height: initial;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
}
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-content {
|
||||
padding: 0 56rpx;
|
||||
}
|
||||
.cu-form-group{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 48rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
.cu-form-group .title{
|
||||
width: 100%;
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.cu-form-group .input{
|
||||
width: 100%!important;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
background: #EC6F48;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user