288 lines
6.1 KiB
Vue
288 lines
6.1 KiB
Vue
<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> |